update(OH2-443): Refactor user / group reset/cancel operations

informatici · Nov 29, 2024 · 47c5618 · 47c5618
1 parent 4733480
commit 47c5618
Show file tree

Hide file tree

Showing 9 changed files with 344 additions and 47 deletions.
diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -15,6 +15,7 @@ import TextField from "../../../textField/TextField";
 import { PATHS } from "../../../../../consts";
 import { usePermission } from "../../../../../libraries/permissionUtils/usePermission";
 
+import { Cancel } from "@mui/icons-material";
 import { CircularProgress } from "@mui/material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import { PermissionDTO } from "generated/models/PermissionDTO";
@@ -45,6 +46,8 @@ export const EditGroup = () => {
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const update = useAppSelector((state) => state.usergroups.update);
   const permissions = useAppSelector((state) => state.permissions.getAll);
   const group = useAppSelector((state) => state.usergroups.currentGroup);
@@ -133,10 +136,29 @@ export const EditGroup = () => {
     };
   }, []);
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -168,10 +190,24 @@ export const EditGroup = () => {
       permissions.isLoading ? (
         <CircularProgress style={{ marginLeft: "50%", position: "relative" }} />
       ) : (
-        <div className="newGroupForm">
-          <form className="newGroupForm__form" onSubmit={handleSubmit}>
+        <div className="editGroupForm">
+          <div className="editGroupForm__header">
+            <div className="editGroupForm__actions">
+              <Button
+                dataCy="cancel-form"
+                onClick={handleCancelConfirmationDialog(true)}
+                type="button"
+                variant="contained"
+                color="primary"
+              >
+                <Cancel fontSize="small" />
+                {t("common.discard")}
+              </Button>
+            </div>
+          </div>
+          <form className="editGroupForm__form" onSubmit={handleSubmit}>
             <div className="row start-sm center-xs">
-              <div className="newGroupForm__item fullWidth">
+              <div className="editGroupForm__item fullWidth">
                 <TextField
                   field={getFieldProps("code")}
                   theme="regular"
@@ -183,7 +219,7 @@ export const EditGroup = () => {
                   disabled
                 />
               </div>
-              <div className="newGroupForm__item fullWidth">
+              <div className="editGroupForm__item fullWidth">
                 <TextField
                   field={getFieldProps("desc")}
                   theme="regular"
@@ -194,7 +230,7 @@ export const EditGroup = () => {
                 />
               </div>
             </div>
-            <div className="newGroupForm__item fullWidth">
+            <div className="editGroupForm__item fullWidth">
               <CheckboxField
                 fieldName={"deleted"}
                 checked={!!values.deleted}
@@ -212,7 +248,7 @@ export const EditGroup = () => {
               />
             )}
 
-            <div className="newGroupForm__item fullWidth">
+            <div className="editGroupForm__item fullWidth">
               {isPermissionEditorAvailable &&
                 updatedPermissionsStack.length > 0 && (
                   <p>
@@ -249,7 +285,7 @@ export const EditGroup = () => {
               )}
             </div>
 
-            <div className="newGroupForm__buttonSet">
+            <div className="editGroupForm__buttonSet">
               <div className="submit_button">
                 <Button
                   type="submit"
@@ -265,26 +301,36 @@ export const EditGroup = () => {
               </div>
               <div className="reset_button">
                 <Button
-                  dataCy="cancel-form"
+                  dataCy="reset-form"
                   type="reset"
                   variant="text"
-                  disabled={update.isLoading}
-                  onClick={() => setOpenResetConfirmation(true)}
+                  disabled={update.isLoading || !dirty}
+                  onClick={handleResetConfirmationDialog(true)}
                 >
-                  {t("common.cancel")}
+                  {t("common.reset")}
                 </Button>
               </div>
             </div>
           </form>
           <ConfirmationDialog
-            isOpen={openResetConfirmation}
+            isOpen={openCancelConfirmation}
             title={t("common.cancel")}
-            info={t("common.resetform")}
+            info={t("common.cancelMessage")}
             icon={warningIcon}
             primaryButtonLabel={t("common.ok")}
             secondaryButtonLabel={t("common.discard")}
+            handlePrimaryButtonClick={handleCancelConfirmation}
+            handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+          />
+          <ConfirmationDialog
+            isOpen={openResetConfirmation}
+            title={t("common.reset")}
+            info={t("common.resetform")}
+            icon={warningIcon}
+            primaryButtonLabel={t("common.ok")}
+            secondaryButtonLabel={t("common.back")}
             handlePrimaryButtonClick={handleResetConfirmation}
-            handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+            handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
           />
           <ConfirmationDialog
             isOpen={update.hasSucceeded}

diff --git a/src/components/accessories/admin/users/editGroup/styles.scss b/src/components/accessories/admin/users/editGroup/styles.scss
@@ -1,7 +1,7 @@
 @import "../../../../../styles/variables";
 @import "../../../../../../node_modules/susy/sass/susy";
 
-.newGroupForm {
+.editGroupForm {
   display: inline-block;
   flex-direction: column;
   align-items: center;
@@ -15,7 +15,7 @@
     justify-content: space-between;
   }
 
-  .newGroupForm__item {
+  .editGroupForm__item {
     margin: 7px 0px;
     padding: 0px 15px;
     width: 50%;
@@ -57,7 +57,34 @@
     }
   }
 
-  .newGroupForm__buttonSet {
+  .editGroupForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .editGroupForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
+  .editGroupForm__buttonSet {
     display: flex;
     margin-top: 25px;
     padding: 0px 15px;

diff --git a/src/components/accessories/admin/users/editUser/EditUserForm.tsx b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
@@ -18,6 +18,7 @@ import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
 import TextField from "../../../textField/TextField";
 
+import { Cancel } from "@mui/icons-material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import { PATHS } from "../../../../../consts";
 import "./styles.scss";
@@ -47,6 +48,8 @@ export const EditUserForm = ({
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const handleFormSubmit = (values: UserDTO & { passwd2: string }) => {
     const { passwd2, ...userDTO } = values;
     if (userDTO.passwd === undefined) {
@@ -65,6 +68,7 @@ export const EditUserForm = ({
     errors,
     touched,
     values,
+    resetForm,
     setFieldTouched,
     setFieldValue,
   } = useFormik<UserDTO & { passwd2: string }>({
@@ -73,10 +77,29 @@ export const EditUserForm = ({
     onSubmit: handleFormSubmit,
   });
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -87,6 +110,20 @@ export const EditUserForm = ({
 
   return (
     <div className="editUserForm">
+      <div className="editUserForm__header">
+        <div className="editUserForm__actions">
+          <Button
+            dataCy="cancel-form"
+            onClick={handleCancelConfirmationDialog(true)}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            <Cancel fontSize="small" />
+            {t("common.discard")}
+          </Button>
+        </div>
+      </div>
       <form className="editUserForm__form" onSubmit={handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="editUserForm__item fullWidth">
@@ -199,26 +236,36 @@ export const EditUserForm = ({
           </div>
           <div className="reset_button">
             <Button
-              dataCy="cancel-form"
+              dataCy="reset-form"
               type="reset"
               variant="text"
-              disabled={isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={isLoading || !dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
-              {t("common.cancel")}
+              {t("common.reset")}
             </Button>
           </div>
         </div>
       </form>
       <ConfirmationDialog
-        isOpen={openResetConfirmation}
+        isOpen={openCancelConfirmation}
         title={t("common.cancel")}
-        info={t("common.resetform")}
+        info={t("common.cancelMessage")}
         icon={warningIcon}
         primaryButtonLabel={t("common.ok")}
         secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleCancelConfirmation}
+        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+      />
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.reset")}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.ok")}
+        secondaryButtonLabel={t("common.back")}
         handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
       />
       <ConfirmationDialog
         isOpen={hasSucceeded}

diff --git a/src/components/accessories/admin/users/editUser/styles.scss b/src/components/accessories/admin/users/editUser/styles.scss
@@ -57,6 +57,33 @@
     }
   }
 
+  .editUserForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .editUserForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
   .editUserForm__buttonSet {
     display: flex;
     margin-top: 25px;