wdm-web4/components/LinkItemExt.vue

<template>
    <ClientOnly>
      <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Link Picture to Bought Clothes" class="bg-white rounded-4">
                    <div class="grid" style="margin-bottom:40px;">
                        <Card class="col-12">
                            <template #header>
                                <h1>{{ itemb.kurzbeschreibung }}</h1>
                            </template>
                            <template #content>    
                                <div class="col-12">
                                <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="itemexts" 
                                        showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
                                        :globalFilterFields="['kurzbeschreibung']"  
                                        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 Clothing Items 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>
                                        
                                </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";
import { useToast } from 'primevue/usetoast';

const config = useRuntimeConfig();

interface cItemB {
      id: number;
      bezeichnung: string;
      kurzbeschreibung: string;
      groesse: string;
      farbe: string;
      typid: number;
      material: string;
      abmessungenid: number;
      frontviewid: number;
}

let blubb: any;

let params: any;
params = inject('dialogRef');
//blubb = params.value.data.id;

const bezeichnung = ref("");
//const loading = ref(true); 
const selectedTyp = ref("");
const id = ref(0);
const toast = useToast();
//const createTypDialog = ref(false);
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});

const {data: itemexts } = await useFetch(config.public.apiHostname + 'api/v1/ite');


const columns = [
  { field: 'id', header: '#'},
  { header: 'Title', field: 'itemb.kurzbeschreibung'},
  { header: 'Approved', field: 'genehmigt'}, 
  { header: 'At home', field: 'zuhause'},
  { header: 'Outside', field: 'draussen'},
 
];

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: 'Item Selected', detail: 'Description: ' + event.data.id, life: 3000 });
};

function doUpdate(id: number) {
    console.log('id vor dem Schließen: ', id)  
    this.params.close({id: id})
    }; 

</script>