From 6e04c99f21c8f2088ff145eee970c6154b1ed45f Mon Sep 17 00:00:00 2001
From: eric <erotush77@gmail.com>
Date: Sat, 9 Mar 2024 16:42:25 +0300
Subject: [PATCH] Updated EditListWithCount.js and GeolocationForm.js

---
 components/Forms/BasicDetailsForm.js          | 17 +++++---
 components/Forms/GeolocationForm.js           | 33 +++++++++------
 .../Forms/formComponents/EditListWithCount.js | 41 +++++++++----------
 3 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js
index c32f9950..38960a4a 100644
--- a/components/Forms/BasicDetailsForm.js
+++ b/components/Forms/BasicDetailsForm.js
@@ -1581,15 +1581,22 @@ export function BasicDeatilsForm({ editMode }) {
             checklist file upload
 
           </label>
-
-          <input
-            type={editMode ? 'text' : 'file' }
+          {
+            editMode ?
+            <input
+            type='text'
             name='facility_checklist_document'
             disabled={editMode}
-            defaultValue={`Checklist File ${options?.data?.facility_checklist_document?.url ?? 'missing'}`}
+            defaultValue={`Checklist File is ${options?.data?.facility_checklist_document?.url ?? 'missing'}`}
+            className='flex-none w-full bg-transparent  p-2 flex-grow border placeholder-gray-500 border-gray-400 rounded focus:shadow-none focus:border-black outline-none'
+          /> :
+          <input
+            type='file'
+            name='facility_checklist_document'
             className='flex-none w-full bg-transparent  p-2 flex-grow border placeholder-gray-500 border-gray-400 rounded focus:shadow-none focus:border-black outline-none'
           />
-
+          }
+          
 
 
         </div>
diff --git a/components/Forms/GeolocationForm.js b/components/Forms/GeolocationForm.js
index 0edca90f..66a7f6d9 100644
--- a/components/Forms/GeolocationForm.js
+++ b/components/Forms/GeolocationForm.js
@@ -109,7 +109,7 @@ export function GeolocationForm({ editMode }) {
   
       if (payload) {
 
-        fetch(`${process.env.NEXT_PUBLIC_API_URL}/gis/facility_coordinates${options?.data?.lat_long ? '/' + options?.data?.coordinates + '/' : '/'}`, {
+        fetch(`${process.env.NEXT_PUBLIC_API_URL}/gis/facility_coordinates${options?.data?.lat_long ? `/options?.data?.coordinates/` : '/'}`, {
           headers: {
             'Authorization': 'Bearer ' + options?.token,
             'Accept': 'application/json, text/plain, */*',
@@ -173,20 +173,34 @@ export function GeolocationForm({ editMode }) {
 
     const data = Object.fromEntries(formData)
 
+
     setSubmitting(true)
 
+    const payload = {
+      coordinates: {
+        coordinates: [Number(data?.longitude), Number(data?.latitude)],
+        type: "point",
+      },
+      
+      latitude: Number(data?.latitude),
+      longitude: Number(data?.longitude),
+      facility: facilityId
+    }
+
+    console.log({payload})
 
-    fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/${facilityId}/`, {
-      method: 'PATCH',
+
+    fetch(`${process.env.NEXT_PUBLIC_API_URL}/gis/facility_coordinates/`, {
+      method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json;charset=UTF-8',
         'Authorization': `Bearer ${options?.token}`
       },
-      body: JSON.stringify(data)
+      body: JSON.stringify(payload)
     })
       .then(res => {
-        if (res.status == 204 || res.status == 200) {
+        if (res.ok) {
           alert.success('Facility Geolocation Details have been saved successfully')
 
           setSubmitting(false)
@@ -215,14 +229,7 @@ export function GeolocationForm({ editMode }) {
             if(navigated) setFormId(2)
           })
 
-          // const url = new URL(`${window.location.origin}/facilities/add?formData=${base64EncParams}`)
-
-          // url.searchParams.set('formId', '2')
-
-          // url.searchParams.set('facilityId', facilityId)
-
-          // window.location.href = url
-
+          
         } else {
           setSubmitting(false)
           alert.error('Unable to save to Geolocation details')
diff --git a/components/Forms/formComponents/EditListWithCount.js b/components/Forms/formComponents/EditListWithCount.js
index cb9953ab..493dd9e7 100644
--- a/components/Forms/formComponents/EditListWithCount.js
+++ b/components/Forms/formComponents/EditListWithCount.js
@@ -445,9 +445,9 @@ function EditListWithCount(
 
             {formError && <Alert severity='error' className={'w-full'}>{formError}</Alert>}
 
-            <div className='w-full grid md:grid-cols-12 grid-cols-1 gap-4'>
-                <div className="col-span-1 md:col-span-6" >
-                    <h4 className="text-lg uppercase mt-4 pb-2 border-b border-gray-600 w-full mb-4 font-semibold text-gray-900">Categories</h4>
+            <div className='w-full grid grid-cols-12 gap-4'>
+                <div className="col-span-5" >
+                    <h4 className="text-lg uppercase mt-4 pb-2 border-b border-gray-600 w-full mb-4 font-semibold text-blue-900">Categories</h4>
                     <input type="text" onFocus={handleSearchItemFocus} onChange={(e) => onSearch(e, true, false)} className="col-span-12 border border-gray-600 p-2 placeholder-gray-500  focus:shadow-none focus:bg-white focus:border-black outline-none w-full" placeholder="Search" />
                     {!showItemCategory && <div className="text-center border-l border-gray-500 border-r border-b w-full">{`Search for ${itemsCategoryName.includes('infrastructure') ? 'infrastructure' : 'a speciality' }`}</div>}
 
@@ -455,8 +455,8 @@ function EditListWithCount(
                     {
                     showItemCategory &&
                     <ul className='max-h-96 overflow-auto border-r border-l border-b border-gray-500'>
-                        {categoryOptions.map(({ label, value, catcount }, i) => (
-                            <div key={i}
+                        {categoryOptions.map(({ label, value, catcount }) => (
+                            <div key={value}
                                 className='card bg-gray-50 shadow-md p-2 group hover:bg-gray-500 hover:text-gray-50 hover:cursor-pointer'
                             >
                                 <li
@@ -464,7 +464,7 @@ function EditListWithCount(
                                     onClick={() => {
                                         filterSpecialities(value)
                                     }}
-                                    >{label}</li>
+                                    key={value}>{label}</li>
                                 <span>({catcount} selected)</span>
                                 <hr className='border-xs boredr-gray-200 group-hover:border-gray-500'></hr>
                             </div>
@@ -474,8 +474,8 @@ function EditListWithCount(
                     }
                 </div>
 
-                <div className="col-span-1 md:col-span-6" >
-                    <h4 className="text-lg uppercase mt-4 pb-2 border-b border-gray-600 w-full mb-4 font-semibold text-gray-900">{itemsCategoryName.includes('human resource') ? 'Specialities' : itemsCategoryName.includes('infrastructure') ? 'Infrastructure' : null}</h4>
+                <div className="col-span-7" >
+                    <h4 className="text-lg uppercase mt-4 pb-2 border-b border-gray-600 w-full mb-4 font-semibold text-blue-900">{itemsCategoryName.includes('human resource') ? 'Specialities' : itemsCategoryName.includes('infrastructure') ? 'Infrastructure' : null}</h4>
                     <input type="text" onChange={(e) => onSearch(e, false, true)} className="col-span-12 border border-gray-600 p-2 placeholder-gray-500  focus:shadow-none focus:bg-white focus:border-black outline-none w-full" placeholder="Search" />
                     <br />
                     <div className='max-h-96 overflow-auto border-r border-l border-b border-gray-500'>
@@ -489,18 +489,18 @@ function EditListWithCount(
                             <tbody className='bg-gray-50 shadow-md'>
                                 {specialities.length === 0 && <tr><td colSpan={3} className="text-center">{`No ${itemsCategoryName.includes('infrastructure') ? 'infrastructure' : 'specialities'} found`}</td></tr>}
 
-                                {specialities.map((row, i) => (
+                                {specialities.map((row) => (
 
-                                    <tr key={i} >
-                                        <td className=" px-1 py-1">
+                                    <tr key={row?.id} >
+                                        <td className="border px-1 py-1">
                                             <label className="w-full p-2" >{row?.name}</label>
                                         </td>
-                                        <td className="flex mt-2 items-center my-auto gap-1 h-full">
+                                        <td className="border px-1 py-1">
                                             <input
 
                                                 type="checkbox"
                                                 name="itemCheckBox"
-                                                className="p-1  w-5 h-5"
+                                                className="p-1 w-5 h-5"
                                                 checked={selectedRows.some(item => item?.rowid?.includes(row?.id))}
                                                 onChange={(e) => handleCheckboxChange(
                                                     itemsCategoryName?.includes('human resource') ? row?.id : itemsCategoryName.includes('infrastructure') ? row?.id : "",
@@ -510,10 +510,9 @@ function EditListWithCount(
                                                     row?.count ? row?.count : 0,
                                                     e.target.checked)
                                                 }
-                                            /> 
-                                            Yes
+                                            /> Yes
                                         </td>
-                                        <td className=" px-1 py-1">
+                                        <td className="border px-1 py-1">
                                             <input
                                                 type="number"
                                                 className="p-1"
@@ -536,7 +535,7 @@ function EditListWithCount(
                 </div>
 
                 {/* summary table */}
-                <div className="col-span-1 md:col-span-12 max-h-96 overflow-auto" >
+                <div className="col-span-12 max-h-96 overflow-auto" >
 
                     <table className="table-auto border border-gray-300 w-full">
                         <thead>
@@ -549,9 +548,9 @@ function EditListWithCount(
                         <tbody className='bg-gray-50 shadow-md'>
                             {selectedRows.length === 0 && <tr><td colSpan={3} className="text-center">No specialities found</td></tr>}
                             {/* {selectedRows.pop()} */}
-                            {selectedRows.map((row, i) => {
+                            {selectedRows.map((row) => {
                                 // if(row.name !== "Vaccine Carriers" || row.name !== "Public Health Technician"){
-                                return ( <tr key={i}>
+                                return ( <tr>
                                         <td className="border border-gray-300 px-1 py-1">{row?.sname}</td>
                                        {row?.iscategoryvisible ? <td className="border border-gray-300 px-1 py-1">{row?.category_name}</td> :null }
                                         <td className="border border-gray-300 px-1 py-1">Yes</td>
@@ -592,8 +591,8 @@ function EditListWithCount(
 
                 <div className='flex justify-between items-center w-full mt-4'>
                     <button onClick={handleItemPrevious} className='flex items-center justify-start space-x-2 p-1 border border-gray-900  px-2'>
-                        <ChevronDoubleLeftIcon className='w-4 h-4 text-gray-900' />
-                        <span className='text-medium font-semibold text-gray-900 '>
+                        <ChevronDoubleLeftIcon className='w-4 h-4 text-blue-900' />
+                        <span className='text-medium font-semibold text-blue-900 '>
                             {previousItemCategory}
                         </span>
                     </button>