chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: misc

Browse source
This commit is contained in:
puriphatt 2024-08-20 18:04:42 +07:00
parent c22e3a4c52
commit 18efaa48b6
10 changed files with 214 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/02_personnel-management/FormPerson.vue
View file

@ -371,6 +371,7 @@ watch(
const today = new Date();
const date = parseAndFormatDate(v, locale);
birthDate = date && date > today ? today : date;
console.log(today);
}
}
"

9
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -153,7 +153,14 @@ watch(
hide-bottom-space
class="col-6"
:label="$t('formDialogInputPassportRef')"
v-model="previousPassportReference"
:model-value="
readonly
? previousPassportReference || '-'
: previousPassportReference
"
@update:model-value="
(v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
"
/>
<q-input
lazy-rules="ondemand"

40
src/components/03_customer-management/FormEmployeeVisa.vue
View file

@ -91,7 +91,7 @@ watch(
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-notebook"
name="mdi-notebook-outline"
style="background-color: var(--surface-3)"
/>
{{ $t(`${title}`) }}
@ -107,7 +107,6 @@ watch(
hide-selected
hide-bottom-space
input-debounce="0"
v-model="visaType"
option-value="value"
option-label="label"
lazy-rules="ondemand"
@ -119,6 +118,11 @@ watch(
:for="`${prefixId}-select-visa-type`"
:label="$t('formDialogInputVisaType')"
@filter="visaTypeFilter"
:model-value="readonly ? visaType || '-' : visaType"
@update:model-value="
(v) => (typeof v === 'string' ? (visaType = v) : '')
"
@clear="visaType = ''"
>
<template v-slot:no-option>
<q-item>
@ -141,7 +145,10 @@ watch(
hide-bottom-space
class="col-4"
:label="$t('formDialogInputVisaNo')"
v-model="visaNumber"
:model-value="readonly ? visaNumber || '-' : visaNumber"
@update:model-value="
(v) => (typeof v === 'string' ? (visaNumber = v) : '')
"
/>
<!-- :rules="[
(val: string) =>
@ -181,7 +188,9 @@ watch(
? readonly
? dateFormat(visaIssueDate)
: dateFormat(visaIssueDate, false, false, true)
: undefined
: readonly
? '-'
: undefined
"
@update:model-value="
(v) => {
@ -249,7 +258,9 @@ watch(
? readonly
? dateFormat(visaExpiryDate)
: dateFormat(visaExpiryDate, false, false, true)
: undefined
: readonly
? '-'
: undefined
"
@update:model-value="
(v) => {
@ -293,7 +304,10 @@ watch(
hide-bottom-space
class="col-5"
:label="$t('formDialogInputVisaPlace')"
v-model="visaIssuingPlace"
:model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
@update:model-value="
(v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
"
/>
<!-- :rules="[
(val: string) =>
@ -333,7 +347,9 @@ watch(
? readonly
? dateFormat(visaStayUntilDate)
: dateFormat(visaStayUntilDate, false, false, true)
: undefined
: readonly
? '-'
: undefined
"
@update:model-value="
(v) => {
@ -378,7 +394,11 @@ watch(
hide-bottom-space
class="col-5"
:label="$t('formDialogInputVisaTM6')"
v-model="tm6Number"
:model-value="readonly ? tm6Number || '-' : tm6Number"
@update:model-value="
(v) => (typeof v === 'string' ? (tm6Number = v) : '')
"
@clear="tm6Number = ''"
/>
<!-- :rules="[
(val: string) =>
@ -417,7 +437,9 @@ watch(
? readonly
? dateFormat(entryDate)
: dateFormat(entryDate, false, false, true)
: undefined
: readonly
? '-'
: undefined
"
@update:model-value="
(v) => {

5
src/components/03_customer-management/employee/BasicInformation.vue
View file

@ -349,7 +349,7 @@ onMounted(() => {
<q-input
lazy-rules="ondemand"
mask="## #### ###### #"
:mask="readonly ? '' : '## #### ###### #'"
:for="`${prefixId}-input-nrc-no`"
:dense="dense"
outlined
@ -357,7 +357,8 @@ onMounted(() => {
:readonly="readonly"
class="col-6"
:label="$t('formDialogEmployeeNRCNo')"
v-model="nrcNo"
:model-value="readonly ? nrcNo || '-' : nrcNo"
@update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"
/>
</div>
</div>

9
src/components/DrawerInfo.vue
View file

@ -82,7 +82,10 @@ function reset() {
</div>
<div v-else style="width: 38.8px"></div>
<div class="col text-weight-bold text-center">
<div
class="col text-weight-bold text-center ellipsis"
style="width: 0px"
>
<text
v-if="badgeLabel"
class="badge-label badge text-caption q-px-sm q-mr-sm"
@ -93,7 +96,9 @@ function reset() {
<text v-if="category" class="app-text-muted q-mr-sm">
{{ category }}
</text>
{{ title }}
<span>
{{ title }}
</span>
<text
v-if="!!statusBranch"

2
src/components/shared/PersonCard.vue
View file

@ -171,6 +171,7 @@ defineEmits<{
@click="$emit('editProfile')"
>
<q-img
v-if="!$slots.img"
:src="data.img ?? '/no-profile.png'"
style="
object-fit: cover;
@ -188,6 +189,7 @@ defineEmits<{
</div>
</template>
</q-img>
<slot name="img"></slot>
<q-badge
class="absolute-bottom-right"
style="

12
src/layouts/MainLayout.vue
View file

@ -19,6 +19,7 @@ import useMyBranchStore from 'stores/my-branch';
const useMyBranch = useMyBranchStore();
const { fetchListMyBranch } = useMyBranch;
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
interface NotificationButton {
item: string;
@ -52,6 +53,7 @@ const filterUnread = ref(false);
const unread = ref<number>(1);
// const filterRole = ref<string[]>();
const userImage = ref<string>();
const userGender = ref('');
const canvasRef = ref();
const currentLanguage = ref<string>('ไทย');
const language: {
@ -169,9 +171,12 @@ onMounted(async () => {
if (user === 'admin') return;
if (uid) {
const res = await userStore.fetchById(uid);
userImage.value = `${apiBaseUrl}/user/${uid}/image`;
if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
const res = await userStore.fetchById(uid);
if (res && res.gender) {
userGender.value = res.gender;
}
}
});
</script>
@ -455,8 +460,9 @@ onMounted(async () => {
}
"
:user-image="
getRole()?.includes('system') ? '/img-admin.png' : ' '
getRole()?.includes('system') ? '/img-admin.png' : userImage
"
:gender="userGender"
/>
</div>
</div>

80
src/layouts/ProfileMenu.vue
View file

@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
defineProps<{
userImage?: string;
gender?: string;
}>();
const inputFile = document.createElement('input');
@ -166,10 +167,40 @@ onMounted(async () => {
class="surface-1 bordered"
:size="$q.screen.lt.sm ? '30px' : '40px'"
>
<img :src="userImage" v-if="userImage" />
<q-img
:ratio="1"
class="text-center"
:src="userImage"
v-if="userImage"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-img
v-if="gender"
:ratio="1"
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
></q-img>
<q-icon
v-else
name="mdi-account-outline"
color="white"
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
/>
</div>
</template>
</q-img>
<q-icon
name="mdi-account"
v-else
name="mdi-account-outline"
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
/>
</q-avatar>
@ -213,7 +244,7 @@ onMounted(async () => {
</div>
</div>
<q-menu :offset="[5, 10]">
<q-menu :offset="[5, 10]" max-width="300px">
<div
no-padding
class="row justify-center bordered rounded"
@ -240,20 +271,55 @@ onMounted(async () => {
}
"
>
<img :src="userImage" v-if="userImage" />
<q-icon name="mdi-account" v-else />
<q-img
:ratio="1"
class="text-center"
:src="userImage"
v-if="userImage"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-img
v-if="gender"
:ratio="1"
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
></q-img>
<q-icon
v-else
name="mdi-account-outline"
color="white"
/>
</div>
</template>
</q-img>
<q-icon name="mdi-account-outline" v-else />
</q-avatar>
</div>
</div>
<div
class="text-subtitle2 q-mb-xs text-center"
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
style="margin-top: 58px"
>
<span v-if="isLoggedIn()">
{{ getName() }}
</span>
<span v-else>{{ 'Guest' }}</span>
<q-tooltip>
<span v-if="isLoggedIn()">
{{ getName() }}
</span>
<span v-else>{{ 'Guest' }}</span>
</q-tooltip>
</div>
<div
class="badge q-px-sm q-mb-md text-caption"
@ -368,7 +434,7 @@ onMounted(async () => {
</template>
<style scoped lang="scss">
.account-menu-down {
& ::before {
& ::before:not(.q-icon) {
color: var(--foreground);
}
}

106
src/pages/02_personnel-management/MainPage.vue
View file

@ -55,6 +55,7 @@ const userStore = useUserStore();
const branchStore = useBranchStore();
const adrressStore = useAddressStore();
const { data: userData } = storeToRefs(userStore);
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const defaultFormData = {
provinceId: null,
@ -656,7 +657,7 @@ async function assignFormData(idEdit: string) {
}
userCode.value = foundUser.code;
urlProfile.value = foundUser.profileImageUrl;
urlProfile.value = `${apiBaseUrl}/user/${foundUser.id}/image`;
isEdit.value = true;
profileSubmit.value = true;
@ -1166,50 +1167,35 @@ watch(
<div class="row items-center" style="flex-wrap: nowrap">
<div style="display: flex">
<div class="q-mr-md">
<q-avatar
size="md"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-avatar size="md">
<q-img
v-if="props.row.gender !== ''"
class="text-center"
:ratio="1"
:src="
props.row.profileImageUrl
? props.row.profileImageUrl
: props.row.userRole.includes('system')
? '/img-admin.png'
: props.row.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
:src="`${apiBaseUrl}/user/${props.row.id}/image`"
>
<template #error>
<q-img
v-if="
props.row.gender === 'male' ||
props.row.gender === 'female'
"
:src="
props.row.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
/>
<div
class="no-padding full-width full-height flex items-center justify-center"
:style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
>
<q-img
v-if="props.row.gender"
:src="
props.row.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
/>
<q-icon
v-else
size="sm"
name="mdi-account-outline"
style="color: white"
/>
</div>
</template>
</q-img>
<q-icon
v-else
size="sm"
name="mdi-account-outline"
style="color: white"
/>
<q-badge
class="absolute-bottom-right no-padding"
style="
@ -1496,7 +1482,49 @@ watch(
@toggle-status="
triggerChangeStatus(props.row.id, props.row.status)
"
/>
>
<template #img>
<q-img
class="text-center"
:ratio="1"
:src="`${apiBaseUrl}/user/${props.row.id}/image`"
style="
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 50%;
"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-img
v-if="props.row.gender"
:src="
props.row.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
/>
<q-icon
v-else
size="lg"
name="mdi-account-outline"
style="color: white"
/>
</div>
</template>
</q-img>
</template>
</PersonCard>
</div>
</template>
</q-table>

18
src/pages/03_customer-management/MainPage.vue
View file

@ -680,8 +680,8 @@ const emptyCreateDialog = ref(false);
? customerStats.map((v) => ({
count:
v.name === 'CORP'
? statsCustomerType?.CORP ?? 0
: statsCustomerType?.PERS ?? 0,
? (statsCustomerType?.CORP ?? 0)
: (statsCustomerType?.PERS ?? 0),
label:
v.name === 'CORP'
? 'customerLegalEntity'
@ -2352,7 +2352,7 @@ const emptyCreateDialog = ref(false);
</template>
</ImageUploadDialog>
<!-- ลูกจ้าง -->
<!-- ลูกจ้าง edit employee -->
<DrawerInfo
hide-action
v-model:drawer-open="employeeFormState.drawerModal"
@ -2425,13 +2425,21 @@ const emptyCreateDialog = ref(false);
active
use-toggle
color="white"
icon="mdi-account-plus-outline"
icon="mdi-account-outline"
bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
v-model:current-tab="employeeFormState.currentTab"
v-model:toggle-status="currentFromDataEmployee.status"
v-model:cover-url="employeeFormState.profileUrl"
fallback-cover="/images/employee-banner.png"
:img="employeeFormState.profileUrl"
:title="
employeeFormState.currentEmployee
? $i18n.locale === 'en-US'
? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
: `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
: '-'
"
:caption="currentFromDataEmployee.code"
:img="employeeFormState.profileUrl || '/images/employee-avatar.png'"
:tabs-list="[
{ name: 'personalInfo', label: 'personalInfo' },
{ name: 'healthCheck', label: 'healthCheck' },