Added Pages for Accounts with Allocation Listings

2025-04-11 18:31:10 +02:00
parent cfcfceb9e8
commit d3b4f217e2
2 changed files with 259 additions and 0 deletions
--- a/pages/accounts/show/[id].vue
+++ b/pages/accounts/show/[id].vue
@@ -0,0 +1,112 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const profileStore = useProfileStore()
+
+const itemInfo = ref(null)
+const statementallocations = ref(null)
+
+const setup = async () => {
+  itemInfo.value = (await supabase.from("accounts").select("*").eq("id",route.params.id).single()).data
+  statementallocations.value = (await supabase.from("statementallocations").select("*, bs_id(*)").eq("account", route.params.id).eq("tenant",profileStore.currentTenant).order("created_at",{ascending: true})).data
+}
+
+setup()
+
+const selectAllocation = (allocation) => {
+  if(allocation.bs_id) {
+    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+  }
+}
+
+
+</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>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+
+            </table>
+          </div>
+        </UCard>
+        <UCard class="mt-5" v-if="item.label === 'Buchungen'">
+          <UTable
+              v-if="statementallocations"
+            :rows="statementallocations"
+              :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">{{useCurrency(row.amount)}}</span>
+              <span class="text-right text-primary-500" v-else-if="row.amount > 0">{{useCurrency(row.amount)}}</span>
+              <span v-else>{{useCurrency(row.amount)}}</span>
+            </template>
+            <template #date-data="{row}">
+              {{row.bs_id ? dayjs(row.bs_id.date).format('DD.MM.YYYY') : ''}}
+            </template>
+            <template #partner-data="{row}">
+              {{row.bs_id ? (row.bs_id.debName ? row.bs_id.debName : (row.bs_id.credName ? row.bs_id.credName : '')) : ''}}
+            </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>