Changed Rendering of IncomingInvoice when not in editing

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>