Statement Sync

pages/banking/index.vue

@@ -1,11 +1,12 @@
 <script setup>
-
 import dayjs from "dayjs";
 
+// Zugriff auf $api und Toast Notification
+const { $api } = useNuxtApp()
+const toast = useToast()
+
 defineShortcuts({
   '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
     document.getElementById("searchinput").focus()
   }
 })
@@ -18,6 +19,8 @@ const bankstatements = ref([])
 const bankaccounts = ref([])
 const filterAccount = ref([])
 
+// Status für den Lade-Button
+const isSyncing = ref(false)
 
 const setupPage = async () => {
   bankstatements.value = (await useEntities("bankstatements").select("*, statementallocations(*)", "date", false))
@@ -25,6 +28,34 @@ const setupPage = async () => {
   if(bankaccounts.value.length > 0) filterAccount.value = bankaccounts.value
 }
 
+// Funktion für den Bankabruf
+const syncBankStatements = async () => {
+  isSyncing.value = true
+  try {
+    await $api('/api/functions/services/bankstatementsync', { method: 'POST' })
+
+    toast.add({
+      title: 'Erfolg',
+      description: 'Bankdaten wurden erfolgreich synchronisiert.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Wichtig: Daten neu laden, damit die neuen Buchungen direkt sichtbar sind
+    await setupPage()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Beim Abrufen der Bankdaten ist ein Fehler aufgetreten.',
+      icon: 'i-heroicons-exclamation-circle',
+      color: 'red'
+    })
+  } finally {
+    isSyncing.value = false
+  }
+}
+
 const templateColumns = [
   {
     key: "account",
@@ -100,9 +131,6 @@ const filteredRows = computed(() => {
     }
   }
 
-
-
-
   return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
 })
 
@@ -112,6 +140,17 @@ setupPage()
 <template>
   <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
     <template #right>
+
+      <UButton
+          label="Bankabruf"
+          icon="i-heroicons-arrow-path"
+          color="primary"
+          variant="solid"
+          :loading="isSyncing"
+          @click="syncBankStatements"
+          class="mr-2"
+      />
+
       <UInput
           id="searchinput"
           name="searchinput"
@@ -139,12 +178,12 @@ setupPage()
   <UDashboardToolbar>
     <template #left>
       <USelectMenu
-        :options="bankaccounts"
-        v-model="filterAccount"
-        option-attribute="iban"
-        multiple
-        by="id"
-        :ui-menu="{ width: 'min-w-max' }"
+          :options="bankaccounts"
+          v-model="filterAccount"
+          option-attribute="iban"
+          multiple
+          by="id"
+          :ui-menu="{ width: 'min-w-max' }"
       >
         <template #label>
           Konto
@@ -152,19 +191,6 @@ setupPage()
       </USelectMenu>
     </template>
     <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
@@ -197,12 +223,12 @@ setupPage()
     </template>
     <template #amount-data="{row}">
       <span
-        v-if="row.amount >= 0"
-        class="text-primary-500"
+          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"
+          v-else-if="row.amount < 0"
+          class="text-rose-500"
       >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
     </template>
     <template #openAmount-data="{row}">
@@ -210,23 +236,19 @@ setupPage()
     </template>
     <template #partner-data="{row}">
       <span
-        v-if="row.amount < 0"
+          v-if="row.amount < 0"
       >
           {{row.credName}}
       </span>
       <span
-        v-else-if="row.amount > 0"
+          v-else-if="row.amount > 0"
       >
         {{row.debName}}
       </span>
     </template>
   </UTable>
-
-
 </template>
 
-
-
 <style scoped>
 
 </style>