Untitled

update the below code so that on change of requested as field value reset the vaue of offering and program to default value



import ConstantKeys from '@/Constants/ConstantKeys';
import rfiUtil from '@/Util/RFIUtil';
import { AppContext } from '@d-lift/core';
import { Checkbox, CheckboxGroup, Date, Group, Label, Selectbox } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';

const RFIFilters = ({ rfiRequest, updateRFIRequest }) => {
    const [filteredStates, setFilteredStates] = useState([]);
    const [filteredOfferings, setFilteredOfferings] = useState([]);
    const [filteredCategory, setFilteredCategory] = useState([]);
    const [filteredPrograms, setFilteredPrograms] = useState([]);

    const refTableContent = rfiUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES,
    );

    useEffect(() => {
        const stateList = rfiUtil.getAuthorizedStateList();
        if (refTableContent) {
            const filteredStateValues = refTableContent.STATE.filter((state) =>
                stateList.includes(state.CODE),
            );
            setFilteredStates(filteredStateValues);
        }
    }, []);

    const filterAuthOfferings = (event) => {
        const selectedState = event.target.value;

        let filteredOfferingData = [];
        if (!rfiUtil.isAdmin()) {
            const privilegeData = AppContext.security.getProfile().profile;
            const matchedPrivileagedata = privilegeData.find(
                (detail) => detail.state === selectedState,
            );
            filteredOfferingData = refTableContent.OFFERING.filter((offering) =>
                matchedPrivileagedata.offering.includes(offering.CODE),
            );
        } else {
            filteredOfferingData = refTableContent.OFFERING;
        }
        if (filteredOfferingData) {
            setFilteredOfferings(filteredOfferingData);
        }

        //on change of requested as reset the vaue of offering and program to default value
        setFilteredPrograms();
        setFilteredCategory();
    };

    const filterProgramAndCategory = (event) => {
        const selectedOffering = event.target.value;

        const filteredProg = rfiUtil.getTableDataForOffering(
            ConstantKeys.REF_TABLE_NAMES.PROGRAM,
            selectedOffering,
        );
        setFilteredPrograms(filteredProg);

        const filteredCategories = rfiUtil.getTableDataForOffering(
            ConstantKeys.REF_TABLE_NAMES.CATEGORY,
            selectedOffering,
        );
        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) => filterAuthOfferings(event)}></Selectbox>

            <div className="ux-rfi-calendar">
                <Date
                    id="neededByDate"
                    model="rfiRequest.neededBy"
                    className="pt-4"
                    labelKey="needed_by"
                    minDate="today"
                    monthDropdown
                    yearDropdown
                    required></Date>
            </div>

            {filteredOfferings && (
                <Selectbox
                    id="offering"
                    labelKey="offering"
                    model="rfiRequest.offering"
                    className="ux-w-100 pt-3"
                    defaultOption="true"
                    list={filteredOfferings}
                    optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                    optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                    change={(event) => filterProgramAndCategory(event)}
                    disabled={!AppContext.model.getValue('rfiRequest.requestedBy')}
                    required></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]}
                                //disabled={!AppContext.model.getValue('rfiRequest.offering')}
                                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]}
                                //disabled={!AppContext.model.getValue('rfiRequest.offering')}
                                change={(event) => handleProgramChange(event)}></Checkbox>
                        ))}
                    </CheckboxGroup>
                </div>
            </div>
        </>
    );
};

RFIFilters.propTypes = {
    rfiRequest: PropTypes.object.isRequired,
    updateRFIRequest: PropTypes.func.isRequired,
};

export default RFIFilters;