Add mail dialog component, work on #12
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user