From 0f7555907b2580b5c6a64ba5d571124d67ecac94 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Mon, 8 Apr 2024 21:04:32 +0200
Subject: [PATCH] Added Automatic HistoryItems to more DataTypes

---
 components/HistoryDisplay.vue    |   8 +++
 pages/contacts/[mode]/[[id]].vue |  37 +++++++++-
 pages/profiles/show/[id].vue     |   5 +-
 pages/projects/[mode]/[[id]].vue |   4 +-
 pages/tasks/[mode]/[[id]].vue    |  19 +++--
 pages/vehicles/[mode]/[[id]].vue |  75 ++++++++++++--------
 stores/data.js                   | 117 ++++++++++++++++++++++++++-----
 7 files changed, 205 insertions(+), 60 deletions(-)

diff --git a/components/HistoryDisplay.vue b/components/HistoryDisplay.vue
index 2e0715d..666f8b4 100644
--- a/components/HistoryDisplay.vue
+++ b/components/HistoryDisplay.vue
@@ -52,6 +52,10 @@ const historyItems = computed(() => {
     items = dataStore.historyItems.filter(i => i.absenceRequest === elementId)
   } else if(type === "event") {
     items = dataStore.historyItems.filter(i => i.event === elementId)
+  } else if(type === "task") {
+    items = dataStore.historyItems.filter(i => i.event === elementId)
+  } else if(type === "vehicle") {
+    items = dataStore.historyItems.filter(i => i.vehicle === elementId)
   }
 
   return items
@@ -91,6 +95,10 @@ const addHistoryItem = async () => {
     addHistoryItemData.value.absenceRequest = elementId
   } else if(type === "event") {
     addHistoryItemData.value.event = elementId
+  } else if(type === "task") {
+    addHistoryItemData.value.event = elementId
+  } else if(type === "vehicle") {
+    addHistoryItemData.value.vehicle = elementId
   }
 
 
diff --git a/pages/contacts/[mode]/[[id]].vue b/pages/contacts/[mode]/[[id]].vue
index 0e70257..c271f05 100644
--- a/pages/contacts/[mode]/[[id]].vue
+++ b/pages/contacts/[mode]/[[id]].vue
@@ -1,4 +1,6 @@
 <script setup>
+import dayjs from "dayjs";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -17,14 +19,15 @@ const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
   active: true
 })
+const oldItemInfo = ref({})
 
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getContactById(Number(useRoute().params.id))
+    currentItem.value = dataStore.getContactById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem
+  if(mode.value === "edit") itemInfo.value = currentItem.value
 
   if(mode.value === "create") {
     let query = route.query
@@ -32,6 +35,7 @@ const setupPage = () => {
     if(query.customer) itemInfo.value.customer = Number(query.customer)
     if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
   }
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 }
 
 const cancelEditorCreate = () => {
@@ -51,7 +55,7 @@ setupPage()
     <template #right>
       <UButton
           v-if="mode === 'edit'"
-          @click="dataStore.updateItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName})"
+          @click="dataStore.updateItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName},oldItemInfo)"
       >
         Speichern
       </UButton>
@@ -109,6 +113,8 @@ setupPage()
             <p>Mobil: {{currentItem.phoneMobile}}</p>
             <p>Festnetz: {{currentItem.phoneHome}}</p>
             <p>Rolle: {{currentItem.role}}</p>
+            <p>Geburtstag: {{currentItem.birthday ? dayjs(currentItem.birthday).format("DD.MM.YYYY") : ""}}</p>
+            <p>Notizen:<br> {{currentItem.notes}}</p>
           </div>
 
 
@@ -218,6 +224,31 @@ setupPage()
           v-model="itemInfo.role"
       />
     </UFormGroup>
+    <UFormGroup
+        label="Geburtstag:"
+    >
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            variant="outline"
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.birthday ? dayjs(itemInfo.birthday).format('DD.MM.YYYY') : 'Datum auswählen'"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker
+              v-model="itemInfo.birthday"
+              mode="date"
+          />
+        </template>
+      </UPopover>
+    </UFormGroup>
+    <UFormGroup
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="itemInfo.notes"
+      />
+    </UFormGroup>
   </UForm>
 </template>
 
diff --git a/pages/profiles/show/[id].vue b/pages/profiles/show/[id].vue
index 78b09f5..25b3c55 100644
--- a/pages/profiles/show/[id].vue
+++ b/pages/profiles/show/[id].vue
@@ -12,9 +12,10 @@ const dataStore = useDataStore()
 const route = useRoute()
 
 const itemInfo = ref({})
-
+const oldItemInfo = ref({})
 const setupPage = () => {
   if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
+  if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 }
 
 const selectedPresetRange = ref("Dieser Monat")
@@ -140,7 +141,7 @@ changeRange()
         <div v-if="item.label === 'Informationen'">
           <Toolbar>
             <UButton
-                @click="dataStore.updateItem('profiles',itemInfo)"
+                @click="dataStore.updateItem('profiles',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName},oldItemInfo)"
             >
               Speichern
             </UButton>
diff --git a/pages/projects/[mode]/[[id]].vue b/pages/projects/[mode]/[[id]].vue
index 6a7c569..f597102 100644
--- a/pages/projects/[mode]/[[id]].vue
+++ b/pages/projects/[mode]/[[id]].vue
@@ -82,6 +82,7 @@ const itemInfo = ref({
   customer: 0,
   users: [dataStore.activeProfile.id]
 })
+const oldItemInfo = ref({})
 const tags = dataStore.getDocumentTags
 
 
@@ -103,6 +104,7 @@ const setupPage = () => {
       itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
     }
   }
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 }
 
 const cancelEditorCreate = () => {
@@ -177,7 +179,7 @@ setupPage()
     <template #right>
       <UButton
           v-if="mode === 'edit'"
-          @click="dataStore.updateItem('projects',itemInfo)"
+          @click="dataStore.updateItem('projects',itemInfo,oldItemInfo)"
       >
         Speichern
       </UButton>
diff --git a/pages/tasks/[mode]/[[id]].vue b/pages/tasks/[mode]/[[id]].vue
index 9dd26fc..8d281a3 100644
--- a/pages/tasks/[mode]/[[id]].vue
+++ b/pages/tasks/[mode]/[[id]].vue
@@ -14,6 +14,7 @@ let currentItem = ref(null)
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({})
+const oldItemInfo = ref({})
 const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
 
 //Functions
@@ -30,6 +31,8 @@ const setupPage = () => {
     if(query.plant) itemInfo.value.plant = Number(query.plant)
 
   }
+
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 }
 
 
@@ -54,7 +57,7 @@ setupPage()
     <template #right>
       <UButton
           v-if="mode === 'edit'"
-          @click="dataStore.updateItem('tasks',itemInfo)"
+          @click="dataStore.updateItem('tasks',itemInfo,oldItemInfo)"
       >
         Speichern
       </UButton>
@@ -93,11 +96,17 @@ setupPage()
           <div class="truncate">
             <p>Kategorie: {{currentItem.categorie}}</p>
             <p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
-            <p>Beschreibung: {{currentItem.description}}</p>
+            <p>Beschreibung: <br><pre v-html="currentItem.description"></pre></p>
           </div>
 
         </div>
-        <!-- TODO: Logbuch Tasks -->
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="task"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
       </UCard>
     </template>
   </UTabs>
@@ -124,7 +133,7 @@ setupPage()
         label="Benutzer:"
     >
       <USelectMenu
-          v-model="itemInfo.user"
+          v-model="itemInfo.profile"
           :options="dataStore.profiles"
           option-attribute="fullName"
           value-attribute="id"
@@ -133,7 +142,7 @@ setupPage()
           :search-attributes="['fullName']"
       >
         <template #label>
-          {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
+          {{dataStore.getProfileById(itemInfo.profile) ? dataStore.getProfileById(itemInfo.profile).fullName : "Kein Benutzer ausgewählt"}}
         </template>
       </USelectMenu>
     </UFormGroup>
diff --git a/pages/vehicles/[mode]/[[id]].vue b/pages/vehicles/[mode]/[[id]].vue
index 6eb663b..d7a9c1c 100644
--- a/pages/vehicles/[mode]/[[id]].vue
+++ b/pages/vehicles/[mode]/[[id]].vue
@@ -22,9 +22,12 @@ const itemInfo = ref({
   driver: null,
   active: true
 })
+const oldItemInfo = ref({})
 
 const tabItems = [{
   label: 'Informationen',
+},{
+  label: "Logbuch"
 },/* {
   label: 'Eingangsrechnungen',
 },*/ {
@@ -62,6 +65,7 @@ const setupPage = () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
+  if(currentItem.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 }
 
 const cancelEditorCreate = () => {
@@ -94,7 +98,7 @@ setupPage()
     <template #right>
       <UButton
           v-if="mode === 'edit'"
-          @click="dataStore.updateItem('vehicles',itemInfo)"
+          @click="dataStore.updateItem('vehicles',itemInfo, oldItemInfo)"
       >
         Speichern
       </UButton>
@@ -126,41 +130,52 @@ setupPage()
       class="p-5"
   >
     <template #item="{item}">
-      <div v-if="item.label === 'Informationen'">
-        Typ: {{currentItem.type}} <br>
-        Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
-      </div>
-      <div v-else-if="item.label === 'Eingangsrechnungen'">
-        <UTable
-            :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
-            :columns="incomingInvoicesColumns"
-            @select="(row) => router.push('/receipts/show/' + row.id)"
-        >
-          <template #vendor-data="{row}">
-            {{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
-          </template>
-          <template #date-data="{row}">
-            {{dayjs(row.date).format("DD.MM.YYYY")}}
-          </template>
-          <template #accounts-data="{row}">
-            {{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
-          </template>
-        </UTable>
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          Typ: {{currentItem.type}} <br>
+          Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
+        </div>
+        <div v-else-if="item.label === 'Eingangsrechnungen'">
+          <UTable
+              :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
+              :columns="incomingInvoicesColumns"
+              @select="(row) => router.push('/receipts/show/' + row.id)"
+          >
+            <template #vendor-data="{row}">
+              {{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
+            </template>
+            <template #date-data="{row}">
+              {{dayjs(row.date).format("DD.MM.YYYY")}}
+            </template>
+            <template #accounts-data="{row}">
+              {{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
+            </template>
+          </UTable>
 
-      </div>
-      <div v-else-if="item.label === 'Dokumente'">
-        <Toolbar>
-          <DocumentUpload
+        </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
               type="vehicle"
+              v-if="currentItem"
               :element-id="currentItem.id"
           />
-        </Toolbar>
+        </div>
+        <div v-else-if="item.label === 'Dokumente'">
+          <Toolbar>
+            <DocumentUpload
+                type="vehicle"
+                :element-id="currentItem.id"
+            />
+          </Toolbar>
+
+          <DocumentList
+              :documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
+          />
+        </div>
+      </UCard>
 
-        <DocumentList
-            :documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
-        />
-      </div>
     </template>
+
   </UTabs>
   <UForm
       v-else-if="mode == 'edit' || mode == 'create'"
diff --git a/stores/data.js b/stores/data.js
index da2005d..bd56e57 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -30,7 +30,8 @@ export const useDataStore = defineStore('data', () => {
         contacts: {
             label: "Kontakte",
             labelSingle: "Kontakt",
-            redirect:true
+            redirect:true,
+            historyItemHolder: "contact"
         },
         contracts: {
             label: "Verträge",
@@ -45,7 +46,8 @@ export const useDataStore = defineStore('data', () => {
         plants: {
             label: "Objekte",
             labelSingle: "Objekte",
-            redirect:true
+            redirect:true,
+            historyItemHolder: "plant"
         },
         products: {
             label: "Artikel",
@@ -55,18 +57,21 @@ export const useDataStore = defineStore('data', () => {
         projects: {
             label: "Projekte",
             labelSingle: "Projekt",
-            redirect:true
+            redirect:true,
+            historyItemHolder: "project"
         },
         vehicles: {
             label: "Fahrzeuge",
             labelSingle: "Fahrzeug",
-            redirect:true
+            redirect:true,
+            historyItemHolder: "vehicle"
         },
         vendors: {
             label: "Lieferanten",
             labelSingle: "Lieferant",
             redirect:true,
-            numberRangeHolder: "vendorNumber"
+            numberRangeHolder: "vendorNumber",
+            historyItemHolder: "vendor"
         },
         messages: {
             label: "Nachrichten",
@@ -109,7 +114,8 @@ export const useDataStore = defineStore('data', () => {
         profiles: {
             label: "Mitarbeiter",
             labelSingle: "Mitarbeiter",
-            redirect: true
+            redirect: true,
+            historyItemHolder: "profile"
         },
         workingtimes: {
             label: "Anwesenheiten",
@@ -410,14 +416,14 @@ export const useDataStore = defineStore('data', () => {
             VALUE_UPDATED: 'updated',
             VALUE_DELETED: 'deleted',
             VALUE_UNCHANGED: 'unchanged',
-            map: function(obj1, obj2) {
+            map: function(obj1, obj2, k = null) {
                 if (this.isFunction(obj1) || this.isFunction(obj2)) {
                     throw 'Invalid argument. Function given, object expected.';
                 }
                 if (this.isValue(obj1) || this.isValue(obj2)) {
                     return {
                         type: this.compareValues(obj1, obj2),
-                        data: {o: obj1, n: obj2}//obj1 === undefined ? obj2 : obj1
+                        data: {o: obj1, n: obj2, k: k}//obj1 === undefined ? obj2 : obj1
                     };
                 }
 
@@ -432,14 +438,14 @@ export const useDataStore = defineStore('data', () => {
                         value2 = obj2[key];
                     }
 
-                    diff[key] = this.map(obj1[key], value2);
+                    diff[key] = this.map(obj1[key], value2,key);
                 }
                 for (var key in obj2) {
                     if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
                         continue;
                     }
 
-                    diff[key] = this.map(undefined, obj2[key]);
+                    diff[key] = this.map(undefined, obj2[key],key);
                 }
 
                 return diff;
@@ -524,12 +530,16 @@ export const useDataStore = defineStore('data', () => {
                 name = "Link"
             } else if(key === "start") {
                 name = "Start"
-                oldVal = dayjs(prop.data.o).format("DD.MM.YY HH:mm")
-                newVal = dayjs(prop.data.n).format("DD.MM.YY HH:mm")
+                oldVal = dayjs(prop.data.o).format("DD.MM.YYYY HH:mm")
+                newVal = dayjs(prop.data.n).format("DD.MM.YYYY HH:mm")
             } else if(key === "end") {
                 name = "Ende"
-                oldVal = dayjs(prop.data.o).format("DD.MM.YY HH:mm")
-                newVal = dayjs(prop.data.n).format("DD.MM.YY HH:mm")
+                oldVal = dayjs(prop.data.o).format("DD.MM.YYYY HH:mm")
+                newVal = dayjs(prop.data.n).format("DD.MM.YYYY HH:mm")
+            } else if(key === "birthday") {
+                name = "Geburtstag"
+                oldVal = dayjs(prop.data.o).format("DD.MM.YYY")
+                newVal = dayjs(prop.data.n).format("DD.MM.YYY")
             } else if(key === "resources") {
                 name = "Resourcen"
                 oldVal = prop.data.o.map(i => i.title).join(", ")
@@ -572,13 +582,61 @@ export const useDataStore = defineStore('data', () => {
                 name = "Telefon"
             } else if(key === "ustid") {
                 name = "USt-ID"
+            } else if(key === "role") {
+                name = "Rolle"
+            } else if(key === "phoneHome") {
+                name = "Festnetz"
+            } else if(key === "phoneMobile") {
+                name = "Mobiltelefon"
+            } else if(key === "salutation") {
+                name = "Anrede"
+            } else if(key === "firstName") {
+                name = "Vorname"
+            } else if(key === "lastName") {
+                name = "Nachname"
+            } else if(key === "name") {
+                name = "Name"
+            } else if(key === "customer") {
+                name = "Kunde"
+                oldVal = customers.value.find(i => i.id === prop.data.o).name
+                newVal = customers.value.find(i => i.id === prop.data.n).name
+            } else if(key === "vendor") {
+                name = "Lieferant"
+                oldVal = vendors.value.find(i => i.id === prop.data.o).name
+                newVal = vendors.value.find(i => i.id === prop.data.n).name
+            } else if(key === "description") {
+                name = "Beschreibung"
+            } else if(key === "categorie") {
+                name = "Kategorie"
+            } else if(key === "profile") {
+                name = "Mitarbeiter"
+                oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
+                newVal = profiles.value.find(i => i.id === prop.data.n).fullName
+            } else if(key === "plant") {
+                name = "Objekt"
+                oldVal = plants.value.find(i => i.id === prop.data.o).name
+                newVal = plants.value.find(i => i.id === prop.data.n).name
+            } else if(key === "annualPaidLeaveDays") {
+                name = "Urlaubstage"
+            } else if(key === "employeeNumber") {
+                name = "Mitarbeiternummer"
+            } else if(key === "weeklyWorkingDays") {
+                name = "Wöchentliche Arbeitstage"
+            } else if(key === "weeklyWorkingHours") {
+                name = "Wöchentliche Arbeitszeit"
+            } else if(key === "licensePlate") {
+                name = "Kennzeichen"
+            } else if(key === "driver") {
+                name = "Fahrer"
+                oldVal = profiles.value.find(i => i.id === prop.data.o).fullName
+                newVal = profiles.value.find(i => i.id === prop.data.n).fullName
             }
 
 
 
             let text = ""
             if(prop.type === "updated" && newVal !== "-" && oldVal !== "-") {
-                text = `Verändert: ${name} von "${oldVal}" zu "${newVal}"`
+                text = `Gerändert: ${name} von "${oldVal}" zu "${newVal}"`
             } else if(prop.type === "updated" && newVal !== "-" && oldVal === "-") {
                 text = `Hinzugefügt: ${name} "${newVal}"`
             } else if(prop.type === "created") {
@@ -597,8 +655,18 @@ export const useDataStore = defineStore('data', () => {
 
             historyItem[dataTypes[dataType].historyItemHolder] = newData.id
 
-            console.log(historyItem)
-            itemsToCreate.push(historyItem)
+
+            const checkIfNaN = (x) => {
+                return typeof x === "number" && x !== x;
+            }
+            console.log(key)
+            console.log(checkIfNaN(key))
+
+            if(key !== "fullName" && key !== "phases") {
+                console.log(historyItem)
+                itemsToCreate.push(historyItem)
+            }
+
         }
 
         if(oldData) {
@@ -611,6 +679,7 @@ export const useDataStore = defineStore('data', () => {
                 checkPropState(prop,result[prop])
 
 
+
                 //console.log(prop)
                 //console.log(result[prop])
 
@@ -637,13 +706,13 @@ export const useDataStore = defineStore('data', () => {
             itemsToCreate.push(historyItem)
         }
 
-        /*const {data,error} = await supabase.from("historyitems").insert(itemsToCreate)
+        const {data,error} = await supabase.from("historyitems").insert(itemsToCreate)
 
         if(error) {
             console.log(error)
         } else {
             fetchHistoryItems()
-        }*/
+        }
 
 
     }
@@ -723,9 +792,19 @@ export const useDataStore = defineStore('data', () => {
     }
 
     async function updateItem (dataType, data, oldData = null) {
+        //Temporary Fix TODO: Remove and build Solution
+        data = JSON.parse(JSON.stringify(data))
+        delete data.users
+
+        if(oldData) {
+            oldData = JSON.parse(JSON.stringify(oldData))
+            delete oldData.users
+        }
 
         const {tenants, ...newData} = data
 
+        console.log(newData)
+
         await generateHistoryItems(dataType,data,oldData)
 
         const {data:supabaseData,error: supabaseError} = await supabase