Restructured Project Rep
This commit is contained in:
162
pages/banking/index.vue
Normal file
162
pages/banking/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Bankbuchungen">
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<USelectMenu
|
||||
:options="dataStore.bankAccounts"
|
||||
v-model="filterAccount"
|
||||
option-attribute="iban"
|
||||
multiple
|
||||
by="id"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<UFormGroup>
|
||||
<USelectMenu
|
||||
:options="dataStore.createddocuments"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const selectedStatement = ref(null)
|
||||
const showStatementModal = ref(false)
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "account",
|
||||
label: "Konto",
|
||||
sortable: true
|
||||
},{
|
||||
key: "valueDate",
|
||||
label: "Valuta",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "partner",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "text",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
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(() => {
|
||||
return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
138
pages/banking/statements/[[accountId]].vue
Normal file
138
pages/banking/statements/[[accountId]].vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
|
||||
const searchString = ref("")
|
||||
const showAssigned = ref(false)
|
||||
const selectedAccount = ref(0)
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
let statements = dataStore.bankStatements
|
||||
|
||||
if(!showAssigned.value) {
|
||||
statements = statements.filter(statement => !statement.customerInvoice || !statement.vendorInvoice)
|
||||
}
|
||||
|
||||
if(selectedAccount.value !== 0) {
|
||||
statements = statements.filter(statement => statement.account === selectedAccount.value)
|
||||
}
|
||||
|
||||
if(searchString.value.length > 0) {
|
||||
statements = statements.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return statements
|
||||
})
|
||||
|
||||
|
||||
|
||||
const showStatementSlideover = ref(false)
|
||||
const selectedStatement = ref({})
|
||||
|
||||
const selectStatement = (statement) => {
|
||||
selectedStatement.value = statement
|
||||
showStatementSlideover.value = true
|
||||
}
|
||||
|
||||
const statementColumns = [
|
||||
{
|
||||
key:"amount",
|
||||
label: "Betrag"
|
||||
},
|
||||
{
|
||||
key:"date",
|
||||
label: "Datum",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "credName",
|
||||
label: "Empfänger"
|
||||
},
|
||||
{
|
||||
key: "debName",
|
||||
label: "Sender"
|
||||
},
|
||||
{
|
||||
key: "text",
|
||||
label: "Verwendungszweck"
|
||||
},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USlideover
|
||||
v-model="showStatementSlideover"
|
||||
>
|
||||
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
|
||||
|
||||
|
||||
|
||||
<DevOnly>
|
||||
{{selectedStatement}}
|
||||
</DevOnly>
|
||||
</UCard>
|
||||
|
||||
</USlideover>
|
||||
|
||||
<InputGroup :gap="2">
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
<USelectMenu
|
||||
:options="dataStore.bankAccounts.filter(account => account.used)"
|
||||
v-model="selectedAccount"
|
||||
option-attribute="iban"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.bankAccounts.find(account => account.id === selectedAccount) ? dataStore.bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UCheckbox
|
||||
v-model="showAssigned"
|
||||
label="Zugeordnete Anzeigen"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="statementColumns"
|
||||
@select="selectStatement"
|
||||
>
|
||||
<template #amount-data="{row}">
|
||||
<span
|
||||
v-if="row.amount >= 0"
|
||||
class="text-primary-500"
|
||||
>
|
||||
{{row.amount.toFixed(2) + " €"}}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.amount < 0"
|
||||
class="text-rose-600"
|
||||
>
|
||||
{{row.amount.toFixed(2) + " €"}}
|
||||
</span>
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YY")}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user