mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
Complete scripts-v2 TypeScript migration — all imports resolved,
build passes Create all missing components (modals, dropdowns, icons, tabs, mail drivers, customer partials), fix all @/scripts/ imports to @v2/, wire up vite entry point and blade template. 382 files, 48883 lines. - 27 settings components: modals (tax, payment, custom field, note, category, role, exchange rate, unit, mail test), dropdowns (6), customization tabs (4), mail driver forms (4) - 22 icon components: 5 utility icons, 4 dashboard icons, 13 editor toolbar icons with typed barrel export - 3 customer components: info, chart placeholder, custom fields single - Fixed usePopper composable, client/format-money import patterns - Zero remaining @/scripts/ imports in scripts-v2/ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
@@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { required, minLength, helpers } from '@vuelidate/validators'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { useModalStore } from '@v2/stores/modal.store'
|
||||
import { useNotificationStore } from '@v2/stores/notification.store'
|
||||
import { noteService } from '@v2/api/services/note.service'
|
||||
import type { CreateNotePayload } from '@v2/api/services/note.service'
|
||||
|
||||
interface NoteForm {
|
||||
id: number | null
|
||||
name: string
|
||||
type: string
|
||||
notes: string
|
||||
is_default: boolean
|
||||
}
|
||||
|
||||
const modalStore = useModalStore()
|
||||
const notificationStore = useNotificationStore()
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isSaving = ref<boolean>(false)
|
||||
const isEdit = ref<boolean>(false)
|
||||
|
||||
const currentNote = ref<NoteForm>({
|
||||
id: null,
|
||||
name: '',
|
||||
type: 'Invoice',
|
||||
notes: '',
|
||||
is_default: false,
|
||||
})
|
||||
|
||||
const types = reactive([
|
||||
{ label: t('settings.customization.notes.types.invoice'), value: 'Invoice' },
|
||||
{ label: t('settings.customization.notes.types.estimate'), value: 'Estimate' },
|
||||
{ label: t('settings.customization.notes.types.payment'), value: 'Payment' },
|
||||
])
|
||||
|
||||
const fields = ref<string[]>(['customer', 'customerCustom'])
|
||||
|
||||
const modalActive = computed<boolean>(
|
||||
() => modalStore.active && modalStore.componentName === 'NoteModal'
|
||||
)
|
||||
|
||||
const rules = computed(() => ({
|
||||
name: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
minLength: helpers.withMessage(
|
||||
t('validation.name_min_length', { count: 3 }),
|
||||
minLength(3)
|
||||
),
|
||||
},
|
||||
notes: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
type: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
}))
|
||||
|
||||
const v$ = useVuelidate(rules, currentNote)
|
||||
|
||||
watch(
|
||||
() => currentNote.value.type,
|
||||
() => {
|
||||
setFields()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (route.name === 'estimates.create') {
|
||||
currentNote.value.type = 'Estimate'
|
||||
} else if (
|
||||
route.name === 'invoices.create' ||
|
||||
route.name === 'recurring-invoices.create'
|
||||
) {
|
||||
currentNote.value.type = 'Invoice'
|
||||
} else {
|
||||
currentNote.value.type = 'Payment'
|
||||
}
|
||||
})
|
||||
|
||||
function setFields(): void {
|
||||
fields.value = ['customer', 'customerCustom']
|
||||
|
||||
if (currentNote.value.type === 'Invoice') {
|
||||
fields.value.push('invoice', 'invoiceCustom')
|
||||
}
|
||||
if (currentNote.value.type === 'Estimate') {
|
||||
fields.value.push('estimate', 'estimateCustom')
|
||||
}
|
||||
if (currentNote.value.type === 'Payment') {
|
||||
fields.value.push('payment', 'paymentCustom')
|
||||
}
|
||||
}
|
||||
|
||||
async function setInitialData(): Promise<void> {
|
||||
if (modalStore.data && typeof modalStore.data === 'number') {
|
||||
isEdit.value = true
|
||||
const response = await noteService.get(modalStore.data)
|
||||
if (response.data) {
|
||||
const note = response.data
|
||||
currentNote.value = {
|
||||
id: note.id,
|
||||
name: note.name,
|
||||
type: note.type,
|
||||
notes: note.notes,
|
||||
is_default: note.is_default ?? false,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
isEdit.value = false
|
||||
resetForm()
|
||||
}
|
||||
setFields()
|
||||
}
|
||||
|
||||
async function submitNote(): Promise<void> {
|
||||
v$.value.$touch()
|
||||
if (v$.value.$invalid) {
|
||||
return
|
||||
}
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
const payload: CreateNotePayload = {
|
||||
name: currentNote.value.name,
|
||||
type: currentNote.value.type,
|
||||
notes: currentNote.value.notes,
|
||||
is_default: currentNote.value.is_default,
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEdit.value && currentNote.value.id) {
|
||||
const res = await noteService.update(currentNote.value.id, payload)
|
||||
if (res.data) {
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: t('settings.customization.notes.note_updated'),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
const res = await noteService.create(payload)
|
||||
if (res) {
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: t('settings.customization.notes.note_added'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
isSaving.value = false
|
||||
if (modalStore.refreshData) {
|
||||
modalStore.refreshData()
|
||||
}
|
||||
closeNoteModal()
|
||||
} catch {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm(): void {
|
||||
currentNote.value = {
|
||||
id: null,
|
||||
name: '',
|
||||
type: 'Invoice',
|
||||
notes: '',
|
||||
is_default: false,
|
||||
}
|
||||
}
|
||||
|
||||
function closeNoteModal(): void {
|
||||
modalStore.closeModal()
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
v$.value.$reset()
|
||||
}, 300)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseModal
|
||||
:show="modalActive"
|
||||
@close="closeNoteModal"
|
||||
@open="setInitialData"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between w-full">
|
||||
{{ modalStore.title }}
|
||||
<BaseIcon
|
||||
name="XMarkIcon"
|
||||
class="h-6 w-6 text-muted cursor-pointer"
|
||||
@click="closeNoteModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<form action="" @submit.prevent="submitNote">
|
||||
<div class="px-8 py-8 sm:p-6">
|
||||
<BaseInputGrid layout="one-column">
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.notes.name')"
|
||||
variant="vertical"
|
||||
:error="v$.name.$error && v$.name.$errors[0].$message"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="currentNote.name"
|
||||
:invalid="v$.name.$error"
|
||||
type="text"
|
||||
@input="v$.name.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.notes.type')"
|
||||
:error="v$.type.$error && v$.type.$errors[0].$message"
|
||||
required
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="currentNote.type"
|
||||
:options="types"
|
||||
value-prop="value"
|
||||
class="mt-2"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseSwitchSection
|
||||
v-model="currentNote.is_default"
|
||||
:title="$t('settings.customization.notes.is_default')"
|
||||
:description="
|
||||
$t('settings.customization.notes.is_default_description')
|
||||
"
|
||||
/>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('settings.customization.notes.notes')"
|
||||
:error="v$.notes.$error && v$.notes.$errors[0].$message"
|
||||
required
|
||||
>
|
||||
<BaseCustomInput
|
||||
v-model="currentNote.notes"
|
||||
:invalid="v$.notes.$error"
|
||||
:fields="fields"
|
||||
@input="v$.notes.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</BaseInputGrid>
|
||||
</div>
|
||||
<div
|
||||
class="z-0 flex justify-end px-4 py-4 border-t border-solid border-line-default"
|
||||
>
|
||||
<BaseButton
|
||||
class="mr-2"
|
||||
variant="primary-outline"
|
||||
type="button"
|
||||
@click="closeNoteModal"
|
||||
>
|
||||
{{ $t('general.cancel') }}
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
:loading="isSaving"
|
||||
:disabled="isSaving"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
|
||||
</template>
|
||||
{{ isEdit ? $t('general.update') : $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.note-modal {
|
||||
.header-editior .editor-menu-bar {
|
||||
margin-left: 0.5px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user