refactor: show prefix on banner
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s

This commit is contained in:
Thanaphon Frappet 2025-04-10 17:21:29 +07:00
parent 69f368ede1
commit a5d73ba1ff
5 changed files with 117 additions and 12 deletions

View file

@ -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',

View file

@ -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'
? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
: `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
? setPrefixName(
{
namePrefix: employeeFormState.currentEmployee.namePrefix,
firstName: employeeFormState.currentEmployee.firstName,
lastName: employeeFormState.currentEmployee.lastName,
firstNameEN: employeeFormState.currentEmployee.firstNameEN,
lastNameEN: employeeFormState.currentEmployee.lastNameEN,
},
{ locale },
)
: '-'
"
:caption="currentFromDataEmployee.code"

View file

@ -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="

View file

@ -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;

View file

@ -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())