Added Frontend

frontend/pages/accounts/show/[id].vue

@@ -0,0 +1,170 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const route = useRoute()
+const router = useRouter()
+
+const itemInfo = ref(null)
+const statementallocations = ref([])
+const incominginvoices = ref([])
+
+const setup = async () => {
+  itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+}
+
+setup()
+
+const selectAllocation = (allocation) => {
+  if(allocation.type === "statementallocation") {
+    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+  } else if(allocation.type === "incominginvoice") {
+    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+  }
+}
+
+const renderedAllocations = computed(() => {
+
+  let tempstatementallocations = statementallocations.value.map(i => {
+    return {
+      ...i,
+      type: "statementallocation",
+      date: i.bs_id.date,
+      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
+    }
+  })
+
+
+  let incominginvoicesallocations = []
+
+  incominginvoices.value.forEach(i => {
+
+    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
+      return {
+        ...x,
+        incominginvoiceid: i.id,
+        type: "incominginvoice",
+        amount: x.amountGross ? x.amountGross : x.amountNet,
+        date: i.date,
+        partner: i.vendor.name,
+        description: i.description,
+        color: i.expense ? "red" : "green",
+        expense: i.expense
+      }
+    }))
+  })
+
+  return [...tempstatementallocations, ... incominginvoicesallocations]
+})
+
+const saldo = computed(() => {
+  let value = 0
+
+  renderedAllocations.value.forEach(i => {
+    if(i.incominginvoiceid) {
+      if(i.expense) {
+        value = value - i.amount
+      } else {
+        value += i.amount
+      }
+    } else {
+      value += i.amount
+    }
+  })
+
+  return value
+})
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+        Zurück
+      </UButton>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/accounts`)"
+      >
+        Übersicht
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{itemInfo ? `Buchungskonto: ${itemInfo.number} - ${itemInfo.label}`: '' }}</h1>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
+      <template #item="{item}">
+        <UCard class="mt-5" v-if="item.label === 'Information'">
+          <div class="text-wrap">
+            <table class="w-full" v-if="itemInfo">
+              <tr>
+                <td>Nummer:</td>
+                <td>{{itemInfo.number}}</td>
+              </tr>
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.label}}</td>
+              </tr>
+              <tr>
+                <td>Anzahl:</td>
+                <td>{{renderedAllocations.length}}</td>
+              </tr>
+              <tr>
+                <td>Saldo:</td>
+                <td>{{useCurrency(saldo)}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+
+            </table>
+          </div>
+        </UCard>
+        <UCard class="mt-5" v-if="item.label === 'Buchungen'">
+          <UTable
+              v-if="statementallocations"
+            :rows="renderedAllocations"
+              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+              @select="(i) => selectAllocation(i)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+          >
+            <template #amount-data="{row}">
+              <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
+              <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
+              <span v-else>{{useCurrency(row.amount)}}</span>
+            </template>
+            <template #date-data="{row}">
+              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+            </template>
+            <template #description-data="{row}">
+              {{row.description ? row.description : ''}}
+            </template>
+          </UTable>
+        </UCard>
+      </template>
+    </UTabs>
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>