refactor: add agentUserId

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

@@ -209,7 +209,7 @@ withDefaults(
             v-model:email="item.email"
             v-model:contact-tel="item.contactTel"
             v-model:office-tel="item.officeTel"
-            v-model:agent="item.agent"
+            v-model:agent-user-id="item.agentUserId"
           />
         </q-tab-panel>
         <q-tab-panel name="attachment">

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

@@ -1,4 +1,14 @@
 <script lang="ts" setup>
+import useUserStore from 'stores/user';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import { QSelect } from 'quasar';
+
+const userStore = useUserStore();
+const { locale } = useI18n({ useScope: 'global' });
+
 defineProps<{
   readonly?: boolean;
   prefixId?: string;
@@ -8,6 +18,43 @@ const email = defineModel<string>('email');
 const contactTel = defineModel<string>('contactTel');
 const officeTel = defineModel<string>('officeTel');
 const agent = defineModel<string>('agent');
+
+const agentUserId = defineModel<string>('agentUserId');
+
+const agentOptions = ref<{ id: string; label: string; labelEN: string }[]>([]);
+
+async function fetchAgentOptions(query: string) {
+  const res = await userStore.fetchList({
+    includeBranch: true,
+    query: query,
+    pageSize: 99999,
+    userType: 'DELEGATE',
+    status: 'ACTIVE',
+  });
+
+  if (res) {
+    agentOptions.value = res.result.map((v) => ({
+      id: v.id,
+      label: v.firstName + ' ' + v.lastName,
+      labelEN: v.firstNameEN + ' ' + v.lastNameEN,
+    }));
+  }
+}
+
+async function filter(val: string, update: (...args: unknown[]) => void) {
+  update(
+    async () => {
+      await fetchAgentOptions(val);
+    },
+
+    (ref: QSelect) => {
+      if (val !== '' && ref.options && ref.options?.length > 0) {
+        ref.setOptionIndex(-1);
+        ref.moveOptionSelection(1, true);
+      }
+    },
+  );
+}
 </script>
 
 <template>
@@ -106,17 +153,18 @@ const agent = defineModel<string>('agent');
       </template>
     </q-input>
 
-    <q-input
-      :for="`${prefixId}-input-telephone`"
-      :id="`${prefixId}-input-telephone`"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
+    <SelectInput
+      @click="fetchAgentOptions"
+      :readonly
+      incremental
+      v-model="agentUserId"
+      id="quotation-branch"
       class="col-md-6 col-12"
+      :option="agentOptions"
       :label="$t('customer.form.agent')"
-      :model-value="readonly ? agent || '-' : agent"
-      @update:model-value="(v) => (typeof v === 'string' ? (agent = v) : '')"
+      option-value="id"
+      :option-label="locale === 'eng' ? 'labelEN' : 'label'"
+      @filter="(val: string, update) => filter(val, update)"
     />
   </div>
 </template>

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

@@ -194,7 +194,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
         homeCode: v.homeCode,
         contactTel: v.contactTel,
         officeTel: v.officeTel,
-        agent: v.agent,
+        agentUserId: v.agentUserId,
         customerName: v.customerName,
         authorizedName: v.authorizedName,
         authorizedNameEN: v.authorizedNameEN,
@@ -294,7 +294,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       email: currentFormData.value.customerBranch?.at(0)?.email || '',
       contactTel: currentFormData.value.customerBranch?.at(0)?.contactTel || '',
       officeTel: currentFormData.value.customerBranch?.at(0)?.officeTel || '',
-      agent: currentFormData.value.customerBranch?.at(0)?.agent || '',
+      agentUserId:
+        currentFormData.value.customerBranch?.at(0)?.agentUserId || '',
       status: 'CREATED',
 
       customerName:
@@ -421,7 +422,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     email: '',
     contactTel: '',
     officeTel: '',
-    agent: '',
+    agentUserId: undefined,
     status: 'CREATED',
 
     customerName: '',
@@ -508,13 +509,12 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
       wageRateText: _data.wageRateText,
       contactTel: _data.contactTel,
       officeTel: _data.officeTel,
-      agent: _data.agent,
+      agentUserId: _data.agentUserId,
       codeCustomer: _data.codeCustomer,
       customerName: _data.customerName,
       homeCode: _data.homeCode,
       authorizedName: _data.authorizedName,
       authorizedNameEN: _data.authorizedNameEN,
-      statusSave: false,
       file: [],
     };