Changed Rendering of IncomingInvoice when not in editing

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

@@ -132,7 +132,7 @@ const setState = async (newState) => {
   } else if(mode.value === 'edit') {
     await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
   }
-  await router.push("/receipts")
+  await router.push("/incomingInvoices")
 }
 
 
@@ -155,13 +155,18 @@ setupPage()
       >
         Speichern
       </UButton>
-      <UButton
-          :disabled="itemInfo.state !== 'Entwurf'"
-          @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
-          v-if="mode !== 'edit'"
+      <UTooltip
+        text="Bearbeiten ist nur im Entwurfsstatus möglich"
       >
-        Bearbeiten
-      </UButton>
+        <UButton
+            :disabled="itemInfo.state !== 'Entwurf'"
+            @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
+            v-if="mode !== 'edit'"
+        >
+          Bearbeiten
+        </UButton>
+      </UTooltip>
+
       <UButton
           @click="setState('Entwurf')"
           v-if="itemInfo.state !== 'Entwurf'"
@@ -211,12 +216,23 @@ setupPage()
     <div class="w-2/5 mx-5">
 
       <div v-if="mode === 'show'">
-        {{itemInfo}}
+
+        <div class="truncate mb-5">
+          <p>Status: {{itemInfo.state}}</p>
+          <p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
+          <p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
+          <p>Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor}`">{{dataStore.getVendorById(itemInfo.vendor).name}}</nuxt-link></p>
+          <p>Bezahlt: {{itemInfo.paid}}</p>
+          <p>Beschreibung: {{itemInfo.description}}</p>
+
+<!--     TODO: Buchungszeilen darstellen     -->
+        </div>
 
         <HistoryDisplay
             type="incomingInvoice"
             v-if="itemInfo"
             :element-id="itemInfo.id"
+            :render-headline="true"
         />
       </div>
 

pages/incomingInvoices/index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import dayjs from "dayjs"
 definePageMeta({
   middleware: "auth"
 })
@@ -20,26 +21,26 @@ const router = useRouter()
 
 const templateColumns = [
   {
-    key: 'title',
-    label: "Titel:",
+    key: 'state',
+    label: "Status:",
     sortable: true
   },
   {
-    key: "start",
-    label: "Start",
+    key: "date",
+    label: "Datum",
     sortable: true
   },
   {
-    key: "end",
-    label: "Ende"
+    key: "vendor",
+    label: "Lieferant"
   },
   {
-    key: "resources",
-    label: "Resourcen"
+    key: "dueDate",
+    label: "Fälligkeitsdatum"
   },
   {
-    key: "project",
-    label: "Projekt"
+    key: "paid",
+    label: "Bezahlt"
   }
 ]
 const selectedColumns = ref(templateColumns)
@@ -103,12 +104,25 @@ const filteredRows = computed(() => {
   <UDashboardPanelContent>
     <UTable
         :rows="filteredRows"
+        :columns="columns"
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
         @select="(i) => router.push(`/incomingInvoices/show/${i.id}`) "
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
     >
-
+      <template #date-data="{row}">
+        {{dayjs(row.date).format("DD.MM.YYYY")}}
+      </template>
+      <template #vendor-data="{row}">
+        {{dataStore.getVendorById(row.vendor).name}}
+      </template>
+      <template #dueDate-data="{row}">
+        {{dayjs(row.dueDate).format("DD.MM.YYYY")}}
+      </template>
+      <template #paid-data="{row}">
+        <span v-if="row.paid" class="text-primary-500">Bezahlt</span>
+        <span v-else class="text-rose-600">Offen</span>
+      </template>
     </UTable>
   </UDashboardPanelContent>