6 changed files with 430 additions and 7 deletions
@ -0,0 +1,181 @@
|
||||
<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" :value="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" :value="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" :value="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"; |
||||
|
||||
|
||||
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('http://ubodroid-2:8081/api/v1/typ'); |
||||
|
||||
let blubb: any; |
||||
|
||||
let params: any; |
||||
params = inject('dialogRef'); |
||||
blubb = params.value.data.id; |
||||
//console.log(blubb); |
||||
|
||||
|
||||
|
||||
onMounted(() => { |
||||
|
||||
}) |
||||
|
||||
console.log('Blubb außerhalb von onMounted: ', blubb); |
||||
const {data: itemb } = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+blubb); |
||||
|
||||
const hideDialog = () => { |
||||
|
||||
}; |
||||
|
||||
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('http://ubodroid-2:8081/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); |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
Loading…
Reference in new issue