|
|
|
<template>
|
|
|
|
<ClientOnly>
|
|
|
|
<Card style="margin-top: 78px; min-height: 200px;">
|
|
|
|
<template #content>
|
|
|
|
<Panel header="Bought, but not evaluated clothes - Detail Page" class="rounded-4 bg-white" >
|
|
|
|
<div class="grid nested-grid">
|
|
|
|
<div class="col-4">
|
|
|
|
<!--<Galleria :value="images" :responsive-options="responsiveOptions" :num-visible="5" container-style="max-width: 480px">
|
|
|
|
<template #item="slotProps">
|
|
|
|
<img :src="`${pfad}/${slotProps.item.pfad}`" style="width: 100%;" />
|
|
|
|
</template>
|
|
|
|
<template #thumbnail="slotProps">
|
|
|
|
<img :src="`${pfad}/thumb-${slotProps.item.pfad}`" />
|
|
|
|
</template>
|
|
|
|
</Galleria> -->
|
|
|
|
</div>
|
|
|
|
<div class="col-8">
|
|
|
|
<div class="grid">
|
|
|
|
<Card class="col-12">
|
|
|
|
<template #header>
|
|
|
|
<h1>{{ itemb.kurzbeschreibung }}</h1>
|
|
|
|
</template>
|
|
|
|
<template #content>
|
|
|
|
<div class="grid nested-grid">
|
|
|
|
|
|
|
|
<div class="col-12 field gap-1">
|
|
|
|
<small class="p-float-label" for="kurzbeschreibung">Title</small>
|
|
|
|
<InputText id="kurzbeschreibung" v-model.trim="itemb.kurzbeschreibung" required="true" autofocus />
|
|
|
|
<small class="p-float-label" id="kurzbeschreibung-help" >Enter a title for the clothing</small>
|
|
|
|
</div>
|
|
|
|
<div class="col-12 field ">
|
|
|
|
<small class="p-float-label" for="bezeichnung">Description:</small>
|
|
|
|
<Textarea id="bezeichnung" v-model.trim="itemb.bezeichnung" rows="5" cols="50"/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-4 field gap-1">
|
|
|
|
<small class="p-float-label" for="groesse">Size: </small>
|
|
|
|
<InputText class="p-inputtext-sm" id="groesse" v-model.trim="itemb.groesse" />
|
|
|
|
</div>
|
|
|
|
<div class="col-4 field gap-1">
|
|
|
|
<small class="p-float-label" for="farbe">Color: </small>
|
|
|
|
<InputText class="p-inputtext-sm" id="farbe" v-model.trim="itemb.farbe" />
|
|
|
|
</div>
|
|
|
|
<div class="col-4 field gap-1">
|
|
|
|
<small class="p-float-label" for="type">Type of clothes</small>
|
|
|
|
<Dropdown id="type" v-model.trim="itemb.type.id" :options="typen" optionLabel="bezeichnung" optionValue="id" placeholder="Select a type" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-12 field gap-1" >
|
|
|
|
<small class="p-float-label" for="material">Material:</small>
|
|
|
|
<InputText class="p-inputtext-sm" id="material" v-model.trim="itemb.material" style="width:100%;"/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<InputText :hidden="false" id="abmessungen" :value="itemb.abmessungen.id" />
|
|
|
|
<InputText :hidden="false" id="frontview" :value="itemb.frontview.id" />
|
|
|
|
|
|
|
|
<!--<table class="col-12 p-table-sm align-items-left measuretable">
|
|
|
|
<thead>
|
|
|
|
<th>Measure:</th>
|
|
|
|
<th>Value (in cm):</th>
|
|
|
|
</thead>
|
|
|
|
<tr>
|
|
|
|
<td>Breast</td>
|
|
|
|
<td>{{ itemb.abmessungen.brust }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Length Top</td>
|
|
|
|
<td>{{ itemb.abmessungen.laenget }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Shoulder Width</td>
|
|
|
|
<td>{{ itemb.abmessungen.schulterbreite }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Waist Girth Top</td>
|
|
|
|
<td>{{ itemb.abmessungen.taillenumfangt }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Hip Girth</td>
|
|
|
|
<td>{{ itemb.abmessungen.hueftumfang }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Inner Seam</td>
|
|
|
|
<td>{{ itemb.abmessungen.innennaht }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Length Bottom</td>
|
|
|
|
<td>{{ itemb.abmessungen.laengeb }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Waist Girth Bottom</td>
|
|
|
|
<td>{{ itemb.abmessungen.taillenumfangb }}</td>
|
|
|
|
</tr>
|
|
|
|
</table> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template #footer>
|
|
|
|
<div class="col-12 gap-3 flex">
|
|
|
|
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(itemb)" />
|
|
|
|
<Button severity="danger" label=" CANCEL " icon="pi pi-trash" @click="hideDialog" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Panel>
|
|
|
|
</template>
|
|
|
|
</Card>
|
|
|
|
</ClientOnly>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { useToast } from "primevue/usetoast";
|
|
|
|
import { ref, onMounted } from "vue";
|
|
|
|
|
|
|
|
const config = useRuntimeConfig();
|
|
|
|
|
|
|
|
|
|
|
|
interface cItemB {
|
|
|
|
id: number;
|
|
|
|
bezeichnung: string;
|
|
|
|
kurzbeschreibung: string;
|
|
|
|
groesse: string;
|
|
|
|
farbe: string;
|
|
|
|
type: {id: number};
|
|
|
|
material: string;
|
|
|
|
abmessungen:{id: number};
|
|
|
|
frontview: {id: number};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const toast = useToast();
|
|
|
|
// const itemb = {id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4};
|
|
|
|
|
|
|
|
const {data: typen } = await useFetch(config.public.apiHostname + 'api/v1/typ');
|
|
|
|
|
|
|
|
let blubb, assm: any;
|
|
|
|
|
|
|
|
let params: any;
|
|
|
|
params = inject('dialogRef');
|
|
|
|
blubb = params.value.data.id;
|
|
|
|
assm = params.value.data.mid;
|
|
|
|
console.log('assm = ', assm);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
console.log('Blubb außerhalb von onMounted: ', blubb);
|
|
|
|
const {data: itemb } = await modifyItem();
|
|
|
|
|
|
|
|
const hideDialog = () => {
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
async function modifyItem() {
|
|
|
|
const res = await useFetch(config.public.apiHostname + 'api/v1/itb/'+blubb);
|
|
|
|
console.log(res);
|
|
|
|
if (assm) {
|
|
|
|
res.data.value.abmessungen.id = assm;
|
|
|
|
}
|
|
|
|
return res;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function doUpdate(t: cItemB) {
|
|
|
|
let fd = new FormData();
|
|
|
|
fd.append('id', t.id);
|
|
|
|
fd.append('bezeichnung', t.bezeichnung);
|
|
|
|
fd.append('kurzbeschreibung', t.kurzbeschreibung);
|
|
|
|
fd.append('groesse', t.groesse);
|
|
|
|
fd.append('farbe', t.farbe);
|
|
|
|
fd.append('typid', t.type.id.toString());
|
|
|
|
fd.append('material', t.material);
|
|
|
|
fd.append('abmessungenid', t.abmessungen.id.toString());
|
|
|
|
fd.append('frontviewid', t.frontview.id.toString());
|
|
|
|
console.log('fd = ', fd);
|
|
|
|
await $fetch(config.public.apiHostname + 'api/v1/itb/'+blubb,{
|
|
|
|
method: 'PUT',
|
|
|
|
body: fd
|
|
|
|
});
|
|
|
|
toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
|
|
|
|
await refreshNuxtData();
|
|
|
|
console.log('PUT ausgeführt...'+ t.kurzbeschreibung);
|
|
|
|
this.params.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|