refactor: update text in options

src/components/03_customer-management/employee/BasicInformation.vue

@@ -32,7 +32,7 @@ const customerBranch = defineModel<{
 const nrcNo = defineModel<string>('nrcNo');
 const code = defineModel<string>('code');
 
-const props = defineProps<{
+defineProps<{
   noAction?: boolean;
   title?: string;
   dense?: boolean;
@@ -52,52 +52,6 @@ defineEmits<{
   (e: 'delete'): void;
   (e: 'edit'): void;
 }>();
-
-const branchOptions = ref<Record<string, unknown>[]>([]);
-let branchFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-function listBranch(customerCode: string) {
-  if (!props.employeeOwnerOption) return '';
-  const groupedLists: { [key: string]: CustomerBranch } =
-    props.employeeOwnerOption.reduce((acc, item) => {
-      const code = item.codeCustomer;
-      if (!acc[code]) {
-        acc[code] = [];
-      }
-      acc[code].push(item);
-      return acc;
-    }, {});
-  const list: CustomerBranch[] = groupedLists[customerCode];
-  const names = list.map((v) => {
-    return v.customer.customerType === 'CORP'
-      ? locale.value === 'eng'
-        ? v.registerNameEN
-        : v.registerName
-      : locale.value === 'eng'
-        ? `${v.firstNameEN} ${v.lastNameEN}`
-        : `${v.firstName} ${v.lastName}`;
-  });
-
-  return names.join(' / ');
-}
-
-watch(
-  () => optionsBranch.value,
-  () => {
-    branchFilter = selectFilterOptionRefMod(
-      optionsBranch,
-      branchOptions,
-      'name',
-    );
-  },
-);
-
-onMounted(() => {
-  branchFilter = selectFilterOptionRefMod(optionsBranch, branchOptions, 'name');
-});
 </script>
 
 <template>
@@ -218,8 +172,17 @@ onMounted(() => {
 
               <div class="text-caption app-text-muted-2 q-mb-xs">
                 <span v-if="scope.opt.customer" class="col column">
-                  {{ $t('customerBranch.form.title') }}:
+                  {{
-                  {{ listBranch(scope.opt.codeCustomer) }}
+                    $t(
+                      `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
+                    )
+                  }}
+
+                  {{
+                    !scope.opt.code.endsWith('-00')
+                      ? +scope.opt.code.split('-')[1]
+                      : ''
+                  }}
                 </span>
                 <span v-if="scope.opt.province" class="col">
                   {{ $t('general.address') }}
@@ -261,8 +224,17 @@ onMounted(() => {
               class="text-caption app-text-muted-2"
               v-if="scope.opt.customer && scope.opt.province"
             >
-              {{ $t('customerBranch.form.title') }}:
+              {{
-              {{ listBranch(scope.opt.codeCustomer) }}
+                $t(
+                  `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
+                )
+              }}
+
+              {{
+                !scope.opt.code.endsWith('-00')
+                  ? +scope.opt.code.split('-')[1]
+                  : ''
+              }}
 
               {{ $t('general.address') }}
               {{
@@ -273,7 +245,6 @@ onMounted(() => {
               {{ scope.opt.subDistrict?.zipCode || '' }}
               <q-tooltip v-if="scope.opt.customer && scope.opt.province">
                 {{ $t('customerBranch.form.title') }}:
-                {{ listBranch(scope.opt.codeCustomer) }}
 
                 {{ $t('general.address') }}
                 {{