163 lines
3.6 KiB
Vue
163 lines
3.6 KiB
Vue
<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> |