From a90ea9659fbb9ac096b97060d1039a470a73ce8a Mon Sep 17 00:00:00 2001 From: SteveGT96 Date: Fri, 29 Nov 2024 14:23:28 +0100 Subject: [PATCH] update(OH2-443): Refactor admin forms reset/cancel actions --- .../diseases/diseaseForm/DiseaseForm.tsx | 63 ++++++++++++-- .../admin/diseases/diseaseForm/styles.scss | 27 ++++++ .../diseases/editDisease/EditDisease.tsx | 4 +- .../admin/diseases/newDisease/NewDisease.tsx | 4 +- .../admin/exams/editExam/EditExam.tsx | 2 +- .../admin/exams/examForm/ExamForm.tsx | 64 ++++++++++++-- .../admin/exams/examForm/styles.scss | 27 ++++++ .../admin/exams/newExam/NewExam.tsx | 2 +- .../hospital/editHospital/EditHospital.tsx | 2 +- .../hospital/hospitalForm/HospitalForm.tsx | 86 +++++++++++++++---- .../admin/hospital/hospitalForm/styles.scss | 27 ++++++ .../editOperation/EditOperation.tsx | 4 +- .../operations/newOperation/NewOperation.tsx | 4 +- .../operationForm/OperationForm.tsx | 57 ++++++++++-- .../operations/operationForm/styles.scss | 27 ++++++ .../suppliers/editSupplier/EditSupplier.tsx | 2 +- .../suppliers/newSupplier/NewSupplier.tsx | 2 +- .../suppliers/supplierForm/SupplierForm.tsx | 57 ++++++++++-- .../admin/suppliers/supplierForm/styles.scss | 27 ++++++ .../admissionTypesForm/AdmissionTypeForm.tsx | 69 ++++++++++++--- .../editAdmissionType/EditAdmissionType.tsx | 2 +- .../newAdmissionType/NewAdmissionType.tsx | 2 +- .../agetypes/ageTypesForm/AgeTypesForm.tsx | 75 +++++++++++++--- .../agetypes/editAgeTypes/EditAgeTypes.tsx | 2 +- .../deliveryTypesForm/DeliveryTypeForm.tsx | 69 ++++++++++++--- .../editDeliveryType/EditDeliveryType.tsx | 4 +- .../newDeliveryType/NewDeliveryType.tsx | 2 +- .../DeliveryResultTypeForm.tsx | 54 +++++++++--- .../EditDeliveryResultType.tsx | 4 +- .../NewDeliveryResultType.tsx | 2 +- .../dischargeTypesForm/DischargeTypeForm.tsx | 69 ++++++++++++--- .../editDischargeType/EditDischargeType.tsx | 4 +- .../newDischargeType/NewDischargeType.tsx | 2 +- .../diseaseTypesForm/DiseaseTypeForm.tsx | 69 ++++++++++++--- .../editDiseaseType/EditDiseaseType.tsx | 4 +- .../newDiseaseType/NewDiseaseType.tsx | 2 +- .../exams/editExamType/EditExamType.tsx | 4 +- .../exams/examTypesForm/ExamTypeForm.tsx | 69 ++++++++++++--- .../exams/newExamType/NewExamType.tsx | 2 +- .../editMedicalType/EditMedicalType.tsx | 4 +- .../medicalTypesForm/MedicalTypeForm.tsx | 69 ++++++++++++--- .../newMedicalType/NewMedicalType.tsx | 2 +- .../editOperationType/EditOperationType.tsx | 2 +- .../newOperationType/NewOperationType.tsx | 2 +- .../operationTypesForm/OperationTypeForm.tsx | 69 ++++++++++++--- .../EditPregnantTreatmentType.tsx | 4 +- .../NewPregnantTreatmentType.tsx | 2 +- .../PregnantTreatmentTypeForm.tsx | 54 +++++++++--- .../editVaccineType/EditVaccineType.tsx | 4 +- .../newVaccineType/NewVaccineType.tsx | 2 +- .../vaccineTypesForm/VaccineTypeForm.tsx | 69 ++++++++++++--- .../accessories/admin/types/styles.scss | 27 ++++++ .../vaccines/editVaccine/EditVaccine.tsx | 4 +- .../admin/vaccines/newVaccine/NewVaccine.tsx | 4 +- .../vaccines/vaccineForm/VaccineForm.tsx | 69 ++++++++++++--- .../admin/vaccines/vaccineForm/styles.scss | 27 ++++++ .../admin/wards/editWard/EditWard.tsx | 4 +- .../admin/wards/newWard/NewWard.tsx | 4 +- .../admin/wards/wardForm/WardForm.tsx | 63 ++++++++++++-- .../admin/wards/wardForm/styles.scss | 27 ++++++ 60 files changed, 1256 insertions(+), 254 deletions(-) diff --git a/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx b/src/components/accessories/admin/diseases/diseaseForm/DiseaseForm.tsx index 10b3bec43..3468270b7 100644 --- 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 = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(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 = ({ : ""; }; - 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 = ({ return (
+
+
+ +
+
@@ -229,25 +266,35 @@ const DiseaseForm: FC = ({
+ 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 index 1ad598657..f4b62c5e4 100644 --- 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 index 0347d81f8..387b3bbe0 100644 --- 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 index 36ba8e1da..f26ad7bd4 100644 --- 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 index 16da0c526..81921f571 100644 --- 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 index 7b0585e45..9c44af67e 100644 --- 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 = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(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 = ({ : ""; }; - 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 = ({ return (
+
+
+ +
+
@@ -347,25 +383,35 @@ const ExamForm: FC = ({
+ 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 index d53c6f3c0..79e976b2c 100644 --- 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 index 1d838703e..38ad1621e 100644 --- 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 index 0a902508c..40b67ab38 100644 --- 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 = () => { diff --git a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx index f13e8884e..e71bbc8a9 100644 --- a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx +++ b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx @@ -1,7 +1,15 @@ +import { Cancel } from "@mui/icons-material"; import { useFormik } from "formik"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; import { get, has } from "lodash"; -import React, { FC, useEffect, useMemo, useRef, useState } from "react"; +import React, { + FC, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router"; import { object, string } from "yup"; @@ -31,7 +39,10 @@ const HospitalForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); - const [openDiscardConfirmation, setOpenDiscardConfirmation] = useState(false); + + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); const hospitalStore = useAppSelector((state) => state.hospital); @@ -73,10 +84,29 @@ const HospitalForm: FC = ({ : ""; }; - const handleDiscardConfirmation = () => { - setOpenDiscardConfirmation(false); + 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]); useEffect(() => { return () => { @@ -86,6 +116,20 @@ const HospitalForm: FC = ({ return (
+
+
+ +
+
@@ -186,27 +230,37 @@ const HospitalForm: FC = ({ {submitButtonLabel}
-
+
setOpenDiscardConfirmation(false)} + handlePrimaryButtonClick={handleCancelConfirmation} + handleSecondaryButtonClick={handleCancelConfirmationDialog(false)} + /> + {hospitalStore.updateHospital.status === "FAIL" && (
diff --git a/src/components/accessories/admin/hospital/hospitalForm/styles.scss b/src/components/accessories/admin/hospital/hospitalForm/styles.scss index a0ca81274..b2e6f2d55 100644 --- a/src/components/accessories/admin/hospital/hospitalForm/styles.scss +++ b/src/components/accessories/admin/hospital/hospitalForm/styles.scss @@ -57,6 +57,33 @@ } } + .hospitalForm__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .hospitalForm__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; + } + } + } + } + } + .hospitalForm__buttonSet { display: flex; margin-top: 25px; diff --git a/src/components/accessories/admin/operations/editOperation/EditOperation.tsx b/src/components/accessories/admin/operations/editOperation/EditOperation.tsx index ece47d020..7032ab271 100644 --- a/src/components/accessories/admin/operations/editOperation/EditOperation.tsx +++ b/src/components/accessories/admin/operations/editOperation/EditOperation.tsx @@ -5,8 +5,8 @@ import { Navigate, useLocation, useParams } from "react-router"; import { PATHS } from "../../../../../consts"; import { OperationDTO } from "../../../../../generated"; import { updateOperation } from "../../../../../state/operations"; -import { getInitialFields } from "../operationForm/consts"; import OperationForm from "../operationForm/OperationForm"; +import { getInitialFields } from "../operationForm/consts"; export const EditOperation = () => { const dispatch = useAppDispatch(); @@ -33,7 +33,7 @@ export const EditOperation = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("operation.updateOperation")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/operations/newOperation/NewOperation.tsx b/src/components/accessories/admin/operations/newOperation/NewOperation.tsx index fb1e14ef3..58cde94a6 100644 --- a/src/components/accessories/admin/operations/newOperation/NewOperation.tsx +++ b/src/components/accessories/admin/operations/newOperation/NewOperation.tsx @@ -3,8 +3,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { OperationDTO } from "../../../../../generated"; import { createOperation } from "../../../../../state/operations"; -import { getInitialFields } from "../operationForm/consts"; import OperationForm from "../operationForm/OperationForm"; +import { getInitialFields } from "../operationForm/consts"; export const NewOperation = () => { const dispatch = useAppDispatch(); @@ -20,7 +20,7 @@ export const NewOperation = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("operation.saveOperation")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/operations/operationForm/OperationForm.tsx b/src/components/accessories/admin/operations/operationForm/OperationForm.tsx index cd58a0ea9..7804626dc 100644 --- a/src/components/accessories/admin/operations/operationForm/OperationForm.tsx +++ b/src/components/accessories/admin/operations/operationForm/OperationForm.tsx @@ -1,3 +1,4 @@ +import { Cancel } from "@mui/icons-material"; import { useFormik } from "formik"; import { OperationDTOOpeForEnum } from "generated/models/OperationDTO"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; @@ -47,8 +48,11 @@ const OperationForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const operationStore = useAppSelector((state) => state.operations); const operationsTypeState = useAppSelector( @@ -119,10 +123,29 @@ const OperationForm: FC = ({ : ""; }; - 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) => { @@ -158,6 +181,20 @@ const OperationForm: FC = ({ return (
+
+
+ +
+
@@ -246,15 +283,25 @@ const OperationForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? operationStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/operations/operationForm/styles.scss b/src/components/accessories/admin/operations/operationForm/styles.scss index 6309858a6..952b011d3 100644 --- a/src/components/accessories/admin/operations/operationForm/styles.scss +++ b/src/components/accessories/admin/operations/operationForm/styles.scss @@ -57,6 +57,33 @@ } } + .operationForm__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .operationForm__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; + } + } + } + } + } + .operationForm__buttonSet { display: flex; margin-top: 25px; diff --git a/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx b/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx index 40f67bf29..b510dbeed 100644 --- a/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx +++ b/src/components/accessories/admin/suppliers/editSupplier/EditSupplier.tsx @@ -31,7 +31,7 @@ export const EditSupplier = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("supplier.updateSupplier")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx b/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx index 6e6c365d9..e16f748d8 100644 --- a/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx +++ b/src/components/accessories/admin/suppliers/newSupplier/NewSupplier.tsx @@ -20,7 +20,7 @@ export const NewSupplier = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("supplier.saveSupplier")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx index 0467a6e66..36b41c3f5 100644 --- a/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.tsx +++ b/src/components/accessories/admin/suppliers/supplierForm/SupplierForm.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"; @@ -42,8 +43,11 @@ const SupplierForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const supplierStore = useAppSelector((state) => state.suppliers); const errorMessage = useMemo( @@ -97,10 +101,29 @@ const SupplierForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -116,6 +139,20 @@ const SupplierForm: FC = ({ return (
+
+
+ +
+
{!creationMode && ( @@ -242,15 +279,25 @@ const SupplierForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? supplierStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/suppliers/supplierForm/styles.scss b/src/components/accessories/admin/suppliers/supplierForm/styles.scss index 9d487f745..f177118af 100644 --- a/src/components/accessories/admin/suppliers/supplierForm/styles.scss +++ b/src/components/accessories/admin/suppliers/supplierForm/styles.scss @@ -57,6 +57,33 @@ } } + .supplierForm__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .supplierForm__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; + } + } + } + } + } + .supplierForm__buttonSet { display: flex; margin-top: 25px; diff --git a/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx b/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx index 85b53af0c..596a8db0d 100644 --- a/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.tsx +++ b/src/components/accessories/admin/types/components/admissions/admissionTypesForm/AdmissionTypeForm.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"; @@ -42,8 +43,11 @@ const AdmissionTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const admissionTypesStore = useAppSelector((state) => state.types.admissions); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const AdmissionTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const AdmissionTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const AdmissionTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? admissionTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/admissions/editAdmissionType/EditAdmissionType.tsx b/src/components/accessories/admin/types/components/admissions/editAdmissionType/EditAdmissionType.tsx index f8749d696..29972d14f 100644 --- a/src/components/accessories/admin/types/components/admissions/editAdmissionType/EditAdmissionType.tsx +++ b/src/components/accessories/admin/types/components/admissions/editAdmissionType/EditAdmissionType.tsx @@ -41,7 +41,7 @@ export const EditAdmissionType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("admissionTypes.updateAdmissionType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/admissions/newAdmissionType/NewAdmissionType.tsx b/src/components/accessories/admin/types/components/admissions/newAdmissionType/NewAdmissionType.tsx index ff3c2464b..fc272d64b 100644 --- a/src/components/accessories/admin/types/components/admissions/newAdmissionType/NewAdmissionType.tsx +++ b/src/components/accessories/admin/types/components/admissions/newAdmissionType/NewAdmissionType.tsx @@ -30,7 +30,7 @@ export const NewAdmissionType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("admissionTypes.saveAdmissionTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx b/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx index 4b0f97bd6..801f7b0dd 100644 --- a/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx +++ b/src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypesForm.tsx @@ -1,8 +1,16 @@ +import { Cancel } from "@mui/icons-material"; import { useFormik } from "formik"; import { AgeTypeDTO } from "generated"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; import { get, has } from "lodash"; -import React, { FC, useEffect, useMemo, useRef, useState } from "react"; +import React, { + FC, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router"; import { updateAgeTypeReset } from "state/types/ageTypes"; @@ -33,7 +41,11 @@ const AgeTypesForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const [validationErrors, setValidationErrors] = useState([]); const updateAgeTypes = useAppSelector((state) => state.types.ageTypes.update); @@ -92,10 +104,29 @@ const AgeTypesForm: FC = ({ : ""; }; - 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]); useEffect(() => { return () => { @@ -105,6 +136,20 @@ const AgeTypesForm: FC = ({ return (
+
+
+ +
+
@@ -143,25 +188,35 @@ const AgeTypesForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {updateAgeTypes.status === "FAIL" && (
diff --git a/src/components/accessories/admin/types/components/agetypes/editAgeTypes/EditAgeTypes.tsx b/src/components/accessories/admin/types/components/agetypes/editAgeTypes/EditAgeTypes.tsx index d0ffa4953..7eb51729d 100644 --- a/src/components/accessories/admin/types/components/agetypes/editAgeTypes/EditAgeTypes.tsx +++ b/src/components/accessories/admin/types/components/agetypes/editAgeTypes/EditAgeTypes.tsx @@ -57,7 +57,7 @@ export const EditAgeTypes = () => { diff --git a/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx b/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx index 9dc146004..42fc235f9 100644 --- a/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.tsx +++ b/src/components/accessories/admin/types/components/deliveries/deliveryTypesForm/DeliveryTypeForm.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"; @@ -42,8 +43,11 @@ const DeliveryTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const deliveryTypesStore = useAppSelector((state) => state.types.deliveries); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const DeliveryTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const DeliveryTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const DeliveryTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? deliveryTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/deliveries/editDeliveryType/EditDeliveryType.tsx b/src/components/accessories/admin/types/components/deliveries/editDeliveryType/EditDeliveryType.tsx index 80bb51482..081277f95 100644 --- a/src/components/accessories/admin/types/components/deliveries/editDeliveryType/EditDeliveryType.tsx +++ b/src/components/accessories/admin/types/components/deliveries/editDeliveryType/EditDeliveryType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { DeliveryTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateDeliveryType } from "../../../../../../../state/types/deliveries"; -import { getInitialFields } from "../deliveryTypesForm/consts"; import DeliveryTypeForm from "../deliveryTypesForm/DeliveryTypeForm"; +import { getInitialFields } from "../deliveryTypesForm/consts"; import "./styles.scss"; export const EditDeliveryType = () => { @@ -42,7 +42,7 @@ export const EditDeliveryType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("deliveryTypes.updateDeliveryType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/deliveries/newDeliveryType/NewDeliveryType.tsx b/src/components/accessories/admin/types/components/deliveries/newDeliveryType/NewDeliveryType.tsx index cf81e505e..5cd938df0 100644 --- a/src/components/accessories/admin/types/components/deliveries/newDeliveryType/NewDeliveryType.tsx +++ b/src/components/accessories/admin/types/components/deliveries/newDeliveryType/NewDeliveryType.tsx @@ -30,7 +30,7 @@ export const NewDeliveryType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("deliveryTypes.saveDeliveryTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx b/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx index 17a1f605b..b3352412b 100644 --- a/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx +++ b/src/components/accessories/admin/types/components/deliveryresulttypes/deliveryResultTypeForm/DeliveryResultTypeForm.tsx @@ -42,8 +42,11 @@ const DeliveryResultTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const deliveryResultTypesStore = useAppSelector( (state) => state.types.deliveryResult ); @@ -89,10 +92,29 @@ const DeliveryResultTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -152,29 +174,35 @@ const DeliveryResultTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? deliveryResultTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/deliveryresulttypes/editDeliveryResultType/EditDeliveryResultType.tsx b/src/components/accessories/admin/types/components/deliveryresulttypes/editDeliveryResultType/EditDeliveryResultType.tsx index e0b115f3d..637277622 100644 --- a/src/components/accessories/admin/types/components/deliveryresulttypes/editDeliveryResultType/EditDeliveryResultType.tsx +++ b/src/components/accessories/admin/types/components/deliveryresulttypes/editDeliveryResultType/EditDeliveryResultType.tsx @@ -15,7 +15,7 @@ export const EditDeliveryResultType = () => { const { t } = useTranslation(); const { state }: { state: DeliveryResultTypeDTO | undefined } = useLocation(); const { code } = useParams(); - + const update = useAppSelector((state) => state.types.deliveryResult.update); const mode = useAppSelector((state) => state.types.config.mode); @@ -42,7 +42,7 @@ export const EditDeliveryResultType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("deliveryResultType.updateDeliveryResultType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/deliveryresulttypes/newDeliveryResultType/NewDeliveryResultType.tsx b/src/components/accessories/admin/types/components/deliveryresulttypes/newDeliveryResultType/NewDeliveryResultType.tsx index 8ba263df8..620683d42 100644 --- a/src/components/accessories/admin/types/components/deliveryresulttypes/newDeliveryResultType/NewDeliveryResultType.tsx +++ b/src/components/accessories/admin/types/components/deliveryresulttypes/newDeliveryResultType/NewDeliveryResultType.tsx @@ -30,7 +30,7 @@ export const NewDeliveryResultType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("deliveryResultType.saveDeliveryResultTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx b/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx index bcb3ebbca..0998475bc 100644 --- a/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.tsx +++ b/src/components/accessories/admin/types/components/discharges/dischargeTypesForm/DischargeTypeForm.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"; @@ -42,8 +43,11 @@ const DischargeTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const dischargeTypesStore = useAppSelector((state) => state.types.discharges); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const DischargeTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const DischargeTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const DischargeTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? dischargeTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/discharges/editDischargeType/EditDischargeType.tsx b/src/components/accessories/admin/types/components/discharges/editDischargeType/EditDischargeType.tsx index 271d916e9..3a697039e 100644 --- a/src/components/accessories/admin/types/components/discharges/editDischargeType/EditDischargeType.tsx +++ b/src/components/accessories/admin/types/components/discharges/editDischargeType/EditDischargeType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { DischargeTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateDischargeType } from "../../../../../../../state/types/discharges"; -import { getInitialFields } from "../dischargeTypesForm/consts"; import DischargeTypeForm from "../dischargeTypesForm/DischargeTypeForm"; +import { getInitialFields } from "../dischargeTypesForm/consts"; import "./styles.scss"; export const EditDischargeType = () => { @@ -41,7 +41,7 @@ export const EditDischargeType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("dischargeTypes.updateDischargeType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/discharges/newDischargeType/NewDischargeType.tsx b/src/components/accessories/admin/types/components/discharges/newDischargeType/NewDischargeType.tsx index cbd1ffcb0..ab93b7f6e 100644 --- a/src/components/accessories/admin/types/components/discharges/newDischargeType/NewDischargeType.tsx +++ b/src/components/accessories/admin/types/components/discharges/newDischargeType/NewDischargeType.tsx @@ -30,7 +30,7 @@ export const NewDischargeType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("dischargeTypes.saveDischargeTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx b/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx index 35b56e3fd..ae346f320 100644 --- a/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.tsx +++ b/src/components/accessories/admin/types/components/diseases/diseaseTypesForm/DiseaseTypeForm.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"; @@ -42,8 +43,11 @@ const DiseaseTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const diseaseTypesStore = useAppSelector((state) => state.types.diseases); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const DiseaseTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const DiseaseTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const DiseaseTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? diseaseTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/diseases/editDiseaseType/EditDiseaseType.tsx b/src/components/accessories/admin/types/components/diseases/editDiseaseType/EditDiseaseType.tsx index 5beb2897f..921e8f888 100644 --- a/src/components/accessories/admin/types/components/diseases/editDiseaseType/EditDiseaseType.tsx +++ b/src/components/accessories/admin/types/components/diseases/editDiseaseType/EditDiseaseType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { DiseaseTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateDiseaseType } from "../../../../../../../state/types/diseases"; -import { getInitialFields } from "../diseaseTypesForm/consts"; import DiseaseTypeForm from "../diseaseTypesForm/DiseaseTypeForm"; +import { getInitialFields } from "../diseaseTypesForm/consts"; import "./styles.scss"; export const EditDiseaseType = () => { @@ -41,7 +41,7 @@ export const EditDiseaseType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("diseaseTypes.updateDiseaseType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/diseases/newDiseaseType/NewDiseaseType.tsx b/src/components/accessories/admin/types/components/diseases/newDiseaseType/NewDiseaseType.tsx index 735d681ea..7a1efaaf6 100644 --- a/src/components/accessories/admin/types/components/diseases/newDiseaseType/NewDiseaseType.tsx +++ b/src/components/accessories/admin/types/components/diseases/newDiseaseType/NewDiseaseType.tsx @@ -30,7 +30,7 @@ export const NewDiseaseType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("diseaseTypes.saveDiseaseTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/exams/editExamType/EditExamType.tsx b/src/components/accessories/admin/types/components/exams/editExamType/EditExamType.tsx index 0a3dc6f61..a3dc9ccd5 100644 --- a/src/components/accessories/admin/types/components/exams/editExamType/EditExamType.tsx +++ b/src/components/accessories/admin/types/components/exams/editExamType/EditExamType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { ExamTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateExamType } from "../../../../../../../state/types/exams"; -import { getInitialFields } from "../examTypesForm/consts"; import ExamTypeForm from "../examTypesForm/ExamTypeForm"; +import { getInitialFields } from "../examTypesForm/consts"; import "./styles.scss"; export const EditExamType = () => { @@ -40,7 +40,7 @@ export const EditExamType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("examTypes.updateExamType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx b/src/components/accessories/admin/types/components/exams/examTypesForm/ExamTypeForm.tsx index 603bea0df..6cb26fd89 100644 --- 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,4 @@ +import { Cancel } from "@mui/icons-material"; import { useFormik } from "formik"; import { useAppDispatch, useAppSelector } from "libraries/hooks/redux"; import { get, has } from "lodash"; @@ -42,8 +43,11 @@ const ExamTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const examTypesStore = useAppSelector((state) => state.types.exams); const errorMessage = useMemo( @@ -86,10 +90,29 @@ const ExamTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -105,6 +128,20 @@ const ExamTypeForm: FC = ({ return (
+
+
+ +
+
@@ -146,29 +183,35 @@ const ExamTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? examTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/exams/newExamType/NewExamType.tsx b/src/components/accessories/admin/types/components/exams/newExamType/NewExamType.tsx index 4ae84f973..a1c8f7f75 100644 --- a/src/components/accessories/admin/types/components/exams/newExamType/NewExamType.tsx +++ b/src/components/accessories/admin/types/components/exams/newExamType/NewExamType.tsx @@ -30,7 +30,7 @@ export const NewExamType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("examTypes.saveExamTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/medicals/editMedicalType/EditMedicalType.tsx b/src/components/accessories/admin/types/components/medicals/editMedicalType/EditMedicalType.tsx index b6b9a334f..9887a2260 100644 --- a/src/components/accessories/admin/types/components/medicals/editMedicalType/EditMedicalType.tsx +++ b/src/components/accessories/admin/types/components/medicals/editMedicalType/EditMedicalType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { MedicalTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateMedicalType } from "../../../../../../../state/types/medicals"; -import { getInitialFields } from "../medicalTypesForm/consts"; import MedicalTypeForm from "../medicalTypesForm/MedicalTypeForm"; +import { getInitialFields } from "../medicalTypesForm/consts"; import "./styles.scss"; export const EditMedicalType = () => { @@ -42,7 +42,7 @@ export const EditMedicalType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("medicalTypes.updateMedicalType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx b/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx index 4103c9fdc..a63a2c2c4 100644 --- a/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.tsx +++ b/src/components/accessories/admin/types/components/medicals/medicalTypesForm/MedicalTypeForm.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"; @@ -42,8 +43,11 @@ const MedicalTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const medicalTypesStore = useAppSelector((state) => state.types.medicals); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const MedicalTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const MedicalTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const MedicalTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? medicalTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/medicals/newMedicalType/NewMedicalType.tsx b/src/components/accessories/admin/types/components/medicals/newMedicalType/NewMedicalType.tsx index 3ceeac5c1..73bb59b99 100644 --- a/src/components/accessories/admin/types/components/medicals/newMedicalType/NewMedicalType.tsx +++ b/src/components/accessories/admin/types/components/medicals/newMedicalType/NewMedicalType.tsx @@ -28,7 +28,7 @@ export const NewMedicalType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("medicalTypes.saveMedicalTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx b/src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx index dfc38190d..b44d1ac49 100644 --- a/src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx +++ b/src/components/accessories/admin/types/components/operations/editOperationType/EditOperationType.tsx @@ -42,7 +42,7 @@ export const EditOperationType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("operationTypes.updateOperationType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx b/src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx index 4fa4634dc..67faa7a53 100644 --- a/src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx +++ b/src/components/accessories/admin/types/components/operations/newOperationType/NewOperationType.tsx @@ -28,7 +28,7 @@ export const NewOperationType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("operationTypes.saveOperationTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx b/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx index b69afd6a5..449585ddf 100644 --- a/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.tsx +++ b/src/components/accessories/admin/types/components/operations/operationTypesForm/OperationTypeForm.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"; @@ -42,8 +43,11 @@ const OperationTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const operationTypesStore = useAppSelector((state) => state.types.operations); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const OperationTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const OperationTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const OperationTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? operationTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/editPregnantTreatmentType/EditPregnantTreatmentType.tsx b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/editPregnantTreatmentType/EditPregnantTreatmentType.tsx index c905460b6..0587f7e49 100644 --- a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/editPregnantTreatmentType/EditPregnantTreatmentType.tsx +++ b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/editPregnantTreatmentType/EditPregnantTreatmentType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { PregnantTreatmentTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updatePregnantTreatmentType } from "../../../../../../../state/types/pregnantTreatment"; -import { getInitialFields } from "../pregnantTreatmentTypeForm/consts"; import PregnantTreatmentTypeForm from "../pregnantTreatmentTypeForm/PregnantTreatmentTypeForm"; +import { getInitialFields } from "../pregnantTreatmentTypeForm/consts"; import "./styles.scss"; export const EditPregnantTreatmentType = () => { @@ -49,7 +49,7 @@ export const EditPregnantTreatmentType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t( "pregnantTreatmentTypes.updatePregnantTreatmentType" )} diff --git a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/newPregnantTreatmentType/NewPregnantTreatmentType.tsx b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/newPregnantTreatmentType/NewPregnantTreatmentType.tsx index d6cf15ed9..49663799d 100644 --- a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/newPregnantTreatmentType/NewPregnantTreatmentType.tsx +++ b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/newPregnantTreatmentType/NewPregnantTreatmentType.tsx @@ -32,7 +32,7 @@ export const NewPregnantTreatmentType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t( "pregnantTreatmentTypes.savePregnantTreatmentTypes" )} diff --git a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx index 4afe3cd22..d63e65ef2 100644 --- a/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx +++ b/src/components/accessories/admin/types/components/pregnanttreatmenttypes/pregnantTreatmentTypeForm/PregnantTreatmentTypeForm.tsx @@ -42,8 +42,11 @@ const PregnantTreatmentTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const pregnantTreatmentTypeStore = useAppSelector( (state) => state.types.pregnantTreatment ); @@ -89,10 +92,29 @@ const PregnantTreatmentTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -152,29 +174,35 @@ const PregnantTreatmentTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? pregnantTreatmentTypeStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/components/vaccines/editVaccineType/EditVaccineType.tsx b/src/components/accessories/admin/types/components/vaccines/editVaccineType/EditVaccineType.tsx index 74a2c6b0b..455c329c9 100644 --- a/src/components/accessories/admin/types/components/vaccines/editVaccineType/EditVaccineType.tsx +++ b/src/components/accessories/admin/types/components/vaccines/editVaccineType/EditVaccineType.tsx @@ -6,8 +6,8 @@ import { PATHS } from "../../../../../../../consts"; import { VaccineTypeDTO } from "../../../../../../../generated"; import { setTypeMode } from "../../../../../../../state/types/config"; import { updateVaccineType } from "../../../../../../../state/types/vaccines"; -import { getInitialFields } from "../vaccineTypesForm/consts"; import VaccineTypeForm from "../vaccineTypesForm/VaccineTypeForm"; +import { getInitialFields } from "../vaccineTypesForm/consts"; import "./styles.scss"; export const EditVaccineType = () => { @@ -42,7 +42,7 @@ export const EditVaccineType = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("vaccineTypes.updateVaccineType")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/types/components/vaccines/newVaccineType/NewVaccineType.tsx b/src/components/accessories/admin/types/components/vaccines/newVaccineType/NewVaccineType.tsx index 3729c098a..fb8907bd2 100644 --- a/src/components/accessories/admin/types/components/vaccines/newVaccineType/NewVaccineType.tsx +++ b/src/components/accessories/admin/types/components/vaccines/newVaccineType/NewVaccineType.tsx @@ -30,7 +30,7 @@ export const NewVaccineType = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("vaccineTypes.saveVaccineTypes")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx b/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx index 233e7df92..a93389597 100644 --- a/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.tsx +++ b/src/components/accessories/admin/types/components/vaccines/vaccineTypesForm/VaccineTypeForm.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"; @@ -42,8 +43,11 @@ const VaccineTypeForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const vaccineTypesStore = useAppSelector((state) => state.types.vaccines); const errorMessage = useMemo( @@ -87,10 +91,29 @@ const VaccineTypeForm: FC = ({ : ""; }; - 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 cleanUp = useCallback(() => { if (creationMode) { @@ -106,6 +129,20 @@ const VaccineTypeForm: FC = ({ return (
+
+
+ +
+
@@ -147,29 +184,35 @@ const VaccineTypeForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? vaccineTypesStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/types/styles.scss b/src/components/accessories/admin/types/styles.scss index 3b7349457..45dded8f1 100644 --- a/src/components/accessories/admin/types/styles.scss +++ b/src/components/accessories/admin/types/styles.scss @@ -25,3 +25,30 @@ .typeContent { margin-top: 60px; } + +.form__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .form__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; + } + } + } + } +} diff --git a/src/components/accessories/admin/vaccines/editVaccine/EditVaccine.tsx b/src/components/accessories/admin/vaccines/editVaccine/EditVaccine.tsx index 3b85e56f3..d52db9d4a 100644 --- a/src/components/accessories/admin/vaccines/editVaccine/EditVaccine.tsx +++ b/src/components/accessories/admin/vaccines/editVaccine/EditVaccine.tsx @@ -5,8 +5,8 @@ import { Navigate, useLocation, useParams } from "react-router"; import { PATHS } from "../../../../../consts"; import { VaccineDTO } from "../../../../../generated"; import { updateVaccine } from "../../../../../state/vaccines"; -import { getInitialFields } from "../vaccineForm/consts"; import VaccineForm from "../vaccineForm/VaccineForm"; +import { getInitialFields } from "../vaccineForm/consts"; export const EditVaccine = () => { const dispatch = useAppDispatch(); @@ -28,7 +28,7 @@ export const EditVaccine = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("vaccine.updateVaccine")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/vaccines/newVaccine/NewVaccine.tsx b/src/components/accessories/admin/vaccines/newVaccine/NewVaccine.tsx index fa2291663..578e1f686 100644 --- a/src/components/accessories/admin/vaccines/newVaccine/NewVaccine.tsx +++ b/src/components/accessories/admin/vaccines/newVaccine/NewVaccine.tsx @@ -3,8 +3,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { VaccineDTO } from "../../../../../generated"; import { createVaccine } from "../../../../../state/vaccines"; -import { getInitialFields } from "../vaccineForm/consts"; import VaccineForm from "../vaccineForm/VaccineForm"; +import { getInitialFields } from "../vaccineForm/consts"; export const NewVaccine = () => { const dispatch = useAppDispatch(); @@ -20,7 +20,7 @@ export const NewVaccine = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("vaccine.saveVaccine")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx index 75052ae9a..cd61a2e57 100644 --- a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx +++ b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.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"; @@ -45,8 +46,11 @@ const VaccineForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const vaccineStore = useAppSelector((state) => state.vaccines); const vaccinesTypeState = useAppSelector( @@ -108,10 +112,29 @@ const VaccineForm: FC = ({ : ""; }; - 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 onBlurCallback = useCallback( (fieldName: string) => @@ -140,6 +163,20 @@ const VaccineForm: FC = ({ return (
+
+
+ +
+
@@ -194,29 +231,35 @@ const VaccineForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? vaccineStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/vaccines/vaccineForm/styles.scss b/src/components/accessories/admin/vaccines/vaccineForm/styles.scss index 51f9073bc..4271f32a8 100644 --- a/src/components/accessories/admin/vaccines/vaccineForm/styles.scss +++ b/src/components/accessories/admin/vaccines/vaccineForm/styles.scss @@ -55,6 +55,33 @@ } } + .vaccineForm__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .vaccineForm__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; + } + } + } + } + } + .vaccineForm__buttonSet { display: flex; margin-top: 25px; diff --git a/src/components/accessories/admin/wards/editWard/EditWard.tsx b/src/components/accessories/admin/wards/editWard/EditWard.tsx index 2fc2046a5..60dd45a03 100644 --- a/src/components/accessories/admin/wards/editWard/EditWard.tsx +++ b/src/components/accessories/admin/wards/editWard/EditWard.tsx @@ -5,8 +5,8 @@ import { Navigate, useLocation, useParams } from "react-router"; import { PATHS } from "../../../../../consts"; import { WardDTO } from "../../../../../generated"; import { updateWard } from "../../../../../state/ward"; -import { getInitialFields } from "../wardForm/consts"; import WardForm from "../wardForm/WardForm"; +import { getInitialFields } from "../wardForm/consts"; export const EditWard = () => { const dispatch = useAppDispatch(); @@ -28,7 +28,7 @@ export const EditWard = () => { creationMode={false} onSubmit={handleSubmit} isLoading={!!update.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("ward.updateWard")} fields={getInitialFields(state)} /> diff --git a/src/components/accessories/admin/wards/newWard/NewWard.tsx b/src/components/accessories/admin/wards/newWard/NewWard.tsx index c196440cf..57d275382 100644 --- a/src/components/accessories/admin/wards/newWard/NewWard.tsx +++ b/src/components/accessories/admin/wards/newWard/NewWard.tsx @@ -3,8 +3,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { WardDTO } from "../../../../../generated"; import { createWard } from "../../../../../state/ward"; -import { getInitialFields } from "../wardForm/consts"; import WardForm from "../wardForm/WardForm"; +import { getInitialFields } from "../wardForm/consts"; export const NewWard = () => { const dispatch = useAppDispatch(); @@ -20,7 +20,7 @@ export const NewWard = () => { creationMode onSubmit={handleSubmit} isLoading={!!create.isLoading} - resetButtonLabel={t("common.cancel")} + resetButtonLabel={t("common.reset")} submitButtonLabel={t("ward.saveWard")} fields={getInitialFields(undefined)} /> diff --git a/src/components/accessories/admin/wards/wardForm/WardForm.tsx b/src/components/accessories/admin/wards/wardForm/WardForm.tsx index 82a332213..8b402452d 100644 --- a/src/components/accessories/admin/wards/wardForm/WardForm.tsx +++ b/src/components/accessories/admin/wards/wardForm/WardForm.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"; @@ -43,8 +44,11 @@ const WardForm: FC = ({ const { t } = useTranslation(); const navigate = useNavigate(); const infoBoxRef = useRef(null); + const [openResetConfirmation, setOpenResetConfirmation] = useState(false); + const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false); + const wardStore = useAppSelector((state) => state.wards); const errorMessage = useMemo( @@ -98,10 +102,29 @@ const WardForm: FC = ({ : ""; }; - 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) => { @@ -124,6 +147,20 @@ const WardForm: FC = ({ return (
+
+
+ +
+
@@ -290,25 +327,35 @@ const WardForm: FC = ({
+ setOpenResetConfirmation(false)} + handleSecondaryButtonClick={handleResetConfirmationDialog(false)} /> {(creationMode ? wardStore.create.status === "FAIL" diff --git a/src/components/accessories/admin/wards/wardForm/styles.scss b/src/components/accessories/admin/wards/wardForm/styles.scss index c63581954..408402de5 100644 --- a/src/components/accessories/admin/wards/wardForm/styles.scss +++ b/src/components/accessories/admin/wards/wardForm/styles.scss @@ -57,6 +57,33 @@ } } + .wardForm__header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 25px; + .wardForm__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; + } + } + } + } + } + .wardForm__buttonSet { display: flex; margin-top: 25px;