Untitled
unknown
plain_text
a year ago
7.7 kB
4
Indexable
import ConstantKeys from '@/Constants/ConstantKeys'; import { useAppState, Util } from '@d-lift/core'; import { CheckboxGroup, Date, Group, Label, Selectbox, Checkbox } from '@d-lift/uxcomponents'; import React, { useEffect, useState } from 'react'; import webService from '@/Services/WebService'; import PropTypes from 'prop-types'; const RFIFilters = ({ rfiRequest, updateRFIRequest }) => { const [filteredStates, setFilteredStates] = useState([]); const [filteredOfferings, setFilteredOfferings] = useState([]); const [categoryList, setCategoryList] = useState([]); const [programList, setProgramList] = useState([]); const [filteredCategory, setFilteredCategory] = useState([]); const [filteredPrograms, setFilteredPrograms] = useState([]); useEffect(() => { const refTableContent = JSON.parse( Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING), ); const loginDetails = getLoginData(); if (refTableContent && loginDetails) { const stateCodes = loginDetails.map((detail) => detail.state); const filteredStateValues = refTableContent.STATE.filter((state) => stateCodes.includes(state.CODE), ); setFilteredStates(filteredStateValues); const programs = refTableContent.PROGRAM; setProgramList(programs); const categories = refTableContent.CATEGORY; setCategoryList(categories); } }, []); const getLoginData = () => { return [ { state: 'SS', offering: ['EE'] }, { state: 'WI', offering: ['EE', 'CW'] }, { state: 'ND', offering: ['EE', 'EF'] }, { state: 'MD', offering: ['CW'] }, { state: 'WY', offering: ['CW', 'EF'] }, { state: 'AB', offering: ['EE', 'CW'] }, { state: 'ST', offering: ['EE', 'EF'] }, { state: 'IN', offering: ['EE', 'EF', 'CW'] }, { state: 'AL', offering: ['EE', 'EF', 'CW'] }, { state: 'AK', offering: ['EE', 'EF', 'CW'] }, { state: 'AS', offering: ['EE', 'EF', 'CW'] }, ]; }; const getStateValue = (event) => { const selectedState = event.target.value; const loginDetails = getLoginData(); const selectedStateDetails = loginDetails.find((detail) => detail.state === selectedState); if (selectedStateDetails) { const availableOfferings = selectedStateDetails.offering; setFilteredOfferings(availableOfferings); } }; const getOfferingValue = (event) => { const selectedOffering = event.target.value; const filteredPrograms = programList.filter( (program) => program[selectedOffering] === 'Y' ); setFilteredPrograms(filteredPrograms); const filteredCategories = categoryList.filter( (category) => category[selectedOffering] === 'Y' ); setFilteredCategory(filteredCategories); }; const handleCategoryChange = (event) => { const selectedCategory = event.target.value; let updatedCategory = [...rfiRequest.category]; if (selectedCategory === 'ALL') { updatedCategory = ['ALL']; } else if (updatedCategory.includes('ALL')) { updatedCategory = updatedCategory.filter((item) => item !== 'ALL'); } const newList = { ...rfiRequest, category: updatedCategory }; updateRFIRequest(newList); }; const handleProgramChange = (event) => { const value = event.target.value; let selectedPrograms = [...rfiRequest.programs]; if (value === 'ALL') { selectedPrograms = ['ALL']; } else if (selectedPrograms.includes('ALL')) { selectedPrograms = selectedPrograms.filter((program) => program !== 'ALL'); } const newList = { ...rfiRequest, programs: selectedPrograms }; updateRFIRequest(newList); }; return ( <> <Label className="pt-3 mandatory_field" labelKey="requesting_as"></Label> <Selectbox id="requestedBy" model="rfiRequest.requestedBy" className="w-100" defaultOptionLabelKey="select_state" list={filteredStates} optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION} optionValue={ConstantKeys.REF_TABLE_COLS.CODE} defaultOption="true" required change={(event) => getStateValue(event)}></Selectbox> <Group width="3,9"> <Label className="pt-4" labelKey="needed_by"></Label> <div className="ux-rfi-calendar"> <Date id="neededByDate" model="rfiRequest.neededBy" monthDropdown yearDropdown></Date> </div> </Group> <Selectbox id="offering" labelKey="offering" model="rfiRequest.offering" className="ux-w-100 pt-3" defaultOption="true" list={filteredOfferings.map((code) => ({ CODE: code, DESCRIPTION: code === 'EE' ? 'Eligibility and Enrollment' : code === 'CS' ? 'Child Support' : code === 'CW' ? 'Child Welfare' : 'Unknown', }))} optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION} optionValue={ConstantKeys.REF_TABLE_COLS.CODE} change={(event) => getOfferingValue(event)}></Selectbox> <div className="ux-rfi-grey-border w-100 mt-3"> <Label labelKey="category"></Label> <div className="ux-rfi-grey-border"> <CheckboxGroup model="rfiRequest.category"> {filteredCategory.map((categoryItem, index) => ( <Checkbox key={index} id={'category-item-' + index} text={categoryItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]} value={categoryItem[ConstantKeys.REF_TABLE_COLS.CODE]} change={(event) => handleCategoryChange(event)}></Checkbox> ))} </CheckboxGroup> </div> </div> <div className="ux-rfi-grey-border w-100 mt-4 pt-1"> <Label labelKey="program"></Label> <div className="ux-rfi-grey-border"> <CheckboxGroup model="rfiRequest.programs"> {filteredPrograms.map((programItem, index) => ( <Checkbox key={index} id={'program-item-' + index} text={programItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]} value={programItem[ConstantKeys.REF_TABLE_COLS.CODE]} change={(event) => handleProgramChange(event)}></Checkbox> ))} </CheckboxGroup> </div> </div> </> ); }; RFIFilters.propTypes = { rfiRequest: PropTypes.object.isRequired, updateRFIRequest: PropTypes.func.isRequired, }; export default RFIFilters;
Editor is loading...
Leave a Comment