Add mail dialog component, work on #12

This commit is contained in:
2025-11-11 11:29:17 +01:00
parent 26cb144151
commit 2f9397abea
3 changed files with 126 additions and 28 deletions
@@ -22,7 +22,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrig
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, statusBadgeTextColor, StatusBadgeVariants } from '@/components/ui/status-badge'
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"
@@ -32,6 +32,7 @@ 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,
@@ -48,6 +49,7 @@ 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 () => {
@@ -247,32 +249,55 @@ const deleteInvoice = function () {
)
}
const remind = function () {
if (!invoice.value) return;
const openReminderDialog = function () {
if (!invoice.value) return
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
reminderDialogOpen.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
})
}
}
)
// 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 = () => {
@@ -516,7 +541,7 @@ const updateTotalAmount = () => {
</Select>
<Button v-if="['due', 'reminded'].includes(invoice.paymentStatus)"
:size="'sm'" :variant="'destructive'" @click="remind"
: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 }" />
@@ -622,6 +647,8 @@ const updateTotalAmount = () => {
</DialogContent>
</Dialog>
<SendMailDialog v-model:open="reminderDialogOpen" title="Zahlungserinnerung senden?" description=""
:recipient="invoice?.customer?.contacts[0].email" @send="(recipient) => sendReminder(recipient)" />
</template>