From 7051ed621a88ca1ef972b9e941970c135653b00d Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Sat, 24 Jun 2023 10:31:18 +0200
Subject: [PATCH] Anpassung bought, photo, neu updPhoto

---
 components/Bought.vue   |  58 ++++++++++++++++----
 components/Photo.vue    |  12 ++++-
 components/UpdPhoto.vue | 115 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 175 insertions(+), 10 deletions(-)
 create mode 100644 components/UpdPhoto.vue

diff --git a/components/Bought.vue b/components/Bought.vue
index beb9573..ffaa92a 100644
--- a/components/Bought.vue
+++ b/components/Bought.vue
@@ -23,7 +23,8 @@
                                             </div>
                                             <div class="col-12 gap-3 flex">
                                                     <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" />                                                    
+                                                    <Button severity="success" @click="openEval(slotProps.data.id)" label=" Evaluation " icon="pi pi-eye" />   
+                                                    <Button severity="warning" @click="openFrontview(slotProps.data.id)" label=" Frontview" icon="pi pi-camera" />                                                 
                                             </div>
                                         </div>
                                         
@@ -79,10 +80,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 const pfad = '/photos';
 import { useToast } from 'primevue/usetoast';
-import { stringify } from "querystring";
+import { useDialog } from "primevue/usedialog";
+import UpdPhoto  from "./UpdPhoto.vue";
+
 
     interface cItemB {
       id: number;
@@ -96,8 +99,9 @@ import { stringify } from "querystring";
       frontviewid: number;
     }
 const toast = useToast();    
+const dialog = useDialog();
 const createItemBDialog = ref(false);
-const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
+let itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
 let imgurl = ref();
 const imgref = ref();
 //imgref.value='1679468897186c75b5379eb6691871da30ef18b98a_1.jpg';
@@ -136,16 +140,52 @@ async function awaitItemsb() {
 
 async function openEval(id) {
     
-};
-onMounted(() => {
-    
-});
+}
 
+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);
+    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;
+
+            doUpdate(itb);
+        }
+    
+    },});
+}
 
+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.frontviewid.toString());
+      console.log('fd = ', fd);
+      await $fetch('http://ubodroid-2:8081/api/v1/itb/'+t.id,{
+      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);
+    } 
 
 
 const onNew = () => {
-    itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
+    itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
     createItemBDialog.value = true;
     };
 
diff --git a/components/Photo.vue b/components/Photo.vue
index 7556cbf..3373922 100644
--- a/components/Photo.vue
+++ b/components/Photo.vue
@@ -145,7 +145,17 @@ async function doUpdate(ref: any, pho: cPho){
         method: "PUT",
         body: fd,
       });
-    
+    if (updPho) {
+        toast.add({
+          severity: "info",
+          summary: "Success",
+          detail: "Photo updated",
+          life: 10000,
+        });
+        refreshNuxtData();
+
+    }
+
 }
 
 </script>
\ No newline at end of file
diff --git a/components/UpdPhoto.vue b/components/UpdPhoto.vue
new file mode 100644
index 0000000..e4b1587
--- /dev/null
+++ b/components/UpdPhoto.vue
@@ -0,0 +1,115 @@
+<template>
+    <ClientOnly>
+        <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Managing photos" class="rounded-4 bg-white" >
+                    
+                    <div class="grid">
+                        <Card class="col-12">
+                            <template #header>
+                                <h1>Search Frontview Photo</h1>
+                            </template>
+                            <template #content>    
+                                <div class="col-12">
+                                <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="photos" 
+                                        showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
+                                        :globalFilterFields="['pfad']"  
+                                        v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
+                                        tableStyle="min-width: 50rem;">
+                                        <template #header>
+                                        <div class="flex justify-content-end">
+                                            <span class="p-input-icon-left">
+                                                <i class="pi pi-search" />
+                                                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                                            </span>
+                                        </div>
+                                        </template>
+                                        <template #empty> No Photos found. </template>
+                                        <!--<template #loading> Loading customers data. Please wait. </template> -->
+                                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
+                                        <Column v-if="col.field=='image'">
+                                            <template #body="slotProps">
+                                                <img :src="`${pfad}/thumb-${slotProps.data.pfad}`" :alt="slotProps.data.pfad" />
+                                            </template>
+                                        </Column>
+                                    </Column>
+                                        
+                                </DataTable>
+                                
+                                </div>
+                            </template>
+                            <template #footer>
+                                <div class="col-12 gap-3 flex">
+                                    <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(id)" />
+                                    
+                                </div>
+                            </template>
+                        </Card>   
+                    </div>
+                    
+                </Panel>
+            </template>
+        </Card>
+    </ClientOnly>
+    
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { FilterMatchMode } from "primevue/api";
+
+const pfad = '/photos';
+let params: any;
+params = inject('dialogRef');
+
+const selectedTyp = ref("");
+const id = ref(0);
+interface cPho {
+    id: number;
+    pfad: string;
+    itembid: number;
+    itemextid: number;
+}
+
+const columns = [
+  { field: 'id', header: '#'},
+  { header: 'Image', field: 'image'}, 
+  { header: 'Filename', field: 'pfad'},
+  { header: 'ItemB', field: 'itembid'},
+  { header: 'ItemEva', field: 'itemextid'},
+];
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH },
+  kurzbeschreibung: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
+});
+
+const onRowSelect = (event) => {
+  id.value = event.data.id;
+  //bezeichnung.value = event.data.kurzbeschreibung;
+  toast.add({ severity: 'info', summary: 'Photo Selected', detail: 'Description: ' + event.data.pfad, life: 3000 });
+};
+
+//const photo = ref({id:0,pfad:'',itembid:0,itemextid:0});
+import { useToast } from 'primevue/usetoast';
+const toast = useToast();  
+
+const uploadedFiles = ref([]);
+const {data: photos } = await useFetch('http://ubodroid-2:8081/api/v1/pho');
+
+
+
+
+
+
+async function doUpdate(ref: number){
+    this.params.close({id: ref});
+    
+
+}
+
+</script>
\ No newline at end of file