From 6939644b4375780aafdf709f4ca17a91f81e6844 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 21 Jun 2023 12:06:11 +0530
Subject: [PATCH] Tailwinds Create Shift Form (#5661)

* tailwinds #4987

* fix responsiveness issue
---
 src/Components/Patient/ShiftCreate.tsx | 435 +++++++++----------------
 1 file changed, 147 insertions(+), 288 deletions(-)

diff --git a/src/Components/Patient/ShiftCreate.tsx b/src/Components/Patient/ShiftCreate.tsx
index c4bb347cfcb..63dbefa21ff 100644
--- a/src/Components/Patient/ShiftCreate.tsx
+++ b/src/Components/Patient/ShiftCreate.tsx
@@ -6,19 +6,7 @@ import {
   PATIENT_CATEGORIES,
   SHIFTING_VEHICLE_CHOICES,
 } from "../../Common/constants";
-import {
-  Box,
-  Card,
-  CardContent,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-} from "@material-ui/core";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import {
-  LegacyErrorHelperText,
-  LegacySelectField,
-} from "../Common/HelperInputFields";
 import { createShift, getPatient } from "../../Redux/actions";
 import { useEffect, useReducer, useState } from "react";
 
@@ -37,8 +25,11 @@ import useAppHistory from "../../Common/hooks/useAppHistory";
 import useConfig from "../../Common/hooks/useConfig";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
+import Page from "../Common/components/Page.js";
+import Card from "../../CAREUI/display/Card.js";
+import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField.js";
+import { SelectFormField } from "../Form/FormFields/SelectFormField.js";
 
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface patientShiftProps {
@@ -195,26 +186,6 @@ export const ShiftCreate = (props: patientShiftProps) => {
     return !isInvalidForm;
   };
 
-  const handleChange = (e: any) => {
-    const form = { ...state.form };
-    const { name, value } = e.target;
-    form[name] = value;
-    dispatch({ type: "set_form", form });
-  };
-
-  const handleTextFormFieldChange = (e: any) => {
-    const form = { ...state.form };
-    const { name, value } = e;
-    form[name] = value;
-    dispatch({ type: "set_form", form });
-  };
-
-  const handleValueChange = (value: any, name: string) => {
-    const form = { ...state.form };
-    form[name] = value;
-    dispatch({ type: "set_form", form });
-  };
-
   const handleFormFieldChange = (event: FieldChangeEvent<unknown>) => {
     dispatch({
       type: "set_form",
@@ -277,266 +248,154 @@ export const ShiftCreate = (props: patientShiftProps) => {
       }
     }
   };
-  const vehicleOptions = SHIFTING_VEHICLE_CHOICES.map((obj) => obj.text);
-  const facilityOptions = FACILITY_TYPES.map((obj) => obj.text);
 
   if (isLoading) {
     return <Loading />;
   }
 
+  const field = (name: string) => ({
+    name,
+    value: state.form[name],
+    onChange: handleFormFieldChange,
+    error: state.errors[name],
+  });
+
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={"Create Shift Request"}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-        backUrl={`/facility/${facilityId}/patient/${patientId}`}
-      />
-      <div className="mt-4">
-        <Card>
-          <CardContent>
-            <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-              <div>
-                <TextFormField
-                  label="Contact person at the current facility"
-                  required
-                  name="refering_facility_contact_name"
-                  value={state.form.refering_facility_contact_name}
-                  onChange={handleTextFormFieldChange}
-                  error={state.errors.refering_facility_contact_name}
-                />
-              </div>
-
-              <div>
-                <PhoneNumberFormField
-                  label="Contact person phone"
-                  name="refering_facility_contact_number"
-                  required
-                  disableCountry
-                  value={state.form.refering_facility_contact_number}
-                  onChange={handleFormFieldChange}
-                  error={state.errors.refering_facility_contact_number}
-                />
-              </div>
-
-              {wartime_shifting && (
-                <div>
-                  <FieldLabel>
-                    Name of shifting approving facility{" "}
-                    <span className="text-red-500">*</span>
-                  </FieldLabel>
-                  <FacilitySelect
-                    multiple={false}
-                    facilityType={1300}
-                    name="shifting_approving_facility"
-                    selected={state.form.shifting_approving_facility}
-                    setSelected={(value: any) =>
-                      handleValueChange(value, "shifting_approving_facility")
-                    }
-                    errors={state.errors.shifting_approving_facility}
-                  />
-                </div>
-              )}
-
-              <div className={`md:col-span-${wartime_shifting ? "1" : "2"}`}>
-                <FieldLabel>
-                  {t("what_facility_assign_the_patient_to")}
-                </FieldLabel>
-                <FacilitySelect
-                  multiple={false}
-                  name="assigned_facility"
-                  selected={state.form.assigned_facility}
-                  setSelected={(value: any) =>
-                    handleValueChange(value, "assigned_facility")
-                  }
-                  freeText={true}
-                  errors={state.errors.assigned_facility}
-                />
-              </div>
-
-              <div>
-                <FieldLabel>Is this an emergency?</FieldLabel>
-                <RadioGroup
-                  aria-label="emergency"
-                  name="emergency"
-                  value={state.form.emergency === "true"}
-                  onChange={handleChange}
-                  style={{ padding: "0px 5px" }}
-                >
-                  <Box>
-                    <FormControlLabel
-                      value={true}
-                      control={<Radio />}
-                      label="Yes"
-                    />
-                    <FormControlLabel
-                      value={false}
-                      control={<Radio />}
-                      label="No"
-                    />
-                  </Box>
-                </RadioGroup>
-                <LegacyErrorHelperText error={state.errors.emergency} />
-              </div>
-
-              <div>
-                <FieldLabel>Is this an upshift?</FieldLabel>
-                <RadioGroup
-                  aria-label="is it upshift"
-                  name="is_up_shift"
-                  value={state.form.is_up_shift === "true"}
-                  onChange={handleChange}
-                  style={{ padding: "0px 5px" }}
-                >
-                  <Box>
-                    <FormControlLabel
-                      value={true}
-                      control={<Radio />}
-                      label="Yes"
-                    />
-                    <FormControlLabel
-                      value={false}
-                      control={<Radio />}
-                      label="No"
-                    />
-                  </Box>
-                </RadioGroup>
-                <LegacyErrorHelperText error={state.errors.is_up_shift} />
-              </div>
-
-              <div className="md:col-span-2">
-                <PatientCategorySelect
-                  required={false}
-                  name="patient_category"
-                  value={patientCategory}
-                  onChange={(e) => {
-                    setPatientCategory(e.value);
-                  }}
-                  label="Patient Category"
-                />
-              </div>
-
-              {wartime_shifting && (
-                <>
-                  <div className="md:col-span-1">
-                    <FieldLabel>
-                      Preferred Vehicle <span className="text-red-500">*</span>
-                    </FieldLabel>
-                    <LegacySelectField
-                      name="preferred_vehicle_choice"
-                      variant="outlined"
-                      margin="dense"
-                      optionArray={true}
-                      value={state.form.preferred_vehicle_choice}
-                      options={["", ...vehicleOptions]}
-                      onChange={handleChange}
-                      className="bg-white h-11 w-fit mt-2 shadow-sm md:leading-5"
-                      errors={state.errors.preferred_vehicle_choice}
-                    />
-                  </div>
-                  <div className="md:col-span-1">
-                    <FieldLabel>
-                      Preferred Facility Type{" "}
-                      <span className="text-red-500">*</span>
-                    </FieldLabel>
-                    <LegacySelectField
-                      name="assigned_facility_type"
-                      variant="outlined"
-                      margin="dense"
-                      optionArray={true}
-                      value={state.form.assigned_facility_type}
-                      options={["", ...facilityOptions]}
-                      onChange={handleChange}
-                      className="bg-white h-11 w-fit mt-2 shadow-sm md:leading-5"
-                      errors={state.errors.assigned_facility_type}
-                    />
-                  </div>
-                  <div className="md:col-span-1">
-                    <FieldLabel>
-                      Severity of Breathlessness{" "}
-                      <span className="text-red-500">*</span>
-                    </FieldLabel>
-                    <LegacySelectField
-                      name="breathlessness_level"
-                      variant="outlined"
-                      margin="dense"
-                      optionArray={true}
-                      value={state.form.breathlessness_level}
-                      options={["", ...BREATHLESSNESS_LEVEL]}
-                      onChange={handleChange}
-                      className="bg-white h-11 w-fit mt-2 shadow-sm md:leading-5"
-                      errors={state.errors.breathlessness_level}
-                    />
-                  </div>
-                </>
-              )}
-
-              <div className="md:col-span-2">
-                <TextAreaFormField
-                  label="Reason for shift"
-                  required
-                  rows={5}
-                  name="reason"
-                  placeholder="Type your reason here"
-                  value={state.form.reason}
-                  onChange={handleTextFormFieldChange}
-                  error={state.errors.reason}
-                />
-              </div>
-
-              <div className="md:col-span-2">
-                <TextFormField
-                  label="Name of ambulance driver"
-                  name="ambulance_driver_name"
-                  placeholder="Name of ambulance driver"
-                  value={state.form.ambulance_driver_name}
-                  onChange={handleTextFormFieldChange}
-                />
-              </div>
-
-              <div className="md:col-span-1">
-                <PhoneNumberFormField
-                  name="ambulance_phone_number"
-                  label="Ambulance Phone Number"
-                  value={state.form.ambulance_phone_number}
-                  onChange={(event) => {
-                    handleFormFieldChange(event);
-                  }}
-                  error={state.errors.ambulance_phone_number}
-                />
-              </div>
-
-              <div className="md:col-span-1">
-                <TextFormField
-                  label="Ambulance No."
-                  name="ambulance_number"
-                  placeholder="Ambulance No."
-                  value={state.form.ambulance_number}
-                  onChange={handleTextFormFieldChange}
-                  error={state.errors.ambulance_number}
-                />
-              </div>
-              <div className="md:col-span-2">
-                <TextAreaFormField
-                  name="comments"
-                  label="Any other comments"
-                  placeholder="type any extra comments here"
-                  value={state.form.comments}
-                  onChange={handleTextFormFieldChange}
-                  error={state.errors.comments}
-                />
-              </div>
-
-              <div className="md:col-span-2 flex justify-between mt-4">
-                <Cancel onClick={() => goBack()} />
-                <Submit onClick={handleSubmit} />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <Page
+      title={"Create Shift Request"}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      backUrl={`/facility/${facilityId}/patient/${patientId}`}
+    >
+      <Card className="mt-4 flex flex-col w-full max-w-3xl mx-auto px-8 md:px-16 py-5 md:py-11">
+        <TextFormField
+          {...field("refering_facility_contact_name")}
+          label="Contact person at the current facility"
+          required
+        />
+
+        <PhoneNumberFormField
+          {...field("refering_facility_contact_number")}
+          label="Contact person phone"
+          required
+          disableCountry
+        />
+
+        {wartime_shifting && (
+          <div>
+            <FieldLabel required>
+              Name of shifting approving facility
+            </FieldLabel>
+            <FacilitySelect
+              multiple={false}
+              facilityType={1300}
+              name="shifting_approving_facility"
+              selected={state.form.shifting_approving_facility}
+              setSelected={(value) =>
+                handleFormFieldChange({
+                  name: "shifting_approving_facility",
+                  value,
+                })
+              }
+              errors={state.errors.shifting_approving_facility}
+            />
+          </div>
+        )}
+
+        <div>
+          <FieldLabel>{t("what_facility_assign_the_patient_to")}</FieldLabel>
+          <FacilitySelect
+            multiple={false}
+            name="assigned_facility"
+            selected={state.form.assigned_facility}
+            setSelected={(value) =>
+              handleFormFieldChange({ name: "assigned_facility", value })
+            }
+            freeText={true}
+            errors={state.errors.assigned_facility}
+          />
+        </div>
+
+        <CheckBoxFormField
+          className="mt-6"
+          {...field("emergency")}
+          label="This is an emergency"
+        />
+
+        <CheckBoxFormField
+          {...field("is_up_shift")}
+          label="This is an upshift"
+        />
+
+        <PatientCategorySelect
+          required={false}
+          {...field("patient_category")}
+          value={patientCategory}
+          onChange={(e) => setPatientCategory(e.value)}
+          label="Patient Category"
+        />
+
+        {wartime_shifting && (
+          <>
+            <SelectFormField
+              {...field("preferred_vehicle_choice")}
+              required
+              label="Preferred Vehicle"
+              options={SHIFTING_VEHICLE_CHOICES}
+              optionLabel={(option) => option.text}
+              optionValue={(option) => option.text}
+            />
+            <SelectFormField
+              {...field("assigned_facility_type")}
+              required
+              label="Preferred Facility Type"
+              options={FACILITY_TYPES}
+              optionLabel={(option) => option.text}
+              optionValue={(option) => option.text}
+            />
+            <SelectFormField
+              {...field("breathlessness_level")}
+              required
+              label="Severity of Breathlessness"
+              options={BREATHLESSNESS_LEVEL}
+              optionLabel={(option) => option}
+              optionValue={(option) => option}
+            />
+          </>
+        )}
+
+        <TextAreaFormField
+          {...field("reason")}
+          label="Reason for shift"
+          required
+          rows={5}
+          placeholder="Type your reason here"
+        />
+
+        <TextFormField
+          {...field("ambulance_driver_name")}
+          label="Name of ambulance driver"
+        />
+
+        <PhoneNumberFormField
+          {...field("ambulance_phone_number")}
+          label="Ambulance Phone Number"
+        />
+
+        <TextFormField {...field("ambulance_number")} label="Ambulance No." />
+        <TextAreaFormField
+          {...field("comments")}
+          label="Any other comments"
+          placeholder="Type any extra comments here"
+        />
+
+        <div className="mt-4 flex flex-col-reverse md:flex-row gap-2 justify-end">
+          <Cancel onClick={() => goBack()} />
+          <Submit onClick={handleSubmit} />
+        </div>
+      </Card>
+    </Page>
   );
 };