FEDEO/pages/settings/banking/index.vue

<script setup>
const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()
const url = useRequestURL()
const supabase = useSupabaseClient()
const toast = useToast()

const showAddBankRequisition = ref(false)
const bicBankToAdd = ref("")
const bankData = ref({})
const showAlert = ref(false)
const reqData = ref({})

const bankaccounts = ref([])

const showReqData = ref(false)

const setupPage = async () => {
  if(route.query.ref) {
    reqData.value = await useFunctions().useBankingListRequisitions(route.query.ref)
    if(reqData.value.accounts.length > 0){
      showReqData.value = true
    }
  }

  bankaccounts.value = await useEntities("bankaccounts").select()
}

const checkBIC = async () => {
  bankData.value = await useFunctions().useBankingCheckInstitutions(bicBankToAdd.value)
  showAlert.value = true
}

const generateLink = async (bankId) => {
  try {

    const link = await useFunctions().useBankingGenerateLink(bankId || bankData.value.id)

    await navigateTo(link, {
      open: {
        target: "_blank"
      }
    })
  } catch (error) {
    console.log(error)
  }
}

const addAccount = async (account) => {
    let accountData = {
      accountId: account.id,
      ownerName: account.owner_name,
      iban: account.iban,
      tenant: profileStore.currentTenant,
      bankId: account.institution_id
    }

    const {data,error} = await supabase.from("bankaccounts").insert(accountData).select()
    if(error) {
      toast.add({title: "Es gab einen Fehler bei hinzufügen des Accounts", color:"rose"})
    } else if(data) {
      toast.add({title: "Account erfolgreich hinzugefügt"})
    }
}

const updateAccount = async (account) => {

    let bankaccountId = bankaccounts.value.find(i => i.iban === account.iban).id

    const res = await useEntities("bankaccounts").update(bankaccountId, {accountId: account.id, expired: false})

    if(!res) {
      console.log(error)
      toast.add({title: "Es gab einen Fehler bei aktualisieren des Accounts", color:"rose"})
    } else {
      toast.add({title: "Account erfolgreich aktualisiert"})
      reqData.value = null
      setupPage()
    }
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Bankkonten">
    <template #right>
      <UButton
        @click="showAddBankRequisition = true"
      >
        + Bankverbindung
      </UButton>
      <USlideover
        v-model="showAddBankRequisition"
      >
        <UCard
          class="h-full"
        >
          <template #header>
            <p>Bankverbindung hinzufügen</p>
          </template>

          <UFormGroup
            label="BIC:"
            class="flex-auto"
          >
            <InputGroup class="w-full">
              <UInput
                  v-model="bicBankToAdd"
                  class="flex-auto"
                  @keydown.enter="checkBIC"
              />
              <UButton
                @click="checkBIC"
              >
                Check
              </UButton>
            </InputGroup>

          </UFormGroup>
          <UAlert
            v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
            title="Bank gefunden"
            icon="i-heroicons-check-circle"
            color="primary"
            variant="outline"
            class="mt-3"
            :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
          />
          <UAlert
            v-else-if="showAlert && !bankData.id"
            title="Bank nicht gefunden"
            icon="i-heroicons-x-circle"
            color="rose"
            variant="outline"
            class="mt-3"
          />

        </UCard>
      </USlideover>
    </template>
  </UDashboardNavbar>

  <UModal v-model="showReqData">
    <UCard>
      <template #header>
        Verfügbare Bankkonten
      </template>
      <div
          v-for="account in reqData.accounts"
          class="p-2 m-3 flex justify-between"
      >
        {{account.iban}} - {{account.owner_name}}

        <UButton
            @click="addAccount(account)"
            v-if="!bankaccounts.find(i => i.iban === account.iban)"
        >
          Hinzufügen
        </UButton>
        <UButton
            @click="updateAccount(account)"
            v-else
        >
          Aktualisieren
        </UButton>
      </div>
    </UCard>
  </UModal>



<!--  <UButton @click="setupPage">Setup</UButton>
  <div v-if="route.query.reqId">
    {{reqData}}
  </div>-->

  <UTable
    :rows="bankaccounts"
    :columns="[
        {
          key: 'expired',
          label: 'Aktiv'
        },{
          key: 'iban',
          label: 'IBAN'
        },{
          key: 'bankId',
          label: 'Bank'
        },{
          key: 'ownerName',
          label: 'Kontoinhaber'
        },{
          key: 'balance',
          label: 'Saldo'
        },
    ]"
  >
    <template #expired-data="{row}">
      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
      <span v-else class="text-primary">Aktiv</span>
      <UButton
        v-if="row.expired"
        variant="outline"
        class="ml-2"
        @click="generateLink(row.bankId)"
      >Aktualisieren</UButton>
    </template>
    <template #balance-data="{row}">
      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
    </template>
    <template #iban-data="{row}">
      {{row.iban.match(/.{1,5}/g).join(" ")}}
    </template>
  </UTable>

</template>

<style scoped>

</style>