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;
+}>();
@@ -214,103 +221,14 @@ const prop = withDefaults(
@click.stop="$emit('view', props.row)"
/>
-
-
-
- $emit('view', props.row)"
- clickable
- dense
- class="row q-py-sm"
- style="white-space: nowrap"
- >
-
-
- {{ $t('general.viewDetail') }}
-
-
-
- $emit('edit', props.row)"
- >
-
-
- {{ $t('general.edit') }}
-
-
- $emit('delete', props.row)"
- >
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- $emit('toggleStatus', props.row)"
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('switchOnLabel')
- : $t('switchOffLabel')
- }}
-
-
-
-
-
-
-
+
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 @@
+
+
+
+
+ $emit('view')"
+ >
+
+
+ {{ $t('general.viewDetail') }}
+
+
+
+ $emit('edit')"
+ >
+
+
+ {{ $t('general.edit') }}
+
+
+ $emit('delete')"
+ >
+
+
+ {{ $t('general.delete') }}
+
+
+
+
+
+
+ $emit('changeStatus')"
+ />
+
+ {{
+ status !== 'INACTIVE'
+ ? $t('general.open')
+ : $t('general.close')
+ }}
+
+
+
+
+
+
+
+
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') }}
-
-
+ {
+ if (props.row.isHeadOffice) {
+ await triggerEdit(
+ 'drawer',
+ props.row.id,
+ 'headOffice',
+ props.row.code,
+ );
+ } else {
+ await triggerEdit(
+ 'drawer',
+ props.row.id,
+ 'subBranch',
+ );
+ }
+ formType = 'edit';
+ }
+ "
+ @delete="triggerDelete(props.row.id)"
+ @changeStatus="
+ async () => {
+ const res = await triggerChangeStatus(
+ props.row.id,
+ props.row.status,
+ );
- {
- if (props.row.isHeadOffice) {
- await triggerEdit(
- 'drawer',
- props.row.id,
- 'headOffice',
- props.row.code,
- );
- } else {
- await triggerEdit(
- 'drawer',
- props.row.id,
- 'subBranch',
- );
- }
- formType = 'edit';
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
-
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- {
- const res =
- await triggerChangeStatus(
- props.row.id,
- props.row.status,
- );
-
- if (res)
- props.row.status = res.status;
- }
- "
- :model-value="
- props.row.status === 'CREATED' ||
- props.row.status === 'ACTIVE'
- "
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('general.open')
- : $t('general.close')
- }}
-
-
-
-
-
-
-
+ if (res) props.row.status = res.status;
+ }
+ "
+ />
@@ -1409,145 +1311,56 @@ watch(currentHq, () => {
"
>
-
-
-
-
-
- {{ $t('general.viewDetail') }}
-
-
+ {
+ if (props.row.isHeadOffice) {
+ await triggerEdit(
+ 'drawer',
+ props.row.id,
+ 'headOffice',
+ props.row.code,
+ );
+ } else {
+ await triggerEdit(
+ 'drawer',
+ props.row.id,
+ 'subBranch',
+ );
+ }
+ formType = 'edit';
+ }
+ "
+ @delete="triggerDelete(props.row.id)"
+ @change-status="
+ async () => {
+ const res = await triggerChangeStatus(
+ props.row.id,
+ props.row.status,
+ );
- {
- if (props.row.isHeadOffice) {
- await triggerEdit(
- 'drawer',
- props.row.id,
- 'headOffice',
- props.row.code,
- );
- } else {
- await triggerEdit(
- 'drawer',
- props.row.id,
- 'subBranch',
- );
- }
- formType = 'edit';
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
-
-
-
- {{ $t('generaldelete') }}
-
-
-
-
-
-
- {
- const res =
- await triggerChangeStatus(
- props.row.id,
- props.row.status,
- );
-
- if (res)
- props.row.status = res.status;
- }
- "
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('general.open')
- : $t('general.close')
- }}
-
-
-
-
-
-
+ if (res) props.row.status = res.status;
+ }
+ "
+ />
@@ -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(
}
"
/>
-
-
-
-
- {
- openDialog('INFO', props.row.id);
- }
- "
- v-close-popup
- clickable
- dense
- class="row q-py-sm"
- style="white-space: nowrap"
- >
-
-
- {{ $t('general.viewDetail') }}
-
-
-
- {
- openDialog('INFO', props.row.id, true);
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
-
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- {
- triggerChangeStatus(
- props.row.id,
- props.row.status,
- );
- }
- "
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('general.open')
- : $t('general.close')
- }}
-
-
-
-
-
-
-
+ {
+ openDialog('INFO', props.row.id);
+ }
+ "
+ @edit="
+ () => {
+ openDialog('INFO', props.row.id, true);
+ }
+ "
+ @delete="onDelete(props.row.id)"
+ @change-status="
+ async () => {
+ triggerChangeStatus(props.row.id, props.row.status);
+ }
+ "
+ />
@@ -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)"
/>
-
-
-
- {
- const { branch, ...payload } = props.row;
- currentCustomer = payload;
- editCustomerForm(props.row.id);
- }
- "
- v-close-popup
- clickable
- dense
- class="row q-py-sm"
- style="white-space: nowrap"
- >
-
-
- {{ $t('general.viewDetail') }}
-
-
-
- {
- await editCustomerForm(props.row.id);
- customerFormState.dialogType = 'edit';
- customerFormState.readonly = false;
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
-
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- {
- triggerChangeStatus(
- props.row.id,
- props.row.status,
- );
- }
- "
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('general.open')
- : $t('general.close')
- }}
-
-
-
-
-
-
-
+ {
+ const { branch, ...payload } = props.row;
+ currentCustomer = payload;
+ editCustomerForm(props.row.id);
+ }
+ "
+ @edit="
+ async () => {
+ await editCustomerForm(props.row.id);
+ customerFormState.dialogType = 'edit';
+ customerFormState.readonly = false;
+ }
+ "
+ @delete="deleteCustomerById(props.row.id)"
+ @change-status="
+ async () => {
+ triggerChangeStatus(
+ props.row.id,
+ props.row.status,
+ );
+ }
+ "
+ />
@@ -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], () => {
"
/>
-
-
-
- {
- if (productMode === 'type') {
- editByTree = 'type';
- currentStatusProduct =
- props.row.status === 'INACTIVE';
- clearFormGroup();
- currentIdType = props.row.id;
- assignFormDataGroup(props.row);
- isEdit = false;
- drawerInfo = true;
- }
- if (productMode === 'group') {
- editByTree = 'group';
- currentStatusProduct =
- props.row.status === 'INACTIVE';
- clearFormGroup();
- assignFormDataGroup(props.row);
- isEdit = false;
- currentIdGrop = props.row.id;
- drawerInfo = true;
- }
- }
- "
- dense
- class="row q-py-sm"
- style="white-space: nowrap"
- >
-
-
- {{ $t('general.viewDetail') }}
-
-
+ {
+ if (productMode === 'type') {
+ editByTree = 'type';
+ currentStatusProduct =
+ props.row.status === 'INACTIVE';
+ clearFormGroup();
+ currentIdType = props.row.id;
+ assignFormDataGroup(props.row);
+ isEdit = false;
+ drawerInfo = true;
+ }
+ if (productMode === 'group') {
+ editByTree = 'group';
+ currentStatusProduct =
+ props.row.status === 'INACTIVE';
+ clearFormGroup();
+ assignFormDataGroup(props.row);
+ isEdit = false;
+ currentIdGrop = props.row.id;
+ drawerInfo = true;
+ }
+ }
+ "
+ @edit="
+ () => {
+ if (productMode === 'type') {
+ editByTree = 'type';
+ clearFormGroup();
+ currentIdType = props.row.id;
+ assignFormDataGroup(props.row);
+ isEdit = true;
+ drawerInfo = true;
+ }
+ if (productMode === 'group') {
+ editByTree = 'group';
+ clearFormGroup();
+ assignFormDataGroup(props.row);
+ isEdit = true;
+ currentIdGrop = props.row.id;
- {
- if (productMode === 'type') {
- editByTree = 'type';
- clearFormGroup();
- currentIdType = props.row.id;
- assignFormDataGroup(props.row);
- isEdit = true;
- drawerInfo = true;
- }
- if (productMode === 'group') {
- editByTree = 'group';
- clearFormGroup();
- assignFormDataGroup(props.row);
- isEdit = true;
- currentIdGrop = props.row.id;
-
- drawerInfo = true;
- }
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
-
- {
- if (productMode === 'type') {
- deleteProductById(props.row.id);
- }
- if (productMode === 'group') {
- deleteProductById(props.row.id);
- }
- }
- "
- >
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- {
- triggerChangeStatus(
- props.row.id,
- props.row.status,
- );
- }
- "
- />
-
- {{
- 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], () => {
}
"
/>
-
-
-
-
- {
- await fetchListOfOptionBranch();
- if (props.row.type === 'product') {
- currentIdProduct = props.row.id;
- assignFormDataProduct(props.row);
- dialogProductEdit = true;
- }
- if (props.row.type === 'service') {
- currentIdService = props.row.id;
- infoServiceEdit = false;
- assignFormDataProductService(
- props.row.id,
- );
- dialogServiceEdit = true;
- }
- }
- "
- v-close-popup
- clickable
- dense
- class="row q-py-sm"
- style="white-space: nowrap"
- >
-
-
- {{ $t('general.viewDetail') }}
-
-
-
- {
- await fetchListOfOptionBranch();
- if (props.row.type === 'product') {
- currentIdProduct = props.row.id;
- infoProductEdit = true;
- assignFormDataProduct(props.row);
- dialogProductEdit = true;
- }
- if (props.row.type === 'service') {
- currentIdService = props.row.id;
- infoServiceEdit = true;
- assignFormDataProductService(
- props.row.id,
- );
- dialogServiceEdit = true;
- }
- }
- "
- >
-
-
- {{ $t('general.edit') }}
-
-
- {
- if (props.row.type === 'product') {
- deleteProductConfirm(props.row.id);
- }
- if (props.row.type === 'service') {
- deleteServiceConfirm(props.row.id);
- }
- }
- "
- >
-
-
- {{ $t('general.delete') }}
-
-
-
-
-
-
- {
- triggerChangeStatus(
- props.row.id,
- props.row.status,
- props.row.type,
- );
- }
- "
- />
-
- {{
- props.row.status !== 'INACTIVE'
- ? $t('general.open')
- : $t('general.close')
- }}
-
-
-
-
-
-
-
+ {
+ await fetchListOfOptionBranch();
+ if (props.row.type === 'product') {
+ currentIdProduct = props.row.id;
+ assignFormDataProduct(props.row);
+ dialogProductEdit = true;
+ }
+ if (props.row.type === 'service') {
+ currentIdService = props.row.id;
+ infoServiceEdit = false;
+ assignFormDataProductService(props.row.id);
+ dialogServiceEdit = true;
+ }
+ }
+ "
+ @edit="
+ async () => {
+ await fetchListOfOptionBranch();
+ if (props.row.type === 'product') {
+ currentIdProduct = props.row.id;
+ infoProductEdit = true;
+ assignFormDataProduct(props.row);
+ dialogProductEdit = true;
+ }
+ if (props.row.type === 'service') {
+ currentIdService = props.row.id;
+ infoServiceEdit = true;
+ assignFormDataProductService(props.row.id);
+ dialogServiceEdit = true;
+ }
+ }
+ "
+ @delete="
+ () => {
+ if (props.row.type === 'product') {
+ deleteProductConfirm(props.row.id);
+ }
+ if (props.row.type === 'service') {
+ deleteServiceConfirm(props.row.id);
+ }
+ }
+ "
+ @changeStatus="
+ () => {
+ triggerChangeStatus(
+ props.row.id,
+ props.row.status,
+ props.row.type,
+ );
+ }
+ "
+ />
@@ -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], () => {
{