ertush · bmugwe · Dec 8, 2023 · Dec 8, 2023 · Dec 8, 2023
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,6 @@ ecosystem.config.js
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+.history
+history/*
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2,6 +2,8 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
+
 .tab-list .tab-item[data-state="active"]{
     color: black;
     font-weight: 500;

diff --git a/components/Forms/CommunityUnitsForms.js b/components/Forms/CommunityUnitsForms.js
diff --git a/components/Forms/formComponents/EditListItem.js b/components/Forms/formComponents/EditListItem.js
@@ -11,15 +11,28 @@ import {
   ChevronDoubleLeftIcon,
   PlusIcon
 } from '@heroicons/react/solid';
-
+import dynamic from 'next/dynamic';
+import 'react-dual-listbox/lib/react-dual-listbox.css';
+
+const DualListBox = dynamic(
+  () => import("react-dual-listbox"), // replace '@components/map' with your component's location
+  {
+    loading: () => (
+      <div className="text-gray-800 text-lg  bg-white py-2 px-5 shadow w-auto mx-2 my-3">
+        Loading&hellip;
+      </div>
+    ),
+    ssr: false, // This line is important. It's what prevents server-side render
+  } 
+);
 
 
 function  EditListItem({
   initialSelectedItems,
   // setItems,
   categoryItems,
   itemsCategoryName,
-//   setUpdatedItem,
+  //   setUpdatedItem,
   itemId,
   nextItemCategoryId,
   item,
@@ -36,9 +49,12 @@ function  EditListItem({
   setIsSaveAndFinish,
   servicesData
 }) {
-
+
+  const [selected_services, setSelectedServices] = useState([])
+  const [form_id, setFormId] =  useState(itemId)
+  // const current_services = useRef(new Array())
   const alert = useAlert()
-
+  console.log('itemId', itemId)
 
 
 
@@ -133,7 +149,7 @@ function  EditListItem({
 
           // console.log({savedItems, values})
 
-          handleItemsUpdate(token, [savedItems, itemId])
+          handleItemsUpdate(token, [savedItems, form_id])
             .then(resp => {
               defer(() => setIsSaveAndFinish(true));
               let update_id
@@ -142,7 +158,7 @@ function  EditListItem({
                 alert.success('Updated Facility services successfully')
 
                 fetch(
-                  `${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/${itemId}/`,
+                  `${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/${form_id}/`,
                   {
                     headers: {
                         'Authorization': 'Bearer ' + token,
@@ -188,8 +204,8 @@ function  EditListItem({
         }
 
         else {
-
-          handleItemsSubmit(token, [savedItems, nextItemCategoryId, setNextItemCategory], itemId)
+          handleItemsSubmit([selected_services, setFormId, setSelectedServices], form_id)
+          // handleItemsSubmit(token, [savedItems, nextItemCategoryId, setNextItemCategory], form_id)
              .then((resp) => {
               if(resp.ok){
                 alert.success('Facility services saved successfully');
@@ -208,6 +224,7 @@ function  EditListItem({
       <Form
         name="list_item_form"
         className="flex flex-col w-full items-start justify-start gap-3"
+        // onSubmit={handleItemsSubmit}
 
       >
         {/* Item List Dropdown */}
@@ -268,7 +285,7 @@ function  EditListItem({
                 				category: ctg,
                                 categoryId: category,
                 				itemLabels: _subCtgs,
-                				itemIds: _values
+                				form_ids: _values
                 			})
                 		}
 
@@ -280,7 +297,7 @@ function  EditListItem({
 
                   const filters =_options.filter(({categoryId}) => (categoryId === e.value))[0]
 
-                  const item_options = filters.itemLabels.map((label, i) => ({label, value: filters.itemIds[i]}))
+                  const item_options = filters.itemLabels.map((label, i) => ({label, value: filters.form_ids[i]}))
 
 
 
@@ -306,7 +323,7 @@ function  EditListItem({
           </label>
           <div className="flex items-start gap-2  w-full h-auto">
             {/* {console.log({itemOptions})} */}
-            <Select
+            {/* <Select
               options={itemsCategoryName !== 'CHU Services' ? itemOptions : null}
               formatGroupLabel={formatGroupLabel}
               ref={itemRef}
@@ -331,10 +348,23 @@ function  EditListItem({
               }
               name="item_drop_down_edit_list"
              
+            /> */}
+
+            <DualListBox
+              canFilter
+              options={categoryItems}
+              selected={selected_services}
+
+              onChange={(selected) => {
+                // handleSelectChangeChu(selected)
+                setSelectedServices(selected)
+                // current_services.current.push(selected)
+                console.log('selected', selected)
+              }}
             />
 
             {/* Add Item Button */}
-            <button name="add_item_btn" className="bg-blue-700  p-2 flex items-center justify-evenly gap-2"
+            {/* <button name="add_item_btn" className="bg-blue-700  p-2 flex items-center justify-evenly gap-2"
               onClick={e => {
                 e.preventDefault()
                 if (currentItem)
@@ -345,14 +375,14 @@ function  EditListItem({
               }}>
               <p className='text-white font-semibold'>Add</p>
               <PlusIcon className='w-4 h-4 text-white' />
-            </button>
+            </button> */}
           </div>  
         </div>
 
 
         {/* Item Selected Table */}
 
-        <Table className="card bg-blue-50 border-b shadow-md" >
+        {/* <Table className="card bg-blue-50 border-b shadow-md" >
           <TableBody >
             <TableRow >
               <TableCell className='bg-transparent text-blue-700 border-b border-blue-600'>
@@ -375,15 +405,15 @@ function  EditListItem({
             </TableRow>
 
             <>
-              {/* {console.log({items})} */}
+              {console.log({items})}
               {
                 typeof items === 'object' && 
                 items.map(({ name, id }, __id) => (
                   <TableRow
                     key={__id}
                     className='border-t border-blue-600'
                   >
-                    {/* {
+                    {
                   items !== null &&
                   <>
                     <li className="w-full m-3 bg-yellow-100 flex flex-row gap-2 my-2 p-3 border border-yellow-300 text-yellow-900 text-base">
@@ -394,7 +424,7 @@ function  EditListItem({
                     </li>
                     <br />
                   </>
-                  } */}
+                  }
                     <TableCell className='px-3'>{name}</TableCell>
 
                     <TableCell>
@@ -440,7 +470,7 @@ function  EditListItem({
              }
             </>
           </TableBody>
-        </Table>
+        </Table> */}
 
         {/* Save btn */}
 

diff --git a/package.json b/package.json
@@ -15,6 +15,9 @@
     "@date-io/dayjs": "^2.17.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.16",
     "@heroicons/react": "^1.0.6",
     "@material-ui/core": "^4.12.4",
@@ -50,7 +53,7 @@
     "react-csv": "^2.2.2",
     "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
-    "react-dual-listbox": "^5.0.2",
+    "react-dual-listbox": "^6.0.0",
     "react-highcharts": "^16.1.0",
     "react-icons": "^4.10.1",
     "react-leaflet": "^4.2.1",
@@ -74,4 +77,4 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^2.2.19"
   }
-}
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,6 +1,6 @@
 import 'tailwindcss/tailwind.css'
 import '/assets/css/style.css';
-import '../public/assets/css/global.css';
+
 import NProgress from 'nprogress';
 import { Router } from 'next/router';
 import { positions, Provider } from "react-alert";

diff --git a/pages/community-units/add.js b/pages/community-units/add.js
@@ -125,7 +125,15 @@ const AddCommunityUnit = (props) => {
 		};
 	}, [formId, facilities, serviceCtg]);
 
-	useEffect(() => {}, [contactCHEW])
+	// useEffect(() => {}, [contactCHEW])
+	useEffect(() => {
+		let mtd = true;
+		if(mtd){
+			if(typeof window != 'undefined') setchulId(window.sessionStorage.getItem('chulId'));
+			console.log('chulId'. chulId);
+		}
+		return () => mtd = false
+	}, [])
 
 	return (
 		<>
@@ -243,7 +251,12 @@ const AddCommunityUnit = (props) => {
 															_id = id;
 
 															if (resp) {
-																setchulId(_id) //setting the state to the current CHUL
+																setchulId(_id)
+																if(typeof window != 'undefined'){
+																	window.sessionStorage.setItem('chulId', _id);
+																}
+																console.log('id', _id)
+																 //setting the state to the current CHUL
 															}
 															alert.success('CHU Basic Details Added Successfully')
 
@@ -910,12 +923,18 @@ const AddCommunityUnit = (props) => {
 										case 2:
 											// Handle Service Form Submit
 											const handleServiceSubmit = (stateSetters, chulId) => {
-
+												// console.log({stateSetters, chulId})
 												const [services, setFormId, setServices] = stateSetters
-												const _payload = services.map(({ id }) => ({ service: id }))
+												const _payload = services.map((s) => ({ service: s }))
 
 												_payload.forEach(obj => obj['health_unit'] = chulId)
 
+												console.log('handleServiceSubmit',{
+													services,
+													_payload
+												})
+
+
 												try {
 													fetch(`/api/common/submit_form_data/?path=chul_services&id=${chulId}`, {
 														headers: {
@@ -968,10 +987,10 @@ const AddCommunityUnit = (props) => {
 															{/* Edit list Item Container */}
 															<div className='flex items-center w-full h-auto min-h-[300px]'>
 
-
+																{'chulid= '+chulId}
 																<EditListItem
 																	initialSelectedItems={[]}
-																	itemsCategory={serviceOptions} //serviceOptions	
+																	categoryItems={serviceOptions} //serviceOptions	
 																	itemsCategoryName={'CHU Services'}
 																	setUpdatedItem={() => null}
 																	itemId={chulId} //chulId
@@ -985,7 +1004,7 @@ const AddCommunityUnit = (props) => {
 																	previousItemCategory={'CHEWS'}
 																	handleItemPrevious={handleServicesPrevious} //handleServicePrevious
 																	setIsSaveAndFinish={() => null}
-
+																	
 
 																/>
 

diff --git a/pages/community-units/edit/[id].js b/pages/community-units/edit/[id].js
@@ -21,7 +21,7 @@ export default function CommunityUnitEdit (props){
       <ChuOptionsContext.Provider value={{
           facilities: props?.facilities?.results,
           services: props?.services?.results,
-          statuses: props?.statues?.results,
+          statuses: props?.statuses?.results,
           contact_types: props?.contact_types?.results
       }}>
           <CommunityUnitEditForm cu={props?.cu} />
@@ -49,6 +49,8 @@ export async function getServerSideProps({req, res, query}) {
     "services"
   ]
 
+  // cu['facility_name'] = facilities.find(fac => fac.name = cu['facility_name'])[]
+
   try {
 
       if(token.error) throw Error('Unable to get token')
@@ -79,7 +81,7 @@ export async function getServerSideProps({req, res, query}) {
         })
 
         response["statuses"] =  await (await statuses.json())
-      break;
+        break;
 
       case "facilities":
         const facilities = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/?page_size=20&fields=id,name,county,sub_county_name,constituency,ward_name`,{
@@ -91,7 +93,7 @@ export async function getServerSideProps({req, res, query}) {
         })
 
         response["facilities"] =  await (await facilities.json())
-      break;
+        break;
 
       case "contact_types":
         const contact_types = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/common/contact_types/?fields=id,name`,{
@@ -103,7 +105,7 @@ export async function getServerSideProps({req, res, query}) {
         })
 
         response["contact_types"] =  await (await contact_types.json())
-      break;
+        break;
 
       case "services":
         const services = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chul/services/?page_size=1000&fields=id,name`,{
@@ -115,7 +117,7 @@ export async function getServerSideProps({req, res, query}) {
         })
 
         response["services"] =  await (await services.json())
-      break;
+        break;
       }
       } 
 

diff --git a/pages/index.js b/pages/index.js
@@ -160,7 +160,7 @@ const Home = (props) => {
 }
 
 
-export async function getServerSideProps() {
+export async function getInitialProps(ctx) {
 
     // return {loggedIn: false, token: null}
     return  checkToken(ctx.req, ctx.res, {username:process.env.NEXT_PUBLIC_CLIENT_USERNAME, password:process.env.NEXT_PUBLIC_CLIENT_PASSWORD})

diff --git a/yarn.lock b/yarn.lock