From 26d6c58390b2c74bc979026d91e01fd879396736 Mon Sep 17 00:00:00 2001 From: Net <93821485+somnetsak123@users.noreply.github.com> Date: Mon, 8 Jul 2024 16:38:17 +0700 Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?= =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20list=20=20=E0=B8=82=E0=B8=AD=E0=B8=87?= =?UTF-8?q?=20=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?= =?UTF-8?q?=E0=B8=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/03_customer-management/MainPage.vue | 481 +++++++++++++++++- 1 file changed, 455 insertions(+), 26 deletions(-) diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index 576d9e90..57387cc1 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -6,6 +6,7 @@ import useCustomerStore from 'src/stores/customer'; import useEmployeeStore from 'src/stores/employee'; import useOptionStore from 'src/stores/options'; import useMyBranchStore from 'src/stores/my-branch'; +import useUserStore from 'src/stores/user'; import { Status } from 'src/stores/types'; @@ -65,10 +66,53 @@ const { t, locale } = useI18n(); const utilsStore = useUtilsStore(); const userCustomer = useCustomerStore(); const useMyBranch = useMyBranchStore(); +const userStore = useUserStore(); const { fetchListOptionBranch } = useMyBranch; -const columns = [ +const columnsEmployee = [ + { + name: 'firstName', + align: 'left', + label: 'nameEmployee', + field: 'firstName', + sortable: true, + }, + { + name: 'type', + align: 'left', + label: 'type', + field: 'type', + sortable: true, + }, + { + name: 'formDialogInputNationality', + align: 'left', + label: 'formDialogInputNationality', + field: 'nationality', + }, + { + name: 'formDialogEmployeeNRCNo', + align: 'left', + label: 'formDialogEmployeeNRCNo', + field: 'nrcNo', + }, + { + name: 'formDialogInputAge', + align: 'left', + label: 'formDialogInputAge', + field: 'dateOfBirth', + }, + + { + name: 'branchLabel', + align: 'left', + label: 'branchLabel', + field: 'customerBranch', + }, +] satisfies QTableProps['columns']; + +const columnsCustomer = [ { name: 'customerName', align: 'left', @@ -77,7 +121,7 @@ const columns = [ sortable: true, }, { - name: 'customerType', + name: 'type', align: 'left', label: 'type', field: 'customerType', @@ -168,7 +212,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({ value: 'all', }); -const fieldDisplay = ref< +const fieldDisplayEmployer = ref< { label: string; value: string; @@ -181,7 +225,7 @@ const fieldDisplay = ref< { label: t('type'), - value: 'customerType', + value: 'type', }, { @@ -199,15 +243,69 @@ const fieldDisplay = ref< value: 'branchEmail', }, ]); + +const fieldDisplayEmployee = ref< + { + label: string; + value: string; + }[] +>([ + { + label: t('nameEmployee'), + value: 'firstName', + }, + { + label: t('type'), + value: 'type', + }, + + { + label: t('formDialogInputNationality'), + value: 'formDialogInputNationality', + }, + + { + label: t('formDialogEmployeeNRCNo'), + value: 'formDialogEmployeeNRCNo', + }, + + { + label: t('formDialogInputAge'), + value: 'formDialogInputAge', + }, + + { + label: t('branchLabel'), + value: 'branchLabel', + }, +]); + const fieldSelected = ref< ( | 'customerName' - | 'customerType' + | 'type' | 'personName' | 'telephoneNo' | 'branchEmail' + | 'firstName' + | 'formDialogInputNationality' + | 'formDialogEmployeeNRCNo' + | 'formDialogInputAge' + | 'branchLabel' )[] ->(['customerName', 'customerType', 'personName', 'telephoneNo', 'branchEmail']); +>([ + 'customerName', + 'type', + 'personName', + 'telephoneNo', + 'branchEmail', + 'firstName', + 'formDialogInputNationality', + 'formDialogInputNationality', + 'formDialogEmployeeNRCNo', + 'formDialogInputAge', + 'branchLabel', +]); const splitterModel = ref(15); const modeView = ref(true); @@ -391,8 +489,8 @@ const inputFile = (() => { return element; })(); -const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>(); -const listEmployee = ref(); +const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]); +const listEmployee = ref([]); const itemCard = [ { @@ -1124,7 +1222,7 @@ async function assignFormDataEmployee(id: string) { }; formDataEmployee.value = { - image: foundEmployee.profileImageUrl, + image: null, customerBranchId: foundEmployee.customerBranchId, nrcNo: foundEmployee.nrcNo, dateOfBirth: foundEmployee.dateOfBirth, @@ -1169,7 +1267,7 @@ async function assignFormDataEmployee(id: string) { } if (infoEmployeePersonCard.value) { - infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl; + infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl || ''; } } flowStore.rotate(); @@ -1536,12 +1634,15 @@ watch([inputSearch, currentStatus], async () => { { label: $t('statusINACTIVE'), value: 'INACTIVE' }, ]" > - { bordered :grid="modeView" :rows="listCustomer" - :columns="columns" + :columns="columnsCustomer" card-container-class=" q-col-gutter-md" row-key="name" :rows-per-page-options="[0]" @@ -1751,6 +1852,8 @@ watch([inputSearch, currentStatus], async () => {
+ { }, ], }" + :disabled="props.row.status === 'INACTIVE'" @history="openHistory(props.row.id)" @update-card=" () => { @@ -2237,7 +2334,332 @@ watch([inputSearch, currentStatus], async () => { class="col column justify-between q-px-md q-pt-md scroll" v-if="listEmployee.length !== 0" > - + + + + + + +
{ padding-inline: var(--size-2); } +.tags__parimary { + --_color: var(--blue-6-hsl); +} + .tags__purple { --_color: var(--violet-11-hsl); } @@ -3651,6 +4077,10 @@ watch([inputSearch, currentStatus], async () => { --_color: var(--teal-10-hsl); } +.dark .tags__parimary { + --_color: var(--blue-12-hsl); +} + .dark .tags__purple { --_color: var(--violet-10-hsl); } @@ -3666,8 +4096,7 @@ watch([inputSearch, currentStatus], async () => { .status-inactive { --_branch-status-color: var(--red-4-hsl); --_branch-badge-bg: var(--red-4-hsl); - filter: grayscale(1); - background-color: hsl(var(--gray-6-hsl) / 0.1); + filter: grayscale(0.5); opacity: 0.5; }