done deleteUser, resetPassword feature

src/assets/configurations.example.ts

@@ -28,4 +28,6 @@ export enum API_PATHS {
   updateUserGroupInfo = '/user/group/update',
   getListUsers = '/user/list',
   addNewUser = '/user/add',
+  deleteUser = '/user/delete',
+  resetPassword = '/user/resetPass',
 }

src/i18n/vi/index.ts

@@ -111,5 +111,18 @@ export default {
       requireSex: 'Vui lòng chọn giới tính',
       requiredGroup: 'Vui lòng chọn nhóm người dùng',
     },
+    confirmActionsTitle: {
+      confirmDeleteUserTitle: 'Xác nhận',
+      confirmDeleteUserCancelBtnLabel: 'Huỷ',
+      confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản',
+      confirmResetPasswordContent:
+        'Bạn có muốn reset mật khẩu của người dùng này không',
+    },
+    actionMessages: {
+      addNewUserAccess: 'Thêm tài khoản thành công',
+      deleteUserAccess: 'Xoá tài khoản thành công',
+      updateUserAccess: 'Cập nhật thông tin tài khoản thành công',
+      resetPasswordAccess: 'Reset mật khẩu thành công',
+    },
   },
 };

src/pages/nguoi-dung/User.ts

 import { AxiosResponse } from 'axios';
-import { Notify } from 'quasar';
+import { Dialog, Notify } from 'quasar';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { PaginationResponse, UserObject } from 'src/assets/type';
 import { api, BaseResponseBody } from 'src/boot/axios';
@@ -76,6 +76,7 @@ export default defineComponent({
     const userTableRows: Ref<UserObject[]> = ref([]);
     const keyword = ref('');
     const showDialog = ref(false);
+    const showDialogUpdate = ref(false);
 
     const userName = ref('');
     const password = ref('');
@@ -96,6 +97,7 @@ export default defineComponent({
     const group: Ref<number | undefined> = ref();
     const scheduleAccess = ref('Chưa có lịch truy cập');
     const listScheduleAccess = ref(['Chưa có lịch truy cập']);
+    const $store = useStore();
 
     const getListUsers = async () => {
       try {
@@ -121,8 +123,6 @@ export default defineComponent({
       );
     });
 
-    const $store = useStore();
-
     const getListUserGroup = async () => {
       await $store.dispatch('authentication/getListUsers').then((response) => {
         const res = response as AxiosResponse<
@@ -162,13 +162,94 @@ export default defineComponent({
         })) as AxiosResponse<BaseResponseBody<unknown>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           showDialog.value = false;
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('userPage.actionMessages.addNewUserAccess'),
+          });
+
+          void getListUsers();
+        }
+      } catch (error) {}
+    };
+
+    const confirmDeleteUser = (item: any) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
+      Dialog.create({
+        title: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmDeleteUserTitle'
+        ),
+        message: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmDeleteUserContent'
+        ),
+        cancel: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmDeleteUserCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        void deleteUser(item.row.id);
+      });
+    };
+
+    const deleteUser = async (userID: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteUser,
+          method: 'GET',
+          params: {
+            userId: userID,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('userPage.actionMessages.deleteUserAccess'),
+          });
+          void getListUsers();
+        }
+      } catch (error) {}
+    };
+
+    const confirmResetPassword = (item: any) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      console.log(item, 'item');
+
+      Dialog.create({
+        title: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmDeleteUserTitle'
+        ),
+        message: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmResetPasswordContent'
+        ),
+        cancel: i18n.global.t(
+          'userPage.confirmActionsTitle.confirmDeleteUserCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        void resetPassword(item.row.id);
+      });
+    };
+
+    const resetPassword = async (userID: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.resetPassword,
+          method: 'GET',
+          params: {
+            userId: userID,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
           Notify.create({
             type: 'positive',
             message: i18n.global.t(
-              'userGroupPage.groupInfo.actionMessages.addNewSuccess'
+              'userPage.actionMessages.resetPasswordAccess'
             ),
           });
-
           void getListUsers();
         }
       } catch (error) {}
@@ -205,6 +286,10 @@ export default defineComponent({
       listScheduleAccess,
       addNewUser,
       getListUserGroup,
+      confirmDeleteUser,
+      deleteUser,
+      confirmResetPassword,
+      showDialogUpdate,
     };
   },
 });

src/pages/nguoi-dung/index.vue

@@ -46,22 +46,28 @@
             </q-chip>
           </q-td>
         </template>
-        <template v-slot:body-cell-action>
+        <template v-slot:body-cell-action="item">
           <q-td style="padding: 0" class="flex flex-center">
             <q-btn
               flat
               round
               color="primary"
-              icon="mdi-account-edit-outline
-"
+              icon="mdi-account-edit-outline"
             ></q-btn>
             <q-btn
               flat
               round
               color="primary"
               icon="mdi-account-convert-outline"
+              @click="confirmResetPassword(item)"
+            ></q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="delete"
+              @click="confirmDeleteUser(item)"
             ></q-btn>
-            <q-btn flat round color="primary" icon="delete"></q-btn>
           </q-td>
         </template>
       </q-table>