Added Contract to Document Assign

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

@@ -50,6 +50,21 @@ setupPage()
 
 <template>
   <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/contracts`)"
+      >
+        Verträge
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="currentItem"
+          :class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
+      >{{currentItem ? `Vertrag: ${currentItem.name}` : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -81,52 +96,53 @@ setupPage()
   </UDashboardNavbar>
   <UTabs
       v-if="currentItem && mode === 'show'"
-      :items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Dokumente'}]"
+      :items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
     class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                v-if="mode === 'show' && currentItem.id"
-                @click="editCustomer"
-            >
-              Bearbeiten
-            </UButton>
-          </Toolbar>
-
-          <UBadge
-              v-if="currentItem.active"
-          >
-            Vertrag aktiv
-          </UBadge>
-          <UBadge
-              v-else
-              color="red"
-          >
-            Vertrag gesperrt
-          </UBadge>
-
-          <div class="text-wrap">
-            <p>Kundennummer: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
-          </div>
-
-          <UDivider
-              class="my-2"
-          />
-
-          Beschreibung:<br>
-          {{currentItem.description}}<br>
+      <div v-if="item.label === 'Informationen'" class="flex mt-5">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <div class="text-wrap">
+              <p>Kundennummer: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
+              Beschreibung:<br>
+              {{currentItem.description}}<br>
+            </div>
+          </UCard>
         </div>
-        <div v-else-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="contract"
-              v-if="currentItem"
-              :element-id="currentItem.id"
-          />
+        <div class="w-1/2">
+          <UCard class="h-full">
+            <HistoryDisplay
+                type="contract"
+                v-if="currentItem"
+                :element-id="currentItem.id"
+                :render-headline="true"
+            />
+          </UCard>
+
         </div>
-        <div v-else-if="item.label === 'Dokumente'">
+
+
+
+
+<!--        <UBadge
+            v-if="currentItem.active"
+        >
+          Vertrag aktiv
+        </UBadge>
+        <UBadge
+            v-else
+            color="red"
+        >
+          Vertrag gesperrt
+        </UBadge>-->
+
+
+
+
+      </div>
+      <div v-else-if="item.label === 'Dokumente'">
+        <UCard class="mt-5">
           <Toolbar>
             <DocumentUpload
                 type="contract"
@@ -136,8 +152,11 @@ setupPage()
           <DocumentList
               :documents="dataStore.getDocumentsByContractId(currentItem.id)"
           />
-        </div>
-      </UCard>
+        </UCard>
+
+      </div>
+
+
     </template>
   </UTabs>
   <UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >