Changed layout for Vendors

pages/contracts/[mode]/[[id]].vue

@@ -1,5 +1,6 @@
 <script setup>
 import HistoryDisplay from "~/components/HistoryDisplay.vue";
+import dayjs from "dayjs";
 
 definePageMeta({
   middleware: "auth"
@@ -18,7 +19,7 @@ const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
   name: "",
   customer: null,
-  active: true
+  active: true,
 })
 
 //Functions
@@ -157,6 +158,7 @@ setupPage()
           option-attribute="name"
           value-attribute="id"
           :options="dataStore.customers"
+          @change="itemInfo.contact = null"
           searchable
           :search-attributes="['name']"
       >
@@ -165,6 +167,23 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+        label="Ansprechpartner:"
+        v-if="itemInfo.customer"
+    >
+      <USelectMenu
+          v-model="itemInfo.contact"
+          option-attribute="fullName"
+          value-attribute="id"
+          :options="dataStore.getContactsByCustomerId(itemInfo.customer)"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
 
     <UFormGroup
         label="Vertrag aktiv:"
@@ -174,10 +193,70 @@ setupPage()
       />
     </UFormGroup>
     <UFormGroup
-        label="Beschreibung:"
+        label="Vertragsstart:"
+        class="mt-2"
+    >
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+            variant="outline"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.startDate" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
+    <UFormGroup
+        label="Vertragsende(voraussichtlich):"
+        class="mt-2"
+    >
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+            variant="outline"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.endDate" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
+    <UFormGroup
+      label="mindest Vertragslaufzeit:"
+    >
+      <USelectMenu
+        :options="['12 Monate','24 Monate','36 Monate','48 Monate']"
+        v-model="itemInfo.duration"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Datum der Unterzeichnung:"
+        class="mt-2"
+    >
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+            variant="outline"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.signDate" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
+
+    <UFormGroup
+        label="Notizen:"
     >
       <UTextarea
-          v-model="itemInfo.description"
+          v-model="itemInfo.notes"
+          rows="6"
+          maxrows="12"
       />
     </UFormGroup>
     </UForm>

pages/customers/[mode]/[[id]].vue

@@ -33,7 +33,7 @@ const setupPage = async () => {
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
-  if(currentItem.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 }
 
 const editItem = async () => {