flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Redone IncomingInvoice Show/Edit

Browse Source
This commit is contained in:
florianfederspiel
2025-11-14 17:48:15 +01:00
parent 32c71fe49b
commit da074df63c
2 changed files with 46 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
pages/incomingInvoices/edit/[id].vue → pages/incomingInvoices/[mode]/[id].vue
View File

@@ -32,6 +32,8 @@ 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)
@@ -168,21 +170,38 @@ const findIncomingInvoiceErrors = computed(() => {
</script>
<template>
<UDashboardNavbar :title="'Eingangsbeleg erstellen'">
<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
@@ -192,6 +211,7 @@ const findIncomingInvoiceErrors = computed(() => {
<UDashboardPanelContent>
<div
class="flex justify-between mt-5 workingContainer"
v-if="loadedFile"
>
<object
v-if="loadedFile"
@@ -223,12 +243,14 @@ const findIncomingInvoiceErrors = computed(() => {
<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>
@@ -237,6 +259,7 @@ const findIncomingInvoiceErrors = computed(() => {
<UFormGroup label="Lieferant:" >
<InputGroup>
<USelectMenu
:disabled="mode === 'show'"
v-model="itemInfo.vendor"
:options="vendors"
option-attribute="name"
@@ -258,12 +281,15 @@ const findIncomingInvoiceErrors = computed(() => {
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>
@@ -276,6 +302,7 @@ const findIncomingInvoiceErrors = computed(() => {
>
<UInput
v-model="itemInfo.reference"
:disabled="mode === 'show'"
/>
</UFormGroup>
@@ -287,6 +314,7 @@ const findIncomingInvoiceErrors = computed(() => {
: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 }">
@@ -301,10 +329,11 @@ const findIncomingInvoiceErrors = computed(() => {
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" />
<LazyDatePicker v-model="itemInfo.dueDate" @close="close"/>
</template>
</UPopover>
</UFormGroup>
@@ -316,12 +345,14 @@ const findIncomingInvoiceErrors = computed(() => {
<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>
@@ -329,12 +360,14 @@ const findIncomingInvoiceErrors = computed(() => {
<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>
@@ -377,6 +410,7 @@ const findIncomingInvoiceErrors = computed(() => {
option-attribute="label"
value-attribute="id"
searchable
:disabled="mode === 'show'"
:search-attributes="['label']"
searchable-placeholder="Suche..."
v-model="item.account"
@@ -398,6 +432,7 @@ const findIncomingInvoiceErrors = computed(() => {
option-attribute="name"
value-attribute="id"
searchable
:disabled="mode === 'show'"
:search-attributes="['label']"
searchable-placeholder="Suche..."
v-model="item.costCentre"
@@ -417,7 +452,7 @@ const findIncomingInvoiceErrors = computed(() => {
<UButton
variant="outline"
color="rose"
v-if="item.costCentre"
v-if="item.costCentre && mode !== 'show'"
icon="i-heroicons-x-mark"
@click="item.costCentre = null"
/>
@@ -431,11 +466,12 @@ const findIncomingInvoiceErrors = computed(() => {
<UInput
v-model="item.description"
class="flex-auto"
:disabled="mode === 'show'"
></UInput>
<UButton
variant="outline"
color="rose"
v-if="item.description"
v-if="item.description && mode !== 'show'"
icon="i-heroicons-x-mark"
@click="item.description = null"
/>
@@ -457,7 +493,7 @@ const findIncomingInvoiceErrors = computed(() => {
step="0.01"
v-model="item.amountNet"
:color="!item.amountNet ? 'rose' : 'primary'"
:disabled="item.taxType === null"
: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)"
>
@@ -476,7 +512,7 @@ const findIncomingInvoiceErrors = computed(() => {
<UInput
type="number"
step="0.01"
:disabled="item.taxType === null"
:disabled="item.taxType === null || mode === 'show'"
v-model="item.amountGross"
:color="!item.amountGross ? 'rose' : 'primary'"
:ui-menu="{ width: 'min-w-max' }"
@@ -496,6 +532,7 @@ const findIncomingInvoiceErrors = computed(() => {
>
<USelectMenu
:options="taxOptions"
:disabled="mode === 'show'"
v-model="item.taxType"
value-attribute="key"
:ui-menu="{ width: 'min-w-max' }"
@@ -513,12 +550,13 @@ const findIncomingInvoiceErrors = computed(() => {
<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"
v-if="index !== 0 && mode !== 'show'"
class="mt-3"
variant="ghost"
color="rose"
@@ -532,6 +570,7 @@ const findIncomingInvoiceErrors = computed(() => {
</div>
</div>
</div>
<UProgress v-else animation="carousel"/>
</UDashboardPanelContent>

163
pages/incomingInvoices/show/[id].vue
View File

@@ -1,163 +0,0 @@
<script setup>
import dayjs from "dayjs";
const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()
//Working
const mode = ref(route.params.mode || "show")
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
}
]
})
//Functions
const currentDocument = ref(null)
const loading = ref(true)
const setupPage = async () => {
if((mode.value === "show") && route.params.id){
itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id,"*, files(*), vendor(*)")
if(process.dev) console.log(itemInfo.value)
currentDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
}
loading.value = false
}
const setState = async (newState) => {
let item = itemInfo.value
delete item.files
if(item.vendor.id) item.vendor = item.vendor.id
item.state = newState
await useEntities('incominginvoices').update(route.params.id,item)
await router.push("/incomingInvoices")
}
setupPage()
</script>
<template>
<UDashboardNavbar :title="'Eingangsbeleg anzeigen'">
<template #left>
<UButton
to="/incominginvoices"
icon="i-heroicons-chevron-left"
variant="outline"
>
Übersicht
</UButton>
</template>
<template #right>
<UButton
@click="router.push(`/incomingInvoices/edit/${itemInfo.id}`)"
v-if="itemInfo.state !== 'Gebucht'"
>
Bearbeiten
</UButton>
<UButton
@click="setState('Gebucht')"
v-if="itemInfo.state !== 'Gebucht'"
color="rose"
>
Status auf Gebucht
</UButton>
</template>
</UDashboardNavbar>
<UDashboardPanelContent v-if="!loading">
<div
class="flex justify-between mt-5"
>
<object
v-if="currentDocument ? currentDocument.url : false"
:data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
type="application/pdf"
class="mx-5 w-2/5 documentPreview"
/>
<div class="w-1/2 mx-5">
<UCard class="truncate mb-5">
<p>Status: {{itemInfo.state}}</p>
<p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
<p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
<p v-if="itemInfo.vendor">Lieferant: <nuxt-link :to="`/standardEntity/vendors/show/${itemInfo.vendor.id}`">{{itemInfo.vendor.name}}</nuxt-link></p>
<p>Bezahlt: {{itemInfo.paid ? "Ja" : "Nein"}}</p>
<p>Beschreibung: {{itemInfo.description}}</p>
<!-- TODO: Buchungszeilen darstellen -->
</UCard>
<UCard class="scrollContainer">
<HistoryDisplay
type="incomingInvoice"
v-if="itemInfo"
:element-id="itemInfo.id"
render-headline
/>
</UCard>
</div>
</div>
</UDashboardPanelContent>
<UProgress class="mt-3 mx-3" v-else animation="carousel"/>
</template>
<style scoped>
.documentPreview {
aspect-ratio: 1 / 1.414;
}
.scrollContainer {
overflow-y: scroll;
padding-left: 1em;
padding-right: 1em;
height: 75vh;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.scrollContainer::-webkit-scrollbar {
display: none;
}
.lineItemRow {
display: flex;
flex-direction: row;
}
</style>