Untitled

Currently we have the below value for program in the refTableContent={
CATEGORY: (5) [{…}, {…}, {…}, {…}, {…}]
OFFERING: (3)[
{"CODE:"EG",
"DESC":"Eligibility",
"EE": "Y",
"CS": "Y",
"CW":"N"},
{"CODE:"FO",
"DESC":"Front Office",
"EE": "N",
"CS": "Y",
"CW":"Y"},
{"CODE:"RF",
"DESC":"Interface",
"EE": "N",
"CS": "N",
"CW":"N"}
],
PROGRAM: [
{"CODE:"SNAP",
"DESC":"SNAP",
"EE": "Y",
"CS": "Y",
"CW":"N"},
{"CODE:"AP",
"DESC":"AP",
"EE": "N",
"CS": "Y",
"CW":"Y"},
{"CODE:"PA",
"DESC":"PA",
"EE": "N",
"CS": "N",
"CW":"N"}
]
Create a function which gets called onchange of offerings and filters the program data and keep them in a list (and use that list to render program checkbox) depending on the selected offering . Offering dropdown has values EE, CS,CW,. if person has selected EE in offering then filter the obj which has flag "Y" and save them in a list then use that list to render program & category checkbox.





import BodySection from '@/Layout/BodySection';
import RightSection from '@/Layout/RightSection';
import { useAppState, withPage, Lift, Util } from '@d-lift/core';
import { Page } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import RFIFilters from './Components/RFIFilters';
import RFIRequestForm from './Components/RFIRequestForm';
import './create-rfi.scss';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil'


const RFIRequest = () => {
    const defaultRFIRequest = {
        title: '',
        reqDescription: '',
        questionsList: [{ question: '', description: '' }],
        requestedBy: '',
        neededBy: '',
        offering: ConstantKeys.DEFAULT_OPTION.OFFERING,
        category: ConstantKeys.DEFAULT_OPTION.CATEGORY,
        programs: ConstantKeys.DEFAULT_OPTION.PROGRAM,
        status: '',
    };

    const [rfiRequest, setRFIRequest] = useAppState('rfiRequest', defaultRFIRequest);

    const updateRFIRequest = (newState) => {
        setRFIRequest(newState);
    };

    useEffect(() => {

        let refTableContent = JSON.parse(Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING));
        console.log('refTableContent:', refTableContent);
    });


    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING">
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        resetRFIRequest={defaultRFIRequest}></RFIRequestForm>
                </BodySection>
                <RightSection>
                    <RFIFilters
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}></RFIFilters>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Make a Request Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIRequest,
);



import ConstantKeys from '@/Constants/ConstantKeys';
import { useAppState } from '@d-lift/core';
import { CheckboxGroup, Date, Group, Label, Selectbox, Checkbox } from '@d-lift/uxcomponents';
import React from 'react';
import PropTypes from 'prop-types';

const RFIFilters = ({ rfiRequest, updateRFIRequest }) => {
    const offeringList = [
        { DESCRIPTION: 'Eligibility and Enrollment', CODE: 'EE' },
        { DESCRIPTION: 'Child Support', CODE: 'CS' },
        { DESCRIPTION: 'Child Welfare', CODE: 'CW' },
    ];

    const categoryRefTable = [
        { DESCRIPTION: 'ALL', CODE: 'ALL' },
        { DESCRIPTION: 'Eligibility', CODE: 'EG' },
        { DESCRIPTION: 'Front Office', CODE: 'FO' },
        { DESCRIPTION: 'Interfaces', CODE: 'IF' },
        { DESCRIPTION: 'Reports', CODE: 'RP' },
        { DESCRIPTION: 'General/Other', CODE: 'GO' },
    ];
    useAppState('categoryList', categoryRefTable);

    const programRefTable = [
        { DESCRIPTION: 'ALL', CODE: 'ALL' },
        { DESCRIPTION: 'AU', CODE: 'AU' },
        { DESCRIPTION: 'MA', CODE: 'MA' },
        { DESCRIPTION: 'LIHEAP', CODE: 'LIHEAP' },
        { DESCRIPTION: 'CC', CODE: 'CC' },
        { DESCRIPTION: 'PIPP', CODE: 'PIPP' },
    ];
    useAppState('programList', programRefTable);

    // Handler for category selection
    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);
    };

    // Handler for program selection
    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"
                placeholder="-Select A State -"
                list="stateList"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                required></Selectbox>

            <Group width="3,9">
                <Label className="pt-4" labelKey="needed_by"></Label>
                <div className="ux-rfi-calendar">
                    <Date
                        id="neededByDate"
                        model="rfiRequest.neededBy"
                        // className="mandatory_field"
                        // required
                        monthDropdown
                        yearDropdown></Date>
                </div>
            </Group>

            <Selectbox
                model="rfiRequest.offering"
                labelKey="offering"
                list={offeringList}
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                className="ux-w-100 pt-3"
            />

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Label labelKey="category"></Label>
                <div className="ux-rfi-grey-border">
                    <CheckboxGroup model="rfiRequest.category">
                        {categoryRefTable.map((cateegoryItem, index) => (
                            <Checkbox
                                id={'category-item-' + index}
                                text={cateegoryItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                value={cateegoryItem[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">
                        {programRefTable.map((programsItem, index) => (
                            <Checkbox
                                id={'program-item-' + index}
                                text={programsItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                value={programsItem[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;