Added Archiving & Some Tidying in Vehicles

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

@@ -43,11 +43,7 @@ const oldItemInfo = ref({})
 
 const tabItems = [{
   label: 'Informationen',
-},{
-  label: "Logbuch"
-},/* {
-  label: 'Eingangsrechnungen',
-},*/ {
+}, {
   label: 'Dokumente',
 }]
 
@@ -130,6 +126,20 @@ setupPage()
       >{{itemInfo ? `Fahrzeug: ${itemInfo.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
     </template>
     <template #right>
+      <ButtonWithConfirm
+          color="rose"
+          variant="outline"
+          @confirmed="dataStore.updateItem('vehicles',{...itemInfo, archived: true})"
+          v-if="mode === 'edit'"
+      >
+        <template #button>
+          Archivieren
+        </template>
+        <template #header>
+          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie das Fahrzeug {{itemInfo.name}} wirklich archivieren?
+      </ButtonWithConfirm>
       <UButton
           v-if="mode === 'edit'"
           @click="dataStore.updateItem('vehicles',itemInfo, oldItemInfo)"
@@ -165,50 +175,80 @@ setupPage()
       v-model="openTab"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div class="truncate" v-if="item.label === 'Informationen'">
-          <p>Typ: {{itemInfo.type}}</p>
-          <p>Fahrgestellnummer: {{itemInfo.vin}}</p>
-          <p>Fahrer: {{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer gewählt'}}</p>
-        </div>
-        <div v-else-if="item.label === 'Eingangsrechnungen'">
-          <UTable
-              :rows="dataStore.getIncomingInvoicesByVehicleId(itemInfo.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 v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
+        <UCard class="w-1/2 mr-5">
+          <UAlert
+              v-if="itemInfo.archived"
+              color="rose"
+              variant="outline"
+              title="Objekt archiviert"
+              icon="i-heroicons-light-bulb"
+              class="mb-5"
+          />
+          <div class="text-wrap">
+            <table class="w-full">
+              <tr>
+                <td>Kennzeichen: </td>
+                <td>{{itemInfo.licensePlate}}</td>
+              </tr>
+              <tr>
+                <td>Typ: </td>
+                <td>{{itemInfo.type}}</td>
+              </tr>
+              <tr>
+                <td>Fahrgestellnummer: </td>
+                <td>{{itemInfo.vin}}</td>
+              </tr>
+              <tr>
+                <td>Fahrer:</td>
+                <td>{{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer gewählt'}}</td>
+              </tr>
+              <tr>
+                <td>Tankvolumen:</td>
+                <td>{{itemInfo.tankSize !== 0 ? `${itemInfo.tankSize} L` : "Kein Tank verbaut"}}</td>
+              </tr>
+            </table>
+          </div>
 
-        </div>
-        <div v-else-if="item.label === 'Logbuch'">
+        </UCard>
+        <UCard class="w-1/2">
           <HistoryDisplay
               type="vehicle"
               v-if="itemInfo"
               :element-id="itemInfo.id"
           />
-        </div>
-        <div v-else-if="item.label === 'Dokumente'">
-          <Toolbar>
-            <DocumentUpload
-                type="vehicle"
-                :element-id="itemInfo.id"
-            />
-          </Toolbar>
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Eingangsrechnungen'">
+        <UTable
+            :rows="dataStore.getIncomingInvoicesByVehicleId(itemInfo.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>
 
-          <DocumentList
-              :documents="dataStore.getDocumentsByVehicleId(itemInfo.id)"
+      </div>
+      <div v-else-if="item.label === 'Dokumente'">
+        <Toolbar>
+          <DocumentUpload
+              type="vehicle"
+              :element-id="itemInfo.id"
           />
-        </div>
-      </UCard>
+        </Toolbar>
+
+        <DocumentList
+            :documents="dataStore.getDocumentsByVehicleId(itemInfo.id)"
+        />
+      </div>
 
     </template>
 
@@ -264,9 +304,26 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+        label="Tankvolumen:"
+    >
+      <UInput
+          v-model="itemInfo.tankSize"
+          type="number"
+      >
+        <template #trailing>
+          L
+        </template>
+      </UInput>
+    </UFormGroup>
   </UForm>
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>

pages/vehicles/index.vue

@@ -43,6 +43,13 @@
       @select="(i) => router.push(`/vehicles/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
   >
+    <template #active-data="{row}">
+      <UIcon
+          :name="row.active ? 'i-heroicons-check' : 'i-heroicons-x-mark'"
+          :class="['w-5', 'h-5', ... row.active ? ['text-primary-500'] : ['text-rose-600'] ]"
+      />
+
+    </template>
     <template #licensePlate-data="{row}">
       <span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.licensePlate}}</span>
       <span v-else>{{row.licensePlate}}</span>
@@ -101,9 +108,17 @@ setupPage()
 
 const templateColumns = [
   {
+    key: 'active',
+    label: "Aktiv:",
+    sortable: true
+  },{
     key: 'licensePlate',
     label: "Kennzeichen:",
     sortable: true
+  },{
+    key: 'vin',
+    label: "Identifikationnr.:",
+    sortable: true
   },
   {
     key: "type",
@@ -117,7 +132,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  return useSearch(searchString.value, items.value)
+  return useListFilter(searchString.value, items.value)
 })
 </script>