FEDEO/pages/banking/index.vue

<script setup>
import dayjs from "dayjs";

// Zugriff auf $api und Toast Notification
const { $api } = useNuxtApp()
const toast = useToast()

defineShortcuts({
  '/': () => {
    document.getElementById("searchinput").focus()
  }
})

const tempStore = useTempStore()
const router = useRouter()
const route = useRoute()

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))
  bankaccounts.value = await useEntities("bankaccounts").select()
  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",
    label: "Konto"
  },{
    key: "valueDate",
    label: "Valuta"
  },
  {
    key: "amount",
    label: "Betrag"
  },
  {
    key: "openAmount",
    label: "Offener Betrag"
  },
  {
    key: "partner",
    label: "Name"
  },
  {
    key: "text",
    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 calculateOpenSum = (statement) => {
  let startingAmount = 0

  statement.statementallocations.forEach(item => {
    startingAmount += item.amount
  })

  return (statement.amount - startingAmount).toFixed(2)
}

const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] ? tempStore.filters["banking"]["main"] : ['Nur offene anzeigen'])

const filteredRows = computed(() => {
  let temp = bankstatements.value

  if(route.query.filter) {
    console.log(route.query.filter)
    temp = temp.filter(i => JSON.parse(route.query.filter).includes(i.id))
  } else {
    if(selectedFilters.value.includes("Nur offene anzeigen")){
      temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
    }

    if(selectedFilters.value.includes("Nur positive anzeigen")){
      temp = temp.filter(i => i.amount >= 0)
    }

    if(selectedFilters.value.includes("Nur negative anzeigen")){
      temp = temp.filter(i => i.amount < 0)
    }
  }

  return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
})

setupPage()
</script>

<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"
          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 #left>
      <USelectMenu
          :options="bankaccounts"
          v-model="filterAccount"
          option-attribute="iban"
          multiple
          by="id"
          :ui-menu="{ width: 'min-w-max' }"
      >
        <template #label>
          Konto
        </template>
      </USelectMenu>
    </template>
    <template #right>
      <USelectMenu
          icon="i-heroicons-adjustments-horizontal-solid"
          multiple
          v-model="selectedFilters"
          :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
          :ui-menu="{ width: 'min-w-max' }"
          @change="tempStore.modifyFilter('banking','main',selectedFilters)"
      >
        <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(`/banking/statements/edit/${i.id}`)"
      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
  >

    <template #account-data="{row}">
      {{row.account ? bankaccounts.find(i => i.id === 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 #openAmount-data="{row}">
      {{displayCurrency(calculateOpenSum(row))}}
    </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>
  <PageLeaveGuard :when="isSyncing"/>
</template>

<style scoped>

</style>