Added Automatic HistoryItems to more DataTypes

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>