Skip to content

Commit

Permalink
Tailwinds Resources Filter (#5669)
Browse files Browse the repository at this point in the history 
* tailsinwds #4990

* fix padding

* support for proper names in DateRangeFormFields

* update cypress test

---------
  • Loading branch information
@rithviknishad
rithviknishad authored Jun 21, 2023
1 parent 7655954 commit b058e15
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 156 deletions.
46 changes: 12 additions & 34 deletions cypress/e2e/resource_spec/filter.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,19 @@ describe("Resource filter", () => {
"ASC Modified Date",
"DESC Modified Date",
"ASC Created Date",
].forEach((select) => {
cy.get("[name='ordering']").select(select);
].forEach((option) => {
cy.get("div [id='ordering'] > div > button").click();
cy.get("li").contains(option).click();
cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
cy.contains("Apply").click().wait("@resource_filter");
cy.contains("Filters").click();
});
});

it("filter by emergency case", () => {
["yes", "no"].forEach((select) => {
cy.get("[name='emergency']").select(select);
["yes", "no"].forEach((option) => {
cy.get("div [id='emergency'] > div > button").click();
cy.get("li").contains(option).click();
cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
cy.contains("Apply").click().wait("@resource_filter");
cy.contains("Filters").click();
Expand All @@ -63,42 +65,18 @@ describe("Resource filter", () => {

it("filter by created date", () => {
cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
cy.get("[name='created_date_after']").click();
cy.get(
"[role='button'][aria-label='Move backward to switch to the previous month.']"
).click();
cy.get("td[tabindex='-1']")
.first()
.then(($td) => {
$td[0].click();

cy.get("td[tabindex='-1']")
.eq(14)
.then(($td2) => {
$td2[0].click();
});
});
cy.get("input[name='created_date_start']").click();
cy.get("#date-1").click();
cy.get("#date-1").click();
cy.contains("Apply").click();
cy.wait("@resource_filter");
});

it("filter by modified date", () => {
cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
cy.get("[name='modified_date_after']").click();
cy.get(
"[role='button'][aria-label='Move backward to switch to the previous month.']"
).click();
cy.get("td[tabindex='-1']")
.first()
.then(($td) => {
$td[0].click();

cy.get("td[tabindex='-1']")
.eq(14)
.then(($td2) => {
$td2[0].click();
});
});
cy.get("input[name='modified_date_start']").click();
cy.get("#date-1").click();
cy.get("#date-1").click();
cy.contains("Apply").click();
cy.wait("@resource_filter");
});
Expand Down
3 changes: 3 additions & 0 deletions src/Components/Common/DateRangeInputV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export type DateRange = {
};

type Props = {
name?: string;
value?: DateRange;
onChange: (value: DateRange) => void;
className?: string;
Expand All @@ -23,6 +24,7 @@ const DateRangeInputV2 = ({ value, onChange, ...props }: Props) => {
<div className="flex gap-2">
<div className="flex-auto">
<DateInputV2
name={props.name + "_start"}
className={props.className}
value={start}
onChange={(start) => {
Expand All @@ -38,6 +40,7 @@ const DateRangeInputV2 = ({ value, onChange, ...props }: Props) => {
</div>
<div className="flex-auto">
<DateInputV2
name={props.name + "_end"}
className={props.className}
value={end}
onChange={(end) => onChange({ start, end })}
Expand Down
1 change: 1 addition & 0 deletions src/Components/Form/FormFields/DateRangeFormField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const DateRangeFormField = (props: Props) => {
return (
<FormField field={field}>
<DateRangeInputV2
name={field.name}
className={classNames(field.error && "border-red-500")}
value={field.value}
onChange={field.handleChange}
Expand Down
226 changes: 104 additions & 122 deletions src/Components/Resource/ListFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -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: "",
Expand All @@ -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);
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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}
Expand All @@ -175,127 +174,110 @@ 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"
errorClassName="hidden"
/>
)}

<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"
errorClassName="hidden"
/>

<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"
errorClassName="hidden"
/>
<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>
);
Expand Down

0 comments on commit b058e15

Please sign in to comment.