From 4e555e751ca83feacd065b5e1001c5d791dbed20 Mon Sep 17 00:00:00 2001 From: eric Date: Tue, 20 Aug 2024 15:59:18 +0300 Subject: [PATCH 1/3] Added automatic filtering in facility basic detils form in owner and facility_type --- components/Forms/BasicDetailsForm.js | 71 +++++++++++++++++++++++- components/Forms/FacilityContactsForm.js | 2 +- components/Forms/RegulationForm.js | 2 +- 3 files changed, 70 insertions(+), 5 deletions(-) diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js index a55eef89..eb0a2415 100644 --- a/components/Forms/BasicDetailsForm.js +++ b/components/Forms/BasicDetailsForm.js @@ -79,7 +79,7 @@ export function BasicDeatilsForm({ editMode }) { const [constituencyOptions, setConstituencyOptions] = useState(options?.constituencies) const [wardOptions, setWardOptions] = useState(options?.wards) - const facilityTypeValue = options?.facility_types?.find(({label}) => label.toLowerCase().trim() == options?.data?.facility_type_parent.toLowerCase().trim())?.value + const facilityTypeValue = options?.facility_types?.find(({label}) => label?.toLowerCase().trim() == options?.data?.facility_type_parent?.toLowerCase().trim())?.value const operationStatusOptions = [ { @@ -582,7 +582,7 @@ export function BasicDeatilsForm({ editMode }) { // Effects - useEffect(() => { + useEffect(async () => { // console.log({facility: options?.data}) @@ -634,7 +634,7 @@ export function BasicDeatilsForm({ editMode }) { } - function getFacilityTypeDetails(facilityTypeId, token) { + function getFacilityTypeDetails(facilityTypeId, token) { return fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false&parent=${facilityTypeId}`, { headers: { @@ -740,8 +740,73 @@ export function BasicDeatilsForm({ editMode }) { } } ) + + + if (facilityTypeValue) { + try { + const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false&parent=${facilityTypeValue}`, { + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${options?.token}` + } + }) + + const filteredFacilityType = (await facilityTypeDetails.json())?.results + + if (!filteredFacilityType) throw Error('Unable to Fetch Facility Type Details') + + + const facilityType = Array.from(filteredFacilityType, ({ id, name }) => { + return { + label: name, + value: id + } + }) + + + setFacilityTypeDetailOptions(facilityType ?? options?.facility_type_details) + + } + catch (e) { + console.error(e.message) + } + } + + if(options?.data?.owner_type){ + + try { + const owners = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/owners/?owner_type=${options?.data?.owner_type}`, { + headers: { + 'Accept': 'application/json', + 'Authorization': `Bearer ${options?.token}` + } + }) + + const filteredOwners = (await owners.json())?.results + + if (!filteredOwners) throw Error('Unable to Fetch Owner Type Details') + + + const facilityOwnerOptions = Array.from(filteredOwners, ({ id, name }) => { + return { + label: name, + value: id + } + }) + + + + + setOwnerTypeDetailsOptions(facilityOwnerOptions ?? options?.owner_types) + + } + catch (e) { + console.error(e.message) + } + } + } setIsClient(true) diff --git a/components/Forms/FacilityContactsForm.js b/components/Forms/FacilityContactsForm.js index c1ff62a7..e55c7eed 100644 --- a/components/Forms/FacilityContactsForm.js +++ b/components/Forms/FacilityContactsForm.js @@ -140,7 +140,7 @@ export function FacilityContactsForm() { const currentUrl = new URL(window.document.location.href) - if(options?.data?.facility_contacts.length > 0){ + if(options?.data?.facility_contacts?.length > 0){ // const uid = uuid() setFacilityContacts( options?.data?.facility_contacts?.map((_, i) => ( diff --git a/components/Forms/RegulationForm.js b/components/Forms/RegulationForm.js index f1bc309c..281ade29 100644 --- a/components/Forms/RegulationForm.js +++ b/components/Forms/RegulationForm.js @@ -296,7 +296,7 @@ function handleLicenseFileChange (e) { const filteredRegOptions = regOptions.filter(({ label }) => label !== 'Other') - if (options?.data?.owner_type_name.toLowerCase().trim() == "ministry of health") { + if (options?.data?.owner_type_name?.toLowerCase().trim() == "ministry of health") { return filteredRegOptions.filter(({ label }) => { return label.toLowerCase().trim() == "ministry of health" From 69435137237b9cb165cd251a9293cc2ade3a64ac Mon Sep 17 00:00:00 2001 From: eric Date: Tue, 20 Aug 2024 16:24:09 +0300 Subject: [PATCH 2/3] Commented the code for setting default options on edit mode of basicdetails --- components/Forms/BasicDetailsForm.js | 105 ++++++++++++++------------- 1 file changed, 55 insertions(+), 50 deletions(-) diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js index eb0a2415..6e5f3341 100644 --- a/components/Forms/BasicDetailsForm.js +++ b/components/Forms/BasicDetailsForm.js @@ -582,11 +582,11 @@ export function BasicDeatilsForm({ editMode }) { // Effects - useEffect(async () => { + useEffect(() => { // console.log({facility: options?.data}) - async function updateFacilityTypeDetailOptions(e) { + async function updateFacilityTypeDetailOptions(e) { try { const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false`, { headers: { @@ -617,7 +617,7 @@ export function BasicDeatilsForm({ editMode }) { } } - updateFacilityTypeDetailOptions() + updateFacilityTypeDetailOptions() function getFacilityTypeDetailsParent(facilityTypeId, token) { @@ -742,75 +742,80 @@ export function BasicDeatilsForm({ editMode }) { ) - if (facilityTypeValue) { - try { - const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false&parent=${facilityTypeValue}`, { - headers: { - 'Accept': 'application/json', - 'Authorization': `Bearer ${options?.token}` - } - }) + // async function fetchDetailOptions() { + // if (facilityTypeValue) { + // try { + // const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false&parent=${facilityTypeValue}`, { + // headers: { + // 'Accept': 'application/json', + // 'Authorization': `Bearer ${options?.token}` + // } + // }) - const filteredFacilityType = (await facilityTypeDetails.json())?.results + // const filteredFacilityType = (await facilityTypeDetails.json())?.results - if (!filteredFacilityType) throw Error('Unable to Fetch Facility Type Details') - const facilityType = Array.from(filteredFacilityType, ({ id, name }) => { - return { - label: name, - value: id - } - }) + // const facilityType = Array.from(filteredFacilityType, ({ id, name }) => { + // return { + // label: name, + // value: id + // } + // }) - setFacilityTypeDetailOptions(facilityType ?? options?.facility_type_details) + // setFacilityTypeDetailOptions(facilityType ?? options?.facility_type_details) - } - catch (e) { - console.error(e.message) - } - } + // } + // catch (e) { + // console.error(e.message) + // } + // } - if(options?.data?.owner_type){ + // if(options?.data?.owner_type){ - try { - const owners = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/owners/?owner_type=${options?.data?.owner_type}`, { - headers: { - 'Accept': 'application/json', - 'Authorization': `Bearer ${options?.token}` - } - }) + // try { + // const owners = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/owners/?owner_type=${options?.data?.owner_type}`, { + // headers: { + // 'Accept': 'application/json', + // 'Authorization': `Bearer ${options?.token}` + // } + // }) - const filteredOwners = (await owners.json())?.results + // const filteredOwners = (await owners.json())?.results - if (!filteredOwners) throw Error('Unable to Fetch Owner Type Details') + // if (!filteredOwners) throw Error('Unable to Fetch Owner Type Details') - const facilityOwnerOptions = Array.from(filteredOwners, ({ id, name }) => { - return { - label: name, - value: id - } - }) + // const facilityOwnerOptions = Array.from(filteredOwners, ({ id, name }) => { + // return { + // label: name, + // value: id + // } + // }) - setOwnerTypeDetailsOptions(facilityOwnerOptions ?? options?.owner_types) + // setOwnerTypeDetailsOptions(facilityOwnerOptions ?? options?.owner_types) - } - catch (e) { - console.error(e.message) - } + // } + // catch (e) { + // console.error(e.message) + // } - - } + + // } + // } + + + // fetchDetailOptions() } setIsClient(true) + }, []) @@ -1072,7 +1077,7 @@ export function BasicDeatilsForm({ editMode }) { onFocus={handleFocus} required name='owner_type' - defaultValue={options?.data?.owner_type ?? ''} + defaultValue={options?.data?.owner_type} /> @@ -1094,7 +1099,7 @@ export function BasicDeatilsForm({ editMode }) { placeholder="Select owner..." required name='owner' - defaultValue={options?.data?.owner ?? ''} + defaultValue={options?.data?.owner} /> From a7bff6b0fb06fde3fb1dbf8df8e29b7057c41568 Mon Sep 17 00:00:00 2001 From: eric Date: Wed, 21 Aug 2024 11:09:04 +0300 Subject: [PATCH 3/3] Updated CU save and finish button in edit form --- components/Forms/BasicDetailsForm.js | 19 ++++++++----------- components/Forms/CommunityUnitsForms.js | 23 +++++++++++------------ 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js index 6e5f3341..0159b2dd 100644 --- a/components/Forms/BasicDetailsForm.js +++ b/components/Forms/BasicDetailsForm.js @@ -38,7 +38,7 @@ export function BasicDeatilsForm({ editMode }) { const submitType = useRef(null) - const [facilityId, setFacilityId] = useMemo(() => { + const [__, setFacilityId] = useMemo(() => { let id = '' @@ -50,13 +50,12 @@ export function BasicDeatilsForm({ editMode }) { setId(new URL(window.location.href).searchParams.get('facilityId') ?? '') } - // console.log({id}) return [id, setId] }, []) const [submitting, setSubmitting] = useState(false); - const [touchedFields, setTouchedFields] = useState([]); + const [_, setTouchedFields] = useState([]); const [formError, setFormError] = useState(null); @@ -756,7 +755,7 @@ export function BasicDeatilsForm({ editMode }) { - // const facilityType = Array.from(filteredFacilityType, ({ id, name }) => { + // const facilityType = Array.from(options?.facility_types, ({ id, name }) => { // return { // label: name, // value: id @@ -794,9 +793,7 @@ export function BasicDeatilsForm({ editMode }) { // } // }) - - - + // setOwnerTypeDetailsOptions(facilityOwnerOptions ?? options?.owner_types) // } @@ -903,7 +900,7 @@ export function BasicDeatilsForm({ editMode }) { label == options?.data?.facility_type_name)?.value*/} + defaultValue={options?.data?.facility_type ?? '' /*options?.facility_type_details?.find(({ label }) => label == options?.data?.facility_type_name)?.value*/} required name='facility_type' // facility_type_details @@ -1077,7 +1074,7 @@ export function BasicDeatilsForm({ editMode }) { onFocus={handleFocus} required name='owner_type' - defaultValue={options?.data?.owner_type} + defaultValue={options?.data?.owner_type ?? ''} /> @@ -1099,7 +1096,7 @@ export function BasicDeatilsForm({ editMode }) { placeholder="Select owner..." required name='owner' - defaultValue={options?.data?.owner} + defaultValue={options?.data?.owner ?? ''} /> diff --git a/components/Forms/CommunityUnitsForms.js b/components/Forms/CommunityUnitsForms.js index bc612a24..0e1f0e89 100644 --- a/components/Forms/CommunityUnitsForms.js +++ b/components/Forms/CommunityUnitsForms.js @@ -109,6 +109,9 @@ function EditCommunityUnitsBasicDeatilsForm(props) { setSubmitting(true) + console.log({submitting}) + + const payload = {} const formData = new FormData(event.target) @@ -170,6 +173,7 @@ function EditCommunityUnitsBasicDeatilsForm(props) { } + try { fetch(`${process.env.NEXT_PUBLIC_API_URL}/chul/units/${props?.id}/`, { @@ -214,10 +218,7 @@ function EditCommunityUnitsBasicDeatilsForm(props) { setSubmitting(true) console.error('Error Occured: ' + e.message) } - finally { - setSubmitting(false) - - } + @@ -237,8 +238,6 @@ function EditCommunityUnitsBasicDeatilsForm(props) { onSubmit={handleFormSubmit} > - - {formError && {formError}} {/* CHU Name */} @@ -775,17 +774,17 @@ function EditCommunityUnitsBasicDeatilsForm(props) { { submitting ? - +
+ + Saving.. +
+ : 'Save and Finish' } - { - submitting && - Saving.. - } - +