Finalize Typescript restructure

resources/scripts-v2/features/company/items/components/ItemModal.vue

@@ -10,10 +10,11 @@ import {
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useCompanyStore } from '../../../../stores/company.store'
+import { useUserStore } from '../../../../stores/user.store'
 import { useItemStore } from '../store'
-
-// Tax type store - imported from original location
-import { taxTypeService } from '@v2/api/services/tax-type.service'
+import { useTaxTypes } from '../use-tax-types'
+import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
+import type { TaxType } from '@v2/types/domain/tax'
 
 interface TaxOption {
   id: number
@@ -24,6 +25,10 @@ interface TaxOption {
   tax_name: string
 }
 
+const ABILITIES = {
+  VIEW_TAX_TYPE: 'view-tax-type',
+} as const
+
 interface Emits {
   (e: 'newItem', item: unknown): void
 }
@@ -33,7 +38,8 @@ const emit = defineEmits<Emits>()
 const modalStore = useModalStore()
 const itemStore = useItemStore()
 const companyStore = useCompanyStore()
-// Tax types fetched via service
+const userStore = useUserStore()
+const { taxTypes, fetchTaxTypes } = useTaxTypes()
 
 const { t } = useI18n()
 const isLoading = ref<boolean>(false)
@@ -54,7 +60,7 @@ const price = computed<number>({
 
 const taxes = computed({
   get: () =>
-    itemStore.currentItem.taxes.map((tax) => {
+    itemStore.currentItem.taxes?.map((tax) => {
       if (tax) {
         const currencySymbol = companyStore.selectedCompanyCurrency?.symbol ?? '$'
         return {
@@ -68,7 +74,7 @@ const taxes = computed({
         }
       }
       return tax
-    }),
+    }) ?? [],
   set: (value: TaxOption[]) => {
     itemStore.currentItem.taxes = value as unknown as typeof itemStore.currentItem.taxes
   },
@@ -100,7 +106,7 @@ const v$ = useVuelidate(
 )
 
 const getTaxTypes = computed<TaxOption[]>(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
+  return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
     const amount =
       tax.calculation_type === 'fixed'
@@ -117,9 +123,13 @@ const getTaxTypes = computed<TaxOption[]>(() => {
   }) as TaxOption[]
 })
 
-onMounted(() => {
+onMounted(async () => {
   v$.value.$reset()
-  itemStore.fetchItemUnits({ limit: 'all' })
+  await itemStore.fetchItemUnits({ limit: 'all' })
+
+  if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
+    await fetchTaxTypes()
+  }
 })
 
 async function submitItemData(): Promise<void> {
@@ -163,6 +173,17 @@ async function submitItemData(): Promise<void> {
   }
 }
 
+function addItemUnit(): void {
+  modalStore.openModal({
+    title: t('settings.customization.items.add_item_unit'),
+    componentName: 'ItemUnitModal',
+    size: 'sm',
+    refreshData: (unit: { id: number }) => {
+      itemStore.currentItem.unit_id = unit.id
+    },
+  })
+}
+
 function closeItemModal(): void {
   modalStore.closeModal()
   setTimeout(() => {
@@ -225,7 +246,18 @@ function closeItemModal(): void {
                 :placeholder="$t('items.select_a_unit')"
                 searchable
                 track-by="name"
-              />
+              >
+                <template #action>
+                  <BaseSelectAction @click="addItemUnit">
+                    <BaseIcon
+                      name="PlusCircleIcon"
+                      class="h-4 mr-2 -ml-2 text-center text-primary-400"
+                    />
+                    {{ $t('settings.customization.items.add_item_unit') }}
+                  </BaseSelectAction>
+                </template>
+              </BaseMultiselect>
+              <ItemUnitModal />
             </BaseInputGroup>
 
             <BaseInputGroup

resources/scripts-v2/features/company/items/routes.ts

@@ -6,6 +6,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.index',
     component: () => import('./views/ItemIndexView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-item',
     },
   },
@@ -14,6 +15,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.create',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'create-item',
     },
   },
@@ -22,6 +24,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.edit',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'edit-item',
     },
   },

resources/scripts-v2/features/company/items/use-tax-types.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { TaxType } from '@v2/types/domain/tax'
+import { handleApiError } from '@v2/utils/error-handling'
+
+export function useTaxTypes(): {
+  taxTypes: Ref<TaxType[]>
+  fetchTaxTypes: () => Promise<TaxType[]>
+} {
+  const taxTypes = ref<TaxType[]>([])
+
+  async function fetchTaxTypes(): Promise<TaxType[]> {
+    try {
+      const response = await taxTypeService.list({ limit: 'all' })
+      taxTypes.value = response.data
+      return taxTypes.value
+    } catch (error: unknown) {
+      handleApiError(error)
+      throw error
+    }
+  }
+
+  return {
+    taxTypes,
+    fetchTaxTypes,
+  }
+}

resources/scripts-v2/features/company/items/views/ItemCreateView.vue

@@ -10,13 +10,12 @@ import {
 } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useItemStore } from '../store'
+import { useTaxTypes } from '../use-tax-types'
 import { useCompanyStore } from '../../../../stores/company.store'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useUserStore } from '../../../../stores/user.store'
 import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
-
-// Tax type store - imported from original location
-import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { TaxType } from '@v2/types/domain/tax'
 
 interface TaxOption {
   id: number
@@ -33,7 +32,7 @@ const ABILITIES = {
 } as const
 
 const itemStore = useItemStore()
-// Tax types fetched via service
+const { taxTypes, fetchTaxTypes } = useTaxTypes()
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
 const userStore = useUserStore()
@@ -45,6 +44,7 @@ const router = useRouter()
 const isSaving = ref<boolean>(false)
 const taxPerItem = ref<string>(companyStore.selectedCompanySettings.tax_per_item || 'NO')
 const isFetchingInitialData = ref<boolean>(false)
+const isEdit = computed<boolean>(() => route.name === 'items.edit')
 
 itemStore.resetCurrentItem()
 loadData()
@@ -81,14 +81,12 @@ const taxes = computed({
   },
 })
 
-const isEdit = computed<boolean>(() => route.name === 'items.edit')
-
 const pageTitle = computed<string>(() =>
   isEdit.value ? t('items.edit_item') : t('items.new_item')
 )
 
 const getTaxTypes = computed<TaxOption[]>(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
+  return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
     return {
       ...tax,
@@ -132,6 +130,9 @@ async function addItemUnit(): Promise<void> {
     title: t('settings.customization.items.add_item_unit'),
     componentName: 'ItemUnitModal',
     size: 'sm',
+    refreshData: (unit: { id: number }) => {
+      itemStore.currentItem.unit_id = unit.id
+    },
   })
 }
 
@@ -140,7 +141,7 @@ async function loadData(): Promise<void> {
 
   await itemStore.fetchItemUnits({ limit: 'all' })
   if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
-    await taxTypeStore.fetchTaxTypes({ limit: 'all' })
+    await fetchTaxTypes()
   }
 
   if (isEdit.value) {