Removed MUI components (#5130)

* added template front-end * refactor * fix date value error * refactor * debug
ohcnetwork · Mar 21, 2023 · 14cea2f · 14cea2f
1 parent e9b32e3
commit 14cea2f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 44 deletions.
diff --git a/src/Components/Facility/TransferPatientDialog.tsx b/src/Components/Facility/TransferPatientDialog.tsx
@@ -1,20 +1,15 @@
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  InputLabel,
-} from "@material-ui/core";
 import { navigate } from "raviger";
 import moment from "moment";
-import React, { useReducer, useState } from "react";
+import { useReducer, useState } from "react";
 import { useDispatch } from "react-redux";
 import { transferPatient } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import { DateInputField, SelectField } from "../Common/HelperInputFields";
 import { DupPatientModel } from "./models";
 import { OptionsType } from "../../Common/constants";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
+import DateFormField from "../Form/FormFields/DateFormField";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import { FieldLabel } from "../Form/FormFields/FormField";
 
 interface Props {
   patientList: Array<DupPatientModel>;
@@ -38,6 +33,9 @@ const initialState = {
   errors: { ...initError },
 };
 
+const getDate = (value: any) =>
+  value && moment(value).isValid() && moment(value).toDate();
+
 const patientFormReducer = (state = initialState, action: any) => {
   switch (action.type) {
     case "set_form": {
@@ -71,14 +69,14 @@ const TransferPatientDialog = (props: Props) => {
 
   const handleChange = (e: any) => {
     const form = { ...state.form };
-    form[e.target.name] = e.target.value;
+    form[e.name] = e.value;
     dispatch({ type: "set_form", form });
   };
 
-  const handleDateChange = (date: any, field: string) => {
-    if (moment(date).isValid()) {
+  const handleDateChange = (e: any) => {
+    if (moment(e.value).isValid()) {
       const form = { ...state.form };
-      form[field] = date;
+      form[e.name] = moment(e.value).format("YYYY-MM-DD");
       dispatch({ type: "set_form", form });
     }
   };
@@ -141,9 +139,8 @@ const TransferPatientDialog = (props: Props) => {
   };
 
   return (
-    <Dialog open={true} maxWidth={"sm"}>
-      <DialogTitle id="test-sample-title">Patient Transfer Form</DialogTitle>
-      <DialogContent>
+    <div>
+      <div>
         <div className="grid gap-4 grid-cols-1">
           <div>
             <p className="leading-relaxed">
@@ -153,43 +150,47 @@ const TransferPatientDialog = (props: Props) => {
           </div>
           <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
             <div>
-              <InputLabel>Patient*</InputLabel>
-              <SelectField
+              <FieldLabel required className="text-sm">
+                Patient
+              </FieldLabel>
+              <SelectFormField
+                id="patient"
                 name="patient"
-                variant="outlined"
-                margin="dense"
-                showEmpty={true}
-                value={state.form.patient}
+                required
+                placeholder="Select patient"
                 options={patientOptions}
+                optionLabel={(patient) => patient.text}
+                optionValue={(patient) => patient.id}
+                value={state.form.patient}
                 onChange={handleChange}
-                errors={state.errors.patient}
+                error={state.errors.patient}
               />
             </div>
             <div>
-              <InputLabel>Date of birth*</InputLabel>
-              <DateInputField
-                fullWidth={true}
-                value={state.form.date_of_birth}
-                onChange={(date) => handleDateChange(date, "date_of_birth")}
-                errors={state.errors.date_of_birth}
-                inputVariant="outlined"
-                margin="dense"
-                openTo="year"
-                disableFuture={true}
+              <DateFormField
+                required
+                name="date_of_birth"
+                label="Date of birth"
+                value={getDate(state.form.date_of_birth)}
+                disableFuture
+                onChange={handleDateChange}
+                position="LEFT"
+                placeholder="Entry Date"
+                error={state.errors.date_of_birth}
               />
             </div>
           </div>
         </div>
-      </DialogContent>
-      <DialogActions className="justify-between flex flex-col md:flex-row">
+      </div>
+      <div className="justify-between flex flex-col md:flex-row gap-2 pt-4">
         <Cancel onClick={handleCancel} disabled={isLoading} />
         <Submit
           disabled={isLoading}
           onClick={handleSubmit}
           label="Transfer Suspect / Patient"
         />
-      </DialogActions>
-    </Dialog>
+      </div>
+    </div>
   );
 };
 

diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
@@ -75,7 +75,7 @@ import { HCXPolicyModel } from "../HCX/models";
 import HCXPolicyValidator from "../HCX/validators";
 import { FieldError } from "../Form/FieldValidators";
 import useAppHistory from "../../Common/hooks/useAppHistory";
-
+import DialogModal from "../Common/Dialog";
 // const debounce = require("lodash.debounce");
 
 interface PatientRegisterProps extends PatientModel {
@@ -1097,12 +1097,19 @@ export const PatientRegister = (props: PatientRegisterProps) => {
         />
       )}
       {statusDialog.transfer && (
-        <TransferPatientDialog
-          patientList={statusDialog.patientList}
-          handleOk={() => handleDialogClose("close")}
-          handleCancel={() => handleDialogClose("back")}
-          facilityId={facilityId}
-        />
+        <DialogModal
+          show={statusDialog.transfer}
+          onClose={() => handleDialogClose("back")}
+          title="Patient Transfer Form"
+          className="max-w-md md:min-w-[600px]"
+        >
+          <TransferPatientDialog
+            patientList={statusDialog.patientList}
+            handleOk={() => handleDialogClose("close")}
+            handleCancel={() => handleDialogClose("back")}
+            facilityId={facilityId}
+          />
+        </DialogModal>
       )}
       <PageTitle
         title={headerText}