|
|
|
<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>
|