From 41ba7ab3607dff9973ef1d69d1305b634dc5ebbd Mon Sep 17 00:00:00 2001 From: Steve Tsala <45661418+SteveGT96@users.noreply.github.com> Date: Wed, 4 Oct 2023 11:33:58 +0100 Subject: [PATCH] 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 --- .../accessories/laboratory/Exams.tsx | 12 ++++-- .../laboratory/filter/ExamFilterForm.tsx | 41 +++++++++++++++---- .../accessories/laboratory/filter/styles.scss | 1 + .../accessories/laboratory/filter/types.ts | 1 + src/components/accessories/opds/Opds.tsx | 37 ++++++++++------- src/components/accessories/opds/consts.ts | 13 +++++- .../accessories/opds/filter/OpdFilterForm.tsx | 38 ++++++++++++++--- .../accessories/opds/filter/styles.scss | 11 +++-- .../accessories/opds/filter/types.ts | 1 + .../patientPicker/PatientPicker.tsx | 2 +- .../models/OpdWithOperationRowDTO.ts | 27 ++++++------ src/libraries/formDataHandling/functions.ts | 1 + src/mockServer/fixtures/patientDTO.js | 1 + src/state/laboratories/actions.ts | 4 +- src/state/opds/actions.ts | 20 +++++---- 15 files changed, 146 insertions(+), 64 deletions(-) diff --git a/src/components/accessories/laboratory/Exams.tsx b/src/components/accessories/laboratory/Exams.tsx index 7ce76b006..6b977bf90 100644 --- 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( (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" && ( - + {status === "SUCCESS_EMPTY" && ( )} diff --git a/src/components/accessories/laboratory/filter/ExamFilterForm.tsx b/src/components/accessories/laboratory/filter/ExamFilterForm.tsx index ddb1c10c2..47ad2f245 100644 --- 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 = ({ fields, onSubmit }) => { +export const ExamFilterForm: FC = ({ + 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 = ({ 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 = ({ fields, onSubmit }) => { isValid={isValid("patientCode")} errorText={getErrorText("patientCode")} onBlur={onBlurCallback("patientCode")} - initialValue={ - isEmpty(formik.values.patientCode) ? undefined : patient - } /> @@ -338,13 +345,31 @@ export const ExamFilterForm: FC = ({ fields, onSubmit }) => {
- +
+ setOpenResetConfirmation(false)} + /> ); }; diff --git a/src/components/accessories/laboratory/filter/styles.scss b/src/components/accessories/laboratory/filter/styles.scss index 18f1da1d0..5d142c471 100644 --- 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 index c1311d7d9..4c76a464f 100644 --- 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; 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 index 0d4734a5e..ba180e98b 100644 --- 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 ( - + ); @@ -86,7 +85,11 @@ export const Opds: FC = () => { case "SUCCESS_EMPTY": return ( - + ); @@ -94,7 +97,11 @@ export const Opds: FC = () => { case "SUCCESS": return ( - + = { ageFrom: { type: "number", value: "" }, @@ -17,3 +21,10 @@ export const initialFilterFields: TFields = { 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 index 63c2058b9..135ff0702 100644 --- 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 = ({ fields, onSubmit }) => { +export const OpdFilterForm: FC = ({ + 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 = ({ 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 = ({ fields, onSubmit }) => { } if (fieldName === "diseaseTypeCode") { setDiseaseTypeCode((value ?? "") as string); + formik.setFieldValue("diseaseCode", ""); } }, [setFieldValue, handleBlur] @@ -505,6 +518,14 @@ export const OpdFilterForm: FC = ({ fields, onSubmit }) => {
+ @@ -512,9 +533,16 @@ export const OpdFilterForm: FC = ({ fields, onSubmit }) => { + setOpenResetConfirmation(false)} + />
); }; -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 index 97911a679..db5414a6f 100644 --- 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 index 7fcb59b82..af1b37e53 100644 --- 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; 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 index 1bf36c8cd..3cb819858 100644 --- a/src/components/accessories/patientPicker/PatientPicker.tsx +++ b/src/components/accessories/patientPicker/PatientPicker.tsx @@ -202,7 +202,7 @@ const PatientPicker: FC = ({ label={label} name={fieldName} variant="outlined" - value={value.firstName ?? ""} + value={value.name ?? ""} type={"text"} onBlur={handleOnBlur} onMouseDown={handleCriteriaChange} diff --git a/src/generated/models/OpdWithOperationRowDTO.ts b/src/generated/models/OpdWithOperationRowDTO.ts index 7840a5713..56dd75f04 100644 --- a/src/generated/models/OpdWithOperationRowDTO.ts +++ b/src/generated/models/OpdWithOperationRowDTO.ts @@ -4,31 +4,28 @@ * OH 2.0 Api Documentation * * The version of the OpenAPI document: 1.0 - * + * * * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech). * https://openapi-generator.tech * Do not edit the class manually. */ -import { - OpdDTO, - OperationRowDTO, -} from './'; +import { OpdDTO, OperationRowDTO } from "./"; /** * @export * @interface OpdWithOperationRowDTO */ export interface OpdWithOperationRowDTO { - /** - * @type {OpdDTO} - * @memberof OpdWithOperationRowDTO - */ - opdDTO?: OpdDTO; - /** - * @type {Array} - * @memberof OpdWithOperationRowDTO - */ - operationRows?: Array; + /** + * @type {OpdDTO} + * @memberof OpdWithOperationRowDTO + */ + opdDTO?: OpdDTO; + /** + * @type {Array} + * @memberof OpdWithOperationRowDTO + */ + operationRows?: Array; } diff --git a/src/libraries/formDataHandling/functions.ts b/src/libraries/formDataHandling/functions.ts index 92b2de14a..40407549b 100644 --- a/src/libraries/formDataHandling/functions.ts +++ b/src/libraries/formDataHandling/functions.ts @@ -173,6 +173,7 @@ export const updateFilterFields = ( Object.keys(values!).forEach((key) => { let value = values![key]; if (key === "status") return (draft[key as string].value = value); + if (key === "patientCode") return (draft[key as string].value = value); if (draft[key as string]) { return (draft[key as string].value = moment(value).isValid() ? parseDate(value as string, withTimezone) diff --git a/src/mockServer/fixtures/patientDTO.js b/src/mockServer/fixtures/patientDTO.js index 67b6cbdee..b819e11d1 100644 --- a/src/mockServer/fixtures/patientDTO.js +++ b/src/mockServer/fixtures/patientDTO.js @@ -3,6 +3,7 @@ const patientDTO = { status: "I", firstName: "Antonio Carlos", secondName: "Jobim", + name: "Antonio Carlos Jobim", birthDate: "1991-08-30T00:00:00.000Z", age: 40, agetype: "year", diff --git a/src/state/laboratories/actions.ts b/src/state/laboratories/actions.ts index 800e8060e..29311085d 100644 --- a/src/state/laboratories/actions.ts +++ b/src/state/laboratories/actions.ts @@ -214,8 +214,8 @@ export const searchLabs = }); labsApi .getLaboratoryForPrint({ - dateTo: query.dateTo ?? moment().add("-30", "days").toISOString(), - dateFrom: query.dateFrom ?? moment().toISOString(), + dateFrom: query.dateFrom ?? moment().add("-30", "days").toISOString(), + dateTo: query.dateTo ?? moment().toISOString(), examName: query.examName, patientCode: !isNaN(query.patientCode) ? query.patientCode : undefined, status: query.status ?? undefined, diff --git a/src/state/opds/actions.ts b/src/state/opds/actions.ts index f9b359e3e..7803088cf 100644 --- a/src/state/opds/actions.ts +++ b/src/state/opds/actions.ts @@ -235,19 +235,21 @@ export const searchOpds = opdsApi .getOpdByDates({ - sex: query.sex, - newPatient: query.newPatient, - dateTo: query.dateTo ?? moment().add("-30", "days").toISOString(), - dateFrom: query.dateFrom ?? moment().toISOString(), + sex: isEmpty(query.sex) ? null : query.sex, + newPatient: isEmpty(query.newPatient) ? null : query.newPatient, + dateFrom: query.dateFrom ?? moment().add("-30", "days").toISOString(), + dateTo: query.dateTo ?? moment().toISOString(), ageFrom: isNaN(query.ageFrom) ? null : query.ageFrom, ageTo: isNaN(query.ageTo) ? null : query.ageTo, - diseaseCode: query.diseaseCode, - diseaseTypeCode: query.diseaseTypeCode, + diseaseCode: isEmpty(query.diseaseCode) ? null : query.diseaseCode, + diseaseTypeCode: isEmpty(query.diseaseTypeCode) + ? null + : query.diseaseTypeCode, patientCode: isNaN(query.patientCode) ? null : query.patientCode, wardCode: isEmpty(query.wardCode) ? null : query.wardCode, - paged: false, - page: isNaN(query.page) ? null : query.page, - size: isNaN(query.size) ? null : query.size, + paged: !!query.paged, + page: isNaN(query.page) ? 0 : query.page, + size: isNaN(query.size) ? 80 : query.size, }) .subscribe( (payload) => {