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

feat: customer employee update & drawer info

Browse source
This commit is contained in:
puriphatt 2024-06-12 08:40:07 +00:00
parent a61b3e550e
commit 46a7f9ca96
7 changed files with 473 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/components/02_personnel-management/InfoForm.vue
View file

@ -8,6 +8,7 @@ defineProps<{
addressTitle?: string;
addressTitleEN?: string;
noAddress?: boolean;
noPaddingTab?: boolean;
}>();
const address = defineModel('address', { default: '' });
@ -16,53 +17,105 @@ const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });
const employeeTab = defineModel<string>('employeeTab');
const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
</script>
<template>
<div class="row items-stretch" style="position: absolute; inset: 0">
<div class="col-3" v-if="$slots['person-card']">
<slot name="person-card"></slot>
</div>
<div class="column absolute-top" style="inset: 0">
<div
:class="{
'col-9': $slots['person-card'],
'col-12': !$slots['person-card'],
}"
style="position: relative"
v-if="tabsList && tabsList.length > 0"
class="row surface-2 q-px-md q-pt-md full-width"
style="border-bottom: 1px solid var(--brand-1)"
>
<AppBox
bordered
:class="{
'q-my-md q-mr-md': $slots['person-card'],
'q-ma-md': !$slots['person-card'],
}"
style="position: absolute; overflow-y: auto; inset: 0"
<q-tabs
dense
class="app-text-muted cancel-overflow"
v-model="employeeTab"
active-class="active-tab"
indicator-color="transparent"
>
<div class="row q-col-gutter-y-md">
<slot name="information"></slot>
<slot name="person"></slot>
<slot name="address" v-if="!noAddress">
<FormAddress
dense
outlined
separator
:readonly="readonly"
v-model:address="address"
v-model:addressEN="addressEN"
v-model:provinceId="provinceId"
v-model:districtId="districtId"
v-model:subDistrictId="subDistrictId"
v-model:zipCode="zipCode"
:title="titleFormAddress"
:addressTitle="addressTitle || ''"
:addressTitleEN="addressTitleEN || ''"
v-if="!$slots.address"
/>
</slot>
<slot name="qr-code"></slot>
<slot name="location"></slot>
<slot name="by-type"></slot>
</div>
</AppBox>
<q-tab
v-for="tab in tabsList"
v-bind:key="tab.name"
class="content-tab text-capitalize"
:name="tab.name"
:label="$t(tab.label)"
style="z-index: 999"
/>
</q-tabs>
</div>
<div class="row full-width" style="flex: 1">
<div class="col-3" v-if="$slots['person-card']">
<slot name="person-card"></slot>
</div>
<div
:class="{
'col-9': $slots['person-card'],
'col-12': !$slots['person-card'],
}"
class="relative-position"
>
<AppBox
bordered
:noPadding="noPaddingTab"
:class="{
'q-my-md q-mr-md': $slots['person-card'],
'q-ma-md': !$slots['person-card'],
}"
style="position: absolute; overflow-y: auto; inset: 0"
>
<div class="row q-col-gutter-y-md">
<slot name="information"></slot>
<slot name="person"></slot>
<slot name="address" v-if="!noAddress">
<FormAddress
dense
outlined
separator
:readonly="readonly"
v-model:address="address"
v-model:addressEN="addressEN"
v-model:provinceId="provinceId"
v-model:districtId="districtId"
v-model:subDistrictId="subDistrictId"
v-model:zipCode="zipCode"
:title="titleFormAddress"
:addressTitle="addressTitle || ''"
:addressTitleEN="addressTitleEN || ''"
v-if="!$slots.address"
/>
</slot>
<slot name="qr-code"></slot>
<slot name="location"></slot>
<slot name="by-type"></slot>
</div>
</AppBox>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.active-tab {
color: var(--brand-1);
background-color: var(--surface-3);
border-top: 1px solid var(--brand-1);
border-left: 1px solid var(--brand-1);
border-right: 1px solid var(--brand-1);
border-top-left-radius: var(--radius-2);
border-top-right-radius: var(--radius-2);
margin-bottom: -1.5px;
border-bottom: 3px solid var(--surface-3);
}
.content-tab {
border-top-left-radius: var(--radius-2);
border-top-right-radius: var(--radius-2);
position: relative;
}
:deep(.q-tabs__content) {
overflow: visible;
}
</style>

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

@ -9,7 +9,7 @@ const employerID = defineModel<string>('employerID');
// employee
const customerBranchId = defineModel<string>('customerBranchId');
const employeeID = defineModel<string>('employeeID');
const employeeId = defineModel<string>('employeeId');
const nrcNo = defineModel<string>('nrcNo');
defineProps<{
@ -85,6 +85,7 @@ onMounted(async () => {});
id="select-employer-branch"
use-input
input-debounce="0"
:hide-dropdown-icon="readonly"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -113,7 +114,7 @@ onMounted(async () => {});
hide-bottom-space
class="col-3"
:label="$t('formDialogEmployeeID')"
v-model="employeeID"
v-model="employeeId"
/>
<q-input
mask="## #### ###### #"

2
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

@ -135,7 +135,7 @@ onMounted(async () => {
v-bind:key="index"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
style="overflow: auto"
>
<div class="col-3 app-text-muted">
• {{ $t(`formDialogTitleHealthCheck`) }}

2
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -107,7 +107,7 @@ onMounted(async () => {
v-bind:key="index"
:name="`tab${index}`"
class="row col-12 items-start"
style="overflow: auto; height: 50vh"
style="overflow: auto"
>
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
<div class="col-9 row q-col-gutter-md">

1
src/components/DrawerInfo.vue
View file

@ -145,6 +145,7 @@ function reset() {
style="position: relative"
:class="{ dark: $q.dark.isActive }"
>
<slot></slot>
<slot name="info"></slot>
</div>