From d3b4f217e2e7be75fa29f9a104c4aac90cd8c27e Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Fri, 11 Apr 2025 18:31:10 +0200
Subject: [PATCH] Added Pages for Accounts with Allocation Listings

---
 pages/accounts/index.vue     | 147 +++++++++++++++++++++++++++++++++++
 pages/accounts/show/[id].vue | 112 ++++++++++++++++++++++++++
 2 files changed, 259 insertions(+)
 create mode 100644 pages/accounts/index.vue
 create mode 100644 pages/accounts/show/[id].vue

diff --git a/pages/accounts/index.vue b/pages/accounts/index.vue
new file mode 100644
index 0000000..1b31e1d
--- /dev/null
+++ b/pages/accounts/index.vue
@@ -0,0 +1,147 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  }
+})
+
+const profileStore = useProfileStore()
+const tempStore = useTempStore()
+const router = useRouter()
+const supabase = useSupabaseClient()
+
+const items = ref([])
+
+const setupPage = async () => {
+  items.value = (await supabase.from("accounts").select("*").order("number", {ascending:true})).data
+}
+
+const templateColumns = [
+  {
+    key: "number",
+    label: "Nummer"
+  },{
+    key: "label",
+    label: "Name"
+  },
+  {
+    key: "description",
+    label: "Beschreibung"
+  },
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref(tempStore.searchStrings["bankstatements"] ||'')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString("bankstatements")
+  searchString.value = ''
+}
+
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+}
+
+
+
+
+
+const selectedFilters = ref(['Nur offene anzeigen'])
+
+const filteredRows = computed(() => {
+  let temp = items.value
+
+
+  return useSearch(searchString.value, temp)
+})
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar title="Buchungskonten" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          name="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+          @change="tempStore.modifySearchString('bankstatements',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+      <USelectMenu
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="['Nur offene anzeigen']"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+  >
+
+  </UTable>
+
+
+</template>
+
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/accounts/show/[id].vue b/pages/accounts/show/[id].vue
new file mode 100644
index 0000000..0bb1510
--- /dev/null
+++ 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>
\ No newline at end of file