Skip to content

Commit

Permalink
Merge pull request #362 from ertush/hotfix
Browse files Browse the repository at this point in the history 
Hotfix
  • Loading branch information
@ertush
ertush authored Apr 29, 2024
2 parents 1dde678 + 680b768 commit e62b70e
Show file tree
Hide file tree
Showing 12 changed files with 829 additions and 376 deletions.
5 changes: 2 additions & 3 deletions components/Forms/BasicDetailsForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1611,7 +1611,6 @@ export function BasicDeatilsForm({ editMode }) {
</span>
</label>
<input

type='text'
name='plot_number'
defaultValue={options?.data?.plot_number ?? ''}
Expand All @@ -1621,7 +1620,7 @@ export function BasicDeatilsForm({ editMode }) {
</div>

{/* Nearest landmark */}
<div className='w-full flex flex-col items-start justify-start gap-1 mb-3'>
{/* <div className='w-full flex flex-col items-start justify-start gap-1 mb-3'>
<label
htmlFor='nearest_landmark'
className='text-gray-600 capitalize text-sm'>
Expand All @@ -1639,7 +1638,7 @@ export function BasicDeatilsForm({ editMode }) {
onFocus={handleFocus}
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>
</div> */}

{/* Location Description */}
<div className='w-full flex flex-col items-start justify-start gap-1 mb-3'>
Expand Down
240 changes: 212 additions & 28 deletions components/Forms/formComponents/FacilityContacts.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@

import { useRef, useContext, useEffect } from "react" // useContext
import { useRef, useContext, useEffect, useState } from "react" // useContext
import { XCircleIcon } from '@heroicons/react/outline'
import { FacilityContactsContext } from "../../../components/Forms/FacilityContactsForm"
// import { EditFacilityContactsContext } from "../../../pages/facilities/edit/[id]"
import { useAlert } from "react-alert"
import Select from './FormikSelect'
import { Field } from 'formik'
// import {Select as CustomSelect} from '../formComponents/Select'
import { Field, useFormikContext } from 'formik'


const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldNames, contacts}) => {
function FacilityContact({contactTypeOptions, setFacilityContacts, index, fieldNames, contacts}) {



Expand All @@ -22,8 +23,17 @@ const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldN
const contactDetailsRef = useRef(null)

const [contact, contact_type_name, id] = contacts
const [_contactType, setContactType] = useState(null)

const {values, _} = useFormikContext()

useEffect(() => {
if(values) {
setContactType(contactTypeOptions?.find(type => type?.value == values[`contact_type_${index}`])?.label)
}
}, [values[`contact_type_${index}`]])




useEffect(() => {

Expand All @@ -33,8 +43,7 @@ const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldN

contactTypeRef.current.state.value = contactTypeOptions.filter(({label}) => label === contact_type_name).map(obj => {obj['id'] = id; return obj})
}

// console.log({val: contactTypeRef.current?.state?.value})

}

if(contactDetailsRef.current ){
Expand All @@ -46,10 +55,9 @@ const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldN
}, [])

return (
<div className="w-full grid grid-cols-2 grid-rows-1 gap-3 mt-3" id={`facility-dept-wrapper-${index}`}>
<div className="w-full grid grid-cols-2 grid-rows-auto gap-3 mt-3" id={`facility-dept-wrapper-${index}`}>

{/* Name */}

<Select options={contactTypeOptions || []}
required
id={`facility-contact-type-${index}`}
Expand All @@ -59,17 +67,95 @@ const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldN
/>

<div className="w-full col-start-2 flex items-center gap-x-3 justify-between">
{/*facility contact */}
<Field
id={`facility-contact-detail-${index}`}
type="text"
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>
{/* Facility Contact */}


{
(_contactType == null || _contactType == "FAX" ) &&



<Field
as="input"
required
id={`facility-contact-detail-${index}`}
type="text"
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>



}

{
( _contactType == 'LANDLINE' || _contactType == 'MOBILE') &&

<div className=" flex flex-col w-full gap-1 relative max-h-min">
<Field
as="input"
required
id={`facility-contact-detail-${index}`}
type="tel"
placeholder={'+254 #########'}
pattern={'[+]{1}[254]{3}[ ]{1}[0-9]{9}'}
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>

<span class="tooltiptext">Invalid Input! Correct Format is +254 #########</span>


</div>

}

{
_contactType == 'EMAIL' &&
<div className=" flex flex-col w-full gap-1 relative max-h-min">

<Field
as="input"
reuired
id={`facility-contact-detail-${index}`}
type="email"
placeholder="user@email-domain"
pattern="[a-z0-9]+[.]*[\-]*[a-z0-9]+@[a-z0-9]+[\-]*[.]*[a-z0-9]+[.][a-z]{2,}"
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>
<span class="tooltiptext">Invalid Input! Correct Format is [email protected] </span>

</div>

}

{
_contactType == 'POSTAL' &&
<div className=" flex flex-col w-full gap-1 relative max-h-min">

<Field
as="input"
required
id={`facility-contact-detail-${index}`}
type="text"
placeholder="P.O BOX #####"
pattern={'[P.O BOX]{7}[ ]{1}[0-9]{5,6}'}
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>

<span class="tooltiptext">Invalid Input! Correct Format is P.O BOX ##### </span>


</div>
}




{/* Delete Btn */}


{/* Delete Btn */}
<button
id={`delete-btn-${index}`}
onClick={async ev => {
Expand Down Expand Up @@ -103,18 +189,37 @@ const FacilityContact = ({contactTypeOptions, setFacilityContacts, index, fieldN
}}
><XCircleIcon className='w-7 h-7 text-red-400'/></button>

</div>
</div>




</div>
)
}

const OfficerContactDetails = ({contactTypeOptions, setFacilityContacts, contacts, index, fieldNames}) => {
function OfficerContactDetails ({contactTypeOptions, setFacilityContacts, contacts, index, fieldNames}) {


const contactTypes = useContext(FacilityContactsContext)
const [_contactType, setContactType] = useState(null)

const {values, _} = useFormikContext()


useEffect(() => {
if(values) {
setContactType(contactTypeOptions?.find(type => type?.value == values[`officer_details_contact_type_${index}`])?.label)
console.log({values})
}
}, [values[`officer_details_contact_type_${index}`]])



return (

/** */

<div className="w-full grid grid-cols-2 grid-rows-1 gap-3 mt-3" id={`facility-dept-wrapper-${index}`}>


Expand All @@ -123,17 +228,96 @@ const OfficerContactDetails = ({contactTypeOptions, setFacilityContacts, contact
required
id={`officer-contact-type-${index}`}
placeholder="Select Contact Type"

name={`${fieldNames[0]}_${index}`}
/>



<div className="w-full col-start-2 flex items-center gap-x-3 justify-between">
{/* Officer contacts */}
<Field
id={`officer-contact-detail-${index}`}
type="text"

name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none" />
<div className="w-full col-start-2 flex items-center gap-x-3 justify-between">
{/* Facility Contact */}


{
(_contactType == null || _contactType == "FAX") &&



<Field
as="input"
required
id={`officer-contact-detail-${index}`}
type="text"
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>



}

{
( _contactType == 'LANDLINE' || _contactType == 'MOBILE') &&

<div className=" flex flex-col w-full gap-1 relative max-h-min">
<Field
as="input"
required
id={`officer-contact-detail-${index}`}
type="tel"
placeholder={'+254 #########'}
pattern={'[+]{1}[254]{3}[ ]{1}[0-9]{9}'}
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>

<span class="tooltiptext">Invalid Input! Correct Format is +254 #########</span>


</div>

}

{
_contactType == 'EMAIL' &&
<div className=" flex flex-col w-full gap-1 relative max-h-min">

<Field
as="input"
reuired
id={`officer-contact-detail-${index}`}
type="email"
placeholder="user@email-domain"
pattern="[a-z0-9]+[.]*[\-]*[a-z0-9]+@[a-z0-9]+[\-]*[.]*[a-z0-9]+[.][a-z]{2,}"
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>
<span class="tooltiptext">Invalid Input! Correct Format is [email protected] </span>

</div>

}

{
_contactType == 'POSTAL' &&
<div className=" flex flex-col w-full gap-1 relative max-h-min">

<Field
as="input"
required
id={`officer-contact-detail-${index}`}
type="text"
placeholder="P.O BOX #####"
pattern={'[P.O BOX]{7}[ ]{1}[0-9]{5,6}'}
name={`${fieldNames[1]}_${index}`}
className="w-full flex-grow rounded flex-1 bg-transparent p-2 border placeholder-gray-500 border-gray-600 focus:shadow-none focus:border-black outline-none"
/>

<span class="tooltiptext">Invalid Input! Correct Format is P.O BOX ##### </span>


</div>
}


{/* Delete Btn */}
Expand Down
49 changes: 49 additions & 0 deletions components/HeaderLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,55 @@ export default function HeaderLayout({
</ul>
}

{
/**
* If group Id does not match any user group and user is logged in; render this menu
*/
((
groupID == undefined ||
groupID == null
) && isLoggedIn ) ||
((
groupID !== 7 &&
groupID !== 5 &&
groupID !== 1 &&
groupID !== 2 &&
groupID !== 12 &&
groupID !== 6 &&
groupID !== 8
)
&&
isLoggedIn) &&
<ul style={{ backgroundColor: '#1651b6' }} className='list-none w-full flex-col rounded flex justify-between '>


<li className={`text-lg h-[60px] w-full flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-r-2 border-gray-50 bg-blue-500/85'}`}>
<Link href='/dashboard'>Dashboard</Link>
</li>

<li className={`text-lg h-[60px] w-full flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/facilities\/.+/.test(currentPath) || /\/facilities/.test(currentPath)) && 'border-r-2 border-gray-50 bg-blue-500/85 text-gray-100 '} ${currentPath == "/public/facilities" && 'border-r-2 border-gray-50 bg-blue-500/85'}`}>
<Link href={`${userID !== 6 && isLoggedIn ? '/facilities' : '/public/facilities'}`}>Facilities</Link>
</li>

<li className={`text-lg h-[60px] w-full flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${(/\/community-units\/.+/.test(currentPath) || /\/community-units/.test(currentPath)) && 'border-r-2 border-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-r-2 border-gray-50 bg-blue-700/85 text-gray-100'}`}>
<Link href={`${userID !== 6 && isLoggedIn ? '/community-units' : '/public/chu'}`}>Community Units</Link>
</li>

<li className={`text-lg h-[60px] w-full flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-r-2 border-gray-50 bg-blue-500/85'}`}>
<Link href='/reports'>Reports</Link>
</li>

{/* <li className={`text-lg h-[60px] flex text-center justify-center text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/documentation" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='https://kmhfr-docs.github.io'>Documentation</Link>
</li> */}

<li className={`text-lg h-[60px] flex text-nowrap items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/downloads" && 'border-r-2 border-gray-50 bg-blue-500/85'}`}>
<Link href='/downloads'>Downloads</Link>
</li>
</ul>

}

</nav>
}
</button>
Expand Down
Loading

0 comments on commit e62b70e

Please sign in to comment.