mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-07-16 05:55:18 +00:00
132 lines
3.7 KiB
Vue
132 lines
3.7 KiB
Vue
<template>
|
|
<BasePage class="relative invoice-create-page">
|
|
<form @submit.prevent="submitForm">
|
|
<BasePageHeader :title="pageTitle">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem
|
|
:title="$t('general.home')"
|
|
to="/admin/dashboard"
|
|
/>
|
|
<BaseBreadcrumbItem
|
|
:title="$t('recurring_invoices.title', 2)"
|
|
to="/admin/recurring-invoices"
|
|
/>
|
|
<BaseBreadcrumbItem :title="pageTitle" to="#" active />
|
|
</BaseBreadcrumb>
|
|
|
|
<template #actions>
|
|
<BaseButton
|
|
:loading="isSaving"
|
|
:disabled="isSaving"
|
|
variant="primary"
|
|
type="submit"
|
|
>
|
|
<template #left="slotProps">
|
|
<BaseIcon
|
|
v-if="!isSaving"
|
|
name="ArrowDownOnSquareIcon"
|
|
:class="slotProps.class"
|
|
/>
|
|
</template>
|
|
{{ $t('recurring_invoices.save_invoice') }}
|
|
</BaseButton>
|
|
</template>
|
|
</BasePageHeader>
|
|
|
|
<!-- Select Customer & Basic Fields -->
|
|
<div class="grid-cols-12 gap-8 mt-6 mb-8 lg:grid">
|
|
<RecurringInvoiceBasicFields
|
|
:is-loading="isLoadingContent"
|
|
:is-edit="isEdit"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import { useRecurringInvoiceStore } from '../store'
|
|
import RecurringInvoiceBasicFields from '../components/RecurringInvoiceBasicFields.vue'
|
|
|
|
const recurringInvoiceStore = useRecurringInvoiceStore()
|
|
const { t } = useI18n()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const isSaving = ref<boolean>(false)
|
|
|
|
const isLoadingContent = computed<boolean>(
|
|
() =>
|
|
recurringInvoiceStore.isFetchingInvoice ||
|
|
recurringInvoiceStore.isFetchingInitialSettings,
|
|
)
|
|
|
|
const pageTitle = computed<string>(() =>
|
|
isEdit.value
|
|
? t('recurring_invoices.edit_invoice')
|
|
: t('recurring_invoices.new_invoice'),
|
|
)
|
|
|
|
const isEdit = computed<boolean>(
|
|
() => route.name === 'recurring-invoices.edit',
|
|
)
|
|
|
|
// Initialize frequencies
|
|
recurringInvoiceStore.initFrequencies(t)
|
|
|
|
// Reset state
|
|
recurringInvoiceStore.resetCurrentRecurringInvoice()
|
|
recurringInvoiceStore.fetchRecurringInvoiceInitialSettings(isEdit.value, {
|
|
id: route.params.id as string | undefined,
|
|
query: route.query as Record<string, string>,
|
|
})
|
|
|
|
watch(
|
|
() => recurringInvoiceStore.newRecurringInvoice.customer,
|
|
(newVal) => {
|
|
if (newVal && (newVal as Record<string, unknown>).currency) {
|
|
recurringInvoiceStore.newRecurringInvoice.currency = (
|
|
newVal as Record<string, unknown>
|
|
).currency as typeof recurringInvoiceStore.newRecurringInvoice.currency
|
|
}
|
|
},
|
|
)
|
|
|
|
async function submitForm(): Promise<void> {
|
|
isSaving.value = true
|
|
|
|
const data: Record<string, unknown> = {
|
|
...cloneDeep(recurringInvoiceStore.newRecurringInvoice),
|
|
sub_total: recurringInvoiceStore.getSubTotal,
|
|
total: recurringInvoiceStore.getTotal,
|
|
tax: recurringInvoiceStore.getTotalTax,
|
|
}
|
|
|
|
try {
|
|
if (route.params.id) {
|
|
const res = await recurringInvoiceStore.updateRecurringInvoice(data)
|
|
if (res.data.data) {
|
|
router.push(
|
|
`/admin/recurring-invoices/${res.data.data.id}/view`,
|
|
)
|
|
}
|
|
} else {
|
|
const res = await recurringInvoiceStore.addRecurringInvoice(data)
|
|
if (res.data.data) {
|
|
router.push(
|
|
`/admin/recurring-invoices/${res.data.data.id}/view`,
|
|
)
|
|
}
|
|
}
|
|
} catch {
|
|
// Error handled in store
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
</script>
|