671 lines
34 KiB
Vue
671 lines
34 KiB
Vue
<!-- Rechnungsart: Wiederkehren, einmalig, Abschlag (siehe Chat, wirkt sich auf Leistungszeitraum aus) -->
|
||
<!-- TODO: Leistungsdatum -->
|
||
<!-- TODO: Leistungsstart -->
|
||
<!-- TODO: Leistungsende -->
|
||
|
||
<!-- TODO: Steuersatz in LineItem -->
|
||
<!-- TODO: Stunden und Tagessatz aus Settings -->
|
||
<!-- TODO: Client-side validation -->
|
||
|
||
<script setup lang="ts">
|
||
|
||
import { ref, computed, watch, onMounted, onUpdated, useTemplateRef } from "vue"
|
||
import { Customer, Invoice, Contact, PaymentTerms, Address } from "@/types"
|
||
import { newCustomer, newContact, newBillingData } from '@/types/index.d'
|
||
import { toCurrency, toLocalDate, toShortISOString, cn, calcDueDate, toFixedRounded } from '@/lib/utils'
|
||
import axios from 'axios'
|
||
import { type DateValue, DateFormatter, getLocalTimeZone, parseDate, fromDate } from "@internationalized/date"
|
||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'
|
||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input';
|
||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
|
||
import { StatusBadge, statusBadgeLabels, statusTextStyle, StatusBadgeVariants } from '@/components/ui/status-badge'
|
||
import LineItemTable from '@/components/documents/LineItemTable.vue'
|
||
import { Eye, FileText, CircleEllipsis, Trash, Trash2, BookUser, User, CodeXml, CalendarIcon, MessageCircleQuestion, X, CircleX, Logs, ListCheck, ClipboardCheck, ClipboardList, Loader, Loader2 } from "lucide-vue-next"
|
||
import { alertStore } from "@/stores/alertStore"
|
||
import { Calendar } from "@/components/ui/calendar"
|
||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||
import { exportPdf, exportXml } from "@/routes/invoice"
|
||
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from '@/components/ui/sheet'
|
||
import { GrowingTextarea } from '../ui/growing-textarea'
|
||
import { toast } from "vue-sonner"
|
||
import { SendMailDialog } from "../ui/send-mail-dialog"
|
||
|
||
const props = defineProps<{
|
||
invoiceData: Invoice | null,
|
||
customers: Customer[]
|
||
modelValue: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])
|
||
|
||
const invoice = ref<Invoice | null>(props.invoiceData)
|
||
const paymentTermsData = ref([] as PaymentTerms[])
|
||
const isDirty = ref(false);
|
||
const isLoading = ref(false);
|
||
const importContact = ref(newContact() as Contact)
|
||
const importCustomer = ref(newCustomer() as Customer)
|
||
const alert = alertStore()
|
||
const reminderDialogOpen = ref(false)
|
||
const reminderLoading = ref(false)
|
||
|
||
onMounted(async () => {
|
||
const response = await axios.get('/api/paymentterms')
|
||
paymentTermsData.value = response.data as PaymentTerms[]
|
||
})
|
||
|
||
const isOpen = computed({
|
||
get: () => props.modelValue,
|
||
set: (value) => {
|
||
emit('update:modelValue', value)
|
||
}
|
||
})
|
||
|
||
const value = ref<DateValue>()
|
||
|
||
|
||
// watch for new external invoice data
|
||
watch(() => props.invoiceData as Invoice,
|
||
(newValue, oldValue) => {
|
||
if (newValue == oldValue) return
|
||
invoice.value = newValue
|
||
|
||
// Set initial state for a newly opened document
|
||
isDirty.value = false
|
||
isLoading.value = true
|
||
|
||
// console.log("invoiceData", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
|
||
}
|
||
)
|
||
|
||
// watch changes on local invoice date
|
||
watch(invoice,
|
||
(newValue, oldValue) => {
|
||
|
||
if (isLoading.value) {
|
||
if (!invoice.value) return;
|
||
|
||
// Initial load of invoice data
|
||
if (!invoice.value.billingData) {
|
||
// Set default billing data from customer
|
||
invoice.value.billingData = {
|
||
companyName: invoice.value.customer?.companyName || "",
|
||
vatId: invoice.value.customer?.vatId || "",
|
||
billingAddress: {
|
||
lineOne: invoice.value.customer?.billingAddress?.lineOne || "",
|
||
lineTwo: invoice.value.customer?.billingAddress?.lineTwo || "",
|
||
city: invoice.value.customer?.billingAddress?.city || "",
|
||
postalCode: invoice.value.customer?.billingAddress?.postalCode || "",
|
||
countryCode: invoice.value.customer?.billingAddress?.countryCode || "",
|
||
},
|
||
contactSalutation: invoice.value.customer?.contacts && invoice.value.customer.contacts.length > 0 ? invoice.value.customer.contacts[0].salutation : "",
|
||
contactFirstName: invoice.value.customer?.contacts && invoice.value.customer.contacts.length > 0 ? invoice.value.customer.contacts[0].firstName : "",
|
||
contactLastName: invoice.value.customer?.contacts && invoice.value.customer.contacts.length > 0 ? invoice.value.customer.contacts[0].lastName : "",
|
||
paymentTerms: invoice.value.customer?.paymentTerms || paymentTermsData.value.length > 0 ? paymentTermsData.value[2] : null,
|
||
}
|
||
}
|
||
|
||
if (invoice.value.customer?.id !== 0) {
|
||
importCustomer.value = invoice.value.customer as Customer
|
||
|
||
// console.log("billingData contact", invoice.value?.billingData?.contactFirstName, invoice.value?.billingData?.contactLastName)
|
||
invoice.value.customer?.contacts.find(contact => {
|
||
if (
|
||
contact.firstName === invoice.value?.billingData?.contactFirstName &&
|
||
contact.lastName === invoice.value?.billingData?.contactLastName
|
||
) {
|
||
importContact.value = contact
|
||
return true
|
||
}
|
||
})
|
||
}
|
||
|
||
value.value = fromDate(new Date(invoice.value.invoiceDate), getLocalTimeZone())
|
||
}
|
||
else {
|
||
isDirty.value = true
|
||
}
|
||
|
||
// console.log("invoice", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
|
||
watch(importCustomer,
|
||
(newValue, oldValue) => {
|
||
if (!invoice.value) return
|
||
|
||
if (!isLoading.value) {
|
||
if (!invoice.value.billingData) invoice.value.billingData = newBillingData()
|
||
|
||
invoice.value.billingData.companyName = newValue.companyName
|
||
invoice.value.billingData.vatId = newValue.vatId
|
||
|
||
// Don't overwrite these values during loading
|
||
// they can intentionally be different from customer data
|
||
if (!invoice.value.billingData.billingAddress || !isLoading.value)
|
||
invoice.value.billingData.billingAddress = newValue.billingAddress as Address
|
||
if (!invoice.value.billingData.contactFirstName || !isLoading.value)
|
||
invoice.value.billingData.contactFirstName = newValue.contacts && newValue.contacts.length > 0 ? newValue.contacts[0].firstName : ''
|
||
if (!invoice.value.billingData.contactLastName || !isLoading.value)
|
||
invoice.value.billingData.contactLastName = newValue.contacts && newValue.contacts.length > 0 ? newValue.contacts[0].lastName : ''
|
||
if (!invoice.value.billingData.paymentTerms || !isLoading.value)
|
||
invoice.value.billingData.paymentTerms = newValue.paymentTerms as PaymentTerms
|
||
|
||
invoice.value.customer = newValue
|
||
}
|
||
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
watch(importContact,
|
||
(newValue, oldValue) => {
|
||
if (!invoice.value) return
|
||
|
||
if (!isLoading.value) {
|
||
if (newValue.id !== 0) {
|
||
invoice.value.billingData!.contactFirstName = newValue.firstName
|
||
invoice.value.billingData!.contactLastName = newValue.lastName
|
||
} else {
|
||
invoice.value.billingData!.contactFirstName = ''
|
||
invoice.value.billingData!.contactLastName = ''
|
||
}
|
||
|
||
isDirty.value = true;
|
||
}
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
onUpdated(() => {
|
||
isLoading.value = false;
|
||
// console.log("onUpdated", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
|
||
})
|
||
|
||
const saveChanges = () => {
|
||
if (invoice.value) {
|
||
emit('save', invoice.value)
|
||
isOpen.value = false
|
||
}
|
||
}
|
||
|
||
const cancelChanges = (event: Event | null) => {
|
||
if (isDirty.value) {
|
||
alert.show(
|
||
"Wirklich schließen?",
|
||
"Es gibt ungespeicherte Änderungen, die dann verloren gehen.",
|
||
{
|
||
actionText: "Änderungen verwerfen",
|
||
actionVariant: "destructive",
|
||
onAction: () => {
|
||
emit('cancel')
|
||
isOpen.value = false
|
||
},
|
||
onCancel: () => {
|
||
if (!event) return
|
||
event.preventDefault()
|
||
event.returnValue = true
|
||
}
|
||
}
|
||
)
|
||
} else {
|
||
emit('cancel')
|
||
isOpen.value = false
|
||
}
|
||
}
|
||
|
||
const preview = function () {
|
||
if (!invoice.value) return;
|
||
window?.open('/invoice/' + invoice.value.id, '_blank')?.focus();
|
||
}
|
||
|
||
const downloadPdf = function () {
|
||
if (!invoice.value) return;
|
||
window?.open('/invoice/' + invoice.value.id + '/pdf');
|
||
}
|
||
|
||
const downloadXml = function () {
|
||
if (!invoice.value) return;
|
||
window?.open('/invoice/' + invoice.value.id + '/xml');
|
||
}
|
||
|
||
const deleteInvoice = function () {
|
||
alert.show(
|
||
"Möchtest Du diese Rechnung wirklich löschen?",
|
||
(invoice.value?.paymentStatus == "draft") ? null : "Nach GoBD musst Du alle Belege und Daten in unveränderter Form aufbewahren",
|
||
{
|
||
actionText: "Löschen",
|
||
actionVariant: "destructive",
|
||
onAction: () => {
|
||
emit('delete', invoice.value?.id)
|
||
isOpen.value = false
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
const openReminderDialog = function () {
|
||
if (!invoice.value) return
|
||
|
||
reminderDialogOpen.value = true
|
||
|
||
// alert.show(
|
||
// "Zahlungserinnerung senden?",
|
||
// "E-mail an " + invoice.value.customer?.contacts[0].email,
|
||
// {
|
||
// actionText: "Senden",
|
||
// onAction: async () => {
|
||
// // make button spin and disable button
|
||
// reminderLoading.value = true
|
||
|
||
// // await axios call
|
||
// await axios.get('/api/invoices/' + invoice.value.id + '/remind')
|
||
// .then(function (response) {
|
||
// toast.success("Zahlungserinnerung gesendet", { description: "daniel@vollstock.de" })
|
||
// })
|
||
// .catch(function (error) {
|
||
// toast.error(error.title, { description: error.message })
|
||
// })
|
||
// .finally(() => {
|
||
// reminderLoading.value = false
|
||
// })
|
||
// }
|
||
// }
|
||
// )
|
||
}
|
||
|
||
const sendReminder = async function (recipient: string | undefined) {
|
||
if (!recipient) return
|
||
if (!invoice.value || !invoice.value.id) return
|
||
|
||
// Close dialog
|
||
reminderDialogOpen.value = false
|
||
|
||
// make button spin and disable button
|
||
reminderLoading.value = true
|
||
|
||
try {
|
||
// await axios call
|
||
await axios.get('/api/invoices/' + invoice.value.id + '/remind/' + recipient)
|
||
toast.success("Zahlungserinnerung gesendet", { description: recipient })
|
||
} catch (error: any) {
|
||
toast.error(error?.title || 'Fehler', { description: error?.message || String(error) })
|
||
} finally {
|
||
reminderLoading.value = false
|
||
}
|
||
}
|
||
|
||
const updateTotalAmount = () => {
|
||
if (!invoice.value) return;
|
||
let total = 0;
|
||
invoice.value.items.forEach(item => {
|
||
total += item.quantity * item.price;
|
||
});
|
||
invoice.value.totalAmount = total;
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<Dialog id="invoice-dialog" v-model:open="isOpen">
|
||
<DialogContent
|
||
class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] p-0 h-[calc(100dvh-2rem)]"
|
||
@escapeKeyDown="cancelChanges" @interactOutside="cancelChanges">
|
||
|
||
<DialogHeader class="px-3 pt-3 flex flex-row justify-end">
|
||
<DialogTitle class="sr-only">Rechnung {{ invoice?.nr }}</DialogTitle>
|
||
<DialogDescription>
|
||
{{ invoice?.title }}
|
||
</DialogDescription>
|
||
|
||
<div v-if="invoice && invoice.id > 0" class="hidden md:flex mr-4">
|
||
<Button :size="'sm'" :variant="'ghost'" @click="preview">
|
||
<Eye :strokeWidth="1.5" class="text-current" />
|
||
<span>Vorschau</span>
|
||
</Button>
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Button :size="'sm'" :variant="'ghost'" @click="downloadPdf">
|
||
<FileText :strokeWidth="1.5" class="text-current" />
|
||
<span>PDF</span>
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
ZUGFeRD
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Button :size="'sm'" :variant="'ghost'" @click="downloadXml">
|
||
<CodeXml :strokeWidth="1.5" class="text-current" />
|
||
<span>XML</span>
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
XRechnung
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
|
||
<Sheet as-child class="relativ">
|
||
<SheetTrigger>
|
||
<Button :size="'sm'" :variant="'ghost'">
|
||
<ClipboardList :strokeWidth="1.5" class="text-current" />
|
||
<span>Audit</span>
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent>
|
||
<SheetHeader>
|
||
<SheetTitle>Are you absolutely sure?</SheetTitle>
|
||
<SheetDescription>
|
||
This action cannot be undone. This will permanently delete your account
|
||
and remove your data from our servers.
|
||
</SheetDescription>
|
||
</SheetHeader>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
<Button :size="'sm'" :variant="'ghost'" @click="deleteInvoice"
|
||
class="text-destructive hover:bg-destructive/5 hover:text-destructive">
|
||
<Trash2 :strokeWidth="1.5" class="text-current" />
|
||
<span>Löschen</span>
|
||
</Button>
|
||
|
||
</div>
|
||
<div class="md:hidden">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger>
|
||
<Button :variant="'ghost'" :size="'lg'">
|
||
<CircleEllipsis class="size-6" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent class="mr-8">
|
||
<DropdownMenuItem class="flex justify-between" @click="preview">
|
||
<span class="mr-2">Vorschau</span>
|
||
<Eye :strokeWidth="1.5" class="text-current" />
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem class="flex justify-between" @click="downloadPdf">
|
||
<div class="mr-2 flex flex-col">
|
||
<span>PDF speichern</span>
|
||
<span class="text-xs text-muted-foreground">(ZUGFeRD)</span>
|
||
</div>
|
||
<FileText :strokeWidth="1.5" class="text-current" />
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem class="flex justify-between" @click="downloadXml">
|
||
<div class="mr-2 flex flex-col">
|
||
<span>XML speichern</span>
|
||
<span class="text-xs text-muted-foreground">(XRechnung)</span>
|
||
</div>
|
||
<CodeXml :strokeWidth="1.5" class="text-current" />
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem class="flex justify-between text-destructive">
|
||
<span class="mr-2">Löschen</span>
|
||
<Trash :strokeWidth="1.5" class="text-current" />
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</DialogHeader>
|
||
|
||
<div class="overflow-y-auto px-6" v-if="invoice">
|
||
|
||
<div id="document">
|
||
<div id="document-header"
|
||
class="sticky top-0 py-4 bg-white dark:bg-neutral-800 z-1 flex items-end gap-12">
|
||
<div class="grow">
|
||
|
||
<h1 class="text-xl text-primary-foreground font-bold" v-if="invoice.id > 0">
|
||
Rechnung {{ invoice.nr
|
||
}}</h1>
|
||
<h1 class="text-xl text-primary-foreground font-bold" v-else>Neue
|
||
Rechnung
|
||
</h1>
|
||
|
||
<Input
|
||
class="md:text-xl px-0 bg-transparent dark:bg-transparent hover:bg-accent dark:hover:bg-accent/30 border-none shadow-none"
|
||
type="text" v-model="invoice.title" placeholder="Titel" />
|
||
</div>
|
||
|
||
<div class="flex flex-col m-0 items-end gap-0">
|
||
<span class="text-md text-muted-foreground">{{ toCurrency(invoice.totalAmount) }}</span>
|
||
<span class="text-2xl font-bold">{{ toCurrency(toFixedRounded(Number(invoice.totalAmount *
|
||
1.19), 2)) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="document-meta"
|
||
class="flex-none md:flex gap-12 mt-6 2 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
|
||
|
||
<div class="flex flex-col gap-1">
|
||
<div class="flex flex-row gap-4">
|
||
<Input type="text" v-model="invoice.billingData.companyName" placeholder="Firma"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
|
||
<Select v-model="importCustomer" by="id">
|
||
<SelectTrigger
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 border-none">
|
||
<SelectValue>
|
||
<BookUser />
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem :value="newCustomer()">
|
||
Manuell eingeben
|
||
</SelectItem>
|
||
<SelectItem v-for="customer in customers" :value="customer">
|
||
{{ customer.companyName }}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div class="flex flex-row gap-4">
|
||
<Input type="text" v-model="invoice.billingData.contactFirstName" placeholder="Vorname"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
|
||
<Input type="text" v-model="invoice.billingData.contactLastName" placeholder="Nachname"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
|
||
<Select v-model="importContact" by="id">
|
||
<SelectTrigger v-bind:disabled="!importCustomer || invoice.customer.id === 0"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 border-none">
|
||
<SelectValue>
|
||
<User />
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent v-if="invoice.customer && invoice.customer.id !== 0">
|
||
<SelectItem :value="{ id: 0, firstName: '', lastName: '' }">
|
||
–
|
||
</SelectItem>
|
||
<SelectItem v-for="customer in importCustomer.contacts" :value="customer">
|
||
{{ customer.firstName + ' ' + customer.lastName }}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<Input type="text" v-model="invoice.billingData.billingAddress.lineOne"
|
||
placeholder="Zeile 1"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
<Input type="text" v-model="invoice.billingData.billingAddress.lineTwo"
|
||
placeholder="Zeile 2"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
|
||
<div class="flex gap-4">
|
||
<Input type="text" v-model="invoice.billingData.billingAddress.postalCode"
|
||
placeholder="PLZ"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 w-20 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
<Input type="text" v-model="invoice.billingData.billingAddress.city" placeholder="Stadt"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
</div>
|
||
|
||
<Input type="text" v-model="invoice.billingData.vatId" placeholder="USt-Id-Nr."
|
||
class="mt-6 bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 p-1 shadow-none border-0 border-b-1 border-slate-300 dark:border-neutral-800 placeholder:text-muted-foreground/50 rounded-none hover:rounded-md" />
|
||
</div>
|
||
|
||
<div>
|
||
<Table>
|
||
<TableBody>
|
||
|
||
<!-- Status -->
|
||
<TableRow>
|
||
<TableHead class="w-1">Status</TableHead>
|
||
<TableCell class="flex items-center gap-4">
|
||
<StatusBadge size="sm" :variant="invoice.paymentStatus">{{
|
||
statusBadgeLabels[invoice.paymentStatus] }}
|
||
</StatusBadge>
|
||
<Select v-model="invoice.paymentStatus">
|
||
<SelectTrigger
|
||
class="w-full bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 shadow-none border-0 h-8!">
|
||
<SelectValue placeholder="Status" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectGroup>
|
||
<SelectItem v-for="(label, value) in statusBadgeLabels"
|
||
:value="value">
|
||
<SelectLabel>{{ label }}</SelectLabel>
|
||
</SelectItem>
|
||
</SelectGroup>
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
<Button v-if="['due', 'reminded'].includes(invoice.paymentStatus)"
|
||
:size="'sm'" :variant="'destructive'" @click="openReminderDialog"
|
||
:disabled="reminderLoading">
|
||
<Loader2 class="h-4 w-4 transition-[width] ease-in-out animate-spin"
|
||
:class="{ 'w-0!': !reminderLoading }" />
|
||
Mahnen
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
|
||
<!-- Rechnungsdatum -->
|
||
<TableRow>
|
||
<TableHead>Datum</TableHead>
|
||
<TableCell>
|
||
<Input type="date" :modelValue="toShortISOString(invoice.invoiceDate)"
|
||
@update:modelValue="newValue => { invoice.invoiceDate = new Date(newValue); invoice.dueDate = calcDueDate(invoice.invoiceDate, invoice.billingData?.paymentTerms?.days) }"
|
||
placeholder="Datum"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 shadow-none border-none" />
|
||
</TableCell>
|
||
</TableRow>
|
||
|
||
<!-- Zahlungsziel -->
|
||
<TableRow>
|
||
<TableHead class="flex items-center gap-1">
|
||
Zahlungsziel
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<MessageCircleQuestion strokeWidth="1.5"
|
||
class="h-[16px] w-[16px] ml-[1px] mb-2" />
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
Zahlungsbedingungen können<br />
|
||
beim Kunden hinterlegt werden.
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
</TableHead>
|
||
<TableCell>
|
||
|
||
<Select v-model="invoice.billingData.paymentTerms" by="id">
|
||
<SelectTrigger
|
||
class="w-full bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 shadow-none border-none">
|
||
<SelectValue placeholder="Zahlungsziel" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem v-for="term in paymentTermsData" :value="term">
|
||
<span v-if="term.isFixed">{{ term.description }}</span>
|
||
<span v-else>{{ term.days }} Tage</span>
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
</TableCell>
|
||
</TableRow>
|
||
|
||
<!-- Fällig -->
|
||
<TableRow v-if="!invoice.billingData?.paymentTerms?.isFixed">
|
||
<TableHead>Fällig</TableHead>
|
||
<TableCell class="pl-5">{{ toLocalDate(invoice.dueDate) }}</TableCell>
|
||
</TableRow>
|
||
|
||
<!-- Leistungszeitraum -->
|
||
<TableRow>
|
||
<TableHead>Leistungszeitraum</TableHead>
|
||
<TableCell>
|
||
<Input type="date" :modelValue="toShortISOString(invoice.serviceStartDate)"
|
||
@update:modelValue="newValue => invoice.serviceStartDate = new Date(newValue)"
|
||
placeholder="Datum"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 shadow-none border-none w-fit inline" />
|
||
|
||
bis
|
||
|
||
<Input type="date" :modelValue="toShortISOString(invoice.serviceEndDate)"
|
||
@update:modelValue="newValue => invoice.serviceEndDate = new Date(newValue)"
|
||
placeholder="Datum"
|
||
class="bg-transparent dark:bg-transparent hover:bg-background dark:hover:bg-background/40 shadow-none border-none w-fit inline" />
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="document-text" class="px-4 mt-6">
|
||
<GrowingTextarea v-model="invoice.text" placeholder="Anschreiben"
|
||
class="font-light bg-transparent dark:bg-transparent hover:bg-accent dark:hover:bg-accent/30 border-none shadow-none" />
|
||
</div>
|
||
|
||
<LineItemTable :lineItems="invoice.items" @update:lineItems="updateTotalAmount" />
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<DialogFooter class="p-6 pt-0 flex-row">
|
||
<div :size="'sm'" class="hidden md:block flex-grow-4"></div>
|
||
<Button class="grow md:grow-0" @click="cancelChanges">
|
||
Abbrechen
|
||
</Button>
|
||
<Button class="grow md:grow-0" :variant="'action'" @click="saveChanges"
|
||
:disabled="!isDirty">Speichern</Button>
|
||
</DialogFooter>
|
||
|
||
</DialogContent>
|
||
|
||
</Dialog>
|
||
<SendMailDialog v-model:open="reminderDialogOpen" title="Zahlungserinnerung senden?" description=""
|
||
:recipient="invoice?.customer?.contacts[0].email" @send="(recipient) => sendReminder(recipient)" />
|
||
|
||
</template>
|
||
|
||
<style>
|
||
/* Remove close X */
|
||
[data-slot=dialog-content] button.ring-offset-background {
|
||
/* display: none; */
|
||
border-radius: 100%;
|
||
position: absolute;
|
||
left: 1rem;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
color: var(--color-destructive);
|
||
}
|
||
|
||
/* Backdrop */
|
||
[data-slot=dialog-overlay] {
|
||
backdrop-filter: blur(var(--blur-sm));
|
||
}
|
||
</style> |