Skip to content

Commit

Permalink
Replace Material UI components in ./src/components/Facility/TriageFor…
Browse files Browse the repository at this point in the history 
…m.tsx (#5545)

* Replace Material UI components in TriageForm.tsx

Replaced Card, InputLabel, Modal MUI component and font-awesome with
Care UI custom components and CAREUI icons and Legacy fields with respective
Form Fields.

fix #4960

* fix icon  alignment

---------

Co-authored-by: Rithvik Nishad <[email protected]>
  • Loading branch information
@somesh202 @rithviknishad
somesh202 and rithviknishad authored May 31, 2023
1 parent 69c7e96 commit 02fa8c4
Showing 1 changed file with 57 additions and 121 deletions.
178 changes: 57 additions & 121 deletions src/Components/Facility/TriageForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Card, CardContent, InputLabel, Modal } from "@material-ui/core";

import ConfirmDialogV2 from "../Common/ConfirmDialogV2";
import Card from "../../CAREUI/display/Card";
import loadable from "@loadable/component";
import CareIcon from "../../CAREUI/icons/CareIcon";
import moment from "moment";
import { useCallback, useReducer, useState, useEffect } from "react";
import { useDispatch } from "react-redux";
Expand All @@ -12,15 +13,14 @@ import {
getTriageInfo,
} from "../../Redux/actions";
import * as Notification from "../../Utils/Notifications.js";
import { LegacyTextInputField } from "../Common/HelperInputFields";
import TextFormField from "../Form/FormFields/TextFormField";
import { PatientStatsModel } from "./models";
import ButtonV2 from "../Common/components/ButtonV2";
import { Cancel, Submit } from "../Common/components/ButtonV2";
import useAppHistory from "../../Common/hooks/useAppHistory";
import DateFormField from "../Form/FormFields/DateFormField";
import { FieldChangeEvent } from "../Form/FormFields/Utils";
const Loading = loadable(() => import("../Common/Loading"));
const PageTitle = loadable(() => import("../Common/PageTitle"));
import Page from "../Common/components/Page";

interface triageFormProps extends PatientStatsModel {
facilityId: number;
Expand Down Expand Up @@ -187,8 +187,7 @@ export const TriageForm = (props: triageFormProps) => {
return false;
};

const handleSubmit = async (e: any) => {
e.preventDefault();
const handleSubmit = async () => {
setOpenModalForExistingTriage(false);
const validForm = validateForm();
if (validForm) {
Expand All @@ -207,7 +206,7 @@ export const TriageForm = (props: triageFormProps) => {
//proceed if the triage does not exist or proceed has allowed to proceed after seeing the modal or it's a edit feature of the same date
if (
!isTriageExist(data) ||
e.target.id === "triageConfirm" ||
openModalForExistingTriage ||
buttonText === "Update Triage"
) {
setOpenModalForExistingTriage(false);
Expand Down Expand Up @@ -242,19 +241,13 @@ export const TriageForm = (props: triageFormProps) => {
});
};

const handleChange = (e: any) => {
const form = { ...state.form };
form[e.target.name] = e.target.value;
dispatch({ type: "set_form", form });
};

if (isLoading) {
return <Loading />;
}

return (
<div className="px-2">
<PageTitle
<div>
<Page
title={headerText}
crumbsReplacements={{
[facilityId]: { name: facilityName },
Expand All @@ -263,54 +256,32 @@ export const TriageForm = (props: triageFormProps) => {
},
}}
backUrl={`/facility/${facilityId}`}
/>

<Modal
open={openModalForExistingTriage}
aria-labelledby="Triage Check"
aria-describedby=""
className=""
>
<div className="h-screen w-full absolute flex items-center justify-center bg-modal">
<div className="bg-white rounded shadow p-8 m-4 max-h-full text-center flex flex-col max-w-lg w-2/3 min-w-max-content">
<div className="mb-4">
<i className="fa-solid fa-triangle-exclamation text-red-500 fa-4x"></i>
<h1 className="sm:text-xl text-sm">
A Triage already exist on this date
</h1>
<p className="text-base">
If you wish to proceed then the existing triage will be over
written!
</p>
<ConfirmDialogV2
title={
<div className="flex gap-2">
<CareIcon className="care-l-exclamation-triangle text-red-500 text-xl" />
<p>A Triage already exist on this date</p>
</div>
<div></div>
<div className="flex flex-col-reverse md:flex-row gap-2 mt-4 justify-end">
<ButtonV2
variant="secondary"
onClick={() => {
setOpenModalForExistingTriage(false);
}}
>
Cancel
</ButtonV2>
<ButtonV2
variant="danger"
id="triageConfirm"
onClick={(e) => {
handleSubmit(e);
}}
>
Proceed
</ButtonV2>
</div>
</div>
</div>
</Modal>
}
description="A Triage already exist on this date, If you wish to proceed then the existing triage will be over
written!"
variant="danger"
show={openModalForExistingTriage}
onClose={() => setOpenModalForExistingTriage(false)}
className="w-[48rem]"
action="Proceed"
onConfirm={handleSubmit}
/>

<div className="mt-4">
<Card>
<form onSubmit={(e) => handleSubmit(e)}>
<CardContent>
<div className="mt-4">
<Card>
<form
onSubmit={(e) => {
e.preventDefault();
handleSubmit();
}}
>
<div className="max-w-[250px] pb-4">
<DateFormField
required
Expand All @@ -326,99 +297,64 @@ export const TriageForm = (props: triageFormProps) => {
</div>
<div className="mt-2 grid gap-4 grid-cols-1 md:grid-cols-2">
<div>
<InputLabel id="num-patients-visited-label">
Patients Visited in Triage
</InputLabel>
<LegacyTextInputField
<TextFormField
name="num_patients_visited"
variant="outlined"
margin="dense"
type="number"
InputLabelProps={{
shrink: !!state.form.num_patients_visited,
}}
label="Patients Visited in Triage"
value={state.form.num_patients_visited}
onChange={handleChange}
errors={state.errors.num_patients_visited}
onChange={handleFormFieldChange}
error={state.errors.num_patients_visited}
/>
</div>
<div>
<InputLabel id="num-patients-home-quarantine-label">
Patients in Home Quarantine
</InputLabel>
<LegacyTextInputField
<TextFormField
name="num_patients_home_quarantine"
variant="outlined"
margin="dense"
type="number"
InputLabelProps={{
shrink: !!state.form.num_patients_home_quarantine,
}}
label="Patients in Home Quarantine"
value={state.form.num_patients_home_quarantine}
onChange={handleChange}
errors={state.errors.num_patients_home_quarantine}
onChange={handleFormFieldChange}
error={state.errors.num_patients_home_quarantine}
/>
</div>
<div>
<InputLabel id="num-patients-isolation-label">
Suspected Isolated
</InputLabel>
<LegacyTextInputField
<TextFormField
name="num_patients_isolation"
variant="outlined"
margin="dense"
type="number"
InputLabelProps={{
shrink: !!state.form.num_patients_isolation,
}}
label="Suspected Isolated"
value={state.form.num_patients_isolation}
onChange={handleChange}
errors={state.errors.num_patients_isolation}
onChange={handleFormFieldChange}
error={state.errors.num_patients_isolation}
/>
</div>
<div>
<InputLabel id="num-patient-referred-label">
Patients Referred
</InputLabel>
<LegacyTextInputField
<TextFormField
name="num_patient_referred"
variant="outlined"
margin="dense"
type="number"
InputLabelProps={{
shrink: !!state.form.num_patient_referred,
}}
label="Patients Referred"
value={state.form.num_patient_referred}
onChange={handleChange}
errors={state.errors.num_patient_referred}
onChange={handleFormFieldChange}
error={state.errors.num_patient_referred}
/>
</div>
<div>
<InputLabel id="num-patient-referred-label">
Confirmed Positive
</InputLabel>
<LegacyTextInputField
<TextFormField
name="num_patient_confirmed_positive"
variant="outlined"
margin="dense"
type="number"
InputLabelProps={{
shrink: !!state.form.num_patient_confirmed_positive,
}}
label="Confirmed Positive"
value={state.form.num_patient_confirmed_positive}
onChange={handleChange}
errors={state.errors.num_patient_confirmed_positive}
onChange={handleFormFieldChange}
error={state.errors.num_patient_confirmed_positive}
/>
</div>
</div>
<div className="flex flex-col md:flex-row gap-2 justify-between mt-4">
<Cancel onClick={() => goBack()} />
<Submit onClick={handleSubmit} label={buttonText} />
<Submit label={buttonText} />
</div>
</CardContent>
</form>
</Card>
</div>
</form>
</Card>
</div>
</Page>
</div>
);
};

0 comments on commit 02fa8c4

Please sign in to comment.