Skip to content

Commit

Permalink
Add location filter for patients
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ashesh3
Ashesh3 committed Oct 16, 2023
1 parent 5e3012a commit 9d9c810
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 61 deletions.
5 changes: 5 additions & 0 deletions src/Components/Common/LocationSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import AutocompleteFormField from "../Form/FormFields/Autocomplete";
import AutocompleteMultiSelectFormField from "../Form/FormFields/AutocompleteMultiselect";
interface LocationSelectProps {
name: string;
disabled?: boolean;
margin?: string;
errors: string;
className?: string;
Expand All @@ -26,6 +27,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
errors,
className = "",
facilityId,
disabled = false,
} = props;
const [locations, setLocations] = useState<{ name: string; id: string }[]>(
[]
Expand All @@ -40,6 +42,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
};

useEffect(() => {
if (!facilityId) return;
const params = {
limit: 14,
search_text: query,
Expand All @@ -56,6 +59,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
return props.multiple ? (
<AutocompleteMultiSelectFormField
name={name}
disabled={disabled}
value={selected as unknown as string[]}
options={locations}
onChange={({ value }) => handleValueChange(value as unknown as string[])}
Expand All @@ -72,6 +76,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
) : (
<AutocompleteFormField
name={name}
disabled={disabled}
value={selected as string}
options={locations}
onChange={({ value }) => handleValueChange([value])}
Expand Down
48 changes: 25 additions & 23 deletions src/Components/Form/AutoCompleteAsync.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,29 +100,31 @@ const AutoCompleteAsync = (props: Props) => {
}}
autoComplete="off"
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
{hasSelection && !loading && !required && (
<div className="tooltip">
<CareIcon
className="care-l-times-circle mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
onClick={(e) => {
e.preventDefault();
onChange(null);
}}
/>
<span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
{t("clear_selection")}
</span>
</div>
)}
{loading ? (
<CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
) : (
<CareIcon className="care-l-angle-down -mb-1.5" />
)}
</div>
</Combobox.Button>
{!disabled && (
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
{hasSelection && !loading && !required && (
<div className="tooltip">
<CareIcon
className="care-l-times-circle mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
onClick={(e) => {
e.preventDefault();
onChange(null);
}}
/>
<span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
{t("clear_selection")}
</span>
</div>
)}
{loading ? (
<CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
) : (
<CareIcon className="care-l-angle-down -mb-1.5" />
)}
</div>
</Combobox.Button>
)}
</div>
<DropdownTransition>
<Combobox.Options className="cui-dropdown-base absolute top-12 z-10 text-sm">
Expand Down
54 changes: 28 additions & 26 deletions src/Components/Form/FormFields/Autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,32 +160,34 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
onBlur={() => value && setQuery("")}
autoComplete="off"
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
<span>{value?.icon}</span>

{value && !props.isLoading && !props.required && (
<div className="tooltip" id="clear-button">
<CareIcon
className="care-l-times-circle h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
onClick={(e) => {
e.preventDefault();
props.onChange(undefined);
}}
/>
<span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
{t("clear_selection")}
</span>
</div>
)}

{props.isLoading ? (
<CareIcon className="care-l-spinner animate-spin" />
) : (
<CareIcon className="care-l-angle-down" />
)}
</div>
</Combobox.Button>
{!props.disabled && (
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
<span>{value?.icon}</span>

{value && !props.isLoading && !props.required && (
<div className="tooltip" id="clear-button">
<CareIcon
className="care-l-times-circle h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
onClick={(e) => {
e.preventDefault();
props.onChange(undefined);
}}
/>
<span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
{t("clear_selection")}
</span>
</div>
)}

{props.isLoading ? (
<CareIcon className="care-l-spinner animate-spin" />
) : (
<CareIcon className="care-l-angle-down" />
)}
</div>
</Combobox.Button>
)}
</div>

<DropdownTransition>
Expand Down
20 changes: 11 additions & 9 deletions src/Components/Form/FormFields/AutocompleteMultiselect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,17 @@ export const AutocompleteMutliSelect = <T, V>(
onChange={(event) => setQuery(event.target.value.toLowerCase())}
autoComplete="off"
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
{props.isLoading ? (
<CareIcon className="care-l-spinner animate-spin" />
) : (
<CareIcon className="care-l-angle-down -mb-1.5" />
)}
</div>
</Combobox.Button>
{!props.disabled && (
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
{props.isLoading ? (
<CareIcon className="care-l-spinner animate-spin" />
) : (
<CareIcon className="care-l-angle-down -mb-1.5" />
)}
</div>
</Combobox.Button>
)}
</div>
{value.length !== 0 && (
<div className="flex flex-wrap gap-2 p-2">
Expand Down
24 changes: 23 additions & 1 deletion src/Components/Patient/ManagePatients.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getAllPatient,
getAnyFacility,
getDistrict,
getFacilityAssetLocation,
getLocalBody,
} from "../../Redux/actions";
import { statusType, useAbortableEffect } from "../../Common/utils";
Expand Down Expand Up @@ -104,6 +105,7 @@ export const PatientManager = () => {
const [districtName, setDistrictName] = useState("");
const [localbodyName, setLocalbodyName] = useState("");
const [facilityBadgeName, setFacilityBadge] = useState("");
const [locationBadgeName, setLocationBadge] = useState("");
const [phone_number, setPhoneNumber] = useState("");
const [phoneNumberError, setPhoneNumberError] = useState("");
const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
Expand Down Expand Up @@ -167,6 +169,7 @@ export const PatientManager = () => {
: undefined,
local_body: qParams.lsgBody || undefined,
facility: qParams.facility,
location: qParams.location || undefined,
facility_type: qParams.facility_type || undefined,
district: qParams.district || undefined,
offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
Expand Down Expand Up @@ -342,6 +345,7 @@ export const PatientManager = () => {
qParams.last_consultation_admitted_bed_type_list,
qParams.last_consultation_discharge_reason,
qParams.facility,
qParams.location,
qParams.facility_type,
qParams.district,
qParams.category,
Expand Down Expand Up @@ -440,12 +444,29 @@ export const PatientManager = () => {
[dispatch, qParams.facility]
);

const fetchLocationBadgeName = useCallback(
async (status: statusType) => {
const res =
qParams.location &&
(await dispatch(
getFacilityAssetLocation(qParams.facility, qParams.location)
));

if (!status.aborted) {
setLocationBadge(res?.data?.name);
}
},
[dispatch, qParams.location]
);

useAbortableEffect(
(status: statusType) => {
fetchFacilityBadgeName(status);
fetchLocationBadgeName(status);
},
[fetchFacilityBadgeName]
[fetchFacilityBadgeName, fetchLocationBadgeName]
);

const LastAdmittedToTypeBadges = () => {
const badge = (key: string, value: any, id: string) => {
return (
Expand Down Expand Up @@ -933,6 +954,7 @@ export const PatientManager = () => {
badge("COWIN ID", "covin_id"),
badge("Is Antenatal", "is_antenatal"),
value("Facility", "facility", facilityBadgeName),
value("Location", "location", locationBadgeName),
badge("Facility Type", "facility_type"),
value("District", "district", districtName),
ordering(),
Expand Down
25 changes: 23 additions & 2 deletions src/Components/Patient/PatientFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
import AccordionV2 from "../Common/components/AccordionV2";
import { dateQueryString } from "../../Utils/utils";
import dayjs from "dayjs";
import { LocationSelect } from "../Common/LocationSelect";

const getDate = (value: any) =>
value && dayjs(value).isValid() && dayjs(value).toDate();
Expand All @@ -45,6 +46,7 @@ export default function PatientFilter(props: any) {
const [filterState, setFilterState] = useMergeState({
district: filter.district || "",
facility: filter.facility || "",
location: filter.location || "",
facility_type: filter.facility_type || "",
lsgBody: filter.lsgBody || "",
facility_ref: null,
Expand Down Expand Up @@ -100,6 +102,7 @@ export default function PatientFilter(props: any) {
const clearFilterState = {
district: "",
facility: "",
location: "",
facility_type: "",
lsgBody: "",
facility_ref: null,
Expand Down Expand Up @@ -213,6 +216,7 @@ export default function PatientFilter(props: any) {
const {
district,
facility,
location,
facility_type,
lsgBody,
date_declared_positive_before,
Expand Down Expand Up @@ -252,6 +256,7 @@ export default function PatientFilter(props: any) {
district: district || "",
lsgBody: lsgBody || "",
facility: facility || "",
location: location || "",
facility_type: facility_type || "",
date_declared_positive_before: dateQueryString(
date_declared_positive_before
Expand Down Expand Up @@ -565,13 +570,29 @@ export default function PatientFilter(props: any) {
<FacilitySelect
multiple={false}
name="facility"
showAll={false}
selected={filterState.facility_ref}
showAll
setSelected={(obj) => setFacility(obj, "facility")}
/>
</div>

<div className="w-full flex-none">
<FieldLabel className="text-sm">Location</FieldLabel>
<LocationSelect
disabled={!filterState.facility}
name="facility"
selected={filterState.location}
multiple={false}
errors=""
facilityId={filterState.facility}
setSelected={(selected) =>
setFilterState({
...filterState,
location: selected,
})
}
/>
</div>
<div className="-mt-6 w-full flex-none">
<FieldLabel className="text-sm">Facility type</FieldLabel>
<SelectMenuV2
placeholder="Show all"
Expand Down

0 comments on commit 9d9c810

Please sign in to comment.