From bc578d569c12b0da73441b42b7567e5b1ba2e284 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Tue, 27 Aug 2024 11:46:26 +0700 Subject: [PATCH] refactor: kebab action --- .../01_branch-management/BranchCard.vue | 4 +- .../03_customer-management/TableEmpoloyee.vue | 114 +--- .../ProductCardComponent.vue | 106 +--- .../TotalProductCardComponent.vue | 88 +--- src/components/TreeComponent.vue | 109 +--- src/components/shared/KebabAction.vue | 125 +++++ src/components/shared/PersonCard.vue | 99 +--- src/pages/01_branch-management/MainPage.vue | 400 ++++----------- .../02_personnel-management/MainPage.vue | 151 +----- src/pages/03_customer-management/MainPage.vue | 194 ++----- src/pages/04_product-service/MainPage.vue | 485 ++++++------------ 11 files changed, 518 insertions(+), 1357 deletions(-) create mode 100644 src/components/shared/KebabAction.vue diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue index 0351bad2..84dcb12b 100644 --- a/src/components/01_branch-management/BranchCard.vue +++ b/src/components/01_branch-management/BranchCard.vue @@ -64,9 +64,7 @@ defineProps<{
- - - +
-import ToggleButton from '../button/ToggleButton.vue'; import { calculateAge, dateFormat } from 'src/utils/datetime'; import PersonCard from 'components/shared/PersonCard.vue'; +import KebabAction from '../shared/KebabAction.vue'; const pageSize = defineModel('pageSize', { default: 30 }); const currentPage = defineModel('currentPage', { default: 1 }); @@ -30,6 +30,13 @@ const prop = withDefaults( ], }, ); + +defineEmits<{ + (e: 'view', data: any): void; + (e: 'edit', data: any): void; + (e: 'delete', data: any): void; + (e: 'toggleStatus', data: any): void; +}>(); diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue index 8c54308b..1f5a2014 100644 --- a/src/components/04_product-service/ProductCardComponent.vue +++ b/src/components/04_product-service/ProductCardComponent.vue @@ -1,7 +1,7 @@ + diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue index 10dc67c7..2f6d1a15 100644 --- a/src/components/shared/PersonCard.vue +++ b/src/components/shared/PersonCard.vue @@ -3,7 +3,7 @@ import { Icon } from '@iconify/vue'; import AppBox from 'components/app/AppBox.vue'; import AppCircle from 'components/app/AppCircle.vue'; -import ToggleButton from '../button/ToggleButton.vue'; +import KebabAction from './KebabAction.vue'; defineProps<{ data: { @@ -74,91 +74,18 @@ defineEmits<{ @click.stop="$emit('history')" /> - - - - - - - {{ $t('general.viewDetail') }} - - - - - - {{ $t('general.edit') }} - - - - - - {{ $t('general.delete') }} - - - - -
- - - {{ !disabled ? $t('general.open') : $t('general.close') }} - -
- - - - - +
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 3c3f2d73..56f4f036 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -36,6 +36,7 @@ import ImageUploadDialog from 'components/ImageUploadDialog.vue'; import FormBank from 'components/01_branch-management/FormBank.vue'; import ToggleButton from 'src/components/button/ToggleButton.vue'; import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue'; +import KebabAction from 'src/components/shared/KebabAction.vue'; import { User } from 'src/stores/user/types'; import { EditButton, @@ -479,10 +480,10 @@ function triggerDelete(id: string) { dialog({ color: 'negative', icon: 'mdi-alert', - title: t('deleteConfirmTitle'), - actionText: t('agree'), + title: t('dialog.title.confirmDelete'), + actionText: t('general.delete'), persistent: true, - message: t('deleteConfirmMessage'), + message: t('dialog.message.confirmDelete'), action: async () => { await branchStore.deleteById(id); await branchStore.fetchList({ pageSize: 99999 }); @@ -1189,155 +1190,56 @@ watch(currentHq, () => { }} - - - - - - - {{ $t('general.viewDetail') }} - - + - - - {{ $t('general.edit') }} - - - - - - {{ $t('general.delete') }} - - - - - -
- - - {{ - props.row.status !== 'INACTIVE' - ? $t('general.open') - : $t('general.close') - }} - -
- - - - - + if (res) props.row.status = res.status; + } + " + /> @@ -1409,145 +1311,56 @@ watch(currentHq, () => { " > @@ -1622,7 +1435,7 @@ watch(currentHq, () => { class="col surface-1 q-ma-lg rounded bordered scroll row" id="branch-form" > -
+
+
{
{ />
@@ -1952,6 +1767,7 @@ watch(currentHq, () => { inputFile.click(); } " + class="q-mb-xl" /> { await userStore.deleteById(id); @@ -1276,124 +1276,26 @@ watch( } " /> - - - - - - - - {{ $t('general.viewDetail') }} - - - - - - - {{ $t('general.edit') }} - - - - - - {{ $t('general.delete') }} - - - - - -
- - - {{ - props.row.status !== 'INACTIVE' - ? $t('general.open') - : $t('general.close') - }} - -
- - - - - + @@ -1737,8 +1639,9 @@ watch(
@@ -1987,7 +1889,6 @@ watch( v-model:checkpoint="formData.checkpoint" v-model:checkpointEN="formData.checkpointEN" v-model:agencyFile="agencyFile" - class="q-mb-xl" />
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index 77612af4..f0c30fc3 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -65,7 +65,7 @@ import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmplo import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue'; import useOptionStore from 'stores/options'; import { DialogContainer, DialogHeader } from 'components/dialog'; -import ToggleButton from 'src/components/button/ToggleButton.vue'; +import KebabAction from 'src/components/shared/KebabAction.vue'; const { t, locale } = useI18n(); const $q = useQuasar(); @@ -267,10 +267,10 @@ function deleteCustomerById(id: string) { dialog({ color: 'negative', icon: 'mdi-alert', - title: t('deleteConfirmTitle'), - actionText: t('ok'), + title: t('dialog.title.confirmDelete'), + actionText: t('general.delete'), persistent: true, - message: t('deleteConfirmMessage'), + message: t('dialog.message.confirmDelete'), action: async () => { await customerStore.deleteById(id); @@ -287,10 +287,10 @@ async function deleteCustomerBranchById(id: string) { dialog({ color: 'negative', icon: 'mdi-alert', - title: t('deleteConfirmTitle'), - actionText: t('ok'), + title: t('dialog.title.confirmDelete'), + actionText: t('general.delete'), persistent: true, - message: t('deleteConfirmMessage'), + message: t('dialog.message.confirmDelete'), action: async () => { await customerStore.deleteBranchById(id); flowStore.rotate(); @@ -385,13 +385,13 @@ async function triggerChangeStatus(id: string, status: string) { color: status !== 'INACTIVE' ? 'warning' : 'info', icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline', - title: t('confirmChangeStatusTitle'), + title: t('dialog.title.confirmChangeStatus'), actionText: - status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'), + status !== 'INACTIVE' ? t('general.close') : t('general.open'), message: status !== 'INACTIVE' - ? t('confirmChangeStatusOffMessage') - : t('confirmChangeStatusOnMessage'), + ? t('dialog.message.confirmChangeStatusOff') + : t('dialog.message.confirmChangeStatusOn'), action: async () => { if (currentTab.value === 'employee') { await toggleStatusEmployee(id, status === 'INACTIVE' ? false : true) @@ -428,10 +428,10 @@ async function deleteEmployeeById(opts: { dialog({ color: 'negative', icon: 'mdi-alert', - title: t('deleteConfirmTitle'), - actionText: t('ok'), + title: t('dialog.title.confirmDelete'), + actionText: t('general.delete'), persistent: true, - message: t('deleteConfirmMessage'), + message: t('dialog.message.confirmDelete'), action: async () => { if (opts.type === 'healthCheck') { await employeeFormStore.deleteHealthCheck(); @@ -1172,130 +1172,33 @@ const emptyCreateDialog = ref(false); @click.stop="editCustomerForm(props.row.id)" /> - - - - - - - {{ $t('general.viewDetail') }} - - - - - - - {{ $t('general.edit') }} - - - - - - {{ $t('general.delete') }} - - - - - -
- - - {{ - props.row.status !== 'INACTIVE' - ? $t('general.open') - : $t('general.close') - }} - -
- - - - - + @@ -1315,12 +1218,25 @@ const emptyCreateDialog = ref(false); @view=" (item: any) => { employeeFormState.drawerModal = true; - //employeeFormState.isEmployeeEdit = true; + employeeFormState.isEmployeeEdit = false; employeeFormStore.assignFormDataEmployee( item.id, ); } " + @edit=" + (item: any) => editEmployeeFormPersonal(item.id) + " + @delete=" + (item: any) => { + deleteEmployeeById({ id: item.id }); + } + " + @toggle-status=" + async (item: any) => { + triggerChangeStatus(item.id, item.status); + } + " /> diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue index c372c9c4..ebb7a4a5 100644 --- a/src/pages/04_product-service/MainPage.vue +++ b/src/pages/04_product-service/MainPage.vue @@ -27,6 +27,7 @@ import DialogForm from 'components/DialogForm.vue'; import ProfileBanner from 'components/ProfileBanner.vue'; import SideMenu from 'components/SideMenu.vue'; import ImageUploadDialog from 'components/ImageUploadDialog.vue'; +import KebabAction from 'src/components/shared/KebabAction.vue'; import { EditButton, DeleteButton, @@ -2075,181 +2076,74 @@ watch([currentStatusList, productMode], () => { " /> - - - - - - - {{ $t('general.viewDetail') }} - - + - - - {{ $t('general.edit') }} - - - - - - - {{ $t('general.delete') }} - - - - - -
- - - {{ - props.row.status !== 'INACTIVE' - ? $t('general.open') - : $t('general.close') - }} - -
- - - - - + drawerInfo = true; + } + } + " + @delete=" + () => { + if (productMode === 'type') { + deleteProductById(props.row.id); + } + if (productMode === 'group') { + deleteProductById(props.row.id); + } + } + " + @changeStatus=" + async () => { + triggerChangeStatus( + props.row.id, + props.row.status, + ); + } + " + /> @@ -2999,165 +2893,62 @@ watch([currentStatusList, productMode], () => { } " /> - - - - - - - - {{ $t('general.viewDetail') }} - - - - - - - {{ $t('general.edit') }} - - - - - - {{ $t('general.delete') }} - - - - - -
- - - {{ - props.row.status !== 'INACTIVE' - ? $t('general.open') - : $t('general.close') - }} - -
- - - - - + @@ -3209,6 +3000,16 @@ watch([currentStatusList, productMode], () => { } } " + @menuDelete=" + () => { + if (row.type === 'product') { + deleteProductConfirm(row.id); + } + if (row.type === 'service') { + deleteServiceConfirm(row.id); + } + } + " /> @@ -3374,8 +3175,9 @@ watch([currentStatusList, productMode], () => {
{ />
{
{
@@ -4156,8 +3961,9 @@ watch([currentStatusList, productMode], () => {
{