feature: Add discard and cancel buttons

SteveGT96 · Jan 24, 2025 · 5c49058 · 5c49058
1 parent cfc60ac
commit 5c49058
Show file tree

Hide file tree

Showing 24 changed files with 69 additions and 124 deletions.
diff --git a/.env.development b/.env.development
@@ -1,2 +1,2 @@
-REACT_APP_USE_MOCK_API=false
+REACT_APP_USE_MOCK_API=true
 REACT_APP_ENABLE_PERMISSIONS=false
diff --git a/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx b/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -219,7 +221,7 @@ const DiseaseForm: FC<IDiseaseProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/exams/examForm/ExamForm.tsx b/src/components/accessories/admin/exams/examForm/ExamForm.tsx
@@ -1,4 +1,6 @@
 import classnames from "classnames/dedupe";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { get, has, isEmpty } from "lodash";
 import React, {
@@ -343,7 +345,7 @@ const ExamForm: FC<IExamProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -185,7 +187,7 @@ const HospitalForm: FC<IHospitalFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {hospitalStore.updateHospital.status === "FAIL" && (

diff --git a/src/components/accessories/admin/operations/operationForm/OperationForm.tsx b/src/components/accessories/admin/operations/operationForm/OperationForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { OperationDTOOpeForEnum } from "generated/models/OperationDTO";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
@@ -226,15 +228,7 @@ const OperationForm: FC<IOperationProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={isLoading || !formik.dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -223,14 +225,7 @@ const SupplierForm: FC<ISupplierFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              type="reset"
-              variant="text"
-              disabled={isLoading}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {resetButtonLabel}
-            </Button>
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...ts/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx b/...ts/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const AdmissionTypeForm: FC<IAdmissionTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx b/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { AgeTypeDTO } from "generated";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
@@ -141,7 +143,7 @@ const AgeTypesForm: FC<IAgeTypesFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {updateAgeTypes.status === "FAIL" && (

diff --git a/...ents/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx b/...ents/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DeliveryTypeForm: FC<IDeliveryTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...in/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx b/...in/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -142,7 +144,7 @@ const DeliveryResultTypeForm: FC<IDeliveryResultTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...ts/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx b/...ts/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DischargeTypeForm: FC<IDischargeTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...mponents/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx b/...mponents/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const DiseaseTypeForm: FC<IDiseaseTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx b/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -136,7 +138,7 @@ const ExamTypeForm: FC<IExamTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...mponents/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx b/...mponents/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const MedicalTypeForm: FC<IMedicalTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...ts/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx b/...ts/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const OperationTypeForm: FC<IOperationTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx b/...components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -142,7 +144,7 @@ const PregnantTreatmentTypeForm: FC<IPregnantTreatmentTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/...mponents/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx b/...mponents/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx
@@ -1,3 +1,5 @@
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
 import { get, has } from "lodash";
@@ -137,7 +139,7 @@ const VaccineTypeForm: FC<IVaccineTypeFormProps> = ({
             </Button>
           </div>
           <div className="reset_button">
-            <ResetButton formik={formik} title={resetButtonLabel} />
+            <ResetButton formik={formik as any} title={resetButtonLabel} />
           </div>
         </div>
         {(creationMode

diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -13,9 +13,10 @@ import TextField from "../../../textField/TextField";
 import { PATHS } from "../../../../../consts";
 import { usePermission } from "../../../../../libraries/permissionUtils/usePermission";
 
-import { ChevronLeft } from "@mui/icons-material";
 import { CircularProgress } from "@mui/material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { PermissionDTO } from "generated/models/PermissionDTO";
 import { UserGroupDTO } from "generated/models/UserGroupDTO";
 import { getAllPermissions } from "../../../../../state/permissions";
@@ -165,16 +166,7 @@ export const EditGroup = () => {
         <div className="editGroupForm">
           <div className="editGroupForm__header">
             <div className="editGroupForm__actions">
-              <Button
-                dataCy="cancel-form"
-                onClick={handleCancelConfirmationDialog(true)}
-                type="button"
-                variant="text"
-                color="primary"
-              >
-                <ChevronLeft fontSize="small" />
-                {t("common.discard")}
-              </Button>
+              <DiscardButton />
             </div>
           </div>
           <form className="editGroupForm__form" onSubmit={handleSubmit}>
@@ -272,15 +264,7 @@ export const EditGroup = () => {
                 </Button>
               </div>
               <div className="reset_button">
-                <Button
-                  dataCy="reset-form"
-                  type="reset"
-                  variant="text"
-                  disabled={update.isLoading || !dirty}
-                  onClick={handleResetConfirmationDialog(true)}
-                >
-                  {t("common.reset")}
-                </Button>
+                <ResetButton formik={formik as any} />
               </div>
             </div>
           </form>

diff --git a/src/components/accessories/admin/users/editUser/EditUserForm.tsx b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
@@ -4,6 +4,7 @@ import {
   FormHelperText,
   TextField as MuiTextField,
 } from "@mui/material";
+import DiscardButton from "components/accessories/discardButton/DiscardButton";
 import { useFormik } from "formik";
 import React, { ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,13 +13,13 @@ import { useNavigate } from "react-router-dom";
 import { UserDTO, UserGroupDTO } from "../../../../../generated";
 
 import checkIcon from "../../../../../assets/check-icon.png";
-import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
 import TextField from "../../../textField/TextField";
 
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
+import ResetButton from "components/accessories/resetButton/resetButton";
 import { PATHS } from "../../../../../consts";
 import "./styles.scss";
 import { userSchema } from "./validation";
@@ -198,38 +199,10 @@ export const EditUserForm = ({
             </Button>
           </div>
           <div className="reset_button">
-            <Button
-              dataCy="reset-form"
-              type="reset"
-              variant="text"
-              disabled={isLoading || !dirty}
-              onClick={handleResetConfirmationDialog(true)}
-            >
-              {t("common.reset")}
-            </Button>
+            <ResetButton formik={formik as any} />
           </div>
         </div>
       </form>
-      <ConfirmationDialog
-        isOpen={openCancelConfirmation}
-        title={t("common.discard")}
-        info={t("common.discardMessage")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.discard")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleCancelConfirmation}
-        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
-      />
-      <ConfirmationDialog
-        isOpen={openResetConfirmation}
-        title={t("common.reset")}
-        info={t("common.resetform")}
-        icon={warningIcon}
-        primaryButtonLabel={t("common.reset")}
-        secondaryButtonLabel={t("common.backToEdit")}
-        handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
-      />
       <ConfirmationDialog
         isOpen={hasSucceeded}
         title={t("user.updatedSuccessTitle")}