Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity
Files
387c3be93abf69985bfa11d3db3d40d1a4c13445
Caramel-CRM/resources/js/components/documents/InvoiceDialog.vue
T

675 lines
34 KiB
Vue
Raw Normal View History

Add initial Code
2025-10-20 08:57:51 +02:00
<!-- 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'
Move alertDialog to AppLayout fixes #33
2025-10-29 18:04:09 +01:00
import { toCurrency, toLocalDate, toShortISOString, cn, calcDueDate, toFixedRounded } from '@/lib/utils'
Add initial Code
2025-10-20 08:57:51 +02:00
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'
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
import { StatusBadge, statusBadgeLabels, statusTextStyle, StatusBadgeVariants } from '@/components/ui/status-badge'
Add initial Code
2025-10-20 08:57:51 +02:00
import LineItemTable from '@/components/documents/LineItemTable.vue'
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
import { Eye, FileText, Trash2, BookUser, User, CodeXml, CalendarIcon, MessageCircleQuestion, Loader2, Ellipsis, Check, FileCheck, FileX, Ban } from "lucide-vue-next"
Move alertDialog to AppLayout fixes #33
2025-10-29 18:04:09 +01:00
import { alertStore } from "@/stores/alertStore"
import { GrowingTextarea } from '../ui/growing-textarea'
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
import { toast } from "vue-sonner"
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
import { SendMailDialog } from "../ui/send-mail-dialog"
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
import { Kbd, KbdGroup } from '@/components/ui/kbd';
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
import DialogClose from "../ui/dialog/DialogClose.vue"
import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
Add initial Code
2025-10-20 08:57:51 +02:00
const props = defineProps<{
invoiceData: Invoice | null,
customers: Customer[]
modelValue: boolean
}>()
Make all icons have 1.5 stroke width
2025-10-23 08:27:10 +02:00
const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])
Add initial Code
2025-10-20 08:57:51 +02:00
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)
Move alertDialog to AppLayout fixes #33
2025-10-29 18:04:09 +01:00
const alert = alertStore()
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
const reminderDialogOpen = ref(false)
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
const reminderLoading = ref(false)
Add initial Code
2025-10-20 08:57:51 +02:00
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) {
Some work on customers view #3
2025-11-04 13:51:31 +01:00
if (!invoice.value) return;
Add initial Code
2025-10-20 08:57:51 +02:00
// Initial load of invoice data
Some work on customers view #3
2025-11-04 13:51:31 +01:00
if (!invoice.value.billingData) {
Add initial Code
2025-10-20 08:57:51 +02:00
// 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 || "",
},
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
contactSalutation: invoice.value.customer?.contacts && invoice.value.customer.contacts.length > 0 ? invoice.value.customer.contacts[0].salutation : "",
Add initial Code
2025-10-20 08:57:51 +02:00
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,
}
}
Some work on customers view #3
2025-11-04 13:51:31 +01:00
if (invoice.value.customer?.id !== 0) {
Add initial Code
2025-10-20 08:57:51 +02:00
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
Add text editor to invoice dialog
2025-10-22 16:13:52 +02:00
invoice.value.customer = newValue
Add initial Code
2025-10-20 08:57:51 +02:00
}
Add text editor to invoice dialog
2025-10-22 16:13:52 +02:00
Add initial Code
2025-10-20 08:57:51 +02:00
},
{ 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 }
)
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
const billingContactEmail = computed<string | undefined>(() => {
// TODO: use e-mail from billing data if set
// and fallback to primary contact email
if (invoice.value?.customer && invoice.value?.customer.contacts[0])
return invoice.value?.customer?.contacts[0].email
else return ""
})
Add initial Code
2025-10-20 08:57:51 +02:00
onUpdated(() => {
isLoading.value = false;
// console.log("onUpdated", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
})
const saveChanges = () => {
if (invoice.value) {
emit('save', invoice.value)
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
// isOpen.value = false
Add initial Code
2025-10-20 08:57:51 +02:00
}
}
const cancelChanges = (event: Event | null) => {
if (isDirty.value) {
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
alert.show(
"Wirklich schließen?",
"Es gibt ungespeicherte Änderungen, die dann verloren gehen.",
{
actionText: "Änderungen verwerfen",
onAction: () => {
emit('cancel')
isOpen.value = false
},
onCancel: () => {
accept string and date in toLocalDate() util
2025-11-10 16:09:53 +01:00
if (!event) return
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
event.preventDefault()
event.returnValue = true
}
}
)
Add initial Code
2025-10-20 08:57:51 +02:00
} 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');
}
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
const issueInvoice = function () {
if (!invoice.value) return;
invoice.value.paymentStatus = 'issued'
}
Add initial Code
2025-10-20 08:57:51 +02:00
const deleteInvoice = function () {
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
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
}
}
)
Add initial Code
2025-10-20 08:57:51 +02:00
}
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
const cancelInvoice = function () {
if (!invoice.value) return;
invoice.value.paymentStatus = 'cancelled'
}
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
const openReminderDialog = function () {
if (!invoice.value) return
reminderDialogOpen.value = true
}
Add confirm dialog to reminder button.
2025-10-30 10:15:02 +01:00
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
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
}
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
}
Add initial Code
2025-10-20 08:57:51 +02:00
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
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] h-[calc(100dvh-2rem)] gap-0 p-0 outline-none"
Add initial Code
2025-10-20 08:57:51 +02:00
@escapeKeyDown="cancelChanges" @interactOutside="cancelChanges">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<DialogHeader class="p-4 md:p-6 lg:p-12 pb-0 md:pb-2 lg:pb-8 flex flex-row items-start gap-6">
<div class="flex flex-col grow">
<DialogTitle class="text-primary-foreground font-bold text-left z-1">
<h1 v-if="invoice.id > 0">Rechnung {{ invoice.nr }}</h1>
<h1 v-else>Neue Rechnung</h1>
</DialogTitle>
<DialogDescription>
<Input
class="text-foreground md:text-base text-ellipsis 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" />
</DialogDescription>
</div>
<div class="flex gap-2 items-center">
Add initial Code
2025-10-20 08:57:51 +02:00
<TooltipProvider>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<!-- Save -->
<Button v-if="invoice && invoice.id > 0 && isDirty" class="grow md:grow-0" size="sm"
@click="saveChanges">
<Check stroke-width="1.5" />
Speichern
</Button>
<!-- Issue -->
<Tooltip v-if="invoice && invoice.paymentStatus == 'draft'">
Add initial Code
2025-10-20 08:57:51 +02:00
<TooltipTrigger>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<Button size="sm" variant="action" @click="issueInvoice">
Rechnung stellen
Add initial Code
2025-10-20 08:57:51 +02:00
</Button>
</TooltipTrigger>
<TooltipContent>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
Bearbeitung sperren und Rechnung erstellen
Add initial Code
2025-10-20 08:57:51 +02:00
</TooltipContent>
</Tooltip>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<!-- Paid -->
<Tooltip v-if="invoice && ['issued', 'due', 'reminded'].includes(invoice.paymentStatus)">
Add initial Code
2025-10-20 08:57:51 +02:00
<TooltipTrigger>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<Button size="sm" variant="success" @click="invoice.paymentStatus = 'paid'">
<FileCheck stroke-width="1.5" /> Bezahlt
Add initial Code
2025-10-20 08:57:51 +02:00
</Button>
</TooltipTrigger>
<TooltipContent>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
Als bezahlt markieren
</TooltipContent>
</Tooltip>
<!-- Remind -->
<Tooltip v-if="invoice && ['due', 'reminded'].includes(invoice.paymentStatus)">
<TooltipTrigger>
<Button size="sm" variant="destructive" @click="openReminderDialog"
:disabled="reminderLoading" class="gap-0">
<Loader2 class="h-4 w-4 transition-[width] ease-in-out animate-spin"
stroke-width="1.5"
:class="{ 'w-0!': !reminderLoading, 'mr-2': reminderLoading }" />
Erinnern
</Button>
</TooltipTrigger>
<TooltipContent>
Zahlungserinnerung per E-Mail senden
Add initial Code
2025-10-20 08:57:51 +02:00
</TooltipContent>
</Tooltip>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<!-- Ellipsis menu -->
<DropdownMenu>
<DropdownMenuTrigger>
<Button variant="ghost" size="sm" class="px-0! w-7 ml-2">
<Ellipsis class="size-4" stroke-width="1.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<!-- Preview -->
<DropdownMenuItem v-if="invoice?.paymentStatus == 'draft'"
class="flex items-center justify-between" @click="preview">
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
<div class="flex items-center gap-3">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<Eye :strokeWidth="1.5" class="text-current" />
<span class="mr-4">Vorschau</span>
</div>
<KbdGroup>
<Kbd class="visible-mac">⌘</Kbd>
<Kbd class="visible-pc">Ctrl</Kbd>
<Kbd>P</Kbd>
</KbdGroup>
</DropdownMenuItem>
<!-- PDF -->
<DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'" class="flex justify-between"
@click="downloadPdf">
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
<div class="flex items-center gap-3">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<FileText stroke-width="1.5" class="text-muted-foreground" />
<div class="mr-4 flex flex-col">
<span>PDF exportieren</span>
<span class="text-xs text-muted-foreground">(ZUGFeRD)</span>
</div>
</div>
<KbdGroup>
<Kbd class="visible-mac">⌘</Kbd>
<Kbd class="visible-pc">Ctrl</Kbd>
<Kbd>E</Kbd>
</KbdGroup>
</DropdownMenuItem>
<!-- XML -->
<DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'" class="flex justify-between"
@click="downloadXml">
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
<div class="flex items-center gap-3">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<CodeXml stroke-width="1.5" class="text-muted-foreground" />
<div class="mr-4 flex flex-col">
<span>XML exportieren</span>
<span class="text-xs text-muted-foreground">(XRechnung)</span>
</div>
</div>
</DropdownMenuItem>
<DropdownMenuSeparator />
<!-- Cancel -->
<DropdownMenuItem
v-if="invoice && ['issued', 'due', 'reminded'].includes(invoice.paymentStatus)"
class="flex justify-between" @click="deleteInvoice">
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
<div class="flex items-center gap-3">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<!-- <FileX stroke-width="1.5" class="text-muted-foreground"/> -->
<Ban :strokeWidth="1.5" class="text-current" />
<span class="mr-2">Stornieren</span>
</div>
</DropdownMenuItem>
<!-- Delete -->
<DropdownMenuItem
class="flex justify-between text-destructive! hover:bg-red-100! dark:hover:bg-red-950!"
@click="deleteInvoice">
Move user menu to sidebar, fixes #35
2025-11-14 17:45:57 +01:00
<div class="flex items-center gap-3">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<Trash2 :strokeWidth="1.5" class="text-current" />
<span class="mr-2">Löschen</span>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TooltipProvider>
<DialogClose as-child>
<DialogCloseButton />
</DialogClose>
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
</DialogHeader>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<div class="overflow-y-auto p-4 md:p-6 lg:p-12 pt-0!" v-if="invoice">
Add initial Code
2025-10-20 08:57:51 +02:00
<div id="document">
<div id="document-header"
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
class="h-7 mb-12 sticky top-0 bg-background z-1 flex flex-col md:flex-row justify-between items-center">
<!-- Status -->
<div>
<StatusBadge size="lg" :variant="invoice.paymentStatus">{{
statusBadgeLabels[invoice.paymentStatus] }}
</StatusBadge>
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<!-- <div class="flex gap-4 mr-6 w-33" v-if="invoice && invoice.paymentStatus == 'draft'">
</div>
<Select v-model="invoice.paymentStatus" v-else>
<SelectTrigger class="bg-transparent! shadow-none! outline-0 border-0 pr-8 w-41 pl-0">
<StatusBadge size="lg" :variant="invoice.paymentStatus">{{
statusBadgeLabels[invoice.paymentStatus] }}
</StatusBadge>
<!-- <SelectValue placeholder="Status" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(label, value) in statusBadgeLabels" :value="value">
<SelectLabel>{{ label }}</SelectLabel>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select> -->
<!-- Betrag -->
<div class="grid grid-cols-[auto_auto_auto_auto] items-end gap-x-6 gap-y-0">
<label class="text-muted-foreground text-xs pb-[0.4rem]">Netto</label>
<span class="text-lg text-muted-foreground place-self-end">{{
toCurrency(invoice.totalAmount) }}</span>
<label class="text-muted-foreground text-xs pb-[0.4rem]">Brutto</label>
<span class="text-xl font-bold place-self-end">{{
toCurrency(toFixedRounded(Number(invoice.totalAmount *
1.19), 2)) }}</span>
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
<div id="document-meta"
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
class="flex-none md:flex gap-12 2 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
Add initial Code
2025-10-20 08:57:51 +02:00
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
<div class="flex flex-col gap-1">
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<div class="flex">
Add initial Code
2025-10-20 08:57:51 +02:00
<Input type="text" v-model="invoice.billingData.companyName" placeholder="Firma"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<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"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<Input type="text" v-model="invoice.billingData.contactLastName" placeholder="Nachname"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<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"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<Input type="text" v-model="invoice.billingData.billingAddress.lineTwo"
placeholder="Zeile 2"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<div class="flex gap-4">
<Input type="text" v-model="invoice.billingData.billingAddress.postalCode"
placeholder="PLZ"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
<Input type="text" v-model="invoice.billingData.billingAddress.city" placeholder="Stadt"
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
<Input type="text" v-model="invoice.billingData.vatId" placeholder="USt-Id-Nr."
Add reminder mail template #12
2025-10-22 11:58:18 +02:00
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" />
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
<div>
<Table>
<TableBody>
<!-- 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>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<div id="document-text" class="mt-6 md:mt-8 lg:mt-12">
Add text editor to invoice dialog
2025-10-22 16:13:52 +02:00
<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>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<LineItemTable :lineItems="invoice.items" @update:lineItems="updateTotalAmount" sticky-top="7"
class="mt-4" />
Add initial Code
2025-10-20 08:57:51 +02:00
</div>
</div>
</DialogContent>
</Dialog>
Add mail dialog component, work on #12
2025-11-11 11:29:17 +01:00
<SendMailDialog v-model:open="reminderDialogOpen" title="Zahlungserinnerung senden?" description=""
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
:recipient="billingContactEmail" @send="(recipient) => sendReminder(recipient)" />
Add initial Code
2025-10-20 08:57:51 +02:00
</template>
Show invoice buttons depending of payment status. Fixes #54
2025-11-14 11:55:41 +01:00
<style></style>
Reference in New Issue Copy Permalink