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"
@@ -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
@@ -221,12 +247,8 @@ setupPage()
       </span>
     </template>
   </UTable>
-
-
 </template>
 
-
-
 <style scoped>
 
 </style>