update(OH2-443): Refactor admin forms reset/cancel actions

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

Hide file tree

Showing 60 changed files with 1,256 additions and 254 deletions.
diff --git a/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx b/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx
@@ -1,3 +1,4 @@
+import { Cancel } from "@mui/icons-material";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -46,8 +47,11 @@ const DiseaseForm: FC<IDiseaseProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const infoBoxRef = useRef<HTMLDivElement>(null);
+
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const diseaseStore = useAppSelector((state) => state.diseases);
 
   const diseasesTypeState = useAppSelector(
@@ -109,10 +113,29 @@ const DiseaseForm: FC<IDiseaseProps> = ({
       : "";
   };
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    formik.resetForm();
+  }, [navigate, formik.resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -148,6 +171,20 @@ const DiseaseForm: FC<IDiseaseProps> = ({
 
   return (
     <div className="diseaseForm">
+      <div className="diseaseForm__header">
+        <div className="diseaseForm__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="diseaseForm__form" onSubmit={formik.handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="diseaseForm__item">
@@ -229,25 +266,35 @@ const DiseaseForm: FC<IDiseaseProps> = ({
           </div>
           <div className="reset_button">
             <Button
+              dataCy="reset-form"
               type="reset"
-              dataCy="cancel-form"
               variant="text"
-              disabled={isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={isLoading || !formik.dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
               {resetButtonLabel}
             </Button>
           </div>
         </div>
+        <ConfirmationDialog
+          isOpen={openCancelConfirmation}
+          title={t("common.cancel")}
+          info={t("common.cancelMessage")}
+          icon={warningIcon}
+          primaryButtonLabel={t("common.ok")}
+          secondaryButtonLabel={t("common.discard")}
+          handlePrimaryButtonClick={handleCancelConfirmation}
+          handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+        />
         <ConfirmationDialog
           isOpen={openResetConfirmation}
-          title={resetButtonLabel.toUpperCase()}
+          title={t("common.reset")}
           info={t("common.resetform")}
           icon={warningIcon}
           primaryButtonLabel={t("common.ok")}
-          secondaryButtonLabel={t("common.discard")}
+          secondaryButtonLabel={t("common.back")}
           handlePrimaryButtonClick={handleResetConfirmation}
-          handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+          handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
         />
         {(creationMode
           ? diseaseStore.create.status === "FAIL"

diff --git a/src/components/accessories/admin/diseases/diseaseForm/styles.scss b/src/components/accessories/admin/diseases/diseaseForm/styles.scss
@@ -55,6 +55,33 @@
     }
   }
 
+  .diseaseForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .diseaseForm__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;
+          }
+        }
+      }
+    }
+  }
+
   .diseaseForm__buttonSet {
     display: flex;
     margin-top: 25px;

diff --git a/src/components/accessories/admin/diseases/editDisease/EditDisease.tsx b/src/components/accessories/admin/diseases/editDisease/EditDisease.tsx
@@ -5,8 +5,8 @@ import { Navigate, useLocation, useParams } from "react-router";
 import { PATHS } from "../../../../../consts";
 import { DiseaseDTO } from "../../../../../generated";
 import { updateDisease } from "../../../../../state/diseases";
-import { getInitialFields } from "../diseaseForm/consts";
 import DiseaseForm from "../diseaseForm/DiseaseForm";
+import { getInitialFields } from "../diseaseForm/consts";
 
 export const EditDisease = () => {
   const dispatch = useAppDispatch();
@@ -28,7 +28,7 @@ export const EditDisease = () => {
       creationMode={false}
       onSubmit={handleSubmit}
       isLoading={!!update.isLoading}
-      resetButtonLabel={t("common.cancel")}
+      resetButtonLabel={t("common.reset")}
       submitButtonLabel={t("disease.updateDisease")}
       fields={getInitialFields(state)}
     />

diff --git a/src/components/accessories/admin/diseases/newDisease/NewDisease.tsx b/src/components/accessories/admin/diseases/newDisease/NewDisease.tsx
@@ -3,8 +3,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { DiseaseDTO } from "../../../../../generated";
 import { createDisease } from "../../../../../state/diseases";
-import { getInitialFields } from "../diseaseForm/consts";
 import DiseaseForm from "../diseaseForm/DiseaseForm";
+import { getInitialFields } from "../diseaseForm/consts";
 
 export const NewDisease = () => {
   const dispatch = useAppDispatch();
@@ -20,7 +20,7 @@ export const NewDisease = () => {
       creationMode
       onSubmit={handleSubmit}
       isLoading={!!create.isLoading}
-      resetButtonLabel={t("common.cancel")}
+      resetButtonLabel={t("common.reset")}
       submitButtonLabel={t("disease.saveDisease")}
       fields={getInitialFields(undefined)}
     />

diff --git a/src/components/accessories/admin/exams/editExam/EditExam.tsx b/src/components/accessories/admin/exams/editExam/EditExam.tsx
@@ -46,7 +46,7 @@ export const EditExam = () => {
       creationMode={false}
       onSubmit={handleSubmit}
       isLoading={!!update.isLoading}
-      resetButtonLabel={t("common.cancel")}
+      resetButtonLabel={t("common.reset")}
       submitButtonLabel={t("exam.updateExam")}
       fields={getInitialFields(state, examRows)}
     />

diff --git a/src/components/accessories/admin/exams/examForm/ExamForm.tsx b/src/components/accessories/admin/exams/examForm/ExamForm.tsx
@@ -31,7 +31,7 @@ import TextField from "../../../textField/TextField";
 import "./styles.scss";
 import { IExamProps } from "./types";
 
-import { AddCircle, Delete } from "@mui/icons-material";
+import { AddCircle, Cancel, Delete } from "@mui/icons-material";
 import { IconButton, Radio, RadioGroup } from "@mui/material";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import AutocompleteField from "../../../autocompleteField/AutocompleteField";
@@ -49,8 +49,11 @@ const ExamForm: FC<IExamProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const infoBoxRef = useRef<HTMLDivElement>(null);
+
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const examStore = useAppSelector((state) => state.exams);
 
   const examTypeState = useAppSelector(
@@ -142,10 +145,29 @@ const ExamForm: FC<IExamProps> = ({
       : "";
   };
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    formik.resetForm();
+  }, [navigate, formik.resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const addExamRow = useCallback(() => {
     formik.setFieldValue("rows", [...formik.values.rows, ""]);
@@ -210,6 +232,20 @@ const ExamForm: FC<IExamProps> = ({
 
   return (
     <div className="examForm">
+      <div className="examForm__header">
+        <div className="examForm__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="examForm__form" onSubmit={formik.handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="examForm__item fullWidth">
@@ -347,25 +383,35 @@ const ExamForm: FC<IExamProps> = ({
           </div>
           <div className="reset_button">
             <Button
+              dataCy="reset-form"
               type="reset"
               variant="text"
-              dataCy="cancel-form"
-              disabled={isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={isLoading || !formik.dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
               {resetButtonLabel}
             </Button>
           </div>
         </div>
+        <ConfirmationDialog
+          isOpen={openCancelConfirmation}
+          title={t("common.cancel")}
+          info={t("common.cancelMessage")}
+          icon={warningIcon}
+          primaryButtonLabel={t("common.ok")}
+          secondaryButtonLabel={t("common.discard")}
+          handlePrimaryButtonClick={handleCancelConfirmation}
+          handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+        />
         <ConfirmationDialog
           isOpen={openResetConfirmation}
-          title={resetButtonLabel.toUpperCase()}
+          title={t("common.reset")}
           info={t("common.resetform")}
           icon={warningIcon}
           primaryButtonLabel={t("common.ok")}
-          secondaryButtonLabel={t("common.discard")}
+          secondaryButtonLabel={t("common.back")}
           handlePrimaryButtonClick={handleResetConfirmation}
-          handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+          handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
         />
         {(creationMode
           ? examStore.examCreate.status === "FAIL"

diff --git a/src/components/accessories/admin/exams/examForm/styles.scss b/src/components/accessories/admin/exams/examForm/styles.scss
@@ -118,6 +118,33 @@
     }
   }
 
+  .examForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .examForm__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;
+          }
+        }
+      }
+    }
+  }
+
   .examForm__buttonSet {
     display: flex;
     margin-top: 25px;

diff --git a/src/components/accessories/admin/exams/newExam/NewExam.tsx b/src/components/accessories/admin/exams/newExam/NewExam.tsx
@@ -23,7 +23,7 @@ export const NewExam = () => {
       creationMode
       onSubmit={handleSubmit}
       isLoading={!!create.isLoading}
-      resetButtonLabel={t("common.cancel")}
+      resetButtonLabel={t("common.reset")}
       submitButtonLabel={t("supplier.saveSupplier")}
       fields={getInitialFields(undefined, undefined)}
     />

diff --git a/src/components/accessories/admin/hospital/editHospital/EditHospital.tsx b/src/components/accessories/admin/hospital/editHospital/EditHospital.tsx
@@ -36,7 +36,7 @@ export const EditHospital = () => {
     <HospitalForm
       onSubmit={handleSubmit}
       isLoading={!!update.isLoading}
-      resetButtonLabel={t("common.cancel")}
+      resetButtonLabel={t("common.reset")}
       submitButtonLabel={t("hospital.updateHospital")}
       fields={getInitialFields(hospital)}
     />