Restructured Project Rep

pages/banking/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <UDashboardNavbar title="Bankbuchungen">
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <USelectMenu
+        :options="dataStore.bankAccounts"
+        v-model="filterAccount"
+        option-attribute="iban"
+        multiple
+        by="id"
+      >
+        <template #label>
+          Konto
+        </template>
+      </USelectMenu>
+    </template>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => {selectedStatement = i; showStatementModal = true}"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+  >
+    <template #account-data="{row}">
+      {{row.account ? (dataStore.getBankAccountById(row.account).name ? dataStore.getBankAccountById(row.account).name :dataStore.getBankAccountById(row.account).iban) : ""}}
+    </template>
+    <template #valueDate-data="{row}">
+      {{dayjs(row.valueDate).format("DD.MM.YY")}}
+    </template>
+    <template #amount-data="{row}">
+      <span
+        v-if="row.amount >= 0"
+        class="text-primary-500"
+      >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
+      <span
+        v-else-if="row.amount < 0"
+        class="text-rose-500"
+      >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
+    </template>
+    <template #partner-data="{row}">
+      <span
+        v-if="row.amount < 0"
+      >
+          {{row.credName}}
+      </span>
+      <span
+        v-else-if="row.amount > 0"
+      >
+        {{row.debName}}
+      </span>
+    </template>
+  </UTable>
+
+  <USlideover
+    v-model="showStatementModal"
+  >
+    <UCard class="h-full">
+      <template #header>
+        <span v-if="selectedStatement.amount > 0">
+          {{selectedStatement.debName}}
+        </span>
+        <span v-else-if="selectedStatement.amount < 0">
+          {{selectedStatement.credName}}
+        </span>
+      </template>
+
+      <div class="truncate">
+        <p>Betrag: {{String(selectedStatement.amount.toFixed(2)).replace(".",",")}} €</p>
+        <p>Buchungsdatum: {{dayjs(selectedStatement.date).format("DD.MM.YYYY")}}</p>
+        <p>Werstellungsdatum: {{dayjs(selectedStatement.valueDate).format("DD.MM.YYYY")}}</p>
+        <p>Partner: {{selectedStatement.amount > 0 ? selectedStatement.debName : selectedStatement.credName}}</p>
+        <p>Partner IBAN: {{selectedStatement.amount > 0 ? selectedStatement.debIban : selectedStatement.credIban}}</p>
+        <p>Konto: {{selectedStatement.account}}</p>
+        <p class="text-wrap">Beschreibung: <br>{{selectedStatement.text}}</p>
+      </div>
+
+      <UFormGroup>
+        <USelectMenu
+          :options="dataStore.createddocuments"
+        />
+      </UFormGroup>
+
+
+
+    </UCard>
+
+  </USlideover>
+</template>
+
+<script setup>
+
+import dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+
+const selectedStatement = ref(null)
+const showStatementModal = ref(false)
+
+const templateColumns = [
+  {
+    key: "account",
+    label: "Konto",
+    sortable: true
+  },{
+    key: "valueDate",
+    label: "Valuta",
+    sortable: true
+  },
+  {
+    key: "amount",
+    label: "Betrag",
+    sortable: true
+  },
+  {
+    key: "partner",
+    label: "Name",
+    sortable: true
+  },
+  {
+    key: "text",
+    label: "Beschreibung",
+    sortable: true
+  }
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref('')
+const filterAccount = ref(dataStore.bankAccounts || [])
+
+const filteredRows = computed(() => {
+  return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
+})
+</script>
+
+<style scoped>
+
+</style>