From 3ca4027871c04e96866f2901de0665fe86ae732e Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sun, 14 Jun 2026 23:42:12 +0200
Subject: [PATCH] fix(documents): repair inline add-item modal on
 invoice/estimate create

Render a single shared ItemModal (was one per row, so stacked dialogs closed each other), validate the modal's own local form (vuelidate did not track the shared store object in the persistent modal), surface save errors, and carry the typed item name into the new-item form.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/base/BaseItemSelect.vue        |  16 +-
 .../company/items/components/ItemModal.vue    | 189 +++++++++++-------
 .../scripts/features/company/items/store.ts   |   7 +-
 .../document-form/DocumentItemsTable.vue      |   5 +
 4 files changed, 134 insertions(+), 83 deletions(-)

diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
index cd2f1d3f..6d6c0bac 100644
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ b/resources/scripts/components/base/BaseItemSelect.vue
@@ -5,7 +5,6 @@ import { useUserStore } from '@/scripts/stores/user.store'
 import { useModalStore } from '@/scripts/stores/modal.store'
 import { useItemStore } from '@/scripts/features/company/items/store'
 import { ABILITIES } from '@/scripts/config/abilities'
-import ItemModal from '@/scripts/features/company/items/components/ItemModal.vue'
 import type { Item } from '@/scripts/types/domain'
 import type { Tax } from '@/scripts/types/domain'
 
@@ -58,6 +57,7 @@ const { t } = useI18n()
 const itemSelect = ref<Item | null>(null)
 const multiselectRef = ref<{ close?: () => void } | null>(null)
 const loading = ref<boolean>(false)
+const searchQuery = ref<string>('')
 const itemData = reactive<LineItem>({ ...props.item })
 
 async function searchItems(search: string): Promise<Item[]> {
@@ -65,6 +65,11 @@ async function searchItems(search: string): Promise<Item[]> {
   return res.data as unknown as Item[]
 }
 
+function onSearchChange(val: string): void {
+  searchQuery.value = val
+  emit('search', val)
+}
+
 const description = computed<string | null>({
   get: () => props.item.description,
   set: (value: string | null) => {
@@ -81,10 +86,9 @@ function openItemModal(): void {
       title: t('items.add_item'),
       componentName: 'ItemModal',
       refreshData: (val: Item) => emit('select', val),
+      // ItemModal owns its own form; hand it the typed search text to pre-fill the name.
       data: {
-        taxPerItem: props.taxPerItem,
-        taxes: props.taxes,
-        itemIndex: props.index,
+        name: searchQuery.value,
       },
     })
   })
@@ -100,8 +104,6 @@ function deselectItem(index: number): void {
 
 <template>
   <div class="flex-1 text-sm">
-    <ItemModal />
-
     <!-- Selected Item Field  -->
     <div
       v-if="item.item_id"
@@ -145,7 +147,7 @@ function deselectItem(index: number): void {
       :options="searchItems"
       object
       @update:model-value="(val: Item) => $emit('select', val)"
-      @search-change="(val: string) => $emit('search', val)"
+      @search-change="onSearchChange"
     >
       <!-- Add Item Action  -->
       <template #action>
diff --git a/resources/scripts/features/company/items/components/ItemModal.vue b/resources/scripts/features/company/items/components/ItemModal.vue
index 4b6c3168..60189908 100644
--- a/resources/scripts/features/company/items/components/ItemModal.vue
+++ b/resources/scripts/features/company/items/components/ItemModal.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import {
-  required,
-  minLength,
-  maxLength,
-  helpers,
-} from '@vuelidate/validators'
-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'
 import { useTaxTypes } from '../use-tax-types'
 import ItemUnitModal from '@/scripts/features/company/settings/components/ItemUnitModal.vue'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import {
+  handleApiError,
+  getErrorTranslationKey,
+} from '../../../../utils/error-handling'
 import type { TaxType } from '@/scripts/types/domain/tax'
 
 interface TaxOption {
@@ -25,6 +23,14 @@ interface TaxOption {
   tax_name: string
 }
 
+interface ItemFormState {
+  name: string
+  description: string
+  price: number
+  unit_id: string | number | null
+  taxes: TaxOption[]
+}
+
 const ABILITIES = {
   VIEW_TAX_TYPE: 'view-tax-type',
 } as const
@@ -39,10 +45,12 @@ const modalStore = useModalStore()
 const itemStore = useItemStore()
 const companyStore = useCompanyStore()
 const userStore = useUserStore()
+const notificationStore = useNotificationStore()
 const { taxTypes, fetchTaxTypes } = useTaxTypes()
 
 const { t } = useI18n()
 const isLoading = ref<boolean>(false)
+const triedSubmit = ref<boolean>(false)
 const taxPerItemSetting = ref<string>(
   companyStore.selectedCompanySettings.tax_per_item || 'NO'
 )
@@ -51,32 +59,64 @@ const modalActive = computed<boolean>(
   () => modalStore.active && modalStore.componentName === 'ItemModal'
 )
 
+// Local form state owned by this modal. ItemModal is permanently mounted (inside
+// DocumentItemsTable, via BaseModal's `static` dialog); @vuelidate did not track
+// this reactive form's values in that context (it kept validating an empty
+// snapshot), so validation here is done with plain reactive computeds instead —
+// the same reactivity the price/taxes computeds below already rely on.
+const form = reactive<ItemFormState>({
+  name: '',
+  description: '',
+  price: 0,
+  unit_id: '',
+  taxes: [],
+})
+
+const nameError = computed<string>(() => {
+  const value = (form.name ?? '').trim()
+  if (!value) {
+    return t('validation.required')
+  }
+  if (value.length < 3) {
+    return t('validation.name_min_length', { count: 3 })
+  }
+  return ''
+})
+
+const descriptionError = computed<string>(() => {
+  if ((form.description ?? '').length > 255) {
+    return t('validation.description_maxlength', { count: 255 })
+  }
+  return ''
+})
+
+const isFormValid = computed<boolean>(
+  () => !nameError.value && !descriptionError.value
+)
+
 const price = computed<number>({
-  get: () => itemStore.currentItem.price / 100,
+  get: () => form.price / 100,
   set: (value: number) => {
-    itemStore.currentItem.price = Math.round(value * 100)
+    form.price = Math.round(value * 100)
   },
 })
 
-const taxes = computed({
+const taxes = computed<TaxOption[]>({
   get: () =>
-    itemStore.currentItem.taxes?.map((tax) => {
-      if (tax) {
-        const currencySymbol = companyStore.selectedCompanyCurrency?.symbol ?? '$'
-        return {
-          ...tax,
-          tax_type_id: tax.id,
-          tax_name: `${tax.name} (${
-            tax.calculation_type === 'fixed'
-              ? tax.fixed_amount + currencySymbol
-              : tax.percent + '%'
-          })`,
-        }
+    form.taxes?.map((tax) => {
+      const currencySymbol = companyStore.selectedCompanyCurrency?.symbol ?? '$'
+      return {
+        ...tax,
+        tax_type_id: tax.id,
+        tax_name: `${tax.name} (${
+          tax.calculation_type === 'fixed'
+            ? tax.fixed_amount + currencySymbol
+            : tax.percent + '%'
+        })`,
       }
-      return tax
     }) ?? [],
   set: (value: TaxOption[]) => {
-    itemStore.currentItem.taxes = value as unknown as typeof itemStore.currentItem.taxes
+    form.taxes = value
   },
 })
 
@@ -84,27 +124,6 @@ const isTaxPerItemEnabled = computed<boolean>(() => {
   return taxPerItemSetting.value === 'YES'
 })
 
-const rules = {
-  name: {
-    required: helpers.withMessage(t('validation.required'), required),
-    minLength: helpers.withMessage(
-      t('validation.name_min_length', { count: 3 }),
-      minLength(3)
-    ),
-  },
-  description: {
-    maxLength: helpers.withMessage(
-      t('validation.description_maxlength', { count: 255 }),
-      maxLength(255)
-    ),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => itemStore.currentItem)
-)
-
 const getTaxTypes = computed<TaxOption[]>(() => {
   return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
@@ -123,8 +142,24 @@ const getTaxTypes = computed<TaxOption[]>(() => {
   }) as TaxOption[]
 })
 
+// Reset + prefill the form every time the modal opens. The typed item-search
+// text is handed in via modalStore.data.name by BaseItemSelect.
+watch(modalActive, (active) => {
+  if (!active) {
+    return
+  }
+  const data = modalStore.data as { name?: string } | null
+  Object.assign(form, {
+    name: data?.name ?? '',
+    description: '',
+    price: 0,
+    unit_id: '',
+    taxes: [],
+  })
+  triedSubmit.value = false
+})
+
 onMounted(async () => {
-  v$.value.$reset()
   await itemStore.fetchItemUnits({ limit: 'all' })
 
   if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
@@ -133,20 +168,27 @@ onMounted(async () => {
 })
 
 async function submitItemData(): Promise<void> {
-  v$.value.$touch()
+  triedSubmit.value = true
 
-  if (v$.value.$invalid) {
+  if (!isFormValid.value) {
+    notificationStore.showNotification({
+      type: 'error',
+      message: nameError.value || descriptionError.value,
+    })
     return
   }
 
   const data: Record<string, unknown> = {
-    ...itemStore.currentItem,
-    taxes: itemStore.currentItem.taxes.map((tax) => ({
+    name: form.name,
+    description: form.description,
+    price: form.price,
+    unit_id: form.unit_id || null,
+    taxes: (form.taxes ?? []).map((tax) => ({
       tax_type_id: tax.id,
       amount:
         tax.calculation_type === 'fixed'
           ? tax.fixed_amount
-          : Math.round(price.value * tax.percent),
+          : Math.round((form.price / 100) * tax.percent),
       percent: tax.percent,
       fixed_amount: tax.fixed_amount,
       calculation_type: tax.calculation_type,
@@ -157,19 +199,21 @@ async function submitItemData(): Promise<void> {
 
   isLoading.value = true
 
-  const action = itemStore.isEdit ? itemStore.updateItem : itemStore.addItem
-
   try {
-    const res = await action(data)
+    const res = await itemStore.addItem(data)
     isLoading.value = false
-    if (res.data) {
-      if (modalStore.refreshData) {
-        modalStore.refreshData(res.data)
-      }
+    if (res.data && modalStore.refreshData) {
+      modalStore.refreshData(res.data)
     }
     closeItemModal()
-  } catch {
+  } catch (err: unknown) {
     isLoading.value = false
+    const normalized = handleApiError(err)
+    const translationKey = getErrorTranslationKey(normalized.message)
+    notificationStore.showNotification({
+      type: 'error',
+      message: translationKey ? t(translationKey) : normalized.message,
+    })
   }
 }
 
@@ -179,7 +223,7 @@ function addItemUnit(): void {
     componentName: 'ItemUnitModal',
     size: 'sm',
     refreshData: (unit: { id: number }) => {
-      itemStore.currentItem.unit_id = unit.id
+      form.unit_id = unit.id
     },
   })
 }
@@ -187,8 +231,7 @@ function addItemUnit(): void {
 function closeItemModal(): void {
   modalStore.closeModal()
   setTimeout(() => {
-    itemStore.resetCurrentItem()
-    v$.value.$reset()
+    triedSubmit.value = false
   }, 300)
 }
 </script>
@@ -212,13 +255,12 @@ function closeItemModal(): void {
             <BaseInputGroup
               :label="$t('items.name')"
               required
-              :error="v$.name.$error && v$.name.$errors[0].$message"
+              :error="triedSubmit ? nameError : ''"
             >
               <BaseInput
-                v-model="itemStore.currentItem.name"
+                v-model="form.name"
                 type="text"
-                :invalid="v$.name.$error"
-                @input="v$.name.$touch()"
+                :invalid="Boolean(triedSubmit && nameError)"
               />
             </BaseInputGroup>
 
@@ -237,7 +279,7 @@ function closeItemModal(): void {
 
             <BaseInputGroup :label="$t('items.unit')">
               <BaseMultiselect
-                v-model="itemStore.currentItem.unit_id"
+                v-model="form.unit_id"
                 label="name"
                 :options="itemStore.itemUnits"
                 value-prop="id"
@@ -281,16 +323,13 @@ function closeItemModal(): void {
 
             <BaseInputGroup
               :label="$t('items.description')"
-              :error="
-                v$.description.$error && v$.description.$errors[0].$message
-              "
+              :error="triedSubmit ? descriptionError : ''"
             >
               <BaseTextarea
-                v-model="itemStore.currentItem.description"
+                v-model="form.description"
                 rows="4"
                 cols="50"
-                :invalid="v$.description.$error"
-                @input="v$.description.$touch()"
+                :invalid="Boolean(triedSubmit && descriptionError)"
               />
             </BaseInputGroup>
           </BaseInputGrid>
@@ -315,7 +354,7 @@ function closeItemModal(): void {
             <template #left="slotProps">
               <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
             </template>
-            {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
+            {{ $t('general.save') }}
           </BaseButton>
         </div>
       </form>
diff --git a/resources/scripts/features/company/items/store.ts b/resources/scripts/features/company/items/store.ts
index 31595a83..382932c0 100644
--- a/resources/scripts/features/company/items/store.ts
+++ b/resources/scripts/features/company/items/store.ts
@@ -61,7 +61,12 @@ export const useItemStore = defineStore('item', () => {
 
   // Actions
   function resetCurrentItem(): void {
-    currentItem.value = createItemStub()
+    // Mutate in place (don't replace the object) so that vuelidate / v-model
+    // bindings attached to currentItem stay valid. Replacing it leaves the
+    // ItemModal validator bound to the old, empty object (it then reports a
+    // stale "name is required" even after you type). Stale/extra keys are
+    // harmless — the backend uses $request->validated().
+    Object.assign(currentItem.value, createItemStub(), { id: undefined })
   }
 
   async function fetchItems(params?: ItemListParams): Promise<ItemListResponse> {
diff --git a/resources/scripts/features/shared/document-form/DocumentItemsTable.vue b/resources/scripts/features/shared/document-form/DocumentItemsTable.vue
index df8cd2c0..b9eacf96 100644
--- a/resources/scripts/features/shared/document-form/DocumentItemsTable.vue
+++ b/resources/scripts/features/shared/document-form/DocumentItemsTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="rounded-xl border border-line-light shadow bg-surface">
+    <!-- Single shared item-create modal for the whole table (one instance, not one
+         per row — stacked HeadlessUI dialogs would otherwise close each other). -->
+    <ItemModal />
+
     <!-- Tax Included Toggle -->
     <div
       v-if="taxIncludedSetting === 'YES'"
@@ -109,6 +113,7 @@
 import { computed } from 'vue'
 import draggable from 'vuedraggable'
 import DocumentItemRow from './DocumentItemRow.vue'
+import ItemModal from '@/scripts/features/company/items/components/ItemModal.vue'
 import type { Currency } from '../../../types/domain/currency'
 import type { DocumentFormData } from './use-document-calculations'