diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue index 1d6abc7a..2e23bf00 100644 --- a/src/components/04_product-service/BasicInfoProduct.vue +++ b/src/components/04_product-service/BasicInfoProduct.vue @@ -82,7 +82,7 @@ onMounted(async () => { { {
{ { class="text-caption cursor-pointer" @click="item.handler?.()" > - {{ item.text ? $t(item.text) : '' }} + {{ + item.text + ? $t(item.text, { + ...(item.argsi18n || {}), + }) + : '' + }} { { --_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); opacity: 0.5; } 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; } diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue index 22de202e..5f6430e6 100644 --- a/src/pages/04_product-service/MainPage.vue +++ b/src/pages/04_product-service/MainPage.vue @@ -469,7 +469,7 @@ async function toggleStatusProduct(id: string, status: Status) { status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE', }); - await fetchListOfProduct(); + await alternativeFetch(); flowStore.rotate(); } @@ -478,7 +478,7 @@ async function toggleStatusService(id: string, status: Status) { status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE', }); - await fetchListOfService(); + await alternativeFetch(); flowStore.rotate(); } async function toggleStatusType(id: string, status: Status) { @@ -973,6 +973,11 @@ async function fetchStatus() { } async function alternativeFetch() { + + +console.log('asdasds'); + + if (productAndServiceTab.value === 'all') { await fetchListOfProductAndService(); flowStore.rotate(); @@ -1022,6 +1027,22 @@ onMounted(async () => { watch(productMode, () => { inputSearch.value = ''; currentStatus.value = 'All'; + const tmp: typeof utilsStore.currentTitle.path = []; + + if (productMode.value === 'type' || productMode.value === 'service') { + tmp.push({ + text: 'productGroup', + argsi18n: { name: pathGroupName.value }, + handler: () => { + productMode.value = 'type'; + }, + }); + } + if (productMode.value === 'service') { + tmp.push({ text: 'productType', argsi18n: { name: pathTypeName.value } }); + } + + utilsStore.currentTitle.path = tmp; }); watch(currentStatus, async () => { @@ -1183,47 +1204,6 @@ watch(inputSearchProductAndService, async () => {
- -
- -
- {{ pathGroupName }} -
-
- / -
-
- {{ pathTypeName }} -
-
-
{ const currentTitle = ref<{ title: string; - path: { text: string; handler?: () => unknown }[]; + path: { + text: string; + argsi18n?: Record; + handler?: () => unknown; + }[]; }>({ title: '', path: [