feature(OH2-300): Implement delete user feature

informatici · Oct 23, 2024 · a204193 · a204193
1 parent ccb65ad
commit a204193
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 24 deletions.
diff --git a/src/components/accessories/admin/users/Users.tsx b/src/components/accessories/admin/users/Users.tsx
@@ -1,12 +1,14 @@
 import { Tab, Tabs } from "@mui/material";
-import React from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router";
 
 import Button from "../../button/Button";
 import UserGroupsTable from "./userGroupsTable";
 import UsersTable from "./usersTable";
 
+import { useAppDispatch } from "libraries/hooks/redux";
+import { deleteUser } from "state/users";
 import { PATHS } from "../../../../consts";
 import { UserDTO, UserGroupDTO } from "../../../../generated";
 
@@ -18,6 +20,7 @@ export enum TabOptions {
 export const Users = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
 
   const { state }: { state: { tab?: TabOptions } } = useLocation();
   const setTab = (tab: TabOptions) =>
@@ -33,6 +36,13 @@ export const Users = () => {
       state: row,
     });
 
+  const handleDeleteUser = useCallback(
+    (row: UserDTO) => {
+      dispatch(deleteUser(row.userName ?? ""));
+    },
+    [dispatch]
+  );
+
   return (
     <>
       <Tabs
@@ -58,6 +68,7 @@ export const Users = () => {
             </Button>
           }
           onEdit={handleEditUser}
+          onDelete={handleDeleteUser}
         />
       ) : (
         <UserGroupsTable

diff --git a/src/components/accessories/admin/users/usersTable/UsersTable.tsx b/src/components/accessories/admin/users/usersTable/UsersTable.tsx
@@ -1,33 +1,57 @@
 import { CircularProgress } from "@mui/material";
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { usePermission } from "libraries/permissionUtils/usePermission";
 import { UserDTO } from "../../../../../generated";
-import { getUsers } from "../../../../../state/users";
+import { deleteUserReset, getUsers } from "../../../../../state/users";
 import InfoBox from "../../../infoBox/InfoBox";
 import Table from "../../../table/Table";
 import { TFilterField } from "../../../table/filter/types";
 
+import { scrollToElement } from "libraries/uiUtils/scrollToElement";
 import { getUserGroups } from "state/usergroups";
 import classes from "./UsersTable.module.scss";
 
 interface IOwnProps {
   headerActions: ReactNode;
   onEdit: (row: UserDTO) => void;
+  onDelete: (row: UserDTO) => void;
 }
 
-export const UsersTable = ({ headerActions, onEdit }: IOwnProps) => {
+export const UsersTable = ({ headerActions, onEdit, onDelete }: IOwnProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const infoBoxRef = useRef<HTMLDivElement>(null);
+
   const canUpdate = usePermission("users.update");
+  const canDelete = usePermission("users.update");
+
+  const deleteUser = useAppSelector((state) => state.users.delete);
 
   useEffect(() => {
     dispatch(getUsers({}));
     dispatch(getUserGroups());
+
+    return () => {
+      dispatch(deleteUserReset());
+    };
   }, [dispatch]);
 
+  useEffect(() => {
+    if (deleteUser.status === "FAIL") {
+      scrollToElement(infoBoxRef.current);
+    }
+
+    if (
+      deleteUser.status === "SUCCESS" ||
+      deleteUser.status === "SUCCESS_EMPTY"
+    ) {
+      dispatch(getUsers({}));
+    }
+  }, [deleteUser.status, dispatch]);
+
   const header = ["userName", "userGroupName", "desc"];
 
   const label = {
@@ -65,7 +89,7 @@ export const UsersTable = ({ headerActions, onEdit }: IOwnProps) => {
         userGroupName:
           item.userGroupName?.desc ?? item.userGroupName?.code ?? "",
         desc: item.desc ?? "",
-        passwd: item.passwd ?? ""
+        passwd: item.passwd ?? "",
       };
     });
   };
@@ -85,23 +109,31 @@ export const UsersTable = ({ headerActions, onEdit }: IOwnProps) => {
 
           case "SUCCESS":
             return (
-              <Table
-                rowData={formatDataToDisplay(data ?? [])}
-                tableHeader={header}
-                labelData={label}
-                columnsOrder={order}
-                rowsPerPage={10}
-                filterColumns={filters}
-                manualFilter={false}
-                isCollapsabile={false}
-                rawData={(data ?? []).map((user) => ({
-                  ...user,
-                  userGroupName: user.userGroupName?.code,
-                }))}
-                rowKey="userName"
-                headerActions={headerActions}
-                onEdit={canUpdate ? onEdit: undefined}
-              />
+              <>
+                {deleteUser.status === "FAIL" && (
+                  <div ref={infoBoxRef} className="info-box-container">
+                    <InfoBox type="error" message={deleteUser.error?.message} />
+                  </div>
+                )}
+                <Table
+                  rowData={formatDataToDisplay(data ?? [])}
+                  tableHeader={header}
+                  labelData={label}
+                  columnsOrder={order}
+                  rowsPerPage={10}
+                  filterColumns={filters}
+                  manualFilter={false}
+                  isCollapsabile={false}
+                  rawData={(data ?? []).map((user) => ({
+                    ...user,
+                    userGroupName: user.userGroupName?.code,
+                  }))}
+                  rowKey="userName"
+                  headerActions={headerActions}
+                  onEdit={canUpdate ? onEdit : undefined}
+                  onDelete={canDelete ? onDelete : undefined}
+                />
+              </>
             );
           case "SUCCESS_EMPTY":
             return <InfoBox type="info" message={t("common.emptydata")} />;

diff --git a/src/mockServer/routes/users.js b/src/mockServer/routes/users.js
@@ -29,6 +29,16 @@ export const userRoutes = (server) => {
     server.put("/:username").intercept((_req, res) => {
       res.status(200).json(_req.jsonBody());
     });
+    server.delete("/:username").intercept((req, res) => {
+      const username = req.params.username;
+      switch (username) {
+        case "FAIL":
+          res.status(400).json({ message: "Fail to delete user" });
+          break;
+        default:
+          res.status(204);
+      }
+    });
     server.get("/:username/settings/dashboard").intercept((req, res) => {
       res.status(200).json(dashboardSettingDTO);
     });

diff --git a/src/mockServer/routes/wards.js b/src/mockServer/routes/wards.js
@@ -40,10 +40,10 @@ export const wardsRoutes = (server) => {
       const code = req.params.code;
       switch (code) {
         case "FAIL":
-          res.status(400).json({ message: "Fail to update ward" });
+          res.status(400).json({ message: "Fail to delete ward" });
           break;
         default:
-          res.status(200);
+          res.status(204);
       }
     });
   });