refactor: handle name trim

src/pages/03_customer-management/components/employer/EmployerFormAbout.vue

@@ -129,7 +129,10 @@ watch(
           class="col-12 col-md-6"
           :label="$t('customer.form.registerName')"
           for="input-register-name"
-          v-model="registerName"
+          :model-value="registerName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (registerName = v.trim()) : '')
+          "
           :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
 
@@ -141,7 +144,10 @@ watch(
           class="col-12 col-md-6"
           label="Company name"
           for="input-register-name-en"
-          v-model="registerNameEN"
+          :model-value="registerNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (registerNameEN = v.trim()) : '')
+          "
           :rules="[
             (val: string) =>
               val === '' ||
@@ -160,7 +166,10 @@ watch(
           class="col-6 col-md-5"
           :label="$t('customer.form.employerName')"
           for="input-legal-person-no"
-          v-model="customerName"
+          :model-value="customerName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (customerName = v.trim()) : '')
+          "
         />
 
         <q-input
@@ -329,7 +338,6 @@ watch(
             </q-item>
           </template>
         </q-select>
-
         <q-input
           :for="`${prefixId}-input-first-name`"
           dense
@@ -338,7 +346,10 @@ watch(
           hide-bottom-space
           class="col"
           :label="$t('personnel.form.firstName')"
-          v-model="firstName"
+          :model-value="firstName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (firstName = v.trim()) : '')
+          "
           :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
         <q-input
@@ -349,7 +360,10 @@ watch(
           hide-bottom-space
           class="col"
           :label="$t('personnel.form.lastName')"
-          v-model="lastName"
+          :model-value="lastName"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (lastName = v.trim()) : '')
+          "
           :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
       </div>
@@ -383,7 +397,10 @@ watch(
           hide-bottom-space
           class="col"
           label="Name"
-          v-model="firstNameEN"
+          :model-value="firstNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (firstNameEN = v.trim()) : '')
+          "
           :rules="[
             (val: string) => !!val || $t('form.error.required'),
             (val: string) =>
@@ -398,7 +415,10 @@ watch(
           hide-bottom-space
           class="col"
           label="Surname"
-          v-model="lastNameEN"
+          :model-value="lastNameEN"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (lastNameEN = v.trim()) : '')
+          "
           :rules="[
             (val: string) => !!val || $t('form.error.required'),
             (val: string) =>

src/pages/03_customer-management/form.ts

@@ -1,6 +1,10 @@
 import { ref, toRaw, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { CustomerBranchCreate, CustomerCreate } from 'stores/customer/types';
+import {
+  CustomerBranchCreate,
+  CustomerCreate,
+  CustomerType,
+} from 'stores/customer/types';
 import { Employee, EmployeeCreate } from 'stores/employee/types';
 import { useI18n } from 'vue-i18n';
 
@@ -29,7 +33,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     customerBranch: [],
     selectedImage: '',
     status: 'CREATED',
-    customerType: 'CORP',
+    customerType: CustomerType.Corporate,
     registeredBranchId: branchStore.currentMyBranch?.id || '',
     image: null,
   };
@@ -1092,6 +1096,20 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     selectedImage: string;
     list: { url: string; imgFile: File | null; name: string }[];
   }) {
+    currentFromDataEmployee.value.firstName =
+      currentFromDataEmployee.value.firstName.trim();
+    currentFromDataEmployee.value.middleName =
+      currentFromDataEmployee.value.middleName?.trim();
+    currentFromDataEmployee.value.lastName =
+      currentFromDataEmployee.value.lastName.trim();
+
+    currentFromDataEmployee.value.firstNameEN =
+      currentFromDataEmployee.value.firstNameEN.trim();
+    currentFromDataEmployee.value.middleNameEN =
+      currentFromDataEmployee.value.middleNameEN?.trim();
+    currentFromDataEmployee.value.lastNameEN =
+      currentFromDataEmployee.value.lastNameEN.trim();
+
     if (state.value.dialogType === 'create') {
       const res = await employeeStore.create(
         {