You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
11 KiB
211 lines
11 KiB
1 year ago
|
<template>
|
||
|
<ClientOnly>
|
||
|
<Card style="margin-top: 78px; min-height: 200px;">
|
||
|
<template #content>
|
||
|
<Panel header="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>{{ itemext.itemb.kurzbeschreibung }}</h1>
|
||
|
</template>
|
||
|
<template #content>
|
||
|
<div class="grid nested-grid">
|
||
|
<div class="col-4 mb-4">
|
||
|
<Chip v-if="itemext.genehmigt" class="checked mr-2" label=" Approved " icon="pi pi-check-square" />
|
||
|
<Chip v-else class="unchecked mr-2" label="Approved" icon="pi pi-stop" />
|
||
|
</div>
|
||
|
<div class="col-4 mb-4">
|
||
|
<Chip v-if="itemext.zuhause" class="checked mr-2" label=" At home " icon="pi pi-check-square" />
|
||
|
<Chip v-else class="unchecked mr-2" label=" At home " icon="pi pi-stop" />
|
||
|
</div>
|
||
|
<div class="col-4 mb-4">
|
||
|
<Chip v-if="itemext.draussen" class="checked mr-2" label=" Outside " icon="pi pi-check-square" />
|
||
|
<Chip v-else class="unchecked mr-2" label=" Outside " icon="pi pi-stop" />
|
||
|
</div>
|
||
|
<div class="col-12">
|
||
|
<label class="p-float-label" for="bemerkung">Remark / Notice</label>
|
||
|
<Textarea id="bemerkung" v-model="itemext.bemerkung" :disabled="true" autoResize/>
|
||
|
</div>
|
||
|
<div class="col-12">
|
||
|
<label>{{ itemext.itemb.bezeichnung }}</label>
|
||
|
</div>
|
||
|
<div class="col-4 field gap-1">
|
||
|
<small class="p-float-label" for="groesse">Size: </small>
|
||
|
<InputText class="p-inputtext-sm" id="groesse" :disabled="true" :value="itemext.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" :disabled="true" :value="itemext.itemb.farbe" />
|
||
|
</div>
|
||
|
<div class="col-4 field gap-1">
|
||
|
<small class="p-float-label" for="typ">Type: </small>
|
||
|
<InputText class="p-inputtext-sm" id="typ" :disabled="true" :value="itemext.itemb.type.bezeichnung" />
|
||
|
</div>
|
||
|
<div class="col-12 field gap-1" >
|
||
|
<small class="p-float-label" for="material">Material:</small>
|
||
|
<InputText class="p-inputtext-sm" id="material" :disabled="true" :value="itemext.itemb.material" style="width:100%;"/>
|
||
|
</div>
|
||
|
|
||
|
<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>{{ itemext.itemb.abmessungen.brust }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Length Top</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.laenget }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Shoulder Width</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.schulterbreite }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Waist Girth Top</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.taillenumfangt }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Hip Girth</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.hueftumfang }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Inner Seam</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.innennaht }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Length Bottom</td>
|
||
|
<td>{{ itemext.itemb.abmessungen.laengeb }}</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Waist Girth Bottom</td>
|
||
|
<td>{{ itemext.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="onUpdate" />
|
||
|
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete" />
|
||
|
<Button severity="info" label=" ASSIGN MEASURE " icon="pi pi-table" @click="onAssign" />
|
||
|
</div>
|
||
|
</template>
|
||
|
</Card>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<Dialog :visible="deleteItemBDialog" :style="{width: '450px'}" header="Delete Item?" :modal="true" class="p-fluid">
|
||
|
<div class="field">
|
||
|
<label>Do you really want to delete {{ itemsbd.kurzbeschreibung }}?</label>
|
||
|
</div>
|
||
|
<template #footer>
|
||
|
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
|
||
|
<Button label="Delete" icon="pi pi-check" text @click="doDelete()" />
|
||
|
</template>
|
||
|
</Dialog>
|
||
|
</div>
|
||
|
</Panel>
|
||
|
</template>
|
||
|
</Card>
|
||
|
</ClientOnly>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
import { useToast } from "primevue/usetoast";
|
||
|
import { ref } from "vue";
|
||
|
import { useDialog } from 'primevue/usedialog';
|
||
|
import Upditemb from "./upditemb.vue";
|
||
|
import AssMea from "./AssMea.vue";
|
||
|
|
||
|
const dialog = useDialog();
|
||
|
|
||
|
const responsiveOptions = ref();
|
||
|
const pfad = '/photos';
|
||
|
const route = useRoute();
|
||
|
const qid = route.query.id;
|
||
|
const toast = useToast();
|
||
|
const deleteItemBDialog = ref(false);
|
||
|
|
||
|
|
||
|
|
||
|
interface cItemB {
|
||
|
id: number;
|
||
|
bezeichnung: string;
|
||
|
kurzbeschreibung: string;
|
||
|
groesse: string;
|
||
|
farbe: string;
|
||
|
typid: number;
|
||
|
material: string;
|
||
|
abmessungenid: number;
|
||
|
frontviewid: number;
|
||
|
}
|
||
|
|
||
|
//const itemsb = ref();
|
||
|
const {data: itemext } = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+qid);
|
||
|
const {data: images } = await useFetch('http://ubodroid-2:8081/api/v1/pho/ite/'+qid);
|
||
|
|
||
|
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
|
||
|
|
||
|
const onDelete = () => {
|
||
|
deleteItemBDialog.value = true;
|
||
|
};
|
||
|
|
||
|
const onUpdate = () => {
|
||
|
dialog.open(Upditemb, { data: {id: qid} });
|
||
|
};
|
||
|
|
||
|
const onAssign = () => {
|
||
|
let mid: any;
|
||
|
dialog.open(AssMea, {data: { mea }, onClose(options) {
|
||
|
mid = options?.data;
|
||
|
if (mid) {
|
||
|
console.log('mid vor dem zweiten Dialog: ', mid)
|
||
|
dialog.open(Upditemb, { data: {id:qid, mid: mid.id }});
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
const hideDialog = () => {
|
||
|
deleteItemBDialog.value = false;
|
||
|
|
||
|
};
|
||
|
|
||
|
|
||
|
async function doDelete() {
|
||
|
let fd = new FormData();
|
||
|
//fd.append('bezeichnung', bezeichnung.value);
|
||
|
fd.append('id', qid.toString());
|
||
|
await $fetch('http://ubodroid-2:8081/api/v1/itb/'+qid, { method: 'DELETE', body: fd } );
|
||
|
|
||
|
toast.add({ severity: 'success', summary: 'Item deleted', detail: '', life: 3000 });
|
||
|
deleteItemBDialog.value = false;
|
||
|
await refreshNuxtData();
|
||
|
}
|
||
|
|
||
|
|
||
|
</script>
|