mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 04:01:10 -04:00
v6 update
This commit is contained in:
Mohit Panjwani
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<SelectTemplateModal />
|
||||
<ItemModal />
|
||||
<TaxTypeModal />
|
||||
<SalesTax
|
||||
v-if="salesTaxEnabled && !isLoadingContent"
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
:is-edit="isEdit"
|
||||
:customer="recurringInvoiceStore.newRecurringInvoice.customer"
|
||||
/>
|
||||
<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
|
||||
v-if="$route.name === 'invoices.edit'"
|
||||
:title="$t('recurring_invoices.edit_invoice')"
|
||||
to="#"
|
||||
active
|
||||
/>
|
||||
<BaseBreadcrumbItem
|
||||
v-else
|
||||
:title="pageTitle"
|
||||
to="#"
|
||||
active
|
||||
/>
|
||||
</BaseBreadcrumb>
|
||||
|
||||
<template #actions>
|
||||
<router-link
|
||||
:to="`/invoices/pdf/${recurringInvoiceStore.newRecurringInvoice.unique_hash}`"
|
||||
>
|
||||
<BaseButton
|
||||
v-if="$route.name === 'invoices.edit'"
|
||||
target="_blank"
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
type="button"
|
||||
>
|
||||
<span class="flex">
|
||||
{{ $t('general.view_pdf') }}
|
||||
</span>
|
||||
</BaseButton>
|
||||
</router-link>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon
|
||||
v-if="!isSaving"
|
||||
name="SaveIcon"
|
||||
: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">
|
||||
<InvoiceBasicFields
|
||||
:v="v$"
|
||||
:is-loading="isLoadingContent"
|
||||
:is-edit="isEdit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BaseScrollPane>
|
||||
<!-- Invoice Items -->
|
||||
<CreateItems
|
||||
:currency="recurringInvoiceStore.newRecurringInvoice.currency"
|
||||
:is-loading="isLoadingContent"
|
||||
:item-validation-scope="recurringInvoiceValidationScope"
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
/>
|
||||
|
||||
<!-- Invoice Templates -->
|
||||
<div
|
||||
class="
|
||||
block
|
||||
mt-10
|
||||
invoice-foot
|
||||
lg:flex lg:justify-between lg:items-start
|
||||
"
|
||||
>
|
||||
<div class="w-full relative lg:w-1/2">
|
||||
<!-- Invoice Custom Notes -->
|
||||
<NoteFields
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
:fields="recurringInvoiceFields"
|
||||
type="Invoice"
|
||||
/>
|
||||
|
||||
<!-- Invoice Custom Fields -->
|
||||
<InvoiceCustomFields
|
||||
type="Invoice"
|
||||
:is-edit="isEdit"
|
||||
:is-loading="isLoadingContent"
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
:custom-field-scope="recurringInvoiceValidationScope"
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<!-- Invoice Template Button-->
|
||||
<SelectTemplateButton
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Invoice Total Card -->
|
||||
<CreateTotal
|
||||
:currency="recurringInvoiceStore.newRecurringInvoice.currency"
|
||||
:is-loading="isLoadingContent"
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
tax-popup-type="invoice"
|
||||
/>
|
||||
</div>
|
||||
</BaseScrollPane>
|
||||
</form>
|
||||
</BasePage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import CreateItems from '@/scripts/admin/components/estimate-invoice-common/CreateItems.vue'
|
||||
import CreateTotal from '@/scripts/admin/components/estimate-invoice-common/CreateTotal.vue'
|
||||
import SelectTemplateButton from '@/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue'
|
||||
import InvoiceBasicFields from './RecurringInvoiceCreateBasicFields.vue'
|
||||
import InvoiceCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
|
||||
import NoteFields from '@/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue'
|
||||
import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
|
||||
|
||||
import {
|
||||
required,
|
||||
maxLength,
|
||||
numeric,
|
||||
helpers,
|
||||
requiredIf,
|
||||
decimal,
|
||||
} from '@vuelidate/validators'
|
||||
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
|
||||
import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
|
||||
import { useModuleStore } from '@/scripts/admin/stores/module'
|
||||
import SelectTemplateModal from '@/scripts/admin/components/modal-components/SelectTemplateModal.vue'
|
||||
import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
|
||||
import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
|
||||
|
||||
const recurringInvoiceStore = useRecurringInvoiceStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const customFieldStore = useCustomFieldStore()
|
||||
const moduleStore = useModuleStore()
|
||||
const recurringInvoiceValidationScope = 'newRecurringInvoice'
|
||||
const { t } = useI18n()
|
||||
let isSaving = ref(false)
|
||||
|
||||
const recurringInvoiceFields = ref([
|
||||
'customer',
|
||||
'company',
|
||||
'customerCustom',
|
||||
'invoice',
|
||||
'invoiceCustom',
|
||||
])
|
||||
|
||||
let route = useRoute()
|
||||
let router = useRouter()
|
||||
|
||||
let isLoadingContent = computed(
|
||||
() =>
|
||||
recurringInvoiceStore.isFetchingInvoice ||
|
||||
recurringInvoiceStore.isFetchingInitialSettings
|
||||
)
|
||||
|
||||
let pageTitle = computed(() =>
|
||||
isEdit.value
|
||||
? t('recurring_invoices.edit_invoice')
|
||||
: t('recurring_invoices.new_invoice')
|
||||
)
|
||||
|
||||
let isEdit = computed(() => route.name === 'recurring-invoices.edit')
|
||||
|
||||
const salesTaxEnabled = computed(() => {
|
||||
return (
|
||||
companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES' &&
|
||||
moduleStore.salesTaxUSEnabled
|
||||
)
|
||||
})
|
||||
|
||||
const rules = {
|
||||
starts_at: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
status: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
frequency: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
limit_by: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
limit_date: {
|
||||
required: helpers.withMessage(
|
||||
t('validation.required'),
|
||||
requiredIf(function () {
|
||||
return recurringInvoiceStore.newRecurringInvoice.limit_by === 'DATE'
|
||||
})
|
||||
),
|
||||
},
|
||||
limit_count: {
|
||||
required: helpers.withMessage(
|
||||
t('validation.required'),
|
||||
requiredIf(function () {
|
||||
return recurringInvoiceStore.newRecurringInvoice.limit_by === 'COUNT'
|
||||
})
|
||||
),
|
||||
},
|
||||
selectedFrequency: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
customer_id: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
exchange_rate: {
|
||||
required: requiredIf(function () {
|
||||
helpers.withMessage(t('validation.required'), required)
|
||||
return recurringInvoiceStore.showExchangeRate
|
||||
}),
|
||||
decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
|
||||
},
|
||||
}
|
||||
|
||||
const v$ = useVuelidate(
|
||||
rules,
|
||||
computed(() => recurringInvoiceStore.newRecurringInvoice),
|
||||
{ $scope: recurringInvoiceValidationScope }
|
||||
)
|
||||
|
||||
recurringInvoiceStore.resetCurrentRecurringInvoice()
|
||||
recurringInvoiceStore.fetchRecurringInvoiceInitialSettings(isEdit.value)
|
||||
customFieldStore.resetCustomFields()
|
||||
v$.value.$reset
|
||||
|
||||
watch(
|
||||
() => recurringInvoiceStore.newRecurringInvoice.customer,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.currency) {
|
||||
recurringInvoiceStore.newRecurringInvoice.currency = newVal.currency
|
||||
} else {
|
||||
recurringInvoiceStore.newRecurringInvoice.currency =
|
||||
companyStore.selectedCompanyCurrency
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function submitForm() {
|
||||
v$.value.$touch()
|
||||
|
||||
if (v$.value.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
...recurringInvoiceStore.newRecurringInvoice,
|
||||
sub_total: recurringInvoiceStore.getSubTotal,
|
||||
total: recurringInvoiceStore.getTotal,
|
||||
tax: recurringInvoiceStore.getTotalTax,
|
||||
}
|
||||
|
||||
if (route.params.id) {
|
||||
recurringInvoiceStore
|
||||
.updateRecurringInvoice(data)
|
||||
.then((res) => {
|
||||
if (res.data.data) {
|
||||
router.push(`/admin/recurring-invoices/${res.data.data.id}/view`)
|
||||
}
|
||||
isSaving.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
isSaving.value = false
|
||||
})
|
||||
} else {
|
||||
submitCreate(data)
|
||||
}
|
||||
}
|
||||
|
||||
function submitCreate(data) {
|
||||
recurringInvoiceStore
|
||||
.addRecurringInvoice(data)
|
||||
.then((res) => {
|
||||
if (res.data.data) {
|
||||
router.push(`/admin/recurring-invoices/${res.data.data.id}/view`)
|
||||
}
|
||||
isSaving.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
isSaving.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function checkValid() {
|
||||
return false
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="col-span-5 pr-0">
|
||||
<BaseCustomerSelectPopup
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.customer"
|
||||
:valid="v.customer_id"
|
||||
:content-loading="isLoading"
|
||||
type="recurring-invoice"
|
||||
/>
|
||||
|
||||
<div class="flex mt-7">
|
||||
<div class="relative w-20 mt-8">
|
||||
<BaseSwitch
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.send_automatically"
|
||||
class="absolute -top-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ml-2">
|
||||
<p class="p-0 mb-1 leading-snug text-left text-black">
|
||||
{{ $t('recurring_invoices.send_automatically') }}
|
||||
</p>
|
||||
<p
|
||||
class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
|
||||
style="max-width: 480px"
|
||||
>
|
||||
{{ $t('recurring_invoices.send_automatically_desc') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
grid grid-cols-1
|
||||
col-span-7
|
||||
gap-4
|
||||
mt-8
|
||||
lg:gap-6 lg:mt-0 lg:grid-cols-2
|
||||
"
|
||||
>
|
||||
<BaseInputGroup
|
||||
:label="$t('recurring_invoices.starts_at')"
|
||||
:content-loading="isLoading"
|
||||
required
|
||||
:error="v.starts_at.$error && v.starts_at.$errors[0].$message"
|
||||
>
|
||||
<BaseDatePicker
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.starts_at"
|
||||
:content-loading="isLoading"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
:invalid="v.starts_at.$error"
|
||||
@change="getNextInvoiceDate()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('recurring_invoices.next_invoice_date')"
|
||||
:content-loading="isLoading"
|
||||
required
|
||||
>
|
||||
<BaseDatePicker
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.next_invoice_at"
|
||||
:content-loading="isLoading"
|
||||
:calendar-button="true"
|
||||
:disabled="true"
|
||||
:loading="isLoadingNextDate"
|
||||
calendar-button-icon="calendar"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('recurring_invoices.limit_by')"
|
||||
:content-loading="isLoading"
|
||||
class="lg:mt-0"
|
||||
required
|
||||
:error="v.limit_by.$error && v.limit_by.$errors[0].$message"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.limit_by"
|
||||
:content-loading="isLoading"
|
||||
:options="limits"
|
||||
label="label"
|
||||
:invalid="v.limit_by.$error"
|
||||
value-prop="value"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="hasLimitBy('DATE')"
|
||||
:label="$t('recurring_invoices.limit_date')"
|
||||
:content-loading="isLoading"
|
||||
:required="hasLimitBy('DATE')"
|
||||
:error="v.limit_date.$error && v.limit_date.$errors[0].$message"
|
||||
>
|
||||
<BaseDatePicker
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.limit_date"
|
||||
:content-loading="isLoading"
|
||||
:invalid="v.limit_date.$error"
|
||||
calendar-button-icon="calendar"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="hasLimitBy('COUNT')"
|
||||
:label="$t('recurring_invoices.count')"
|
||||
:content-loading="isLoading"
|
||||
:required="hasLimitBy('COUNT')"
|
||||
:error="v.limit_count.$error && v.limit_count.$errors[0].$message"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.limit_count"
|
||||
:content-loading="isLoading"
|
||||
:invalid="v.limit_count.$error"
|
||||
type="number"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('recurring_invoices.status')"
|
||||
required
|
||||
:content-loading="isLoading"
|
||||
:error="v.status.$error && v.status.$errors[0].$message"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.status"
|
||||
:options="getStatusOptions"
|
||||
:content-loading="isLoading"
|
||||
:invalid="v.status.$error"
|
||||
:placeholder="$t('recurring_invoices.select_a_status')"
|
||||
value-prop="value"
|
||||
label="value"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('recurring_invoices.frequency.select_frequency')"
|
||||
required
|
||||
:content-loading="isLoading"
|
||||
:error="
|
||||
v.selectedFrequency.$error && v.selectedFrequency.$errors[0].$message
|
||||
"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.selectedFrequency"
|
||||
:content-loading="isLoading"
|
||||
:options="recurringInvoiceStore.frequencies"
|
||||
label="label"
|
||||
:invalid="v.selectedFrequency.$error"
|
||||
object
|
||||
@change="getNextInvoiceDate"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="isCustomFrequency"
|
||||
:label="$t('recurring_invoices.frequency.title')"
|
||||
:content-loading="isLoading"
|
||||
required
|
||||
:error="v.frequency.$error && v.frequency.$errors[0].$message"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="recurringInvoiceStore.newRecurringInvoice.frequency"
|
||||
:content-loading="isLoading"
|
||||
:disabled="!isCustomFrequency"
|
||||
:invalid="v.frequency.$error"
|
||||
:loading="isLoadingNextDate"
|
||||
@update:modelValue="debounceNextDate"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<ExchangeRateConverter
|
||||
:store="recurringInvoiceStore"
|
||||
store-prop="newRecurringInvoice"
|
||||
:v="v"
|
||||
:is-loading="isLoading"
|
||||
:is-edit="isEdit"
|
||||
:customer-currency="recurringInvoiceStore.newRecurringInvoice.currency_id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
|
||||
|
||||
const props = defineProps({
|
||||
v: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const recurringInvoiceStore = useRecurringInvoiceStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const isLoadingNextDate = ref(false)
|
||||
|
||||
const limits = reactive([
|
||||
{ label: 'None', value: 'NONE' },
|
||||
{ label: 'Date', value: 'DATE' },
|
||||
{ label: 'Count', value: 'COUNT' },
|
||||
])
|
||||
|
||||
const isCustomFrequency = computed(() => {
|
||||
return (
|
||||
recurringInvoiceStore.newRecurringInvoice.selectedFrequency &&
|
||||
recurringInvoiceStore.newRecurringInvoice.selectedFrequency.value ===
|
||||
'CUSTOM'
|
||||
)
|
||||
})
|
||||
|
||||
const getStatusOptions = computed(() => {
|
||||
if (props.isEdit) {
|
||||
return globalStore.config.recurring_invoice_status.update_status
|
||||
}
|
||||
return globalStore.config.recurring_invoice_status.create_status
|
||||
})
|
||||
|
||||
watch(
|
||||
() => recurringInvoiceStore.newRecurringInvoice.selectedFrequency,
|
||||
(newValue) => {
|
||||
if (!recurringInvoiceStore.isFetchingInitialSettings) {
|
||||
if (newValue && newValue.value !== 'CUSTOM') {
|
||||
recurringInvoiceStore.newRecurringInvoice.frequency = newValue.value
|
||||
} else {
|
||||
recurringInvoiceStore.newRecurringInvoice.frequency = null
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
// on create
|
||||
if (!route.params.id) {
|
||||
getNextInvoiceDate()
|
||||
}
|
||||
})
|
||||
|
||||
function hasLimitBy(LimitBy) {
|
||||
return recurringInvoiceStore.newRecurringInvoice.limit_by === LimitBy
|
||||
}
|
||||
|
||||
const debounceNextDate = useDebounceFn(() => {
|
||||
getNextInvoiceDate()
|
||||
}, 500)
|
||||
|
||||
async function getNextInvoiceDate() {
|
||||
const val = recurringInvoiceStore.newRecurringInvoice.frequency
|
||||
|
||||
if (!val) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingNextDate.value = true
|
||||
|
||||
let data = {
|
||||
starts_at: recurringInvoiceStore.newRecurringInvoice.starts_at,
|
||||
frequency: val,
|
||||
}
|
||||
|
||||
try {
|
||||
await recurringInvoiceStore.fetchRecurringInvoiceFrequencyDate(data)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
isLoadingNextDate.value = false
|
||||
}
|
||||
|
||||
isLoadingNextDate.value = false
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user