From be38143ffbb2dd73d14ed8b5e294c9a842b0947b Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Mon, 26 Jun 2023 22:12:06 +0200
Subject: [PATCH] =?UTF-8?q?Anpassen=20der=20Funktionen=20f=C3=BCr=20CRUD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Bought.vue        |   2 +-
 components/Evaluated.vue     |  50 ++++---
 components/Itembdetail.vue   |   1 +
 components/Itemextdetail.vue |  13 +-
 components/UpdEval.vue       | 249 +++++++++++++++++++++++++++++++++++
 components/Upditemext.vue    |  51 ++++---
 components/upditemb.vue      |   1 +
 7 files changed, 312 insertions(+), 55 deletions(-)
 create mode 100644 components/UpdEval.vue

diff --git a/components/Bought.vue b/components/Bought.vue
index 8dbb38f..1c48dd8 100644
--- a/components/Bought.vue
+++ b/components/Bought.vue
@@ -140,7 +140,7 @@ async function awaitItemsb() {
 
 
 async function openEval(id: number) {
-    dialog.open(Upditemext, {data: {id: id}});
+    dialog.open(Upditemext, {data: {id: id, isupdate: false}});
 }
 
 async function openFrontview(iid: number) {
diff --git a/components/Evaluated.vue b/components/Evaluated.vue
index 8dc706e..c03651f 100644
--- a/components/Evaluated.vue
+++ b/components/Evaluated.vue
@@ -4,7 +4,7 @@
             <template #content>
                 <Panel header="Evaluated clothes" class="rounded-4 bg-white" >
                     <template #icons>
-                        <Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" />
+                        
                     </template>
                     <DataView id="dv" :value="itemsext" paginator :rows="5">
                         <template #list="slotProps">
@@ -13,7 +13,7 @@
                                     <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="slotProps.data.frontview.imgurl" :alt="slotProps.data.kurzbeschreibung" />
                                     <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                         <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div>
+                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.itemb.kurzbeschreibung }}</div>
                                             <div class="flex align-items-center gap-3">
                                                 <span class="flex align-items-center gap-2">
                                                     <i class="pi pi-tag"></i>
@@ -108,55 +108,49 @@ async function openEval(id) {
 }
 
 async function openFrontview(iid: number) {
-    const itemb = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+iid);
-    let itb: cItemB;
-    console.log(itemb.data.value);
-    itb = itemb.data.value;
-    console.log(itb);
+    const itemext = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+iid);
+    let ite: cItemExt;
+    console.log(itemext.data.value);
+    ite = itemext.data.value;
+    console.log(ite);
     let refid = ref();
     dialog.open(UpdPhoto, { onClose(options) {
         refid = options?.data;
         console.log('RefId = ', refid);
         if (refid) {
             console.log('refid.id = ', refid.id);
-            itb.frontviewid = refid.id;
+            ite.frontviewid = refid.id;
 
-            doUpdate(itb);
+            doUpdate(ite);
         }
     
     },});
 }
 
-async function doUpdate(t: cItemB) {
+async function doUpdate(t: cItemExt) {
       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('id', t.id.toString());
+      fd.append('zuhause', t.zuhause.toString());
+      fd.append('draussen', t.draussen.toString());
+      fd.append('genehmigt', t.genehmigt.toString());
+      fd.append('bemerkung', t.bemerkung);
+      fd.append('bewertung', t.bewertung.toString());
+      fd.append('favorit', t.favorit.toString());
+      fd.append('itembid', t.itemb.id.toString());
       fd.append('frontviewid', t.frontviewid.toString());
       console.log('fd = ', fd);
-      await $fetch('http://ubodroid-2:8081/api/v1/itb/'+t.id,{
+      await $fetch('http://ubodroid-2:8081/api/v1/ite/'+t.id,{
       method: 'PUT',
       body: fd
       });
-      toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
+      toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.id, life: 3000 });
       await refreshNuxtData();
-    console.log('PUT ausgeführt...'+ t.kurzbeschreibung);
+    console.log('PUT ausgeführt...'+ t.id);
     } 
 
 
-const onNew = () => {
-    itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
-    createItemBDialog.value = true;
-    };
 
-    const hideDialog = () => {
-    createItemBDialog.value = false;
-    };
+    
     
     async function onSubmit(t: cItemB) {
       let fd = new FormData();
diff --git a/components/Itembdetail.vue b/components/Itembdetail.vue
index 8ae1d5c..5d28f86 100644
--- a/components/Itembdetail.vue
+++ b/components/Itembdetail.vue
@@ -188,6 +188,7 @@ async function doDelete() {
     toast.add({ severity: 'success', summary: 'Item deleted', detail: '', life: 3000 });
     deleteItemBDialog.value = false;
     await refreshNuxtData();
+    await navigateTo('/bought');
 }
 
 
diff --git a/components/Itemextdetail.vue b/components/Itemextdetail.vue
index 15e72a1..65d2e46 100644
--- a/components/Itemextdetail.vue
+++ b/components/Itemextdetail.vue
@@ -104,7 +104,7 @@
                                         <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>
@@ -114,7 +114,7 @@
                         
                         <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>
+                                <label>Do you really want to delete {{ itemext.itemb.kurzbeschreibung }}?</label>
                             </div>
                             <template #footer>
                                 <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
@@ -136,8 +136,8 @@
 import { useToast } from "primevue/usetoast";
 import { ref } from "vue";
 import { useDialog } from 'primevue/usedialog';
-import Upditemb from "./upditemb.vue";
-import AssMea from "./AssMea.vue";
+import AssMea from "./AssMea.vue";;
+import UpdEval from "./UpdEval.vue";
 
 const dialog = useDialog();
 
@@ -173,7 +173,7 @@ const onDelete = () => {
 };
 
 const onUpdate = () => {
-   dialog.open(Upditemb, { data: {id: qid} });
+   dialog.open(UpdEval, { data: {id: qid, isupdate: true} });
 };
 
 const onAssign = () => {
@@ -200,11 +200,12 @@ 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 } );
+    await $fetch('http://ubodroid-2:8081/api/v1/ite/'+qid, { method: 'DELETE', body: fd } );
     
     toast.add({ severity: 'success', summary: 'Item deleted', detail: '', life: 3000 });
     deleteItemBDialog.value = false;
     await refreshNuxtData();
+    await navigateTo('/evaluated');
 }
 
 
diff --git a/components/UpdEval.vue b/components/UpdEval.vue
new file mode 100644
index 0000000..025c64d
--- /dev/null
+++ b/components/UpdEval.vue
@@ -0,0 +1,249 @@
+<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 mb-4">
+                                    <template #title> Evaluation </template>
+                                    <template #content>
+                                        <div class="grid">
+                                            <div class="col-4">
+                                                <label class="p-float-label" for="genehmigt">approved</label>
+                                                <InputSwitch id="genehmigt" v-model="itemext.genehmigt"></InputSwitch>
+                                            </div>
+                                            <div class="col-4">
+                                                <label class="p-float-label" for="zuhause">at home</label>
+                                                <InputSwitch id="zuhause" v-model="itemext.zuhause"></InputSwitch>
+                                            </div>
+                                            <div class="col-4">
+                                                <label class="p-float-label" for="draussen">outside</label>
+                                                <InputSwitch id="draussen" v-model="itemext.draussen"></InputSwitch>
+                                            </div>   
+                                            <div class="col-12">
+                                            <label class="p-float-label" for="bemerkung">Remark / Notice:</label>
+                                            <Textarea v-model="itemext.bemerkung" autoResize cols="100" rows="5" />
+                                        </div>
+                                        </div>              
+                                        
+
+                                    </template>
+                                </Card>
+                                <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="doUpdate(itemext)" />
+                                              
+                                                       
+                                        </div>
+                                    </template>
+                                </Card>
+                                
+                            </div>
+                        </div>
+                    </div>
+                </Panel>
+            </template>
+        </Card>
+    </ClientOnly>
+    
+</template>
+
+<script setup lang="ts">
+import { useToast } from "primevue/usetoast";
+import { ref } from "vue";
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const responsiveOptions = ref();
+const pfad = '/photos';
+let params: any;
+params = inject('dialogRef');
+const qid = params.value.data.id;
+//let isUpdate = ref(false);
+//isUpdate = params.value.data.isupdate;
+//console.log('isUpdate = ', isUpdate);
+const toast = useToast();
+
+
+
+
+interface cItemB {
+      id: number;
+      bezeichnung: string;
+      kurzbeschreibung: string;
+      groesse: string;
+      farbe: string;
+      typid: number;
+      material: string;
+      abmessungenid: number;
+      frontviewid: number;
+}
+
+interface cItemExt {
+      id: number;
+      zuhause: boolean;
+      draussen: boolean;
+      genehmigt: boolean;
+      bemerkung: string;
+      bewertung: number;
+      favorit: boolean;
+      itembid: number;
+      frontviewid: number;
+}
+
+const {data: itemext} = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+qid);
+
+
+//const itemsb = ref();
+//const {data: itemsbd } = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+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});
+
+
+
+async function doCreate(ite: cItemExt) {
+    ite.itembid = qid;
+    let fd = new FormData();
+    fd.append('zuhause', ite.zuhause.toString());
+    fd.append('draussen', ite.draussen.toString());
+    fd.append('genehmigt', ite.genehmigt.toString());
+    fd.append('bemerkung', ite.bemerkung);
+    fd.append('bewertung', ite.bewertung.toString());
+    fd.append('favorit', ite.favorit.toString());
+    fd.append('itembid', ite.itembid.toString());
+    fd.append('frontviewid', ite.frontviewid.toString());
+
+    console.log('fd = ', fd);
+    let insert = await $fetch('http://ubodroid-2:8081/api/v1/ite', {
+    method: 'POST',
+    body: fd
+    });
+    if(insert) {
+        toast.add({ severity: 'success', summary: 'Item created', detail: 'Title: ' + ite.id, life: 3000 });
+    }
+    this.params.close();
+};
+
+async function doUpdate(ite: cItemExt) {
+
+    let fd = new FormData();
+    fd.append('zuhause', ite.zuhause.toString());
+    fd.append('draussen', ite.draussen.toString());
+    fd.append('genehmigt', ite.genehmigt.toString());
+    fd.append('bemerkung', ite.bemerkung);
+    fd.append('bewertung', ite.bewertung.toString());
+    fd.append('favorit', ite.favorit.toString());
+    fd.append('itembid', ite.itemb.id.toString());
+    fd.append('frontviewid', ite.frontview.id.toString());
+    fd.append('id', qid.toString());
+    console.log('fd = ', fd);
+    let upd = await $fetch('http://ubodroid-2:8081/api/v1/ite/'+qid, {
+    method: 'PUT',
+    body: fd
+    });
+    if(upd) {
+        toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + ite.id, life: 3000 });
+    }
+    await refreshNuxtData();
+    this.params.close();
+};
+
+
+</script>
\ No newline at end of file
diff --git a/components/Upditemext.vue b/components/Upditemext.vue
index 7b1099d..29df1cb 100644
--- a/components/Upditemext.vue
+++ b/components/Upditemext.vue
@@ -114,7 +114,8 @@
 
                                     </template>
                                     <template #footer>
-                                        <Button severity="secondary" label=" SAVE " icon="pi pi-file-edit" @click="doCreate(itemext)" />
+                                        <Button v-if="isUpdate" severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(itemext)" />
+                                        <Button v-else severity="secondary" label=" SAVE " icon="pi pi-file-edit" @click="doCreate(itemext)" />
                                     </template>
                                 </Card>              
                                 </div>
@@ -145,6 +146,9 @@ const pfad = '/photos';
 let params: any;
 params = inject('dialogRef');
 const qid = params.value.data.id;
+let isUpdate = ref(false);
+isUpdate = params.value.data.isupdate;
+console.log('isUpdate = ', isUpdate);
 const toast = useToast();
 const deleteItemBDialog = ref(false);
 
@@ -176,6 +180,10 @@ interface cItemExt {
 
 let itemext = ref({id: 0, zuhause: false, draussen: false, genehmigt: false, bemerkung: '', bewertung: 0, favorit: false, itembid: 0, frontviewid: 4});
 
+if(isUpdate) {
+    const {data: itemext} = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+qid);
+}
+
 //const itemsb = ref();
 const {data: itemsbd } = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+qid);
 const {data: images } = await useFetch('http://ubodroid-2:8081/api/v1/pho/itb/'+qid);
@@ -186,24 +194,6 @@ 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 }});
-        }
-    }
-    });
-
-     
-}
-
 async function doCreate(ite: cItemExt) {
     ite.itembid = qid;
     let fd = new FormData();
@@ -224,10 +214,31 @@ async function doCreate(ite: cItemExt) {
     if(insert) {
         toast.add({ severity: 'success', summary: 'Item created', detail: 'Title: ' + ite.id, life: 3000 });
     }
+    this.params.close();
 };
 
+async function doUpdate(ite: cItemExt) {
+    ite.itembid = qid;
+    let fd = new FormData();
+    fd.append('zuhause', ite.zuhause.toString());
+    fd.append('draussen', ite.draussen.toString());
+    fd.append('genehmigt', ite.genehmigt.toString());
+    fd.append('bemerkung', ite.bemerkung);
+    fd.append('bewertung', ite.bewertung.toString());
+    fd.append('favorit', ite.favorit.toString());
+    fd.append('itembid', ite.itembid.toString());
+    fd.append('frontviewid', ite.frontviewid.toString());
 
-
+    console.log('fd = ', fd);
+    let upd = await $fetch('http://ubodroid-2:8081/api/v1/ite/'+qid, {
+    method: 'PUT',
+    body: fd
+    });
+    if(upd) {
+        toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + ite.id, life: 3000 });
+    }
+    this.params.close();
+};
 
 
 </script>
\ No newline at end of file
diff --git a/components/upditemb.vue b/components/upditemb.vue
index 00f09cf..f2231ee 100644
--- a/components/upditemb.vue
+++ b/components/upditemb.vue
@@ -182,6 +182,7 @@ async function doUpdate(t: cItemB) {
       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();
     }