tailsinwds #4990

ohcnetwork · Jun 14, 2023 · d65513b · d65513b
1 parent 5ee4f15
commit d65513b
Showing 1 changed file with 101 additions and 122 deletions.
diff --git a/src/Components/Resource/ListFilter.tsx b/src/Components/Resource/ListFilter.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { FacilitySelect } from "../Common/FacilitySelect";
-import { LegacySelectField } from "../Common/HelperInputFields";
 import { RESOURCE_FILTER_ORDER } from "../../Common/constants";
 import moment from "moment";
 import { getAnyFacility } from "../../Redux/actions";
 import { useDispatch } from "react-redux";
-import { CircularProgress } from "@material-ui/core";
 import { RESOURCE_CHOICES } from "../../Common/constants";
-import { DateRangePicker, getDate } from "../Common/DateRangePicker";
 import useMergeState from "../../Common/hooks/useMergeState";
 import { navigate } from "raviger";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import { FieldLabel } from "../Form/FormFields/FormField";
-const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
+import CircularProgress from "../Common/components/CircularProgress";
+import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import { DateRange } from "../Common/DateRangeInputV2";
+import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
 
 const clearFilterState = {
   orgin_facility: "",
@@ -30,6 +31,9 @@ const clearFilterState = {
   status: "",
 };
 
+const getDate = (value: any) =>
+  value && moment(value).isValid() && moment(value).toDate();
+
 export default function ListFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
   const [isOriginLoading, setOriginLoading] = useState(false);
@@ -108,9 +112,8 @@ export default function ListFilter(props: any) {
     });
   };
 
-  const handleChange = (event: any) => {
-    const { name, value } = event.target;
-    setFilterState({ ...filterState, [name]: value });
+  const handleChange = (e: FieldChangeEvent<unknown>) => {
+    setFilterState({ ...filterState, [e.name]: e.value });
   };
 
   const applyFilter = () => {
@@ -153,17 +156,13 @@ export default function ListFilter(props: any) {
     onChange(data);
   };
 
-  const handleDateRangeChange = (
-    startDateId: string,
-    endDateId: string,
-    { startDate, endDate }: any
-  ) => {
-    const filterData: any = { ...filterState };
-    filterData[startDateId] = startDate?.toString();
-    filterData[endDateId] = endDate?.toString();
-
+  const handleDateRangeChange = (event: FieldChangeEvent<DateRange>) => {
+    const filterData = { ...filterState };
+    filterData[`${event.name}_after`] = event.value.start?.toString();
+    filterData[`${event.name}_before`] = event.value.end?.toString();
     setFilterState(filterData);
   };
+
   return (
     <FiltersSlideover
       advancedFilter={props}
@@ -175,127 +174,107 @@ export default function ListFilter(props: any) {
       }}
     >
       {props.showResourceStatus && (
-        <div>
-          <FieldLabel>Status</FieldLabel>
-          <LegacySelectField
-            name="status"
-            variant="outlined"
-            margin="dense"
-            optionArray={true}
-            value={filterState.status}
-            options={["--", ...resourceStatusOptions]}
-            onChange={handleChange}
-            className="bg-white h-10 shadow-sm md:text-sm md:leading-5 md:h-9"
-          />
-        </div>
+        <SelectFormField
+          name="status"
+          label="Status"
+          value={filterState.status}
+          options={RESOURCE_CHOICES}
+          optionLabel={(option) => option.text}
+          optionValue={(option) => option.text}
+          onChange={handleChange}
+          placeholder="Show all"
+        />
       )}
+
       <div>
         <FieldLabel>Origin facility</FieldLabel>
-        <div>
-          {isOriginLoading ? (
-            <CircularProgress size={20} />
-          ) : (
-            <FacilitySelect
-              multiple={false}
-              name="orgin_facility"
-              selected={filterState.orgin_facility_ref}
-              setSelected={(obj) => setFacility(obj, "orgin_facility")}
-              className="resource-page-filter-dropdown"
-              errors={""}
-            />
-          )}
-        </div>
+        {isOriginLoading ? (
+          <CircularProgress />
+        ) : (
+          <FacilitySelect
+            multiple={false}
+            name="orgin_facility"
+            selected={filterState.orgin_facility_ref}
+            setSelected={(obj) => setFacility(obj, "orgin_facility")}
+            className="resource-page-filter-dropdown"
+            errors={""}
+          />
+        )}
       </div>
 
       <div>
         <FieldLabel>Resource approving facility</FieldLabel>
-        <div className="">
-          {isResourceLoading ? (
-            <CircularProgress size={20} />
-          ) : (
-            <FacilitySelect
-              multiple={false}
-              name="approving_facility"
-              selected={filterState.approving_facility_ref}
-              setSelected={(obj) => setFacility(obj, "approving_facility")}
-              className="resource-page-filter-dropdown"
-              errors={""}
-            />
-          )}
-        </div>
+        {isResourceLoading ? (
+          <CircularProgress />
+        ) : (
+          <FacilitySelect
+            multiple={false}
+            name="approving_facility"
+            selected={filterState.approving_facility_ref}
+            setSelected={(obj) => setFacility(obj, "approving_facility")}
+            className="resource-page-filter-dropdown"
+            errors={""}
+          />
+        )}
       </div>
 
       <div>
         <FieldLabel>Assigned facility</FieldLabel>
-        <div>
-          {isAssignedLoading ? (
-            <CircularProgress size={20} />
-          ) : (
-            <FacilitySelect
-              multiple={false}
-              name="assigned_facility"
-              selected={filterState.assigned_facility_ref}
-              setSelected={(obj) => setFacility(obj, "assigned_facility")}
-              className="resource-page-filter-dropdown"
-              errors={""}
-            />
-          )}
-        </div>
-      </div>
-      <div>
-        <FieldLabel>Ordering</FieldLabel>
-        <LegacySelectField
-          name="ordering"
-          variant="outlined"
-          margin="dense"
-          optionKey="text"
-          optionValue="desc"
-          value={filterState.ordering}
-          options={RESOURCE_FILTER_ORDER}
-          onChange={handleChange}
-          className="bg-white h-10 shadow-sm md:text-sm md:leading-5 md:h-9"
-        />
+        {isAssignedLoading ? (
+          <CircularProgress />
+        ) : (
+          <FacilitySelect
+            multiple={false}
+            name="assigned_facility"
+            selected={filterState.assigned_facility_ref}
+            setSelected={(obj) => setFacility(obj, "assigned_facility")}
+            className="resource-page-filter-dropdown"
+            errors={""}
+          />
+        )}
       </div>
 
-      <div>
-        <FieldLabel>Is emergency case</FieldLabel>
-        <LegacySelectField
-          name="emergency"
-          variant="outlined"
-          margin="dense"
-          optionArray={true}
-          value={filterState.emergency}
-          options={["--", "yes", "no"]}
-          onChange={handleChange}
-          className="bg-white h-10 shadow-sm md:text-sm md:leading-5 md:h-9"
-        />
-      </div>
+      <SelectFormField
+        name="ordering"
+        label="Ordering"
+        value={filterState.ordering}
+        options={RESOURCE_FILTER_ORDER}
+        optionLabel={(option) => option.desc}
+        optionValue={(option) => option.text}
+        onChange={handleChange}
+        placeholder="None"
+      />
 
-      <DateRangePicker
-        startDate={getDate(filterState.created_date_after)}
-        endDate={getDate(filterState.created_date_before)}
-        onChange={(e) =>
-          handleDateRangeChange("created_date_after", "created_date_before", e)
-        }
-        endDateId={"created_date_before"}
-        startDateId={"created_date_after"}
-        label={"Created Date"}
-        size="small"
+      <SelectFormField
+        name="emergency"
+        label="Is emergency case"
+        value={filterState.emergency}
+        options={["yes", "no"]}
+        optionLabel={(option) => option}
+        optionValue={(option) => option}
+        onChange={handleChange}
+        placeholder="Show all"
       />
-      <DateRangePicker
-        startDate={getDate(filterState.modified_date_after)}
-        endDate={getDate(filterState.modified_date_before)}
-        onChange={(e) =>
-          handleDateRangeChange(
-            "modified_date_after",
-            "modified_date_before",
-            e
-          )
-        }
-        endDateId={"modified_date_before"}
-        startDateId={"modified_date_after"}
-        label={"Modified Date"}
-        size="small"
+
+      <DateRangeFormField
+        name="created_date"
+        label="Created between"
+        value={{
+          start: getDate(filterState.created_date_after),
+          end: getDate(filterState.created_date_before),
+        }}
+        onChange={handleDateRangeChange}
+        errorClassName="hidden"
+      />
+      <DateRangeFormField
+        name="modified_date"
+        label="Modified between"
+        value={{
+          start: getDate(filterState.modified_date_after),
+          end: getDate(filterState.modified_date_before),
+        }}
+        onChange={handleDateRangeChange}
+        errorClassName="hidden"
       />
     </FiltersSlideover>
   );