OH2-220 | Add reset button in visit and laboratory filters (#498)

* update(OH2-220): Add reset button in visit and laboratory filters * update(Laboratory Filter): Fix disease field not being reset on disease type changed * update: Fix laboratory and visits default filter date values * update: Show patient full name in patient input and fix field being reset after filter submitted * refactor: Remove console log * fix: Fix visit form filter
informatici · Oct 4, 2023 · 41ba7ab · 41ba7ab
1 parent a60afc0
commit 41ba7ab
Show file tree

Hide file tree

Showing 15 changed files with 146 additions and 64 deletions.
diff --git a/src/components/accessories/laboratory/Exams.tsx b/src/components/accessories/laboratory/Exams.tsx
@@ -62,6 +62,9 @@ export const Exams: FC = () => {
   const labStore = useSelector<IState, ILaboratoriesState>(
     (state: IState) => state.laboratories
   );
+  const handleResetFilter = () => {
+    setFilter(initialFilter as TFilterValues);
+  };
 
   useEffect(() => {
     setFilter((previous) => ({ ...previous, page: page }));
@@ -80,9 +83,6 @@ export const Exams: FC = () => {
   }, []);
 
   useEffect(() => {
-    if (!isEmpty(filter.patientCode)) {
-      dispatch(getPatientThunk(filter.patientCode?.toString() ?? "0"));
-    }
     dispatch(searchLabs({ ...filter, paged: true }));
   }, [filter]);
 
@@ -181,7 +181,11 @@ export const Exams: FC = () => {
         )}
         {status !== "LOADING" && (
           <Permission require="exam.read">
-            <ExamFilterForm onSubmit={onSubmit} fields={fields} />
+            <ExamFilterForm
+              onSubmit={onSubmit}
+              fields={fields}
+              handleResetFilter={handleResetFilter}
+            />
             {status === "SUCCESS_EMPTY" && (
               <InfoBox type="info" message={t("common.emptydata")} />
             )}

diff --git a/src/components/accessories/laboratory/filter/ExamFilterForm.tsx b/src/components/accessories/laboratory/filter/ExamFilterForm.tsx
@@ -35,15 +35,19 @@ import { IState } from "../../../../types";
 import { useSelector } from "react-redux";
 import moment from "moment";
 import { Permission } from "../../../../libraries/permissionUtils/Permission";
+import ConfirmationDialog from "../../confirmationDialog/ConfirmationDialog";
+import warningIcon from "../../../../assets/warning-icon.png";
 import SelectField from "../../selectField/SelectField";
 
-export const ExamFilterForm: FC<IExamFilterProps> = ({ fields, onSubmit }) => {
+export const ExamFilterForm: FC<IExamFilterProps> = ({
+  fields,
+  onSubmit,
+  handleResetFilter,
+}) => {
   const { t } = useTranslation();
 
   const [expanded, setExpanded] = useState(true);
-  const patient = useSelector(
-    (state: IState) => state.patients.selectedPatient.data
-  );
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
   const validationSchema = object({
     examName: string(),
@@ -137,6 +141,12 @@ export const ExamFilterForm: FC<IExamFilterProps> = ({ fields, onSubmit }) => {
 
   const { setFieldValue, handleBlur } = formik;
 
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    handleResetFilter();
+    formik.resetForm();
+  };
+
   const mapToOptions = (value: ExamDTO) => ({
     value: value.description ?? "",
     label: value.description ?? "",
@@ -252,9 +262,6 @@ export const ExamFilterForm: FC<IExamFilterProps> = ({ fields, onSubmit }) => {
                       isValid={isValid("patientCode")}
                       errorText={getErrorText("patientCode")}
                       onBlur={onBlurCallback("patientCode")}
-                      initialValue={
-                        isEmpty(formik.values.patientCode) ? undefined : patient
-                      }
                     />
                   </div>
                 </Permission>
@@ -338,13 +345,31 @@ export const ExamFilterForm: FC<IExamFilterProps> = ({ fields, onSubmit }) => {
               </div>
             </div>
             <div className="filterForm__buttonSet">
-              <Button type="submit" color="primary" variant="contained">
+              <Button
+                type="reset"
+                variant="text"
+                onClick={() => setOpenResetConfirmation(true)}
+                className="reset_button"
+              >
+                {t("common.reset")}
+              </Button>
+              <Button variant="contained" color="primary" type="submit">
                 {t("lab.filter")}
               </Button>
             </div>
           </form>
         </AccordionDetails>
       </Accordion>
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.reset").toUpperCase()}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.reset")}
+        secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleResetConfirmation}
+        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+      />
     </div>
   );
 };
diff --git a/src/components/accessories/laboratory/filter/styles.scss b/src/components/accessories/laboratory/filter/styles.scss
@@ -85,6 +85,7 @@
       flex-wrap: wrap;
       gap: 8px;
       width: 100%;
+      justify-content: flex-end;
 
       .MuiButton-label {
         font-size: smaller;

diff --git a/src/components/accessories/laboratory/filter/types.ts b/src/components/accessories/laboratory/filter/types.ts
@@ -4,6 +4,7 @@ import { TFields } from "../../../../libraries/formDataHandling/types";
 export interface IExamFilterProps {
   fields: TFields<ExamFilterFormFieldName>;
   onSubmit: (values: any) => void;
+  handleResetFilter: () => void;
 }
 
 export type TFilterValues = {

diff --git a/src/components/accessories/opds/Opds.tsx b/src/components/accessories/opds/Opds.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import InfoBox from "../infoBox/InfoBox";
-import { initialFilterFields } from "./consts";
+import { initialFilter, initialFilterFields } from "./consts";
 import { OpdFilterForm } from "./filter/OpdFilterForm";
 import "./styles.scss";
 import { OpdTable } from "./table/OpdTable";
@@ -24,14 +24,13 @@ export const Opds: FC = () => {
   const fields = initialFilterFields;
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const navigate = useNavigate();
 
-  const [filter, setFilter] = useState({} as TFilterValues);
+  const [filter, setFilter] = useState(initialFilter as TFilterValues);
 
   const { data, status, error, page, pageInfo, handlePageChange } = useOpds();
 
   useEffect(() => {
-    dispatch(searchOpds({ ...filter, paged: true }));
+    dispatch(searchOpds({ ...filter, paged: false }));
   }, [filter]);
 
   useEffect(() => {
@@ -42,19 +41,15 @@ export const Opds: FC = () => {
     setFilter({ ...values, page: 0, size: filter.size });
   };
 
+  const handleResetFilter = () => {
+    setFilter(initialFilter as TFilterValues);
+  };
+
   const onPageChange = (e: any, page: number) => handlePageChange(e, page - 1);
 
   const errorMessage = error || t("common.somethingwrong");
 
   useEffect(() => {
-    dispatch(
-      searchOpds({
-        ...getFromFields(fields, "value"),
-        page: 0,
-        size: 80,
-        paged: true,
-      })
-    );
     dispatch(getDiseasesOpd());
     dispatch(getDiseaseTypes());
     dispatch(getWards());
@@ -71,7 +66,11 @@ export const Opds: FC = () => {
             case "FAIL":
               return (
                 <Permission require="opd.read">
-                  <OpdFilterForm onSubmit={onSubmit} fields={fields} />
+                  <OpdFilterForm
+                    onSubmit={onSubmit}
+                    fields={fields}
+                    handleResetFilter={handleResetFilter}
+                  />
                   <InfoBox type="error" message={errorMessage} />
                 </Permission>
               );
@@ -86,15 +85,23 @@ export const Opds: FC = () => {
             case "SUCCESS_EMPTY":
               return (
                 <Permission require="opd.read">
-                  <OpdFilterForm onSubmit={onSubmit} fields={fields} />
+                  <OpdFilterForm
+                    onSubmit={onSubmit}
+                    fields={fields}
+                    handleResetFilter={handleResetFilter}
+                  />
                   <InfoBox type="info" message={t("common.emptydata")} />
                 </Permission>
               );
 
             case "SUCCESS":
               return (
                 <Permission require="opd.read">
-                  <OpdFilterForm onSubmit={onSubmit} fields={fields} />
+                  <OpdFilterForm
+                    onSubmit={onSubmit}
+                    fields={fields}
+                    handleResetFilter={handleResetFilter}
+                  />
                   <OpdTable data={data ?? []} />
                   <Pagination
                     page={(pageInfo?.page ?? 0) + 1}

diff --git a/src/components/accessories/opds/consts.ts b/src/components/accessories/opds/consts.ts
@@ -1,6 +1,10 @@
 import moment from "moment";
+import {
+  fixFilterDateFrom,
+  fixFilterDateTo,
+} from "../../../libraries/formDataHandling/functions";
 import { TFields } from "../../../libraries/formDataHandling/types";
-import { OpdFilterFormFieldName } from "./filter/types";
+import { OpdFilterFormFieldName, TFilterValues } from "./filter/types";
 
 export const initialFilterFields: TFields<OpdFilterFormFieldName> = {
   ageFrom: { type: "number", value: "" },
@@ -17,3 +21,10 @@ export const initialFilterFields: TFields<OpdFilterFormFieldName> = {
   patientCode: { type: "number", value: "" },
   wardCode: { type: "text", value: "" },
 };
+
+export const initialFilter: TFilterValues = {
+  dateFrom: fixFilterDateFrom(moment().subtract(1, "years").toISOString()),
+  dateTo: fixFilterDateTo(moment().toISOString()),
+  page: 0,
+  size: 80,
+};
diff --git a/src/components/accessories/opds/filter/OpdFilterForm.tsx b/src/components/accessories/opds/filter/OpdFilterForm.tsx
@@ -9,7 +9,7 @@ import { differenceInSeconds } from "date-fns";
 import { useFormik } from "formik";
 import get from "lodash.get";
 import has from "lodash.has";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { FC, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { date, number, object, string } from "yup";
@@ -35,12 +35,19 @@ import { IState } from "../../../../types";
 import { useSelector } from "react-redux";
 import moment from "moment";
 import { Permission } from "../../../../libraries/permissionUtils/Permission";
+import ConfirmationDialog from "../../confirmationDialog/ConfirmationDialog";
+import warningIcon from "../../../../assets/warning-icon.png";
 
-export const OpdFilterForm: FC<IOpdFilterProps> = ({ fields, onSubmit }) => {
+export const OpdFilterForm: FC<IOpdFilterProps> = ({
+  fields,
+  onSubmit,
+  handleResetFilter,
+}) => {
   const { t } = useTranslation();
 
   const [expanded, setExpanded] = useState(true);
   const [diseaseTypeCode, setDiseaseTypeCode] = useState("");
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
   const validationSchema = object({
     diseaseCode: string(),
@@ -175,6 +182,11 @@ export const OpdFilterForm: FC<IOpdFilterProps> = ({ fields, onSubmit }) => {
 
   const { setFieldValue, handleBlur } = formik;
 
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    handleResetFilter();
+    formik.resetForm();
+  };
   const mapToOptions = (value: DiseaseTypeDTO | DiseaseDTO | WardDTO) => ({
     value: value.code ?? "",
     label: value.description ?? "",
@@ -290,6 +302,7 @@ export const OpdFilterForm: FC<IOpdFilterProps> = ({ fields, onSubmit }) => {
         }
         if (fieldName === "diseaseTypeCode") {
           setDiseaseTypeCode((value ?? "") as string);
+          formik.setFieldValue("diseaseCode", "");
         }
       },
     [setFieldValue, handleBlur]
@@ -505,16 +518,31 @@ export const OpdFilterForm: FC<IOpdFilterProps> = ({ fields, onSubmit }) => {
               </div>
             </div>
             <div className="filterForm__buttonSet">
+              <Button
+                type="reset"
+                variant="text"
+                onClick={() => setOpenResetConfirmation(true)}
+                className="reset_button"
+              >
+                {t("common.reset")}
+              </Button>
               <Button variant="contained" color="primary" type="submit">
                 {t("opd.filter")}
               </Button>
             </div>
           </form>
         </AccordionDetails>
       </Accordion>
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.reset").toUpperCase()}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.reset")}
+        secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleResetConfirmation}
+        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+      />
     </div>
   );
 };
-function useEffect(arg0: () => void, arg1: never[]) {
-  throw new Error("Function not implemented.");
-}
diff --git a/src/components/accessories/opds/filter/styles.scss b/src/components/accessories/opds/filter/styles.scss
@@ -64,14 +64,17 @@
     }
     .filterForm__buttonSet {
       display: flex;
+      justify-content: flex-end;
       width: 100%;
-      .MuiButton-contained {
-        width: 24%;
+      gap: 8px;
+
+      .MuiButton-root {
+        width: 16%;
         @include susy-media($tablet_land) {
-          width: 32%;
+          width: 26%;
         }
         @include susy-media($phone) {
-          width: 100%;
+          width: 50%;
         }
       }
     }

diff --git a/src/components/accessories/opds/filter/types.ts b/src/components/accessories/opds/filter/types.ts
@@ -3,6 +3,7 @@ import { TFields } from "../../../../libraries/formDataHandling/types";
 export interface IOpdFilterProps {
   fields: TFields<OpdFilterFormFieldName>;
   onSubmit: (values: any) => void;
+  handleResetFilter: () => void;
 }
 export type IStatus = "" | "A" | "R";
 export type ISex = "" | "F" | "M" | "U";

diff --git a/src/components/accessories/patientPicker/PatientPicker.tsx b/src/components/accessories/patientPicker/PatientPicker.tsx
@@ -202,7 +202,7 @@ const PatientPicker: FC<IProps> = ({
           label={label}
           name={fieldName}
           variant="outlined"
-          value={value.firstName ?? ""}
+          value={value.name ?? ""}
           type={"text"}
           onBlur={handleOnBlur}
           onMouseDown={handleCriteriaChange}