mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-19 03:04:05 +00:00
Rename resources/scripts-v2 to resources/scripts and drop @v2 alias
Now that the legacy v1 frontend (commit 064bdf53) is gone, the v2 directory is the only frontend and the v2 suffix is just noise. Renames resources/scripts-v2 to resources/scripts via git mv (so git records the move as renames, preserving blame and log --follow), then bulk-rewrites the 152 files that imported via @v2/... to use @/scripts/... instead. The existing @ alias (resources/) covers the new path with no extra config needed.
Drops the now-unused @v2 alias from vite.config.js and points the laravel-vite-plugin entry at resources/scripts/main.ts. Updates the only blade reference (resources/views/app.blade.php) to match. The package.json test script (eslint ./resources/scripts) automatically targets the right place after the rename without any edit.
Verified: npm run build exits clean and the Vite warning lines now reference resources/scripts/plugins/i18n.ts, confirming every import resolved through the new path. git log --follow on any moved file walks back through its scripts-v2 history.
This commit is contained in:
Darko Gjorgjijoski
@@ -0,0 +1,490 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, computed, defineAsyncComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required, numeric, helpers } from '@vuelidate/validators'
|
||||
import { useModalStore } from '@/scripts/stores/modal.store'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification.store'
|
||||
import { customFieldService } from '@/scripts/api/services/custom-field.service'
|
||||
import type { CreateCustomFieldPayload } from '@/scripts/api/services/custom-field.service'
|
||||
|
||||
interface FieldOption {
|
||||
name: string
|
||||
}
|
||||
|
||||
interface DataType {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
interface CustomFieldForm {
|
||||
id: number | null
|
||||
name: string
|
||||
label: string
|
||||
model_type: string
|
||||
type: string
|
||||
placeholder: string | null
|
||||
is_required: number
|
||||
options: FieldOption[]
|
||||
order: number | null
|
||||
default_answer: string | boolean | number | null
|
||||
dateTimeValue: string | null
|
||||
in_use: boolean
|
||||
}
|
||||
|
||||
const modalStore = useModalStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isSaving = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
|
||||
const currentCustomField = ref<CustomFieldForm>({
|
||||
id: null,
|
||||
name: '',
|
||||
label: '',
|
||||
model_type: 'Customer',
|
||||
type: 'Input',
|
||||
placeholder: null,
|
||||
is_required: 0,
|
||||
options: [],
|
||||
order: null,
|
||||
default_answer: null,
|
||||
dateTimeValue: null,
|
||||
in_use: false,
|
||||
})
|
||||
|
||||
const modelTypes = reactive([
|
||||
{ label: t('settings.custom_fields.model_type.customer'), value: 'Customer' },
|
||||
{ label: t('settings.custom_fields.model_type.invoice'), value: 'Invoice' },
|
||||
{ label: t('settings.custom_fields.model_type.estimate'), value: 'Estimate' },
|
||||
{ label: t('settings.custom_fields.model_type.expense'), value: 'Expense' },
|
||||
{ label: t('settings.custom_fields.model_type.payment'), value: 'Payment' },
|
||||
])
|
||||
|
||||
const dataTypes = reactive<DataType[]>([
|
||||
{ label: 'Text', value: 'Input' },
|
||||
{ label: 'Textarea', value: 'TextArea' },
|
||||
{ label: 'Phone', value: 'Phone' },
|
||||
{ label: 'URL', value: 'Url' },
|
||||
{ label: 'Number', value: 'Number' },
|
||||
{ label: 'Select Field', value: 'Dropdown' },
|
||||
{ label: 'Switch Toggle', value: 'Switch' },
|
||||
{ label: 'Date', value: 'Date' },
|
||||
{ label: 'Time', value: 'Time' },
|
||||
{ label: 'Date & Time', value: 'DateTime' },
|
||||
])
|
||||
|
||||
const selectedType = ref<DataType>(dataTypes[0])
|
||||
|
||||
const modalActive = computed<boolean>(
|
||||
() => modalStore.active && modalStore.componentName === 'CustomFieldModal'
|
||||
)
|
||||
|
||||
const isSwitchTypeSelected = computed<boolean>(
|
||||
() => selectedType.value?.label === 'Switch Toggle'
|
||||
)
|
||||
|
||||
const isDropdownSelected = computed<boolean>(
|
||||
() => selectedType.value?.label === 'Select Field'
|
||||
)
|
||||
|
||||
const defaultValueComponent = computed(() => {
|
||||
if (currentCustomField.value.type) {
|
||||
return defineAsyncComponent(
|
||||
() =>
|
||||
import(
|
||||
`@/scripts/admin/components/custom-fields/types/${currentCustomField.value.type}Type.vue`
|
||||
)
|
||||
)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const isRequiredField = computed<boolean>({
|
||||
get: () => currentCustomField.value.is_required === 1,
|
||||
set: (value: boolean) => {
|
||||
currentCustomField.value.is_required = value ? 1 : 0
|
||||
},
|
||||
})
|
||||
|
||||
const rules = computed(() => ({
|
||||
name: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
label: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
model_type: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
order: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
|
||||
},
|
||||
type: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
}))
|
||||
|
||||
const v$ = useVuelidate(rules, currentCustomField)
|
||||
|
||||
function setData(): void {
|
||||
if (isEdit.value) {
|
||||
const found = dataTypes.find(
|
||||
(type) => type.value === currentCustomField.value.type
|
||||
)
|
||||
if (found) selectedType.value = found
|
||||
} else {
|
||||
currentCustomField.value.model_type = modelTypes[0].value
|
||||
currentCustomField.value.type = dataTypes[0].value
|
||||
selectedType.value = dataTypes[0]
|
||||
}
|
||||
}
|
||||
|
||||
async function setInitialData(): Promise<void> {
|
||||
if (modalStore.data && typeof modalStore.data === 'number') {
|
||||
isEdit.value = true
|
||||
const response = await customFieldService.get(modalStore.data)
|
||||
if (response.data) {
|
||||
const field = response.data
|
||||
currentCustomField.value = {
|
||||
id: field.id,
|
||||
name: field.name,
|
||||
label: field.label,
|
||||
model_type: field.model_type,
|
||||
type: field.type,
|
||||
placeholder: field.placeholder,
|
||||
is_required: field.is_required ? 1 : 0,
|
||||
options: field.options
|
||||
? field.options.map((o) => ({ name: typeof o === 'string' ? o : o }))
|
||||
: [],
|
||||
order: field.order,
|
||||
default_answer: field.default_answer,
|
||||
dateTimeValue: null,
|
||||
in_use: field.in_use,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
isEdit.value = false
|
||||
resetForm()
|
||||
}
|
||||
setData()
|
||||
}
|
||||
|
||||
async function submitCustomFieldData(): Promise<void> {
|
||||
v$.value.$touch()
|
||||
if (v$.value.$invalid) {
|
||||
return
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
let defaultAnswer = currentCustomField.value.default_answer
|
||||
// Handle Time type — convert object {HH, mm, ss} to 'HH:mm' string
|
||||
if (currentCustomField.value.type === 'Time' && typeof defaultAnswer === 'object' && defaultAnswer !== null) {
|
||||
const timeObj = defaultAnswer as Record<string, string>
|
||||
defaultAnswer = `${timeObj.HH ?? '00'}:${timeObj.mm ?? '00'}`
|
||||
}
|
||||
|
||||
const payload: CreateCustomFieldPayload = {
|
||||
name: currentCustomField.value.name,
|
||||
label: currentCustomField.value.label,
|
||||
model_type: currentCustomField.value.model_type,
|
||||
type: currentCustomField.value.type,
|
||||
placeholder: currentCustomField.value.placeholder,
|
||||
is_required: currentCustomField.value.is_required === 1,
|
||||
options: currentCustomField.value.options.length
|
||||
? currentCustomField.value.options.map((o) => o.name)
|
||||
: null,
|
||||
order: currentCustomField.value.order,
|
||||
default_answer: defaultAnswer as string ?? null,
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEdit.value && currentCustomField.value.id) {
|
||||
await customFieldService.update(currentCustomField.value.id, payload)
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: 'settings.custom_fields.updated_message',
|
||||
})
|
||||
} else {
|
||||
await customFieldService.create(payload)
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: 'settings.custom_fields.created_message',
|
||||
})
|
||||
}
|
||||
|
||||
isSaving.value = false
|
||||
if (modalStore.refreshData) {
|
||||
modalStore.refreshData()
|
||||
}
|
||||
closeCustomFieldModal()
|
||||
} catch {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const newOptionValue = ref<string>('')
|
||||
|
||||
function onAddOption(): void {
|
||||
if (!newOptionValue.value?.trim()) return
|
||||
currentCustomField.value.options = [
|
||||
{ name: newOptionValue.value.trim() },
|
||||
...currentCustomField.value.options,
|
||||
]
|
||||
newOptionValue.value = ''
|
||||
}
|
||||
|
||||
function addNewOption(option: string): void {
|
||||
currentCustomField.value.options = [
|
||||
{ name: option },
|
||||
...currentCustomField.value.options,
|
||||
]
|
||||
}
|
||||
|
||||
function removeOption(index: number): void {
|
||||
if (isEdit.value && currentCustomField.value.in_use) {
|
||||
return
|
||||
}
|
||||
|
||||
const option = currentCustomField.value.options[index]
|
||||
if (option.name === currentCustomField.value.default_answer) {
|
||||
currentCustomField.value.default_answer = null
|
||||
}
|
||||
|
||||
currentCustomField.value.options.splice(index, 1)
|
||||
}
|
||||
|
||||
function onSelectedTypeChange(data: DataType): void {
|
||||
currentCustomField.value.type = data.value
|
||||
}
|
||||
|
||||
function resetForm(): void {
|
||||
currentCustomField.value = {
|
||||
id: null,
|
||||
name: '',
|
||||
label: '',
|
||||
model_type: 'Customer',
|
||||
type: 'Input',
|
||||
placeholder: null,
|
||||
is_required: 0,
|
||||
options: [],
|
||||
order: null,
|
||||
default_answer: null,
|
||||
dateTimeValue: null,
|
||||
in_use: false,
|
||||
}
|
||||
selectedType.value = dataTypes[0]
|
||||
}
|
||||
|
||||
function closeCustomFieldModal(): void {
|
||||
modalStore.closeModal()
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
v$.value.$reset()
|
||||
}, 300)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseModal :show="modalActive" @open="setInitialData">
|
||||
<template #header>
|
||||
<div class="flex justify-between w-full">
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="w-6 h-6 text-muted cursor-pointer"
|
||||
@click="closeCustomFieldModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<form action="" @submit.prevent="submitCustomFieldData">
|
||||
<div class="overflow-y-auto max-h-[550px]">
|
||||
<div class="px-4 md:px-8 py-8 overflow-y-auto sm:p-6">
|
||||
<BaseInputGrid layout="one-column">
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.name')"
|
||||
required
|
||||
:error="v$.name.$error && v$.name.$errors[0].$message"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="currentCustomField.name"
|
||||
:invalid="v$.name.$error"
|
||||
@input="v$.name.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.model')"
|
||||
:error="
|
||||
v$.model_type.$error && v$.model_type.$errors[0].$message
|
||||
"
|
||||
:help-text="
|
||||
currentCustomField.in_use
|
||||
? $t('settings.custom_fields.model_in_use')
|
||||
: ''
|
||||
"
|
||||
required
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="currentCustomField.model_type"
|
||||
:options="modelTypes"
|
||||
value-prop="value"
|
||||
:can-deselect="false"
|
||||
:invalid="v$.model_type.$error"
|
||||
:searchable="true"
|
||||
:disabled="currentCustomField.in_use"
|
||||
@input="v$.model_type.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
class="flex items-center space-x-4"
|
||||
:label="$t('settings.custom_fields.required')"
|
||||
>
|
||||
<BaseSwitch v-model="isRequiredField" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.type')"
|
||||
:error="v$.type.$error && v$.type.$errors[0].$message"
|
||||
:help-text="
|
||||
currentCustomField.in_use
|
||||
? $t('settings.custom_fields.type_in_use')
|
||||
: ''
|
||||
"
|
||||
required
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedType"
|
||||
:options="dataTypes"
|
||||
:invalid="v$.type.$error"
|
||||
:disabled="currentCustomField.in_use"
|
||||
:searchable="true"
|
||||
:can-deselect="false"
|
||||
object
|
||||
@update:model-value="onSelectedTypeChange"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.label')"
|
||||
required
|
||||
:error="v$.label.$error && v$.label.$errors[0].$message"
|
||||
>
|
||||
<BaseInput
|
||||
v-model="currentCustomField.label"
|
||||
:invalid="v$.label.$error"
|
||||
@input="v$.label.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="isDropdownSelected"
|
||||
:label="$t('settings.custom_fields.options')"
|
||||
>
|
||||
<!-- Add Option Input -->
|
||||
<div class="flex items-center mt-1">
|
||||
<BaseInput
|
||||
v-model="newOptionValue"
|
||||
type="text"
|
||||
class="w-full md:w-96"
|
||||
:placeholder="$t('settings.custom_fields.press_enter_to_add')"
|
||||
@keydown.enter.prevent.stop="onAddOption"
|
||||
/>
|
||||
<BaseIcon
|
||||
name="PlusCircleIcon"
|
||||
class="ml-1 text-primary-500 cursor-pointer"
|
||||
@click="onAddOption"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(option, index) in currentCustomField.options"
|
||||
:key="index"
|
||||
class="flex items-center mt-5"
|
||||
>
|
||||
<BaseInput v-model="option.name" class="w-64" />
|
||||
<BaseIcon
|
||||
name="MinusCircleIcon"
|
||||
class="ml-1 cursor-pointer"
|
||||
:class="
|
||||
currentCustomField.in_use
|
||||
? 'text-subtle'
|
||||
: 'text-red-300'
|
||||
"
|
||||
@click="removeOption(index)"
|
||||
/>
|
||||
</div>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.default_value')"
|
||||
class="relative"
|
||||
>
|
||||
<component
|
||||
:is="defaultValueComponent"
|
||||
v-if="defaultValueComponent"
|
||||
v-model="currentCustomField.default_answer"
|
||||
:options="currentCustomField.options"
|
||||
:default-date-time="currentCustomField.dateTimeValue"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
v-if="!isSwitchTypeSelected"
|
||||
:label="$t('settings.custom_fields.placeholder')"
|
||||
>
|
||||
<BaseInput v-model="currentCustomField.placeholder" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.custom_fields.order')"
|
||||
:error="v$.order.$error && v$.order.$errors[0].$message"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="currentCustomField.order"
|
||||
type="number"
|
||||
:invalid="v$.order.$error"
|
||||
@input="v$.order.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-3"
|
||||
type="button"
|
||||
variant="primary-outline"
|
||||
@click="closeCustomFieldModal"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
variant="primary"
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
type="submit"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon
|
||||
v-if="!isSaving"
|
||||
:class="slotProps.class"
|
||||
name="ArrowDownOnSquareIcon"
|
||||
/>
|
||||
</template>
|
||||
{{ isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user