From 288c0bcfd081971737a82998974d37f9fe691929 Mon Sep 17 00:00:00 2001 From: eric Date: Thu, 2 May 2024 19:53:58 +0300 Subject: [PATCH] Fixed the dashboard filters --- .gitignore | 1 + components/Forms/formComponents/Select.js | 2 +- pages/dashboard/index.js | 675 +++++++++------------- 3 files changed, 268 insertions(+), 410 deletions(-) diff --git a/.gitignore b/.gitignore index e316d43f..13180d9e 100644 --- a/.gitignore +++ b/.gitignore @@ -45,6 +45,7 @@ ecosystem.config.js .env.local.dev .vscode .env.remote.dev +todo.md /test-results/ /playwright-report/ /playwright/.cache/ diff --git a/components/Forms/formComponents/Select.js b/components/Forms/formComponents/Select.js index 8e558ae1..5b8b2c31 100644 --- a/components/Forms/formComponents/Select.js +++ b/components/Forms/formComponents/Select.js @@ -9,7 +9,7 @@ const Select = forwardRef(function Select(props, ref) { ref={ref} as="select" {...props} - className='flex-none w-full p-2 border border-gray-400 rounded bg-transparent flex-grow placeholder-gray-200 focus:border-black outline-none'> + className='flex-none max-w-min 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) => diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js index 4c599a75..f2b67c8b 100644 --- a/pages/dashboard/index.js +++ b/pages/dashboard/index.js @@ -4,12 +4,11 @@ import { checkToken } from '../../controllers/auth/auth' import React, { useState, useEffect, useMemo, useRef, useContext } from 'react' import { useRouter } from 'next/router' import Chart from '../../components/Chart' -import Select from 'react-select' +// import Select from 'react-select' +import {Select as CustomSelect} from '../../components/Forms/formComponents/Select' import { UserContext } from '../../providers/user' -import Link from 'next/link' import { useReactToPrint } from 'react-to-print' import 'react-datepicker/dist/react-datepicker.css'; -import { DownloadIcon } from '@heroicons/react/outline'; import propTypes from 'prop-types' @@ -80,9 +79,17 @@ function Dashboard(props) { const [user, setUser] = useState(userCtx) const [subcounties, setSubcounties] = useState([]) const [counties, setCounties] = useState([]) - const [wards, setWards] = useState([]) + const [wards, s] = useState([]) const [isClient, setIsClient] = useState(false); + const [yearFilter, setYearFilter] = useState("Filter by year") + const [countyFilter, setCountyFilter] = useState("Filter by County") + const [subCountyFilter, setSubCountyFilter] = useState("Filter Sub County") + const [wardFilter, setWardFilter ] = useState("Filter by ward") + + + + const dwn = useRef() @@ -110,7 +117,7 @@ function Dashboard(props) { try { const r = await fetch(`/api/common/fetch_form_data/?path=wards&id=${sub_county}`) - setWards({ wards: (await r.json())?.results }) + s({ wards: (await r.json())?.results }) } catch (err) { console.log(`Unable to fetch wards: ${err.message}`) } @@ -256,16 +263,186 @@ function Dashboard(props) { const userSubCounty = user?.user_sub_counties[0]?.sub_county_name + function countyOptions(filters, ft) { + if (groupID === 5 || groupID === 7) { + let opts = [{ value: "national", label: "National summary" }, ...Array.from(filters[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } else { + let opts = [...Array.from(filters[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } + } + + function subCountyOptions(filters, ft) { + if (groupID === 1) { + let opts = [{ value: "county", label: "County summary" }, ...Array.from(subcounties[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } else { + let opts = [...Array.from(subcounties[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } + } + + function wardOptions(filters, ft) { + + if (groupID === 2) { + let opts = [{ value: "Subcounty", label: "Subcounty summary" }, ...Array.from(wards[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } else { + let opts = [...Array.from(wards[ft] || [], + fltopt => { + if (fltopt.id != null && fltopt.id.length > 0) { + return { + value: fltopt.id, label: fltopt.name + } + } + })] + return opts + } + + } + + + + + + function handleYearChange(event) { + + event.preventDefault() + + if(countyFilter !== null) setCountyFilter(null) + if(subCountyFilter !== null) setSubCountyFilter(null) + if(wardFilter !== null) setWardFilter(null) + + const year = event.target.value + + if (year == "custom") { + setIsquarterOpen(false) + setIsOpen(true) + return; + } else { + router.push({ + pathname: 'dashboard', + query:{ + year: year + } + }) + } + + } + + function handleCountyOrgUnitChange(event) { + + event.preventDefault() + + if(yearFilter !== null) setYearFilter(null) + if(subCountyFilter !== null) setSubCountyFilter(null) + if(wardFilter !== null) setWardFilter(null) + + const orgUnit = event.target.value + + + if (orgUnit) { + router.push({ + pathname: 'dashboard', + query:{ + county: orgUnit + } + }) + + } + } + + function handleSubCountyOrgUnitChange(event) { + + event.preventDefault() + + if(yearFilter !== null) setYearFilter(null) + if(subCountyFilter !== null) setCountyFilter(null) + if(wardFilter !== null) setWardFilter(null) + + const orgUnit = event.target.value + + + if (orgUnit) { + router.push({ + pathname: 'dashboard', + query:{ + sub_county: orgUnit + } + }) + + } + } + + function handleWardOrgUnitChange(event) { + + event.preventDefault() + + if(yearFilter !== null) setYearFilter(null) + if(subCountyFilter !== null) setSubCountyFilter(null) + if(CountyFilter !== null) setCountyFilter(null) + + const orgUnit = event.target.value + + + if (orgUnit.value) { + router.push({ + pathname: 'dashboard', + query:{ + ward: orgUnit + } + }) + + } + } + if (isClient) { - return ( - 
-                {
-                    JSON.stringify(props, null, 2)
-                }
-
- ) + // return ( + // 
+        //         {
+        //             JSON.stringify(props, null, 2)
+        //         }
+        //
+ // ) + return (
@@ -284,137 +461,91 @@ function Dashboard(props) { {/* Dashboard */}
+ +
+ + + + + + +
+

- - {/* Overview */} -
- {/* {drillDown && drillDown?.county && groupID !== 1 && */} - {/* */} - {/* {filters && filters?.county && filters?.county.find(ft => ft.id == drillDown?.county)?.name ? filters?.county.find(ft => ft.id == drillDown?.county)?.name + " County" : "National Summary" || ""} */} - {/* */} - {/* } */} - {/* {user && userCounty && */} - {/* */} - - {/* {userCounty ?? user?.county_name} County */} - - {/* */} - {/* } */} - {/* {user && userSubCounty ? - <> - / - - - - {`${userSubCounty ?? user?.sub_county_name} Sub county`} - - - - : - <> - {groupID !== 7 || groupID !== 5 && / } - - {subcounties && subcounties?.subcounties && subcounties?.subcounties.find(ft => ft.id == drillDown?.subcounties)?.name != undefined ? subcounties.subcounties.find(ft => ft.id == drillDown?.subcounties)?.name + " Sub county" : !drillDown?.county && "" || ""} - - - - } */} - {/* {drillDown && drillDown?.wards && - <> - / - - - {wards && wards?.wards && wards?.wards.find(ft => ft.id == drillDown?.wards)?.name != undefined ? wards?.wards.find(ft => ft.id == drillDown?.wards)?.name + " Ward" : "Subcounty Summary" || ""} - - - } */} -
+ { + !(new URL(window.location.href))?.searchParams.toString().includes('year') ? + props?.filters?.county?.find(({id}) => id == Object.entries(props?.query)[1][1])?.name + : + 'National' + }

-
- {/* show datetime filters */} {/* --- */} {user && -
-
- {/* */} - ({ - ...baseStyles, - backgroundColor: 'transparent', - outLine: 'none', - border: 'none', - outLine: 'none', - textColor: 'transparent', - padding: 0, - height: '4px' - }), - - }} - options={ - (() => { - if (groupID === 5 || groupID === 7) { - let opts = [{ value: "national", label: "National summary" }, ...Array.from(filters[ft] || [], - fltopt => { - if (fltopt.id != null && fltopt.id.length > 0) { - return { - value: fltopt.id, label: fltopt.name - } - } - })] - return opts - } else { - let opts = [...Array.from(filters[ft] || [], - fltopt => { - if (fltopt.id != null && fltopt.id.length > 0) { - return { - value: fltopt.id, label: fltopt.name - } - } - })] - return opts - } - })() - } - placeholder={ft.split('_').join(' ')[0].toUpperCase() + ft.split('_').join(' ').slice(1)} - onChange={sl => { - let nf = {} - if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) { - nf[ft] = sl.value - } else { - delete nf[ft] - // let rr = drillDown.filter(d => d.key !== ft) - // setDrilldown(rr) - } - - setDrillDown({ ...drillDown, ...nf }) - //alert(JSON.stringify(drillDown)) - let value = sl.value - let parameters = "" - let ar = [] - if (value) { - if (value !== 'national') { - ar.push('county=' + value) - } - } - if (props?.query.datefrom) { - ar.push("datefrom=" + props.query['datefrom']) - } - if (props?.query.dateto) { - ar.push("dateto=" + props.query['dateto']) - } - ar?.map(k => { - if (parameters.includes('?')) { - parameters += "&" + k - } else { - parameters += "?" + k - } - }) - router.push('/dashboard' + parameters) - }} /> - -
- ))} - {/* ~~~F L T R S~~~ */} -
} - {/* county user */} - {groupID === 1 &&
- {subcounties && Object.keys(subcounties).length > 0 && - Object.keys(subcounties)?.map(ft => ( -
- {/* */} - ({ - ...baseStyles, - backgroundColor: 'transparent', - outLine: 'none', - border: 'none', - outLine: 'none', - textColor: 'transparent', - padding: 0, - height: '4px' - }), - - }} - options={ - (() => { - if (groupID === 2) { - let opts = [{ value: "Subcounty", label: "Subcounty summary" }, ...Array.from(wards[ft] || [], - fltopt => { - if (fltopt.id != null && fltopt.id.length > 0) { - return { - value: fltopt.id, label: fltopt.name - } - } - })] - return opts - } else { - let opts = [...Array.from(wards[ft] || [], - fltopt => { - if (fltopt.id != null && fltopt.id.length > 0) { - return { - value: fltopt.id, label: fltopt.name - } - } - })] - return opts - } - })() - } - placeholder={ft.split('_').join(' ')[0].toUpperCase() + ft.split('_').join(' ').slice(1)} - // onChange={async (option) => { - - // try { - // const resp = await fetch(`/api/facility/get_facility/?path=dashboard&id=${option.value}`) - - // // console.log({resp: (await resp.json())}) - // console.log({ resp: (await JSON.stringify(resp)) }) - // } catch (e) { - // console.error(e.message) - // } - // }} - onChange={sl => { - let nf = {} - if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) { - nf[ft] = sl.value - } else { - delete nf[ft] - // let rr = drillDown.filter(d => d.key !== ft) - // setDrilldown(rr) - } - // fetchWards(sl.value) - setDrillDown({ ...drillDown, ...nf }) - - let parameters = "" - let ar = [] - if (sl.value) { - if (sl.value !== 'Subcounty') { - ar.push('ward=' + sl.value) - } else { - ar.push('sub_county=' + user.user_sub_counties[0].sub_county) - } - } - if (props?.query.datefrom) { - ar.push("datefrom=" + props.query['datefrom']) - } - if (props?.query.dateto) { - ar.push("dateto=" + props.query['dateto']) - } - ar?.map(k => { - if (parameters.includes('?')) { - parameters += "&" + k - } else { - parameters += "?" + k - } - }) - - router.push('/dashboard' + parameters) - }} /> - -
- ))} -
- } + +