Changes
This commit is contained in:
@@ -1,11 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,84 +1,150 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen -->
|
||||
<UDashboardNavbar title="Bankbuchungen">
|
||||
|
||||
<!--<InputGroup>
|
||||
<UButton @click="router.push(`/banking/accounts/create/`)">+ Kontakt</UButton>
|
||||
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
</InputGroup>-->
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push('/banking/newAccount')"
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<USelectMenu
|
||||
:options="dataStore.bankAccounts"
|
||||
v-model="filterAccount"
|
||||
option-attribute="iban"
|
||||
multiple
|
||||
by="id"
|
||||
>
|
||||
+ Konto
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="itemColumns"
|
||||
@select="selectItem"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
|
||||
>
|
||||
<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>
|
||||
</UCard>
|
||||
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
const mode = ref("show")
|
||||
|
||||
const itemColumns = [
|
||||
const selectedStatement = ref(null)
|
||||
const showStatementModal = ref(false)
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "iban",
|
||||
label: "IBAN",
|
||||
key: "account",
|
||||
label: "Konto",
|
||||
sortable: true
|
||||
},{
|
||||
key: "valueDate",
|
||||
label: "Valuta",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "bankId",
|
||||
label: "Bank",
|
||||
key: "amount",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "ownerName",
|
||||
label: "Besitzer",
|
||||
key: "partner",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "text",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const selectItem = (item) => {
|
||||
router.push(`/banking/statements/${item.id} `)
|
||||
}
|
||||
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(() => {
|
||||
dataStore.bankAccounts = dataStore.bankAccounts.filter(account => account.used)
|
||||
|
||||
if(!searchString.value) {
|
||||
return dataStore.bankAccounts
|
||||
}
|
||||
|
||||
return dataStore.bankAccounts.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
const bankingStore = useBankingStore()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const newAccounts = ref([])
|
||||
const selectedInstitution = ref("")
|
||||
const institutions = ref([])
|
||||
const setupPage = async () => {
|
||||
const {data,error} = await axios({
|
||||
url:`http://localhost:3002/banking/institutions`,
|
||||
method: "GET"
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
|
||||
institutions.value = data
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const createLink = async () => {
|
||||
const {data,error} = await axios({
|
||||
method: "POST",
|
||||
url:`http://localhost:3002/banking/link?tenant=${dataStore.currentTenant}&institution_id=${selectedInstitution.value}`,
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
|
||||
if(data.link) {
|
||||
window.open(data.link,"_blank")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
title="Neues Bankkonto anbinden"
|
||||
>
|
||||
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UDashboardToolbar>
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="createLink"
|
||||
>
|
||||
Weiter
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
|
||||
<UForm class="p-5">
|
||||
<UFormGroup
|
||||
label="Bank auswählen:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="institutions"
|
||||
searchable
|
||||
v-model="selectedInstitution"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
</UForm>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user