From 8687bb2072a18d4ae3641cff45783ee1ac7c5ebb Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 28 Feb 2024 16:00:47 +0300 Subject: [PATCH] Updated /community-units UI for small screen view port --- components/CommunityUnitSideMenu.js | 2 +- components/FacilityDetailsTabs.js | 4 +- pages/community-units/index.js | 610 +++++++++++++++------------- pages/facilities/[id].js | 80 ++-- pages/index.js | 6 +- 5 files changed, 379 insertions(+), 323 deletions(-) diff --git a/components/CommunityUnitSideMenu.js b/components/CommunityUnitSideMenu.js index 3e50cbdd..b088c50f 100644 --- a/components/CommunityUnitSideMenu.js +++ b/components/CommunityUnitSideMenu.js @@ -118,7 +118,7 @@ export default function CommunityUnitSideMenu({ _pathId, filters, qf }) { }, []) return ( -
+
+
diff --git a/pages/community-units/index.js b/pages/community-units/index.js index 49d18c1b..7b4bccd1 100644 --- a/pages/community-units/index.js +++ b/pages/community-units/index.js @@ -3,8 +3,8 @@ import Link from 'next/link'; import MainLayout from '../../components/MainLayout'; import { DotsHorizontalIcon, - DownloadIcon, - PlusIcon + DownloadIcon, + PlusIcon } from '@heroicons/react/solid'; import { checkToken } from '../../controllers/auth/auth'; import React, { useState, useEffect } from 'react'; @@ -13,12 +13,14 @@ import { Menu } from '@headlessui/react'; import { ChevronDownIcon } from '@heroicons/react/outline'; import CommunityUnitSideMenu from '../../components/CommunityUnitSideMenu'; import { UserContext } from '../../providers/user'; -import {Formik, Form, Field} from 'formik'; +import { Formik, Form, Field } from 'formik'; import { SearchIcon } from '@heroicons/react/outline' +import { KeyboardArrowDown } from '@mui/icons-material'; +import { KeyboardArrowRight } from '@mui/icons-material'; -function CommunityUnit (props) { +function CommunityUnit(props) { const userCtx = React.useContext(UserContext); const [user, setUser] = useState(userCtx); @@ -28,12 +30,13 @@ function CommunityUnit (props) { const [drillDown, setDrillDown] = useState({}); const qf = props?.query?.qf || 'all'; - const [title, setTitle] = useState('Community Health Units') - const[isClient, setIsClient] = useState(false); + const [title, setTitle] = useState('Community Health Units') + const [isClient, setIsClient] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); + - useEffect(() => { - + let qry = props?.query; delete qry.searchTerm; delete qry.qf @@ -47,31 +50,31 @@ function CommunityUnit (props) { // Check user for authentication useEffect(() => { - + setUser(userCtx) - if(user.id === 6){ + if (user.id === 6) { router.push('/auth/login') } setIsClient(true); - - },[]) - - if(isClient){ - return ( -
- - KMHFR - Community Units - - - - -
-
-
- {/* Bread Crumbs */} - - {/*
+ + }, []) + + if (isClient) { + return ( +
+ + KMHFR - Community Units + + + + +
+
+
+ {/* Bread Crumbs */} + + {/*
Home @@ -80,249 +83,274 @@ function CommunityUnit (props) {
*/} -
-

- {'Community Health Units'} -

- - {props?.current_url && props?.current_url.length > 5 && ( - -
- - - - - - - Export - - -
- - - - {({ active }) => ( - - )} - - - {({ active }) => ( - - )} - - - - )} - - -
+
+

+ {'Community Health Units'} +

+ + {props?.current_url && props?.current_url.length > 5 && ( + +
+ + + + + + + Export + + +
+ + + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + + + + )} -
- - -
-
- -
- {drillDown && - Object.keys(drillDown).length > 0 && - `Matching ${Object.keys(drillDown) - .map( - (k) => - `${k[0].toLocaleUpperCase()}${k - .split('_') - .join(' ') - .slice(1) - .toLocaleLowerCase()}: (${ - filters[k] + +
+ + +
+ + +
+
+ +
+ {drillDown && + Object.keys(drillDown).length > 0 && + `Matching ${Object.keys(drillDown) + .map( + (k) => + `${k[0].toLocaleUpperCase()}${k + .split('_') + .join(' ') + .slice(1) + .toLocaleLowerCase()}: (${filters[k] ? Array.from( - drillDown[k].split(','), - (j) => - filters[k] - .find((w) => w.id == j) - ?.name.split('_') - .join(' ') || j.split('_').join(' ') - ).join(', ') + drillDown[k].split(','), + (j) => + filters[k] + .find((w) => w.id == j) + ?.name.split('_') + .join(' ') || j.split('_').join(' ') + ).join(', ') : 'v' + k.split('_').join(' ') - })` - ) - ?.join(' & ')}`} -
- -
- + })` + ) + ?.join(' & ')}`} + + +
+
- + +
+
- -
-
+
{/* Side Menu Filters*/} - + + +
+ +
+ + {/* Main body */} - +
- {/* Data Indicator section */} - {/* Data Indicator section */} -
- {/* search input */} - - + {/* search input */} + + { - - const query = values.q.split(' ').join('+'); - - - // console.log({values}) - switch((new URL(window.location.href))?.searchParams.get('qf')){ - case "all": - router.push(`/community-units/?q=${query}&qf=all`) - break; - case "approved": - router.push(`/community-units/?q=${query}&qf=approved&is_approved=true`) - break; - case "new_pending_approval": - router.push(`/community-units/?q=${query}&qf=new_pending_approval&has_edits=false&pending_approval=true`) - break; - case "updated_pending_approval": - router.push(`/community-units/?q=${query}&qf=updated_pending_approval&has_edits=true&is_approved=true`) - break; - default: - router.push(`/community-units/?q=${query}&qf=is_rejected&is_rejected=true`) - break; - - - } - - }} - > + onSubmit={(values) => { + + const query = values.q.split(' ').join('+'); + + + // console.log({values}) + switch ((new URL(window.location.href))?.searchParams.get('qf')) { + case "all": + router.push(`/community-units/?q=${query}&qf=all`) + break; + case "approved": + router.push(`/community-units/?q=${query}&qf=approved&is_approved=true`) + break; + case "new_pending_approval": + router.push(`/community-units/?q=${query}&qf=new_pending_approval&has_edits=false&pending_approval=true`) + break; + case "updated_pending_approval": + router.push(`/community-units/?q=${query}&qf=updated_pending_approval&has_edits=true&is_approved=true`) + break; + default: + router.push(`/community-units/?q=${query}&qf=is_rejected&is_rejected=true`) + break; -
- - - - + + + +
-
- {props?.data?.count && props?.data?.count > 0 && {props?.data?.start_index ?? ''} - {props?.data?.end_index ?? ''} of {props?.data?.count ?? ''} } -
-
- +
+ {props?.data?.count && props?.data?.count > 0 && {props?.data?.start_index ?? ''} - {props?.data?.end_index ?? ''} of {props?.data?.count ?? ''} } +
+
+
- +
- + {cus && cus.length > 0 ? ( - cus.map((comm_unit, index) => ( -
-
-

- - - {comm_unit.official_name || - comm_unit.official_name || - comm_unit.name} - -

- -
+ cus.map((comm_unit, index) => ( +
+
+

+ + + {comm_unit.official_name || + comm_unit.official_name || + comm_unit.name} + +

+ +
# {comm_unit.code ? comm_unit.code : 'NO_CODE' || ' '}
- +
{comm_unit.facility_name ?? ' '}
-
+
-
+
{comm_unit.facility_county || comm_unit.county || 'N/A'} - +
@@ -340,19 +368,19 @@ function CommunityUnit (props) { comm_unit.facility_constituency || 'N/A'}
+
-
{comm_unit.status_name && {comm_unit.status_name}} {comm_unit.has_edits && Has edits} {/* {!comm_unit.rejected ? {comm_unit.approved ? "Approved" : "Not approved"} : {comm_unit.rejected ? "Rejected" : ""}} */}
- +
- - - )) + + + )) ) : (
@@ -368,21 +396,21 @@ function CommunityUnit (props) { {cus && cus.length >= 30 && ( )}
-
- - - - - -
- ); +
+ + + + + +
+ ); } - else{ + else { return null } }; CommunityUnit.getInitialProps = async (ctx) => { - + ctx?.res?.setHeader( - 'Cache-Control', - 'public, s-maxage=10, stale-while-revalidate=59' - ) + 'Cache-Control', + 'public, s-maxage=10, stale-while-revalidate=59' + ) const API_URL = process.env.NEXT_PUBLIC_API_URL; - async function fetchFilters(token){ + async function fetchFilters(token) { let filters_url = API_URL + '/common/filtering_summaries/?fields=county,constituency,ward,chu_status,sub_county'; @@ -477,16 +505,16 @@ CommunityUnit.getInitialProps = async (ctx) => { let filterQuery = JSON.parse(JSON.stringify(ctx.query)); let qry = '' let url - if(ctx.query !== null){ + if (ctx.query !== null) { qry = Object.keys(filterQuery).map(function (key) { let er = (key) + '=' + (filterQuery[key]); return er - }).join('&') + }).join('&') - console.log(qry); - url =API_URL + `/chul/units/?${qry}&fields=id,code,name,status_name,date_established,facility,facility_name,facility_county,facility_subcounty,facility_ward,facility_constituency`; - }else{ - url =API_URL + `/chul/units/?fields=id,code,name,status_name,date_established,facility,facility_name,facility_county,facility_subcounty,facility_ward,facility_constituency`; + console.log(qry); + url = API_URL + `/chul/units/?${qry}&fields=id,code,name,status_name,date_established,facility,facility_name,facility_county,facility_subcounty,facility_ward,facility_constituency`; + } else { + url = API_URL + `/chul/units/?fields=id,code,name,status_name,date_established,facility,facility_name,facility_county,facility_subcounty,facility_ward,facility_constituency`; } let query = { searchTerm: '' }; if (ctx?.query?.q) { @@ -506,15 +534,17 @@ CommunityUnit.getInitialProps = async (ctx) => { url = url + '&' + flt.replace('chu_', '') + '=' + ctx?.query[flt]; } }); - + // Fetch All facility Count - const getCHUCount = async () => { - return (await (await fetch(`${API_URL}/units/chul?format=json`, {headers: { - 'Authorization': 'Bearer ' + token, - 'Accept': 'application/json' - }})).json())?.count - } + const getCHUCount = async () => { + return (await (await fetch(`${API_URL}/units/chul?format=json`, { + headers: { + 'Authorization': 'Bearer ' + token, + 'Accept': 'application/json' + } + })).json())?.count + } // const count = await getCHUCount(); diff --git a/pages/facilities/[id].js b/pages/facilities/[id].js index 618a6093..22c44136 100644 --- a/pages/facilities/[id].js +++ b/pages/facilities/[id].js @@ -32,12 +32,14 @@ import { Table, TableBody, TableCell, TableRow } from "@mui/material"; import { PermissionContext } from "../../providers/permissions"; import { UserGroupContext } from "../../providers/userGroup"; import { useAlert } from "react-alert"; +import { KeyboardArrowRight, KeyboardArrowDown } from "@mui/icons-material"; + const Facility = (props) => { - const userPermissions = useContext(PermissionContext) - const userGroup = useContext(UserGroupContext) + // const userPermissions = useContext(PermissionContext) + // const userGroup = useContext(UserGroupContext) const userCtx = useContext(UserContext) @@ -66,6 +68,7 @@ const Facility = (props) => { const [user, setUser] = useState(userCtx); const [open, setOpen] = useState(true); + const [isMenuOpen, setIsMenuOpen] = useState(false); const [openCloseModal, setOpenCloseModal] = useState(true) const [isReasonRejected, setIsReasonRejected] = useState(false) const handleClose = () => setOpen(false); @@ -118,7 +121,8 @@ const Facility = (props) => { -
+ +
{/* Closed Facility Modal */} { @@ -259,7 +263,7 @@ const Facility = (props) => { className="bg-gray-50 shadow-md" > - + Are you sure you want to close {facility?.official_name} @@ -344,7 +348,7 @@ const Facility = (props) => { } {/* Header */} -
+
{/* Breadcramps */}
@@ -363,7 +367,7 @@ const Facility = (props) => { {/* Header Bunner */}
@@ -442,23 +446,45 @@ const Facility = (props) => {
{/* Facility Side Menu Filters */} -
- -
+
+ + +
+ + -
+
{/* Action Buttons e.g (Approve/Reject, Edit, Regulate, Upgrade, Close) */} { !facility?.closed && -
-
+
+
{/* Render button conditionally for both facility approval and validation*/} @@ -476,7 +502,7 @@ const Facility = (props) => { @@ -553,7 +579,7 @@ const Facility = (props) => { @@ -568,7 +594,7 @@ const Facility = (props) => { @@ -582,7 +608,7 @@ const Facility = (props) => { @@ -606,7 +632,7 @@ const Facility = (props) => { router.push(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_detail_report/${facility?.id}/?access_token=${props['3']?.token}`) }} - className="p-2 text-center -md font-semibold text-base text-white bg-black" + className="p-2 text-center -md font-semibold text-base text-white bg-gray-600 rounded" > Print @@ -621,7 +647,7 @@ const Facility = (props) => { {/* end facility approval */} -