mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-29 04:31:08 -04:00
v5.0.0 update
This commit is contained in:
Mohit Panjwani
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<BaseCard container-class="px-4 py-5 sm:px-8 sm:py-2">
|
||||
<BaseTabGroup>
|
||||
<BaseTab
|
||||
tab-panel-container="py-4 mt-px"
|
||||
:title="$t('settings.customization.invoices.title')"
|
||||
>
|
||||
<InvoicesTab />
|
||||
</BaseTab>
|
||||
|
||||
<BaseTab
|
||||
tab-panel-container="py-4 mt-px"
|
||||
:title="$t('settings.customization.estimates.title')"
|
||||
>
|
||||
<EstimatesTab />
|
||||
</BaseTab>
|
||||
|
||||
<BaseTab
|
||||
tab-panel-container="py-4 mt-px"
|
||||
:title="$t('settings.customization.payments.title')"
|
||||
>
|
||||
<PaymentsTab />
|
||||
</BaseTab>
|
||||
|
||||
<BaseTab
|
||||
tab-panel-container="py-4 mt-px"
|
||||
:title="$t('settings.customization.items.title')"
|
||||
>
|
||||
<ItemsTab />
|
||||
</BaseTab>
|
||||
</BaseTabGroup>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InvoicesTab from './invoices/InvoicesTab.vue'
|
||||
import EstimatesTab from './estimates/EstimatesTab.vue'
|
||||
import PaymentsTab from './payments/PaymentsTab.vue'
|
||||
import ItemsTab from './items/ItemsTab.vue'
|
||||
</script>
|
||||
@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t(`settings.customization.${type}s.${type}_number_format`) }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{
|
||||
$t(`settings.customization.${type}s.${type}_number_format_description`)
|
||||
}}
|
||||
</p>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full mt-6 table-fixed">
|
||||
<colgroup>
|
||||
<col style="width: 4%" />
|
||||
<col style="width: 45%" />
|
||||
<col style="width: 27%" />
|
||||
<col style="width: 24%" />
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
></th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
Component
|
||||
</th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
>
|
||||
Parameter
|
||||
</th>
|
||||
<th
|
||||
class="
|
||||
px-5
|
||||
py-3
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
leading-5
|
||||
text-left text-gray-700
|
||||
border-t border-b border-gray-200 border-solid
|
||||
"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<draggable
|
||||
v-model="selectedFields"
|
||||
class="divide-y divide-gray-200"
|
||||
item-key="id"
|
||||
tag="tbody"
|
||||
handle=".handle"
|
||||
filter=".ignore-element"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<tr class="relative">
|
||||
<td class="text-gray-300 cursor-move handle align-middle">
|
||||
<DragIcon />
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<label
|
||||
class="
|
||||
block
|
||||
text-sm
|
||||
not-italic
|
||||
font-medium
|
||||
text-primary-800
|
||||
whitespace-nowrap
|
||||
mr-2
|
||||
min-w-[200px]
|
||||
"
|
||||
>
|
||||
{{ element.label }}
|
||||
</label>
|
||||
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
{{ element.description }}
|
||||
</p>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-left align-middle">
|
||||
<BaseInputGroup
|
||||
:label="element.paramLabel"
|
||||
class="lg:col-span-3"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="element.value"
|
||||
:disabled="element.inputDisabled"
|
||||
:type="element.inputType"
|
||||
@update:modelValue="onUpdate($event, element)"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</td>
|
||||
|
||||
<td class="px-5 py-4 text-right align-middle pt-10">
|
||||
<BaseButton
|
||||
variant="white"
|
||||
@click.prevent="removeComponent(element)"
|
||||
>
|
||||
Remove
|
||||
<template #left="slotProps">
|
||||
<BaseIcon
|
||||
name="XIcon"
|
||||
class="!sm:m-0"
|
||||
:class="slotProps.class"
|
||||
/>
|
||||
</template>
|
||||
</BaseButton>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template #footer>
|
||||
<tr>
|
||||
<td colspan="2" class="px-5 py-4">
|
||||
<BaseInputGroup
|
||||
:label="
|
||||
$t(`settings.customization.${type}s.preview_${type}_number`)
|
||||
"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="nextNumber"
|
||||
disabled
|
||||
:loading="isFetchingNextNumber"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-right align-middle" colspan="2">
|
||||
<BaseDropdown wrapper-class="flex items-center justify-end mt-5">
|
||||
<template #activator>
|
||||
<BaseButton variant="primary-outline">
|
||||
<template #left="slotProps">
|
||||
<BaseIcon :class="slotProps.class" name="PlusIcon" />
|
||||
</template>
|
||||
|
||||
{{ $t('settings.customization.add_new_component') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem
|
||||
v-for="field in computedFields"
|
||||
:key="field.label"
|
||||
@click.prevent="onSelectField(field)"
|
||||
>
|
||||
{{ field.label }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
@click="submitForm"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, watch } from 'vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import draggable from 'vuedraggable'
|
||||
import Guid from 'guid'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import { useGlobalStore } from '@/scripts/stores/global'
|
||||
|
||||
import DragIcon from '@/scripts/components/icons/DragIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
typeStore: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
defaultSeries: {
|
||||
type: String,
|
||||
default: 'INV',
|
||||
},
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const companyStore = useCompanyStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const selectedFields = ref([])
|
||||
const isSaving = ref(false)
|
||||
|
||||
const allFields = ref([
|
||||
{
|
||||
label: t('settings.customization.series'),
|
||||
description: t('settings.customization.series_description'),
|
||||
name: 'SERIES',
|
||||
paramLabel: t('settings.customization.series_param_label'),
|
||||
value: props.defaultSeries,
|
||||
inputDisabled: false,
|
||||
inputType: 'text',
|
||||
allowMultiple: false,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.sequence'),
|
||||
description: t('settings.customization.sequence_description'),
|
||||
name: 'SEQUENCE',
|
||||
paramLabel: t('settings.customization.sequence_param_label'),
|
||||
value: '6',
|
||||
inputDisabled: false,
|
||||
inputType: 'number',
|
||||
allowMultiple: false,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.delimiter'),
|
||||
description: t('settings.customization.delimiter_description'),
|
||||
name: 'DELIMITER',
|
||||
paramLabel: t('settings.customization.delimiter_param_label'),
|
||||
value: '-',
|
||||
inputDisabled: false,
|
||||
inputType: 'text',
|
||||
allowMultiple: true,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.customer_series'),
|
||||
description: t('settings.customization.customer_series_description'),
|
||||
name: 'CUSTOMER_SERIES',
|
||||
paramLabel: '',
|
||||
value: '',
|
||||
inputDisabled: true,
|
||||
inputType: 'text',
|
||||
allowMultiple: false,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.customer_sequence'),
|
||||
description: t('settings.customization.customer_sequence_description'),
|
||||
name: 'CUSTOMER_SEQUENCE',
|
||||
paramLabel: t('settings.customization.customer_sequence_param_label'),
|
||||
value: '6',
|
||||
inputDisabled: false,
|
||||
inputType: 'number',
|
||||
allowMultiple: false,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.date_format'),
|
||||
description: t('settings.customization.date_format_description'),
|
||||
name: 'DATE_FORMAT',
|
||||
paramLabel: t('settings.customization.date_format_param_label'),
|
||||
value: 'Y',
|
||||
inputDisabled: false,
|
||||
inputType: 'text',
|
||||
allowMultiple: true,
|
||||
},
|
||||
{
|
||||
label: t('settings.customization.random_sequence'),
|
||||
description: t('settings.customization.random_sequence_description'),
|
||||
name: 'RANDOM_SEQUENCE',
|
||||
paramLabel: t('settings.customization.random_sequence_param_label'),
|
||||
value: '6',
|
||||
inputDisabled: false,
|
||||
inputType: 'number',
|
||||
allowMultiple: false,
|
||||
},
|
||||
])
|
||||
|
||||
const computedFields = computed(() => {
|
||||
return allFields.value.filter(function (obj) {
|
||||
return !selectedFields.value.some(function (obj2) {
|
||||
if (obj.allowMultiple) {
|
||||
return false
|
||||
}
|
||||
|
||||
return obj.name == obj2.name
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const nextNumber = ref('')
|
||||
const isFetchingNextNumber = ref(false)
|
||||
const isLoadingPlaceholders = ref(false)
|
||||
|
||||
const getNumberFormat = computed(() => {
|
||||
let format = ''
|
||||
|
||||
selectedFields.value.forEach((field) => {
|
||||
let fieldString = `{{${field.name}`
|
||||
|
||||
if (field.value) {
|
||||
fieldString += `:${field.value}`
|
||||
}
|
||||
|
||||
format += `${fieldString}}}`
|
||||
})
|
||||
|
||||
return format
|
||||
})
|
||||
|
||||
watch(selectedFields, (val) => {
|
||||
fetchNextNumber()
|
||||
})
|
||||
|
||||
setInitialFields()
|
||||
|
||||
async function setInitialFields() {
|
||||
let data = {
|
||||
format: companyStore.selectedCompanySettings[`${props.type}_number_format`],
|
||||
}
|
||||
|
||||
isLoadingPlaceholders.value = true
|
||||
|
||||
let res = await globalStore.fetchPlaceholders(data)
|
||||
|
||||
res.data.placeholders.forEach((placeholder) => {
|
||||
let found = allFields.value.find((field) => {
|
||||
return field.name === placeholder.name
|
||||
})
|
||||
|
||||
const value = placeholder.value ?? ''
|
||||
|
||||
selectedFields.value.push({ ...found, value, id: Guid.raw() })
|
||||
})
|
||||
|
||||
isLoadingPlaceholders.value = false
|
||||
|
||||
fetchNextNumber()
|
||||
}
|
||||
|
||||
function isFieldAdded(field) {
|
||||
return selectedFields.value.find((v) => v.name === field.name)
|
||||
}
|
||||
|
||||
function onSelectField(field) {
|
||||
if (isFieldAdded(field) && !field.allowMultiple) {
|
||||
return
|
||||
}
|
||||
|
||||
selectedFields.value.push({ ...field, id: Guid.raw() })
|
||||
|
||||
fetchNextNumber()
|
||||
}
|
||||
|
||||
function removeComponent(component) {
|
||||
selectedFields.value = selectedFields.value.filter(function (el) {
|
||||
return component.id !== el.id
|
||||
})
|
||||
}
|
||||
|
||||
function onUpdate(val, element) {
|
||||
switch (element.name) {
|
||||
case 'SERIES':
|
||||
if (val.length >= 4) {
|
||||
val = val.substring(0, 4)
|
||||
}
|
||||
break
|
||||
case 'DELIMITER':
|
||||
if (val.length >= 1) {
|
||||
val = val.substring(0, 1)
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
element.value = val
|
||||
|
||||
fetchNextNumber()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const fetchNextNumber = useDebounceFn(() => {
|
||||
getNextNumber()
|
||||
}, 500)
|
||||
|
||||
async function getNextNumber() {
|
||||
if (!getNumberFormat.value) {
|
||||
nextNumber.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
let data = {
|
||||
key: props.type,
|
||||
format: getNumberFormat.value,
|
||||
}
|
||||
|
||||
isFetchingNextNumber.value = true
|
||||
|
||||
let res = await props.typeStore.getNextNumber(data)
|
||||
|
||||
isFetchingNextNumber.value = false
|
||||
|
||||
if (res.data) {
|
||||
nextNumber.value = res.data.nextNumber
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (isFetchingNextNumber.value || isLoadingPlaceholders.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
let data = { settings: {} }
|
||||
|
||||
data.settings[props.type + '_number_format'] = getNumberFormat.value
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: `settings.customization.${props.type}s.${props.type}_settings_updated`,
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<EstimatesTabEstimateNumber />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<EstimatesTabExpiryDate />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<EstimatesTabConvertEstimate />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<EstimatesTabDefaultFormats />
|
||||
|
||||
<BaseDivider class="mt-6 mb-2" />
|
||||
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<BaseSwitchSection
|
||||
v-model="sendAsAttachmentField"
|
||||
:title="$t('settings.customization.estimates.estimate_email_attachment')"
|
||||
:description="
|
||||
$t(
|
||||
'settings.customization.estimates.estimate_email_attachment_setting_description'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
|
||||
import EstimatesTabEstimateNumber from './EstimatesTabEstimateNumber.vue'
|
||||
import EstimatesTabExpiryDate from './EstimatesTabExpiryDate.vue'
|
||||
import EstimatesTabDefaultFormats from './EstimatesTabDefaultFormats.vue'
|
||||
import EstimatesTabConvertEstimate from './EstimatesTabConvertEstimate.vue'
|
||||
|
||||
const utils = inject('utils')
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const estimateSettings = reactive({
|
||||
estimate_email_attachment: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(estimateSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const sendAsAttachmentField = computed({
|
||||
get: () => {
|
||||
return estimateSettings.estimate_email_attachment === 'YES'
|
||||
},
|
||||
set: async (newValue) => {
|
||||
const value = newValue ? 'YES' : 'NO'
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
estimate_email_attachment: value,
|
||||
},
|
||||
}
|
||||
|
||||
estimateSettings.estimate_email_attachment = value
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'general.setting_updated',
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $tc('settings.customization.estimates.convert_estimate_options') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('settings.customization.estimates.convert_estimate_description') }}
|
||||
</p>
|
||||
|
||||
<BaseInputGroup required>
|
||||
<BaseRadio
|
||||
id="no_action"
|
||||
v-model="settingsForm.estimate_convert_action"
|
||||
:label="$t('settings.customization.estimates.no_action')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="no_action"
|
||||
class="mt-2"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
<BaseRadio
|
||||
id="delete_estimate"
|
||||
v-model="settingsForm.estimate_convert_action"
|
||||
:label="$t('settings.customization.estimates.delete_estimate')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="delete_estimate"
|
||||
class="my-2"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
<BaseRadio
|
||||
id="mark_estimate_as_accepted"
|
||||
v-model="settingsForm.estimate_convert_action"
|
||||
:label="$t('settings.customization.estimates.mark_estimate_as_accepted')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="mark_estimate_as_accepted"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, ref, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import { required, helpers } from '@vuelidate/validators'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/stores/global'
|
||||
|
||||
const { t, tm } = useI18n()
|
||||
const companyStore = useCompanyStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const utils = inject('utils')
|
||||
|
||||
const settingsForm = reactive({ estimate_convert_action: null })
|
||||
|
||||
utils.mergeSettings(settingsForm, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const retrospectiveEditOptions = computed(() => {
|
||||
return globalStore.config.estimate_convert_action.map((option) => {
|
||||
option.title = t(option.key)
|
||||
return option
|
||||
})
|
||||
})
|
||||
|
||||
async function submitForm() {
|
||||
let data = {
|
||||
settings: {
|
||||
...settingsForm,
|
||||
},
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.estimates.estimate_settings_updated',
|
||||
})
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t('settings.customization.estimates.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.estimates.default_formats_description') }}
|
||||
</p>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="
|
||||
$t('settings.customization.estimates.default_estimate_email_body')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.estimate_mail_body"
|
||||
:fields="estimateMailFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.estimates.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.estimate_company_address_format"
|
||||
:fields="companyFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.estimates.shipping_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.estimate_shipping_address_format"
|
||||
:fields="shippingFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.estimates.billing_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.estimate_billing_address_format"
|
||||
:fields="billingFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
const utils = inject('utils')
|
||||
|
||||
const estimateMailFields = ref([
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'estimate',
|
||||
'estimateCustom',
|
||||
'company',
|
||||
])
|
||||
|
||||
const billingFields = ref([
|
||||
'billing',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'estimateCustom',
|
||||
])
|
||||
|
||||
const shippingFields = ref([
|
||||
'shipping',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'estimateCustom',
|
||||
])
|
||||
|
||||
const companyFields = ref(['company', 'estimateCustom'])
|
||||
|
||||
let isSaving = ref(false)
|
||||
|
||||
const formatSettings = reactive({
|
||||
estimate_mail_body: null,
|
||||
estimate_company_address_format: null,
|
||||
estimate_shipping_address_format: null,
|
||||
estimate_billing_address_format: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(formatSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
async function submitForm() {
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
...formatSettings,
|
||||
},
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.estimates.estimate_settings_updated',
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<NumberCustomizer
|
||||
type="estimate"
|
||||
:type-store="estimateStore"
|
||||
default-series="EST"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useEstimateStore } from '@/scripts/stores/estimate'
|
||||
import NumberCustomizer from '../NumberCustomizer.vue'
|
||||
|
||||
const estimateStore = useEstimateStore()
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t('settings.customization.estimates.expiry_date') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.estimates.expiry_date_description') }}
|
||||
</p>
|
||||
|
||||
<BaseSwitchSection
|
||||
v-model="expiryDateAutoField"
|
||||
:title="
|
||||
$t('settings.customization.estimates.set_expiry_date_automatically')
|
||||
"
|
||||
:description="
|
||||
$t(
|
||||
'settings.customization.estimates.set_expiry_date_automatically_description'
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="expiryDateAutoField"
|
||||
:label="$t('settings.customization.estimates.expiry_date_days')"
|
||||
:error="
|
||||
v$.expiryDateSettings.estimate_expiry_date_days.$error &&
|
||||
v$.expiryDateSettings.estimate_expiry_date_days.$errors[0].$message
|
||||
"
|
||||
class="mt-2 mb-4"
|
||||
>
|
||||
<div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
|
||||
<BaseInput
|
||||
v-model="expiryDateSettings.estimate_expiry_date_days"
|
||||
:invalid="v$.expiryDateSettings.estimate_expiry_date_days.$error"
|
||||
type="number"
|
||||
@input="v$.expiryDateSettings.estimate_expiry_date_days.$touch()"
|
||||
/>
|
||||
</div>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive, inject } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import { numeric, helpers, requiredIf } from '@vuelidate/validators'
|
||||
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
|
||||
const { t } = useI18n()
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const utils = inject('utils')
|
||||
|
||||
let isSaving = ref(false)
|
||||
|
||||
const expiryDateSettings = reactive({
|
||||
estimate_set_expiry_date_automatically: null,
|
||||
estimate_expiry_date_days: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(expiryDateSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const expiryDateAutoField = computed({
|
||||
get: () => {
|
||||
return expiryDateSettings.estimate_set_expiry_date_automatically === 'YES'
|
||||
},
|
||||
set: async (newValue) => {
|
||||
const value = newValue ? 'YES' : 'NO'
|
||||
|
||||
expiryDateSettings.estimate_set_expiry_date_automatically = value
|
||||
},
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
expiryDateSettings: {
|
||||
estimate_expiry_date_days: {
|
||||
required: helpers.withMessage(
|
||||
t('validation.required'),
|
||||
requiredIf(expiryDateAutoField.value)
|
||||
),
|
||||
numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const v$ = useVuelidate(rules, { expiryDateSettings })
|
||||
|
||||
async function submitForm() {
|
||||
v$.value.expiryDateSettings.$touch()
|
||||
|
||||
if (v$.value.expiryDateSettings.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
...expiryDateSettings,
|
||||
},
|
||||
}
|
||||
// Don't pass expiry_date_days if setting is not enabled
|
||||
|
||||
if (!expiryDateAutoField.value) {
|
||||
delete data.settings.estimate_expiry_date_days
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.estimates.estimate_settings_updated',
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<InvoicesTabInvoiceNumber />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<InvoicesTabDueDate />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<InvoicesTabRetrospective />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<InvoicesTabDefaultFormats />
|
||||
|
||||
<BaseDivider class="mt-6 mb-2" />
|
||||
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<BaseSwitchSection
|
||||
v-model="sendAsAttachmentField"
|
||||
:title="$t('settings.customization.invoices.invoice_email_attachment')"
|
||||
:description="
|
||||
$t(
|
||||
'settings.customization.invoices.invoice_email_attachment_setting_description'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import InvoicesTabInvoiceNumber from './InvoicesTabInvoiceNumber.vue'
|
||||
import InvoicesTabRetrospective from './InvoicesTabRetrospective.vue'
|
||||
import InvoicesTabDueDate from './InvoicesTabDueDate.vue'
|
||||
import InvoicesTabDefaultFormats from './InvoicesTabDefaultFormats.vue'
|
||||
|
||||
const utils = inject('utils')
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const invoiceSettings = reactive({
|
||||
invoice_email_attachment: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(invoiceSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const sendAsAttachmentField = computed({
|
||||
get: () => {
|
||||
return invoiceSettings.invoice_email_attachment === 'YES'
|
||||
},
|
||||
set: async (newValue) => {
|
||||
const value = newValue ? 'YES' : 'NO'
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
invoice_email_attachment: value,
|
||||
},
|
||||
}
|
||||
|
||||
invoiceSettings.invoice_email_attachment = value
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'general.setting_updated',
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t('settings.customization.invoices.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.invoices.default_formats_description') }}
|
||||
</p>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.invoices.default_invoice_email_body')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.invoice_mail_body"
|
||||
:fields="invoiceMailFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.invoices.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.invoice_company_address_format"
|
||||
:fields="companyFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.invoices.shipping_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.invoice_shipping_address_format"
|
||||
:fields="shippingFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.invoices.billing_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.invoice_billing_address_format"
|
||||
:fields="billingFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
const utils = inject('utils')
|
||||
|
||||
const invoiceMailFields = ref([
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'invoice',
|
||||
'invoiceCustom',
|
||||
'company',
|
||||
])
|
||||
|
||||
const billingFields = ref([
|
||||
'billing',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'invoiceCustom',
|
||||
])
|
||||
|
||||
const shippingFields = ref([
|
||||
'shipping',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'invoiceCustom',
|
||||
])
|
||||
|
||||
const companyFields = ref(['company', 'invoiceCustom'])
|
||||
|
||||
let isSaving = ref(false)
|
||||
|
||||
const formatSettings = reactive({
|
||||
invoice_mail_body: null,
|
||||
invoice_company_address_format: null,
|
||||
invoice_shipping_address_format: null,
|
||||
invoice_billing_address_format: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(formatSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
async function submitForm() {
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
...formatSettings,
|
||||
},
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.invoices.invoice_settings_updated',
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t('settings.customization.invoices.due_date') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.invoices.due_date_description') }}
|
||||
</p>
|
||||
|
||||
<BaseSwitchSection
|
||||
v-model="dueDateAutoField"
|
||||
:title="$t('settings.customization.invoices.set_due_date_automatically')"
|
||||
:description="
|
||||
$t(
|
||||
'settings.customization.invoices.set_due_date_automatically_description'
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="dueDateAutoField"
|
||||
:label="$t('settings.customization.invoices.due_date_days')"
|
||||
:error="
|
||||
v$.dueDateSettings.invoice_due_date_days.$error &&
|
||||
v$.dueDateSettings.invoice_due_date_days.$errors[0].$message
|
||||
"
|
||||
class="mt-2 mb-4"
|
||||
>
|
||||
<div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
|
||||
<BaseInput
|
||||
v-model="dueDateSettings.invoice_due_date_days"
|
||||
:invalid="v$.dueDateSettings.invoice_due_date_days.$error"
|
||||
type="number"
|
||||
@input="v$.dueDateSettings.invoice_due_date_days.$touch()"
|
||||
/>
|
||||
</div>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive, inject } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import { numeric, helpers, requiredIf } from '@vuelidate/validators'
|
||||
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
|
||||
const { t } = useI18n()
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const utils = inject('utils')
|
||||
|
||||
let isSaving = ref(false)
|
||||
|
||||
const dueDateSettings = reactive({
|
||||
invoice_set_due_date_automatically: null,
|
||||
invoice_due_date_days: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(dueDateSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const dueDateAutoField = computed({
|
||||
get: () => {
|
||||
return dueDateSettings.invoice_set_due_date_automatically === 'YES'
|
||||
},
|
||||
set: async (newValue) => {
|
||||
const value = newValue ? 'YES' : 'NO'
|
||||
|
||||
dueDateSettings.invoice_set_due_date_automatically = value
|
||||
},
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
dueDateSettings: {
|
||||
invoice_due_date_days: {
|
||||
required: helpers.withMessage(
|
||||
t('validation.required'),
|
||||
requiredIf(dueDateAutoField.value)
|
||||
),
|
||||
numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const v$ = useVuelidate(rules, { dueDateSettings })
|
||||
|
||||
async function submitForm() {
|
||||
v$.value.dueDateSettings.$touch()
|
||||
|
||||
if (v$.value.dueDateSettings.$invalid) {
|
||||
return false
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
...dueDateSettings,
|
||||
},
|
||||
}
|
||||
// Don't pass due_date_days if setting is not enabled
|
||||
|
||||
if (!dueDateAutoField.value) {
|
||||
delete data.settings.invoice_due_date_days
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.invoices.invoice_settings_updated',
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<NumberCustomizer
|
||||
type="invoice"
|
||||
:type-store="invoiceStore"
|
||||
default-series="INV"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useInvoiceStore } from '@/scripts/stores/invoice'
|
||||
import NumberCustomizer from '../NumberCustomizer.vue'
|
||||
|
||||
const invoiceStore = useInvoiceStore()
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $tc('settings.customization.invoices.retrospective_edits') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('settings.customization.invoices.retrospective_edits_description') }}
|
||||
</p>
|
||||
|
||||
<BaseInputGroup required>
|
||||
<BaseRadio
|
||||
id="allow"
|
||||
v-model="settingsForm.retrospective_edits"
|
||||
:label="$t('settings.customization.invoices.allow')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="allow"
|
||||
class="mt-2"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
|
||||
<BaseRadio
|
||||
id="disable_on_invoice_partial_paid"
|
||||
v-model="settingsForm.retrospective_edits"
|
||||
:label="
|
||||
$t('settings.customization.invoices.disable_on_invoice_partial_paid')
|
||||
"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="disable_on_invoice_partial_paid"
|
||||
class="mt-2"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
<BaseRadio
|
||||
id="disable_on_invoice_paid"
|
||||
v-model="settingsForm.retrospective_edits"
|
||||
:label="$t('settings.customization.invoices.disable_on_invoice_paid')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="disable_on_invoice_paid"
|
||||
class="my-2"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
<BaseRadio
|
||||
id="disable_on_invoice_sent"
|
||||
v-model="settingsForm.retrospective_edits"
|
||||
:label="$t('settings.customization.invoices.disable_on_invoice_sent')"
|
||||
size="sm"
|
||||
name="filter"
|
||||
value="disable_on_invoice_sent"
|
||||
@update:modelValue="submitForm"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, ref, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/stores/global'
|
||||
|
||||
const { t, tm } = useI18n()
|
||||
const companyStore = useCompanyStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const utils = inject('utils')
|
||||
|
||||
const settingsForm = reactive({ retrospective_edits: null })
|
||||
|
||||
utils.mergeSettings(settingsForm, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const retrospectiveEditOptions = computed(() => {
|
||||
return globalStore.config.retrospective_edits.map((option) => {
|
||||
option.title = t(option.key)
|
||||
return option
|
||||
})
|
||||
})
|
||||
|
||||
async function submitForm() {
|
||||
let data = {
|
||||
settings: {
|
||||
...settingsForm,
|
||||
},
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.invoices.invoice_settings_updated',
|
||||
})
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<ItemUnitModal />
|
||||
|
||||
<div class="flex flex-wrap justify-end mt-2 lg:flex-nowrap">
|
||||
<BaseButton variant="primary-outline" @click="addItemUnit">
|
||||
<template #left="slotProps">
|
||||
<BaseIcon :class="slotProps.class" name="PlusIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.items.add_item_unit') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<BaseTable ref="table" class="mt-10" :data="fetchData" :columns="columns">
|
||||
<template #cell-actions="{ row }">
|
||||
<BaseDropdown>
|
||||
<template #activator>
|
||||
<div class="inline-block">
|
||||
<BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<BaseDropdownItem @click="editItemUnit(row)">
|
||||
<BaseIcon
|
||||
name="PencilIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
/>
|
||||
|
||||
{{ $t('general.edit') }}
|
||||
</BaseDropdownItem>
|
||||
<BaseDropdownItem @click="removeItemUnit(row)">
|
||||
<BaseIcon
|
||||
name="TrashIcon"
|
||||
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
|
||||
/>
|
||||
{{ $t('general.delete') }}
|
||||
</BaseDropdownItem>
|
||||
</BaseDropdown>
|
||||
</template>
|
||||
</BaseTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useItemStore } from '@/scripts/stores/item'
|
||||
import { useModalStore } from '@/scripts/stores/modal'
|
||||
import { useDialogStore } from '@/scripts/stores/dialog'
|
||||
import ItemUnitModal from '@/scripts/components/modal-components/ItemUnitModal.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const table = ref(null)
|
||||
|
||||
const itemStore = useItemStore()
|
||||
const modalStore = useModalStore()
|
||||
const dialogStore = useDialogStore()
|
||||
|
||||
const columns = computed(() => {
|
||||
return [
|
||||
{
|
||||
key: 'name',
|
||||
label: t('settings.customization.items.unit_name'),
|
||||
thClass: 'extra',
|
||||
tdClass: 'font-medium text-gray-900',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '',
|
||||
tdClass: 'text-right text-sm font-medium',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
async function fetchData({ page, filter, sort }) {
|
||||
let data = {
|
||||
orderByField: sort.fieldName || 'created_at',
|
||||
orderBy: sort.order || 'desc',
|
||||
page,
|
||||
}
|
||||
let response = await itemStore.fetchItemUnits(data)
|
||||
|
||||
return {
|
||||
data: response.data.data,
|
||||
pagination: {
|
||||
totalPages: response.data.meta.last_page,
|
||||
currentPage: page,
|
||||
totalCount: response.data.meta.total,
|
||||
limit: 5,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
async function addItemUnit() {
|
||||
modalStore.openModal({
|
||||
title: t('settings.customization.items.add_item_unit'),
|
||||
componentName: 'ItemUnitModal',
|
||||
refreshData: table.value.refresh,
|
||||
size: 'sm',
|
||||
})
|
||||
}
|
||||
|
||||
async function editItemUnit(row) {
|
||||
itemStore.fetchItemUnit(row.data.id)
|
||||
modalStore.openModal({
|
||||
title: t('settings.customization.items.edit_item_unit'),
|
||||
componentName: 'ItemUnitModal',
|
||||
id: row.data.id,
|
||||
data: row.data,
|
||||
refreshData: table.value && table.value.refresh,
|
||||
})
|
||||
}
|
||||
|
||||
function removeItemUnit(row) {
|
||||
dialogStore
|
||||
.openDialog({
|
||||
title: t('general.are_you_sure'),
|
||||
message: t('settings.customization.items.item_unit_confirm_delete'),
|
||||
yesLabel: t('general.yes'),
|
||||
noLabel: t('general.no'),
|
||||
variant: 'danger',
|
||||
hideNoButton: false,
|
||||
size: 'lg',
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res) {
|
||||
await itemStore.deleteItemUnit(row.data.id)
|
||||
table.value && table.value.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<PaymentsTabPaymentNumber />
|
||||
|
||||
<BaseDivider class="my-8" />
|
||||
|
||||
<PaymentsTabDefaultFormats />
|
||||
|
||||
<BaseDivider class="mt-6 mb-2" />
|
||||
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<BaseSwitchSection
|
||||
v-model="sendAsAttachmentField"
|
||||
:title="$t('settings.customization.payments.payment_email_attachment')"
|
||||
:description="
|
||||
$t(
|
||||
'settings.customization.payments.payment_email_attachment_setting_description'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
import PaymentsTabPaymentNumber from './PaymentsTabPaymentNumber.vue'
|
||||
import PaymentsTabDefaultFormats from './PaymentsTabDefaultFormats.vue'
|
||||
|
||||
const utils = inject('utils')
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const paymentSettings = reactive({
|
||||
payment_email_attachment: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(paymentSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
const sendAsAttachmentField = computed({
|
||||
get: () => {
|
||||
return paymentSettings.payment_email_attachment === 'YES'
|
||||
},
|
||||
set: async (newValue) => {
|
||||
const value = newValue ? 'YES' : 'NO'
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
payment_email_attachment: value,
|
||||
},
|
||||
}
|
||||
|
||||
paymentSettings.payment_email_attachment = value
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'general.setting_updated',
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,113 @@
|
||||
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<h6 class="text-gray-900 text-lg font-medium">
|
||||
{{ $t('settings.customization.payments.default_formats') }}
|
||||
</h6>
|
||||
<p class="mt-1 text-sm text-gray-500 mb-2">
|
||||
{{ $t('settings.customization.payments.default_formats_description') }}
|
||||
</p>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.payments.default_payment_email_body')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.payment_mail_body"
|
||||
:fields="mailFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.payments.company_address_format')"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.payment_company_address_format"
|
||||
:fields="companyFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="
|
||||
$t('settings.customization.payments.from_customer_address_format')
|
||||
"
|
||||
class="mt-6 mb-4"
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="formatSettings.payment_from_customer_address_format"
|
||||
:fields="customerAddressFields"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="mt-4"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
|
||||
</template>
|
||||
{{ $t('settings.customization.save') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/stores/company'
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
const utils = inject('utils')
|
||||
|
||||
const mailFields = ref([
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'company',
|
||||
'payment',
|
||||
'paymentCustom',
|
||||
])
|
||||
|
||||
const customerAddressFields = ref([
|
||||
'billing',
|
||||
'customer',
|
||||
'customerCustom',
|
||||
'paymentCustom',
|
||||
])
|
||||
|
||||
const companyFields = ref(['company', 'paymentCustom'])
|
||||
|
||||
let isSaving = ref(false)
|
||||
|
||||
const formatSettings = reactive({
|
||||
payment_mail_body: null,
|
||||
payment_company_address_format: null,
|
||||
payment_from_customer_address_format: null,
|
||||
})
|
||||
|
||||
utils.mergeSettings(formatSettings, {
|
||||
...companyStore.selectedCompanySettings,
|
||||
})
|
||||
|
||||
async function submitForm() {
|
||||
isSaving.value = true
|
||||
|
||||
let data = {
|
||||
settings: {
|
||||
...formatSettings,
|
||||
},
|
||||
}
|
||||
|
||||
await companyStore.updateCompanySettings({
|
||||
data,
|
||||
message: 'settings.customization.payments.payment_settings_updated',
|
||||
})
|
||||
|
||||
isSaving.value = false
|
||||
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<NumberCustomizer
|
||||
type="payment"
|
||||
:type-store="paymentStore"
|
||||
default-series="PAY"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePaymentStore } from '@/scripts/stores/payment'
|
||||
import NumberCustomizer from '../NumberCustomizer.vue'
|
||||
|
||||
const paymentStore = usePaymentStore()
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user