Added Frontend
This commit is contained in:
619
frontend/pages/incomingInvoices/[mode]/[id].vue
Normal file
619
frontend/pages/incomingInvoices/[mode]/[id].vue
Normal file
@@ -0,0 +1,619 @@
|
||||
<script setup>
|
||||
import InputGroup from "~/components/InputGroup.vue";
|
||||
import dayjs from "dayjs";
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
|
||||
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
|
||||
const itemInfo = ref({
|
||||
vendor: 0,
|
||||
expense: true,
|
||||
reference: "",
|
||||
date: null,
|
||||
dueDate: null,
|
||||
paymentType: "Überweisung",
|
||||
description: "",
|
||||
state: "Entwurf",
|
||||
accounts: [
|
||||
{
|
||||
account: null,
|
||||
amountNet: null,
|
||||
amountTax: null,
|
||||
taxType: "19",
|
||||
costCentre: null
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const costcentres = ref([])
|
||||
const vendors = ref([])
|
||||
const accounts = ref([])
|
||||
|
||||
const mode = ref(route.params.mode)
|
||||
|
||||
const setup = async () => {
|
||||
let filetype = (await useEntities("filetags").select()).find(i=> i.incomingDocumentType === "invoices").id
|
||||
console.log(filetype)
|
||||
|
||||
costcentres.value = await useEntities("costcentres").select()
|
||||
vendors.value = await useEntities("vendors").select()
|
||||
accounts.value = await useEntities("accounts").selectSpecial()
|
||||
|
||||
itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
|
||||
|
||||
//TODO: Dirty Fix
|
||||
itemInfo.value.vendor = itemInfo.value.vendor?.id
|
||||
|
||||
await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
|
||||
|
||||
if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
|
||||
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
const useNetMode = ref(false)
|
||||
|
||||
const loadedFile = ref(null)
|
||||
const loadFile = async (id) => {
|
||||
console.log(id)
|
||||
loadedFile.value = await useFiles().selectDocument(id)
|
||||
console.log(loadedFile.value)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const changeNetMode = (mode) => {
|
||||
useNetMode.value = mode
|
||||
|
||||
//itemInfo.value.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const taxOptions = ref([
|
||||
{
|
||||
label: "19% USt",
|
||||
percentage: 19,
|
||||
key: "19"
|
||||
},{
|
||||
label: "7% USt",
|
||||
percentage: 7,
|
||||
key: "7"
|
||||
},{
|
||||
label: "Innergemeintschaftlicher Erwerb 19%",
|
||||
percentage: 0,
|
||||
key: "19I"
|
||||
},{
|
||||
label: "Innergemeintschaftlicher Erwerb 7%",
|
||||
percentage: 0,
|
||||
key: "7I"
|
||||
},{
|
||||
label: "§13b UStG",
|
||||
percentage: 0,
|
||||
key: "13B"
|
||||
},{
|
||||
label: "Keine USt",
|
||||
percentage: 0,
|
||||
key: "null"
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
const totalCalculated = computed(() => {
|
||||
let totalNet = 0
|
||||
let totalAmount19Tax = 0
|
||||
let totalAmount7Tax = 0
|
||||
let totalAmount0Tax = 0
|
||||
let totalGross = 0
|
||||
|
||||
itemInfo.value.accounts.forEach(account => {
|
||||
if(account.amountNet) totalNet += account.amountNet
|
||||
|
||||
if(account.taxType === "19" && account.amountTax) {
|
||||
totalAmount19Tax += account.amountTax
|
||||
}
|
||||
})
|
||||
|
||||
totalGross = Number(totalNet + totalAmount19Tax)
|
||||
|
||||
return {
|
||||
totalNet,
|
||||
totalAmount19Tax,
|
||||
totalGross
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const updateIncomingInvoice = async (setBooked = false) => {
|
||||
|
||||
let item = itemInfo.value
|
||||
delete item.files
|
||||
|
||||
if(item.state === "Vorbereitet" && !setBooked) {
|
||||
item.state = "Entwurf"
|
||||
} else if(item.state === "Vorbereitet" && setBooked) {
|
||||
item.state = "Gebucht"
|
||||
} else if(item.state === "Entwurf" && setBooked) {
|
||||
item.state = "Gebucht"
|
||||
} else {
|
||||
item.state = "Entwurf"
|
||||
}
|
||||
const data = await useEntities('incominginvoices').update(itemInfo.value.id,item)
|
||||
}
|
||||
|
||||
const findIncomingInvoiceErrors = computed(() => {
|
||||
let errors = []
|
||||
|
||||
if(itemInfo.value.vendor === null) errors.push({message: "Es ist kein Lieferant ausgewählt", type: "breaking"})
|
||||
if(itemInfo.value.reference === null || itemInfo.value.reference.length === 0) errors.push({message: "Es ist keine Referenz angegeben", type: "breaking"})
|
||||
if(itemInfo.value.date === null) errors.push({message: "Es ist kein Datum ausgewählt", type: "breaking"})
|
||||
if(itemInfo.value.dueDate === null) errors.push({message: "Es ist kein Fälligkeitsdatum ausgewählt", type: "breaking"})
|
||||
if(itemInfo.value.paymentType === null) errors.push({message: "Es ist keine Zahlart ausgewählt", type: "breaking"})
|
||||
if(itemInfo.value.description === null) errors.push({message: "Es ist keine Beschreibung angegeben", type: "info"})
|
||||
|
||||
|
||||
itemInfo.value.accounts.forEach(account => {
|
||||
if(account.account === null) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
|
||||
if(!accounts.value.find(i => i.id === account.account)) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
|
||||
if(account.amountNet === null) errors.push({message: "Es ist kein Nettobetrag angegeben", type: "breaking"})
|
||||
if(account.taxType === null) errors.push({message: "Es ist kein Steuertyp ausgewählt", type: "breaking"})
|
||||
if(account.costCentre === null) errors.push({message: "Es ist keine Kostenstelle ausgewählt", type: "info"})
|
||||
if(account.taxType === null || account.taxType === "0") errors.push({message: "Es ist keine Steuerart ausgewählt", type: "breaking"})
|
||||
|
||||
})
|
||||
|
||||
|
||||
return errors.sort((a,b) => (a.type === "breaking") ? -1 : 1)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
@click="navigateTo(`/incomingInvoices`)"
|
||||
variant="outline"
|
||||
>
|
||||
Eingangsbelege
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
class="text-xl font-medium"
|
||||
>{{`Eingangsbeleg ${mode === 'show' ? 'anzeigen' : 'bearbeiten'}`}}</h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<ArchiveButton
|
||||
color="rose"
|
||||
variant="outline"
|
||||
type="incominginvoices"
|
||||
@confirmed="useEntities('incominginvoices').archive(route.params.id)"
|
||||
v-if="mode !== 'show'"
|
||||
/>
|
||||
<UButton
|
||||
@click="updateIncomingInvoice(false)"
|
||||
v-if="mode !== 'show'"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="updateIncomingInvoice(true)"
|
||||
v-if="mode !== 'show'"
|
||||
:disabled="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0"
|
||||
>
|
||||
Speichern & Buchen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardPanelContent>
|
||||
<div
|
||||
class="flex justify-between mt-5 workingContainer"
|
||||
v-if="loadedFile"
|
||||
>
|
||||
<object
|
||||
v-if="loadedFile"
|
||||
:data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
|
||||
type="application/pdf"
|
||||
class="mx-5 documentPreview"
|
||||
/>
|
||||
<div class="w-3/5 mx-5">
|
||||
<UAlert
|
||||
class="mb-5"
|
||||
title="Vorhandene Probleme und Informationen:"
|
||||
:color="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
|
||||
variant="outline"
|
||||
v-if="findIncomingInvoiceErrors.length > 0"
|
||||
>
|
||||
<template #description>
|
||||
<ul class="list-disc ml-5">
|
||||
<li v-for="error in findIncomingInvoiceErrors" :class="[...error.type === 'breaking' ? ['text-rose-600'] : ['dark:text-white','text-black']]">
|
||||
{{error.message}}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
</UAlert>
|
||||
|
||||
<div class="scrollContainer">
|
||||
<InputGroup class="mb-3">
|
||||
<UButton
|
||||
:variant="itemInfo.expense ? 'solid' : 'outline'"
|
||||
@click="itemInfo.expense = true"
|
||||
:disabled="mode === 'show'"
|
||||
>
|
||||
Ausgabe
|
||||
</UButton>
|
||||
<UButton
|
||||
:variant="!itemInfo.expense ? 'solid' : 'outline'"
|
||||
@click="itemInfo.expense = false"
|
||||
:disabled="mode === 'show'"
|
||||
>
|
||||
Einnahme
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup label="Lieferant:" >
|
||||
<InputGroup>
|
||||
<USelectMenu
|
||||
:disabled="mode === 'show'"
|
||||
v-model="itemInfo.vendor"
|
||||
:options="vendors"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name','vendorNumber']"
|
||||
class="flex-auto"
|
||||
searchable-placeholder="Suche..."
|
||||
:color="!itemInfo.vendor ? 'rose' : 'primary'"
|
||||
>
|
||||
<template #option="{option}">
|
||||
{{option.vendorNumber}} - {{option.name}}
|
||||
</template>
|
||||
<template #label>
|
||||
{{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<EntityModalButtons
|
||||
type="vendors"
|
||||
:id="itemInfo.vendor"
|
||||
@return-data="(data) => itemInfo.vendor = data.id"
|
||||
:button-edit="mode !== 'show'"
|
||||
:button-create="mode !== 'show'"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-heroicons-x-mark"
|
||||
variant="outline"
|
||||
color="rose"
|
||||
@click="itemInfo.vendor = null"
|
||||
v-if="itemInfo.vendor && mode !== 'show'"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
class="mt-3"
|
||||
label="Rechnungsreferenz:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.reference"
|
||||
:disabled="mode === 'show'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup class="mt-3" gap="2">
|
||||
<UFormGroup label="Rechnungsdatum:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
:color="!itemInfo.date ? 'rose' : 'primary'"
|
||||
:disabled="mode === 'show'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.date" @close="itemInfo.dueDate = itemInfo.date" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Fälligkeitsdatum:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
:disabled="mode === 'show'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.dueDate" @close="close"/>
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup label="Zahlart:" >
|
||||
<USelectMenu
|
||||
:options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
|
||||
v-model="itemInfo.paymentType"
|
||||
:disabled="mode === 'show'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Beschreibung:" >
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
:disabled="mode === 'show'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup class="my-3">
|
||||
<UButton
|
||||
:variant="!useNetMode ? 'solid' : 'outline'"
|
||||
@click="changeNetMode(false)"
|
||||
:disabled="mode === 'show'"
|
||||
>
|
||||
Brutto
|
||||
</UButton>
|
||||
<UButton
|
||||
:variant="useNetMode ? 'solid' : 'outline'"
|
||||
@click="changeNetMode(true)"
|
||||
:disabled="mode === 'show'"
|
||||
>
|
||||
Netto
|
||||
</UButton>
|
||||
|
||||
|
||||
|
||||
<!-- Brutto
|
||||
<UToggle
|
||||
v-model="useNetMode"
|
||||
@update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
|
||||
/>
|
||||
Netto-->
|
||||
</InputGroup>
|
||||
|
||||
<table v-if="itemInfo.accounts.length > 1" class="w-full">
|
||||
<tr>
|
||||
<td>Gesamt exkl. Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19% Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gesamt inkl. Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div
|
||||
class="my-3"
|
||||
v-for="(item,index) in itemInfo.accounts"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Kategorie"
|
||||
class="mb-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="accounts"
|
||||
option-attribute="label"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:disabled="mode === 'show'"
|
||||
:search-attributes="['label','number']"
|
||||
searchable-placeholder="Suche..."
|
||||
v-model="item.account"
|
||||
:color="(item.account && accounts.find(i => i.id === item.account)) ? 'primary' : 'rose'"
|
||||
>
|
||||
<template #label>
|
||||
{{accounts.find(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
|
||||
</template>
|
||||
<template #option="{ option}">
|
||||
{{option.number}} - {{option.label}}
|
||||
</template>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Kostenstelle"
|
||||
class="w-full mb-3"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
:options="costcentres"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:disabled="mode === 'show'"
|
||||
:search-attributes="['label']"
|
||||
searchable-placeholder="Suche..."
|
||||
v-model="item.costCentre"
|
||||
class="flex-auto"
|
||||
>
|
||||
<template #label>
|
||||
{{costcentres.find(i => i.id === item.costCentre) ? costcentres.find(i => i.id === item.costCentre).name : "Keine Kostenstelle ausgewählt" }}
|
||||
</template>
|
||||
<template #option="{option}">
|
||||
<span v-if="option.vehicle">Fahrzeug - {{option.name}}</span>
|
||||
<span v-else-if="option.project">Projekt - {{option.name}}</span>
|
||||
<span v-else-if="option.inventoryitem">Inventarartikel - {{option.name}}</span>
|
||||
<span v-else>{{option.name}}</span>
|
||||
</template>
|
||||
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="rose"
|
||||
v-if="item.costCentre && mode !== 'show'"
|
||||
icon="i-heroicons-x-mark"
|
||||
@click="item.costCentre = null"
|
||||
/>
|
||||
</InputGroup>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung"
|
||||
class="w-full mb-3"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<UInput
|
||||
v-model="item.description"
|
||||
class="flex-auto"
|
||||
:disabled="mode === 'show'"
|
||||
></UInput>
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="rose"
|
||||
v-if="item.description && mode !== 'show'"
|
||||
icon="i-heroicons-x-mark"
|
||||
@click="item.description = null"
|
||||
/>
|
||||
</InputGroup>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
v-if="useNetMode"
|
||||
label="Gesamtbetrag exkl. Steuer in EUR"
|
||||
class="flex-auto truncate"
|
||||
:help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "
|
||||
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
step="0.01"
|
||||
v-model="item.amountNet"
|
||||
:color="!item.amountNet ? 'rose' : 'primary'"
|
||||
:disabled="item.taxType === null || mode === 'show'"
|
||||
@keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
|
||||
item.amountGross = Number(item.amountNet) + NUmber(item.amountTax)"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
v-else
|
||||
label="Gesamtbetrag inkl. Steuer in EUR"
|
||||
class="flex-auto"
|
||||
:help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'} €` : 'Zuerst Steuertyp festlegen' "
|
||||
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
step="0.01"
|
||||
:disabled="item.taxType === null || mode === 'show'"
|
||||
v-model="item.amountGross"
|
||||
:color="!item.amountGross ? 'rose' : 'primary'"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
@keyup="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
|
||||
item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Umsatzsteuer"
|
||||
class="w-32"
|
||||
:help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="taxOptions"
|
||||
:disabled="mode === 'show'"
|
||||
:color="item.taxType === null || item.taxType === '0' ? 'rose' : 'primary'"
|
||||
v-model="item.taxType"
|
||||
value-attribute="key"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
option-attribute="label"
|
||||
@change="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
|
||||
item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
<UButton
|
||||
class="mt-3"
|
||||
v-if="mode !== 'show'"
|
||||
@click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
|
||||
>
|
||||
Betrag aufteilen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="index !== 0 && mode !== 'show'"
|
||||
class="mt-3"
|
||||
variant="ghost"
|
||||
color="rose"
|
||||
@click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
|
||||
>
|
||||
Position entfernen
|
||||
</UButton>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UProgress v-else animation="carousel"/>
|
||||
</UDashboardPanelContent>
|
||||
|
||||
<PageLeaveGuard :when="true"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.documentPreview {
|
||||
aspect-ratio: 1 / 1.414;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.scrollContainer {
|
||||
overflow-y: scroll;
|
||||
height: 70vh;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollContainer::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.lineItemRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.workingContainer {
|
||||
height: 80vh;
|
||||
}
|
||||
</style>
|
||||
294
frontend/pages/incomingInvoices/index.vue
Normal file
294
frontend/pages/incomingInvoices/index.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs"
|
||||
import {useSum} from "~/composables/useSum.js";
|
||||
|
||||
// Zugriff auf API und Toast
|
||||
const { $api } = useNuxtApp()
|
||||
const toast = useToast()
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/incomingInvoices/[mode]")
|
||||
},
|
||||
'Enter': {
|
||||
usingInput: true,
|
||||
handler: () => {
|
||||
router.push(`/incomingInvoices/show/${filteredRows.value[selectedItem.value].id}`)
|
||||
}
|
||||
},
|
||||
'arrowdown': () => {
|
||||
if(selectedItem.value < filteredRows.value.length - 1) {
|
||||
selectedItem.value += 1
|
||||
} else {
|
||||
selectedItem.value = 0
|
||||
}
|
||||
},
|
||||
'arrowup': () => {
|
||||
if(selectedItem.value === 0) {
|
||||
selectedItem.value = filteredRows.value.length - 1
|
||||
} else {
|
||||
selectedItem.value -= 1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const tempStore = useTempStore()
|
||||
const router = useRouter()
|
||||
|
||||
const sum = useSum()
|
||||
|
||||
const items = ref([])
|
||||
const selectedItem = ref(0)
|
||||
const sort = ref({
|
||||
column: 'date',
|
||||
direction: 'desc'
|
||||
})
|
||||
|
||||
// Status für den Button
|
||||
const isPreparing = ref(false)
|
||||
|
||||
const type = "incominginvoices"
|
||||
const dataType = dataStore.dataTypes[type]
|
||||
|
||||
const setupPage = async () => {
|
||||
items.value = await useEntities(type).select("*, vendor(id,name), statementallocations(id,amount)",sort.value.column,sort.value.direction === "asc")
|
||||
}
|
||||
|
||||
// Funktion zum Vorbereiten der Belege
|
||||
const prepareInvoices = async () => {
|
||||
isPreparing.value = true
|
||||
try {
|
||||
await $api('/api/functions/services/prepareincominginvoices', { method: 'POST' })
|
||||
|
||||
toast.add({
|
||||
title: 'Erfolg',
|
||||
description: 'Eingangsbelege wurden vorbereitet.',
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'green'
|
||||
})
|
||||
|
||||
// Liste neu laden
|
||||
await setupPage()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.add({
|
||||
title: 'Fehler',
|
||||
description: 'Beim Vorbereiten der Belege ist ein Fehler aufgetreten.',
|
||||
icon: 'i-heroicons-exclamation-circle',
|
||||
color: 'red'
|
||||
})
|
||||
} finally {
|
||||
isPreparing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
|
||||
const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
|
||||
const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
|
||||
|
||||
const selectableFilters = ref(dataType.filters.map(i => i.name))
|
||||
const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
|
||||
|
||||
const searchString = ref(tempStore.searchStrings[type] ||'')
|
||||
|
||||
const clearSearchString = () => {
|
||||
tempStore.clearSearchString(type)
|
||||
searchString.value = ''
|
||||
}
|
||||
const filteredRows = computed(() => {
|
||||
let tempItems = items.value.map(i => {
|
||||
return {
|
||||
...i,
|
||||
class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
|
||||
}
|
||||
})
|
||||
|
||||
if(selectedFilters.value.length > 0) {
|
||||
selectedFilters.value.forEach(filterName => {
|
||||
let filter = dataType.filters.find(i => i.name === filterName)
|
||||
tempItems = tempItems.filter(filter.filterFunction)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
tempItems = useSearch(searchString.value, tempItems)
|
||||
|
||||
|
||||
return [...tempItems.filter(i => i.state === "Vorbereitet"), ...tempItems.filter(i => i.state !== "Vorbereitet")]
|
||||
|
||||
|
||||
})
|
||||
|
||||
const displayCurrency = (value, currency = "€") => {
|
||||
return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
|
||||
}
|
||||
const getInvoiceSum = (invoice) => {
|
||||
let sum = 0
|
||||
invoice.accounts.forEach(account => {
|
||||
sum += account.amountTax
|
||||
sum += account.amountNet
|
||||
})
|
||||
return sum.toFixed(2)
|
||||
}
|
||||
|
||||
const isPaid = (item) => {
|
||||
let amountPaid = 0
|
||||
item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
|
||||
return Math.abs(amountPaid) === Math.abs(Number(getInvoiceSum(item)))
|
||||
}
|
||||
|
||||
const selectIncomingInvoice = (invoice) => {
|
||||
if(invoice.state === "Vorbereitet" ) {
|
||||
router.push(`/incomingInvoices/edit/${invoice.id}`)
|
||||
} else {
|
||||
router.push(`/incomingInvoices/show/${invoice.id}`)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Eingangsbelege" :badge="filteredRows.length">
|
||||
<template #right>
|
||||
|
||||
<UButton
|
||||
label="Belege vorbereiten"
|
||||
icon="i-heroicons-sparkles"
|
||||
color="primary"
|
||||
variant="solid"
|
||||
:loading="isPreparing"
|
||||
@click="prepareInvoices"
|
||||
class="mr-2"
|
||||
/>
|
||||
|
||||
<UInput
|
||||
id="searchinput"
|
||||
v-model="searchString"
|
||||
icon="i-heroicons-funnel"
|
||||
autocomplete="off"
|
||||
placeholder="Suche..."
|
||||
class="hidden lg:block"
|
||||
@keydown.esc="$event.target.blur()"
|
||||
@change="tempStore.modifySearchString(type,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="dataType.templateColumns.filter(i => !i.disabledInTable)"
|
||||
multiple
|
||||
class="hidden lg:block"
|
||||
by="key"
|
||||
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
@change="tempStore.modifyColumns(type,selectedColumns)"
|
||||
>
|
||||
<template #label>
|
||||
Spalten
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<USelectMenu
|
||||
v-if="selectableFilters.length > 0"
|
||||
icon="i-heroicons-adjustments-horizontal-solid"
|
||||
multiple
|
||||
v-model="selectedFilters"
|
||||
:options="selectableFilters"
|
||||
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
>
|
||||
<template #label>
|
||||
Filter
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
|
||||
<UTabs
|
||||
class="m-3"
|
||||
:items="[{label: 'In Bearbeitung'},{label: 'Gebucht'}]"
|
||||
>
|
||||
<template #default="{item}">
|
||||
{{item.label}}
|
||||
<UBadge
|
||||
variant="outline"
|
||||
class="ml-2"
|
||||
>
|
||||
{{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
|
||||
</UBadge>
|
||||
</template>
|
||||
<template #item="{item}">
|
||||
<div style="height: 80dvh; overflow-y: scroll">
|
||||
<UTable
|
||||
v-model:sort="sort"
|
||||
sort-mode="manual"
|
||||
@update:sort="setupPage"
|
||||
:rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => selectIncomingInvoice(i) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
|
||||
>
|
||||
<template #reference-data="{row}">
|
||||
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
|
||||
<span v-else>{{row.reference}}</span>
|
||||
</template>
|
||||
<template #state-data="{row}">
|
||||
<span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
|
||||
<span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
|
||||
<span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
<template #vendor-data="{row}">
|
||||
{{row.vendor ? row.vendor.name : ""}}
|
||||
</template>
|
||||
<template #amount-data="{row}">
|
||||
{{displayCurrency(sum.getIncomingInvoiceSum(row))}}
|
||||
</template>
|
||||
<template #dueDate-data="{row}">
|
||||
<span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
|
||||
</template>
|
||||
<template #paid-data="{row}">
|
||||
<span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
|
||||
<span v-else class="text-rose-600">Offen</span>
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user