refactor: show prefix on banner
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s
This commit is contained in:
parent
69f368ede1
commit
a5d73ba1ff
5 changed files with 117 additions and 12 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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="
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue