refactor: show prefix on banner

src/pages/02_personnel-management/MainPage.vue

@@ -11,7 +11,7 @@ import useAddressStore from 'stores/address';
 import useMyBranch from 'src/stores/my-branch';
 import { calculateAge } from 'src/utils/datetime';
 import { QSelect, useQuasar, type QTableProps } from 'quasar';
-import { dialog, baseUrl } from 'stores/utils';
+import { dialog, baseUrl, setPrefixName } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
 import { BranchUserStats } from 'stores/branch/types';
@@ -1559,7 +1559,18 @@ watch(
           v-model:toggle-status="formData.status"
           hideFade
           :toggle-title="$t('status.title')"
-          :title="`${locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
+          :title="
+            setPrefixName(
+              {
+                namePrefix: formData.namePrefix,
+                firstName: formData.firstName,
+                lastName: formData.lastName,
+                firstNameEN: formData.firstNameEN,
+                lastNameEN: formData.lastNameEN,
+              },
+              { locale },
+            )
+          "
           :caption="userCode"
           :img="
             `${baseUrl}/user/${currentUser.id}/profile-image/${formData.selectedImage}`.concat(
@@ -1837,7 +1848,18 @@ watch(
           }[formData.gender]
         "
         :toggleTitle="$t('status.title')"
-        :title="`${locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
+        :title="
+          setPrefixName(
+            {
+              namePrefix: formData.namePrefix,
+              firstName: formData.firstName,
+              lastName: formData.lastName,
+              firstNameEN: formData.firstNameEN,
+              lastNameEN: formData.lastNameEN,
+            },
+            { locale },
+          )
+        "
         :fallbackImg="
           {
             male: '/no-img-man.png',

src/pages/03_customer-management/MainPage.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { QSelect, useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
-import { baseUrl, waitAll } from 'src/stores/utils';
+import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
 import { dateFormat } from 'src/utils/datetime';
 import { dialogCheckData } from 'stores/utils';
 
@@ -2004,7 +2004,16 @@ const emptyCreateDialog = ref(false);
         "
         :title="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+            ? setPrefixName(
+                {
+                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                  firstName: customerFormData.customerBranch[0]?.firstName,
+                  lastName: customerFormData.customerBranch[0]?.lastName,
+                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
+                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                },
+                { locale },
+              )
             : customerFormData.customerBranch[0]?.registerName
         "
         :caption="
@@ -2452,6 +2461,20 @@ const emptyCreateDialog = ref(false);
         "
         :toggleTitle="$t('status.title')"
         hideFade
+        :title="
+          currentFromDataEmployee
+            ? setPrefixName(
+                {
+                  namePrefix: currentFromDataEmployee.namePrefix,
+                  firstName: currentFromDataEmployee.firstName,
+                  lastName: currentFromDataEmployee.lastName,
+                  firstNameEN: currentFromDataEmployee.firstNameEN,
+                  lastNameEN: currentFromDataEmployee.lastNameEN,
+                },
+                { locale },
+              )
+            : '-'
+        "
         @view="
           () => {
             employeeFormState.imageDialog = true;
@@ -4052,7 +4075,17 @@ const emptyCreateDialog = ref(false);
           "
           :title="
             customerFormData.customerType === 'PERS'
-              ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+              ? setPrefixName(
+                  {
+                    namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                    firstName: customerFormData.customerBranch[0]?.firstName,
+                    lastName: customerFormData.customerBranch[0]?.lastName,
+                    firstNameEN:
+                      customerFormData.customerBranch[0]?.firstNameEN,
+                    lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                  },
+                  { locale },
+                )
               : customerFormData.customerBranch[0]?.registerName
           "
           :caption="
@@ -4475,9 +4508,16 @@ const emptyCreateDialog = ref(false);
           fallback-cover="/images/employee-banner.png"
           :title="
             employeeFormState.currentEmployee
-              ? $i18n.locale === 'eng'
+              ? setPrefixName(
-                ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
+                  {
-                : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
+                    namePrefix: employeeFormState.currentEmployee.namePrefix,
+                    firstName: employeeFormState.currentEmployee.firstName,
+                    lastName: employeeFormState.currentEmployee.lastName,
+                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                  },
+                  { locale },
+                )
               : '-'
           "
           :caption="currentFromDataEmployee.code"

src/pages/05_quotation/MainPage.vue

@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 // NOTE: Import stores
 import useCustomerStore from 'stores/customer';
 import { useQuotationStore } from 'src/stores/quotations';
-import { dialog, isRoleInclude, notify } from 'stores/utils';
+import { dialog, isRoleInclude, notify, setPrefixName } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import useMyBranch from 'stores/my-branch';
@@ -1008,7 +1008,16 @@ async function storeDataLocal(id: string) {
         "
         :title="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+            ? setPrefixName(
+                {
+                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                  firstName: customerFormData.customerBranch[0]?.firstName,
+                  lastName: customerFormData.customerBranch[0]?.lastName,
+                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
+                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                },
+                { locale },
+              )
             : customerFormData.customerBranch[0]?.registerName
         "
         :caption="

src/pages/05_quotation/QuotationFormWorkerSelect.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { reactive, ref, watch, onMounted } from 'vue';
-import { baseUrl, notify } from 'src/stores/utils';
+import { baseUrl, notify, setPrefixName } from 'src/stores/utils';
 
 // NOTE: Import stores
 import { dialog } from 'stores/utils';
@@ -700,6 +700,20 @@ function setCurrentBranchId() {
         "
         :toggleTitle="$t('status.title')"
         hideFade
+        :title="
+          currentFromDataEmployee
+            ? setPrefixName(
+                {
+                  namePrefix: currentFromDataEmployee.namePrefix,
+                  firstName: currentFromDataEmployee.firstName,
+                  lastName: currentFromDataEmployee.lastName,
+                  firstNameEN: currentFromDataEmployee.firstNameEN,
+                  lastNameEN: currentFromDataEmployee.lastNameEN,
+                },
+                { locale },
+              )
+            : '-'
+        "
         @view="
           () => {
             employeeFormState.imageDialog = true;

src/stores/utils/index.ts

@@ -610,6 +610,26 @@ export function getEmployeeName(
   }[opts?.locale || 'eng'];
 }
 
+export function setPrefixName(
+  record: {
+    namePrefix: string;
+    firstName: string;
+    lastName: string;
+    firstNameEN: string;
+    lastNameEN: string;
+  },
+  opts?: {
+    locale?: string;
+  },
+) {
+  const data = record;
+
+  return {
+    ['eng']: `${typeof data.namePrefix === 'string' ? useOptionStore().mapOption(data.namePrefix) : ''} ${data.firstNameEN} ${data.lastNameEN}`,
+    ['tha']: `${typeof data.namePrefix === 'string' ? useOptionStore().mapOption(data.namePrefix) : ''} ${data.firstName} ${data.lastName}`,
+  }[opts?.locale || 'eng'];
+}
+
 export function toCamelCase(text: string): string {
   return text
     .replace(/[^a-zA-Z0-9]+(.)/g, (match, chr) => chr.toUpperCase())