wdm-web4/components/UpdPhoto.vue

<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Managing photos" class="rounded-4 bg-white" >
                    
                    <div class="grid">
                        <Card class="col-12">
                            <template #header>
                                <h1>Search Frontview Photo</h1>
                            </template>
                            <template #content>    
                                <div class="col-12">
                                <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="photos" 
                                        showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
                                        :globalFilterFields="['pfad']"  
                                        v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
                                        tableStyle="min-width: 50rem;">
                                        <template #header>
                                        <div class="flex justify-content-end">
                                            <span class="p-input-icon-left">
                                                <i class="pi pi-search" />
                                                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                                            </span>
                                        </div>
                                        </template>
                                        <template #empty> No Photos found. </template>
                                        <!--<template #loading> Loading customers data. Please wait. </template> -->
                                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
                                        <Column v-if="col.field=='image'">
                                            <template #body="slotProps">
                                                <img :src="`${pfad}/thumb-${slotProps.data.pfad}`" :alt="slotProps.data.pfad" />
                                            </template>
                                        </Column>
                                    </Column>
                                        
                                </DataTable>
                                
                                </div>
                            </template>
                            <template #footer>
                                <div class="col-12 gap-3 flex">
                                    <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(id)" />
                                    
                                </div>
                            </template>
                        </Card>   
                    </div>
                    
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { ref } from "vue";
import { FilterMatchMode } from "primevue/api";

const pfad = '/photos';
let params: any;
params = inject('dialogRef');

const selectedTyp = ref("");
const id = ref(0);
interface cPho {
    id: number;
    pfad: string;
    itembid: number;
    itemextid: number;
}

const columns = [
  { field: 'id', header: '#'},
  { header: 'Image', field: 'image'}, 
  { header: 'Filename', field: 'pfad'},
  { header: 'ItemB', field: 'itembid'},
  { header: 'ItemEva', field: 'itemextid'},
];

const filters = ref({
  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
  bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH },
  kurzbeschreibung: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
});

const onRowSelect = (event) => {
  id.value = event.data.id;
  //bezeichnung.value = event.data.kurzbeschreibung;
  toast.add({ severity: 'info', summary: 'Photo Selected', detail: 'Description: ' + event.data.pfad, life: 3000 });
};

//const photo = ref({id:0,pfad:'',itembid:0,itemextid:0});
import { useToast } from 'primevue/usetoast';
const toast = useToast();  

const uploadedFiles = ref([]);
const {data: photos } = await useFetch('http://ubodroid-2:8081/api/v1/pho');






async function doUpdate(ref: number){
    this.params.close({id: ref});
    

}

</script>