From 6ea28e220e029cfe45e60eeb4d567f2ba5ebfb9c Mon Sep 17 00:00:00 2001 From: eric Date: Fri, 18 Oct 2024 15:30:55 +0300 Subject: [PATCH] Added handleOrgunitFilter function --- components/Forms/formComponents/Select.js | 4 +- pages/facilities/index.js | 159 ++++++++++------------ 2 files changed, 77 insertions(+), 86 deletions(-) diff --git a/components/Forms/formComponents/Select.js b/components/Forms/formComponents/Select.js index ac6daf2d..170a2ef4 100644 --- a/components/Forms/formComponents/Select.js +++ b/components/Forms/formComponents/Select.js @@ -1,6 +1,6 @@ import { forwardRef } from 'react' - +import {v4 as uuid} from 'uuid' const Select = forwardRef(function Select(props, ref) { @@ -12,7 +12,7 @@ const Select = forwardRef(function Select(props, ref) { className='flex-none w-full p-2 border border-gray-800 rounded bg-transparent flex-grow placeholder-gray-200 focus:border-black outline-none'> { ((_options) => _options.map(({ value, label }, i) => - + ))(props.options?.length ? [{label:props.placeholder ?? "Select option..", value:""}, ...props.options] : []) } diff --git a/pages/facilities/index.js b/pages/facilities/index.js index e7d3461e..f0b5089c 100644 --- a/pages/facilities/index.js +++ b/pages/facilities/index.js @@ -105,9 +105,9 @@ function FacilityHome(props) { // FilterOptions const countyFilterOptions = filters?.county?.map(({ id, name }) => ({ value: id, label: name })) - const subCountyFilterOptions = filters?.sub_county?.map(({ id, name }) => ({ value: id, label: name })) - const constituencyFilterOptions = filters?.constituency?.map(({ id, name }) => ({ value: id, label: name })) - const wardFilterOptions = filters?.ward?.map(({ id, name }) => ({ value: id, label: name })) + const [subCountyFilterOptions, setSubCountyFilterOptions] = useState(() => filters?.sub_county?.map(({ id, name }) => ({ value: id, label: name }))) + const [wardFilterOptions, setWardFilterOptions] = useState(() => filters?.ward?.map(({ id, name }) => ({ value: id, label: name }))) + const [constituencyFilterOptions, setConstituencyFilterOptions] = useState(() => filters?.constituency?.map(({ id, name }) => ({ value: id, label: name }))) const facilityTypeFilterOptions = filters?.facility_type?.map(({ id, name }) => ({ value: id, label: name })) const facilityTypeDetailsFilterOptions = filters?.facility_type_details?.map(({ id, name }) => ({ value: id, label: name })) const kephLevelFilterOptions = filters?.keph_level?.map(({ id, name }) => ({ value: id, label: name })) @@ -119,12 +119,6 @@ function FacilityHome(props) { - - - - - - const handleApprovalStatus = useCallback(({ value }) => { if (!!value) { @@ -173,6 +167,64 @@ function FacilityHome(props) { } + async function handleOrgUnitFilter(event) { + event.preventDefault() + + const url = (() => { + if(event.target?.name === 'county') { + return `${process.env.NEXT_PUBLIC_API_URL}/common/sub_counties/?county=${event.currentTarget?.value}` + + } + + if(event.target?.name === 'sub_county') { + return `${process.env.NEXT_PUBLIC_API_URL}/common/wards/?sub_county=${event.currentTarget?.value}` + } + + if(event.target?.name === 'constituency') { + return `${process.env.NEXT_PUBLIC_API_URL}/common/wards/?constituency=${event.currentTarget?.value}` + } + + + })() + + try { + + const filteredOrgUnits = await fetch(url, { + headers: { + Accept: 'application/json', + Authorization: `Bearer ${props?.token}`, + } + }) + + if(event.target?.name === 'county') { + const subCounties = (await filteredOrgUnits?.json())?.results + + setSubCountyFilterOptions(() => subCounties?.map(({id, name}) => ({value: id, label: name}))) + event.target.value = event.target?.value + + console.log({countyFilterOptions}) + } + + if(event.target?.name === 'sub_county') { + const wards = (await filteredOrgUnits?.json())?.results + setWardFilterOptions(wards?.map(({id, name}) => ({value: id, label: name}))) + } + if(event.target?.name === 'constituency') { + const wards = (await filteredOrgUnits?.json())?.results + setWardFilterOptions(wards?.map(({id, name}) => ({value: id, label: name}))) + + } + + // return (await filteredOrgUnits?.json())?.results + } + catch (e) { + if(e instanceof Error) { + console.error(`Error occurred. \nOrgUnit: ${e.message}\n`) + } + } + } + + function handleAccordionExpand(ev) { if (isAccordionExpanded) { setIsAccordionExpanded(false) @@ -340,11 +392,6 @@ function FacilityHome(props) { - {/* 
-                                    {
-                                        JSON.stringify(orgUnitFilter, null, 2)
-                                    }
-
*/} @@ -428,7 +475,8 @@ function FacilityHome(props) { placeholder="Select County" name="county" onChange={ - (e) => null + e => null + // handleOrgUnitFilter } /> @@ -442,9 +490,10 @@ function FacilityHome(props) { null + e => null + // handleOrgUnitFilter } /> @@ -568,63 +617,7 @@ function FacilityHome(props) { /> - {/* Service */} - {/*
- - - - -
*/} - - - - - {/* { - filters && Object.keys(filters).length > 0 && - Object.keys(fltrs).map((ft) => ( - - -
- - - - { - return { - value: fltopt.id, label: fltopt.name - } - })} - - placeholder={`Select ${ft.split('_').join(' ')[0].toUpperCase() + ft.split('_').join(' ').slice(1)}`} - name={ft} // facility_type - // onChange={sl => { - // let nf = {} - // if (Array.isArray(sl)) { - // nf[ft] = (drillDown[ft] ? drillDown[ft] + ',' : '') + Array.from(sl, l_ => l_.value).join(',') - // } else if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) { - // nf[ft] = sl.value - // } else { - // delete nf[ft] - - // } - // setDrillDown({ ...drillDown, ...nf }) - // }} - - /> -
- )) - } */} - - {/* From and To Date Picker Components */} - - + {/* Yes/No Dialog */}
@@ -920,12 +913,6 @@ function FacilityHome(props) {
- {/* 
-                                                {
-                                                    JSON.stringify(props?.facilities, null, 2)
-                                                }
-
*/} - {/* Quick Filters status display */} { @@ -1010,7 +997,7 @@ function FacilityHome(props) { { facility?.approved_national_level ? "Approved" : "Not Approved"} : - facility?.rejected && Rejected Validate + facility?.rejected && Rejected Validate } { @@ -1298,7 +1285,11 @@ export async function getServerSideProps(ctx) { let result = {} const fetchResource = async (endpoint, resource = null) => { - if(resource === "facility_type" || resource === "facility_type_details") { + if( + resource === "facility_type" || + resource === "facility_type_details" || + resource === "keph_level" + ) { try { const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${endpoint}`, { headers: { @@ -1343,11 +1334,11 @@ export async function getServerSideProps(ctx) { result['facility_type'] = await fetchResource('/facilities/facility_types/?is_parent=true&fields=id,name', 'facility_type') result['facility_type_details'] = await fetchResource('/facilities/facility_types/?is_parent=false&fields=id,name', 'facility_type_details') - result = {...result, ...(await fetchResource('/common/filtering_summaries/?fields=county,sub_county,constituency,ward,keph_level,owner,owner_type,operation_status'))} + result['keph_level'] = await fetchResource('/facilities/keph/?is_active=true&fields=id,name', 'keph_level') + result = {...result, ...(await fetchResource('/common/filtering_summaries/?fields=county,sub_county,constituency,ward,owner,owner_type,operation_status'))} return result - }