From 22affd5e54bed1a8a47b0d3232b93f33834a27ed Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Mon, 19 Jun 2023 14:58:46 +0200
Subject: [PATCH] update itb dyndialog

---
 assets/mycss.css           |  10 ++
 components/Bought.vue      |  98 +++++++++++++++++++-
 components/Itembdetail.vue | 139 +++++++++++++++++++++++++++-
 components/upditemb.vue    | 181 +++++++++++++++++++++++++++++++++++++
 layouts/default.vue        |   1 +
 plugins/primevue.js        |   8 ++
 6 files changed, 430 insertions(+), 7 deletions(-)
 create mode 100644 components/upditemb.vue

diff --git a/assets/mycss.css b/assets/mycss.css
index 7f6f8af..d856eaf 100644
--- a/assets/mycss.css
+++ b/assets/mycss.css
@@ -20,4 +20,14 @@
     height: 100%;
     overflow: hidden;
     background-attachment: fixed;
+}
+
+.measuretable th {
+        background-color: antiquewhite;
+        border: 1px solid;
+}
+
+.measuretable td{
+        border: 1px solid grey;
+        text-align: center;    
 }
\ No newline at end of file
diff --git a/components/Bought.vue b/components/Bought.vue
index f68377f..41aa8d6 100644
--- a/components/Bought.vue
+++ b/components/Bought.vue
@@ -3,14 +3,17 @@
         <Card style="margin-top: 78px; min-height: 200px;"> 
             <template #content>
                 <Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
+                    <template #icons>
+                        <Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" />
+                    </template>
                     <DataView :value="itemsb" paginator :rows="5">
                         <template #list="slotProps">
                             <div class="col-12">
                                 <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp`" :alt="slotProps.data.bezeichnung" />
+                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`${pfad}/${slotProps.data.frontview.pfad}`" :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.bezeichnung }}</div>
+                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div>
                                             <div class="flex align-items-center gap-3">
                                                 <span class="flex align-items-center gap-2">
                                                     <i class="pi pi-tag"></i>
@@ -19,7 +22,7 @@
                                                 
                                             </div>
                                             <div class="col-12 gap-3 flex">
-                                                    <Button severity="info" @click="openDetail(slotProps.data.type.id)" target="_blank" label=" Details " icon="pi pi-list" />
+                                                    <Button severity="info" @click="openDetail(slotProps.data.id)" target="_blank" label=" Details " icon="pi pi-list" />
                                                     <Button severity="success" @click="openEval(slotProps.data.typid)" label=" Evaluation " icon="pi pi-eye" />                                                    
                                             </div>
                                         </div>
@@ -30,6 +33,42 @@
                             </div>
                         </template>
                     </DataView>
+                    <Dialog :visible="createItemBDialog" :style="{width: '450px'}" header="New Bought Clothes" :modal="true" class="p-fluid">
+                      <div class="field">
+                          <label for="kurzbeschreibung">Title</label>
+                          <InputText id="kurzbeschreibung" v-model.trim="itemb.kurzbeschreibung" required="true" autofocus />
+                          <small id="kurzbeschreibung-help" >Enter a title for the clothing</small>
+                      </div>
+                      <div class="field p-float-label">
+                          <label for="bezeichnung">Description:</label>
+                          <Textarea id="bezeichnung" v-model.trim="itemb.bezeichnung" rows="5" cols="50"/>
+                      </div>
+                      <div class="field">
+                          <label for="groesse">Size:</label>
+                          <InputText id="groesse" v-model.trim="itemb.groesse" />
+                          <small id="groesse-help" >Enter a size for the clothing</small>
+                      </div>
+                      <div class="field">
+                          <label for="farbe">Color</label>
+                          <InputText id="farbe" v-model.trim="itemb.farbe"  />
+                          <small id="farbe-help" >Enter a color for the clothing</small>
+                      </div>
+                      <div class="field">
+                          <label for="type">Type of clothes</label>
+                          <Dropdown id="type" v-model.trim="itemb.typid" @change="OnChangeDD" :options="typen" optionLabel="bezeichnung" optionValue="id" placeholder="Select a type" />
+                          
+                      </div>
+                      <div class="field">
+                          <label for="material">Material</label>
+                          <InputText id="material" v-model.trim="itemb.material"  />
+                          <small id="material-help" >Enter a material for the clothing</small>
+                      </div>
+
+                      <template #footer>
+                          <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
+                          <Button label="Save" icon="pi pi-check" text @click="onSubmit(itemb)" />
+                      </template>
+                    </Dialog>
                 </Panel>
             </template>
         </Card>
@@ -42,9 +81,28 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+const pfad = '/photos';
+import { useToast } from 'primevue/usetoast';
+import { stringify } from "querystring";
 
+    interface cItemB {
+      id: number;
+      bezeichnung: string;
+      kurzbeschreibung: string;
+      groesse: string;
+      farbe: string;
+      typid: number;
+      material: string;
+      abmessungenid: number;
+      frontviewid: number;
+    }
+const toast = useToast();    
+const createItemBDialog = ref(false);
+const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
 //const itemsb = ref();
+
 const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
+const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
 
 async function openDetail(id) {
     await navigateTo({
@@ -62,4 +120,38 @@ async function openEval(id) {
     
 };
 
+const onNew = () => {
+    itemb.value = 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();
+      fd.append('bezeichnung', t.bezeichnung);
+      fd.append('kurzbeschreibung', t.kurzbeschreibung);
+      fd.append('groesse', t.groesse);
+      fd.append('farbe', t.farbe);
+      fd.append('typid', t.typid.toString());
+      fd.append('material', t.material);
+      fd.append('abmessungenid', t.abmessungenid.toString());
+      fd.append('frontviewid', t.frontviewid.toString());
+      console.log('fd = ', fd);
+      await $fetch('http://ubodroid-2:8081/api/v1/itb',{
+      method: 'POST',
+      body: fd
+      });
+      createItemBDialog.value = false;
+      toast.add({ severity: 'success', summary: 'New bought item created', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
+      await refreshNuxtData();
+    console.log('POST ausgeführt...'+ t.kurzbeschreibung);
+    } 
+
+const OnChangeDD = () => {
+    console.log('Die ausgewählte Option ist: ', itemb.value)
+}
+
 </script>
\ No newline at end of file
diff --git a/components/Itembdetail.vue b/components/Itembdetail.vue
index 17f79ed..0a6e64f 100644
--- a/components/Itembdetail.vue
+++ b/components/Itembdetail.vue
@@ -4,7 +4,7 @@
             <template #content>
                 <Panel header="Bought, but not evaluated clothes - Detail Page" class="rounded-4 bg-white" >
                     <div class="grid nested-grid">
-                        <div class="col-6">
+                        <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%;" />
@@ -14,13 +14,95 @@
                                 </template>
                             </Galleria>
                         </div>
-                        <div class="col-6">
+                        <div class="col-8">
                             <div class="grid">
-                                <p>{{ itemsbd.kurzbeschreibung }}</p>
-                                <p>Da kommt der Text rein</p>
+                                <Card class="col-12">
+                                    <template #header>
+                                        <h1>{{ itemsbd.kurzbeschreibung }}</h1>
+                                    </template>
+                                    <template #content>
+                                        <div class="grid nested-grid">
+                                            <div class="col-12">
+                                                <label>{{ itemsbd.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="itemsbd.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="itemsbd.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="itemsbd.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="itemsbd.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>{{ itemsbd.abmessungen.brust }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Length Top</td>
+                                                    <td>{{ itemsbd.abmessungen.laenget }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Shoulder Width</td>
+                                                    <td>{{ itemsbd.abmessungen.schulterbreite }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Waist Girth Top</td>
+                                                    <td>{{ itemsbd.abmessungen.taillenumfangt }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Hip Girth</td>
+                                                    <td>{{ itemsbd.abmessungen.hueftumfang }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Inner Seam</td>
+                                                    <td>{{ itemsbd.abmessungen.innennaht }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Length Bottom</td>
+                                                    <td>{{ itemsbd.abmessungen.laengeb }}</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>Waist Girth Bottom</td>
+                                                    <td>{{ itemsbd.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" />        
+                                        </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>
@@ -33,15 +115,64 @@
 </template>
 
 <script setup lang="ts">
+import { useToast } from "primevue/usetoast";
 import { ref } from "vue";
+import { useDialog } from 'primevue/usedialog';
+import Upditemb from "./upditemb.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: 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);
 
+
+
+const onDelete = () => {
+    deleteItemBDialog.value = true;
+};
+
+const onUpdate = () => {
+   dialog.open(Upditemb, { data: {id: qid} });
+};
+
+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>
\ No newline at end of file
diff --git a/components/upditemb.vue b/components/upditemb.vue
new file mode 100644
index 0000000..00c3b63
--- /dev/null
+++ b/components/upditemb.vue
@@ -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>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 337117d..ad63d39 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
      <Toast />
+     <DynamicDialog />
      <div class="grid">
         <div class="col-6 col-offset-3">
             <Header />
diff --git a/plugins/primevue.js b/plugins/primevue.js
index f3d2880..b2176ed 100644
--- a/plugins/primevue.js
+++ b/plugins/primevue.js
@@ -14,6 +14,10 @@ import Toast from 'primevue/toast';
 import Dialog from 'primevue/dialog';
 import DataView from "primevue/dataview";
 import Galleria from 'primevue/galleria';
+import Textarea from "primevue/textarea";
+import Dropdown from "primevue/dropdown";
+import DialogService from 'primevue/dialogservice';
+import DynamicDialog from 'primevue/dynamicdialog';
 
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -32,4 +36,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.component("Dialog", Dialog); 
     nuxtApp.vueApp.component("DataView", DataView); 
     nuxtApp.vueApp.component("Galleria", Galleria);
+    nuxtApp.vueApp.component("Textarea", Textarea);
+    nuxtApp.vueApp.component("Dropdown", Dropdown);
+    nuxtApp.vueApp.use(DialogService);
+    nuxtApp.vueApp.component("DynamicDialog", DynamicDialog);
 });    
\ No newline at end of file