Added Frontend
This commit is contained in:
222
frontend/pages/accounts/index.vue
Normal file
222
frontend/pages/accounts/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
}
|
||||
})
|
||||
|
||||
const tempStore = useTempStore()
|
||||
const router = useRouter()
|
||||
|
||||
const items = ref([])
|
||||
const dataLoaded = ref(false)
|
||||
|
||||
const statementallocations = ref([])
|
||||
const incominginvoices = ref([])
|
||||
|
||||
const setupPage = async () => {
|
||||
items.value = await useEntities("accounts").selectSpecial()
|
||||
|
||||
statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)"))
|
||||
incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
|
||||
|
||||
items.value = await Promise.all(items.value.map(async (i) => {
|
||||
// let renderedAllocationsTemp = await renderedAllocations(i.id)
|
||||
// let saldo = getSaldo(renderedAllocationsTemp)
|
||||
|
||||
return {
|
||||
...i,
|
||||
// saldo: saldo,
|
||||
// allocations: renderedAllocationsTemp.length,
|
||||
}
|
||||
|
||||
}))
|
||||
dataLoaded.value = true
|
||||
|
||||
|
||||
}
|
||||
|
||||
const renderedAllocations = async (account) => {
|
||||
|
||||
let statementallocationslocal = statementallocations.value.filter(i => i.account === account)
|
||||
let incominginvoiceslocal = incominginvoices.value.filter(i => i.accounts.find(x => x.account === account))
|
||||
|
||||
let tempstatementallocations = statementallocationslocal.map(i => {
|
||||
return {
|
||||
...i,
|
||||
type: "statementallocation",
|
||||
date: i.bankstatement.date,
|
||||
partner: i.bankstatement ? (i.bankstatement.debName ? i.bankstatement.debName : (i.bankstatement.credName ? i.bankstatement.credName : '')) : ''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
let incominginvoicesallocations = []
|
||||
|
||||
incominginvoiceslocal.forEach(i => {
|
||||
|
||||
incominginvoicesallocations.push(...i.accounts.filter(x => x.account === account).map(x => {
|
||||
return {
|
||||
...x,
|
||||
incominginvoiceid: i.id,
|
||||
type: "incominginvoice",
|
||||
amount: x.amountGross ? x.amountGross : x.amountNet,
|
||||
date: i.date,
|
||||
partner: i.vendor.name,
|
||||
description: i.description,
|
||||
color: i.expense ? "red" : "green",
|
||||
expense: i.expense
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
return [...tempstatementallocations, ... incominginvoicesallocations]
|
||||
}
|
||||
|
||||
const getSaldo = (allocations) => {
|
||||
let value = 0
|
||||
|
||||
allocations.forEach(i => {
|
||||
if(i.incominginvoiceid) {
|
||||
if(i.expense) {
|
||||
value = value - i.amount
|
||||
} else {
|
||||
value += i.amount
|
||||
}
|
||||
} else {
|
||||
value += i.amount
|
||||
}
|
||||
})
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "number",
|
||||
label: "Nummer"
|
||||
},{
|
||||
key: "label",
|
||||
label: "Name"
|
||||
},/*{
|
||||
key: "allocations",
|
||||
label: "Buchungen"
|
||||
},{
|
||||
key: "saldo",
|
||||
label: "Saldo"
|
||||
},*/ {
|
||||
key: "description",
|
||||
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 selectedFilters = ref(['Nur offene anzeigen'])
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
let temp = items.value
|
||||
|
||||
|
||||
return useSearch(searchString.value, temp)
|
||||
})
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Buchungskonten" :badge="filteredRows.length">
|
||||
<template #right>
|
||||
<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 #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
|
||||
v-model="selectedFilters"
|
||||
:options="['Nur offene anzeigen']"
|
||||
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
>
|
||||
<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(`/accounts/show/${i.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
|
||||
>
|
||||
<template #allocations-data="{row}">
|
||||
<span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
|
||||
<USkeleton v-else class="h-4 w-[250px]" />
|
||||
|
||||
</template>
|
||||
<template #saldo-data="{row}">
|
||||
<span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
|
||||
<USkeleton v-else class="h-4 w-[250px]" />
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
170
frontend/pages/accounts/show/[id].vue
Normal file
170
frontend/pages/accounts/show/[id].vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const itemInfo = ref(null)
|
||||
const statementallocations = ref([])
|
||||
const incominginvoices = ref([])
|
||||
|
||||
const setup = async () => {
|
||||
itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
|
||||
statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
|
||||
incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
const selectAllocation = (allocation) => {
|
||||
if(allocation.type === "statementallocation") {
|
||||
router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
|
||||
} else if(allocation.type === "incominginvoice") {
|
||||
router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
|
||||
}
|
||||
}
|
||||
|
||||
const renderedAllocations = computed(() => {
|
||||
|
||||
let tempstatementallocations = statementallocations.value.map(i => {
|
||||
return {
|
||||
...i,
|
||||
type: "statementallocation",
|
||||
date: i.bs_id.date,
|
||||
partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
let incominginvoicesallocations = []
|
||||
|
||||
incominginvoices.value.forEach(i => {
|
||||
|
||||
incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
|
||||
return {
|
||||
...x,
|
||||
incominginvoiceid: i.id,
|
||||
type: "incominginvoice",
|
||||
amount: x.amountGross ? x.amountGross : x.amountNet,
|
||||
date: i.date,
|
||||
partner: i.vendor.name,
|
||||
description: i.description,
|
||||
color: i.expense ? "red" : "green",
|
||||
expense: i.expense
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
return [...tempstatementallocations, ... incominginvoicesallocations]
|
||||
})
|
||||
|
||||
const saldo = computed(() => {
|
||||
let value = 0
|
||||
|
||||
renderedAllocations.value.forEach(i => {
|
||||
if(i.incominginvoiceid) {
|
||||
if(i.expense) {
|
||||
value = value - i.amount
|
||||
} else {
|
||||
value += i.amount
|
||||
}
|
||||
} else {
|
||||
value += i.amount
|
||||
}
|
||||
})
|
||||
|
||||
return value
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.back()/*router.push(`/standardEntity/${type}`)*/"
|
||||
>
|
||||
Zurück
|
||||
</UButton>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/accounts`)"
|
||||
>
|
||||
Übersicht
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
:class="['text-xl','font-medium']"
|
||||
>{{itemInfo ? `Buchungskonto: ${itemInfo.number} - ${itemInfo.label}`: '' }}</h1>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardPanelContent>
|
||||
<UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5" v-if="item.label === 'Information'">
|
||||
<div class="text-wrap">
|
||||
<table class="w-full" v-if="itemInfo">
|
||||
<tr>
|
||||
<td>Nummer:</td>
|
||||
<td>{{itemInfo.number}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Name:</td>
|
||||
<td>{{itemInfo.label}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anzahl:</td>
|
||||
<td>{{renderedAllocations.length}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Saldo:</td>
|
||||
<td>{{useCurrency(saldo)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beschreibung:</td>
|
||||
<td>{{itemInfo.description}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</UCard>
|
||||
<UCard class="mt-5" v-if="item.label === 'Buchungen'">
|
||||
<UTable
|
||||
v-if="statementallocations"
|
||||
:rows="renderedAllocations"
|
||||
:columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
|
||||
@select="(i) => selectAllocation(i)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
|
||||
>
|
||||
<template #amount-data="{row}">
|
||||
<span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
|
||||
<span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
|
||||
<span v-else>{{useCurrency(row.amount)}}</span>
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
|
||||
</template>
|
||||
<template #description-data="{row}">
|
||||
{{row.description ? row.description : ''}}
|
||||
</template>
|
||||
</UTable>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
</UDashboardPanelContent>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
td {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
vertical-align: top;
|
||||
padding-bottom: 0.15em;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user