Untitled

update the code for onPageLoadHandler function in respondingStates, so that it will only display the contacts for states which are present in the collectionData or the state list created from it -filteredStates. then update that contact list to contacts and originalContacts. you can remove the implementation for originalContacts if it's not gwtting used anywhere.





import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, DataTable, Button } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Lift, useAppState, Util } from '@d-lift/core';
import catalogService from '@/Services/CatalogService';
import _ from 'lodash';
import RFIUtil from '@/Util/RFIUtil';

const QuestionResponse = ({
    collectionData,
    setCollectionData,
    renderAnswers,
    showAnswer,
    showTable,
    selectedState,
}) => {
    const [expandedCard, setExpandedCard] = useAppState('expandedCard', null);
    const [selectedAnswers, setSelectedAnswers] = useAppState('selectedAnswers', '');
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');
    const [filteredStates, setFilteredStates] = useAppState('filteredStates', []);

    useEffect(() => {
        getRfiCollection();
    }, []);

    const refTableContent = RFIUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.REF_TABLES_CACHE,
    );

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();

            let response = await catalogService.fetchRfiCollection({
                requestBody: { catalogId: 551 },
            });

          
            processCollectionData(response);
            fetchStateList(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    const processCollectionData = (responseData) => {
        const formattedCollectionData = [];
        if (!_.isEmpty(responseData) && !_.isEmpty(responseData.rfiDetails)) {
            responseData.rfiDetails.forEach((data) => {
                let table = [];
                table = data.questionsList?.map((question) => ({
                    id: question?.id,
                    question: question?.question,
                    answers: question?.answers,
                }));

                formattedCollectionData.push(table);
            });
        }

        setCollectionData({
            ...responseData,
            ...{ formattedCollectionData: formattedCollectionData },
        });
    };

    const fetchStateList = (responseData) => {
        // Extract unique states from responseData
        const distinctStatesValues = [
            ...new Set(responseData.rfiDetails.map((item) => item.state)),
        ];

        // If refTableContent exists, filter the states
        if (refTableContent) {
            const distinctStatesList = refTableContent.STATE?.filter((state) =>
                distinctStatesValues?.includes(state.CODE),
            );

            // Check if 'ALL' is included and add it to the list if necessary
            if (distinctStatesValues?.includes(ConstantKeys.REF_VALUE.ALL)) {
                distinctStatesList.push({
                    CODE: ConstantKeys.REF_VALUE.ALL,
                    DESCRIPTION: ConstantKeys.CONTEXT_KEYS.ALL_LOWERCASE,
                });
            }

            // Set the filtered states sorted by description
            setFilteredStates(
                distinctStatesList.sort((a, b) => a.DESCRIPTION.localeCompare(b.DESCRIPTION)),
            );
        }
    };

    const renderResponse = (colData, rowData, index) => {
        return rowData.answers?.map((answer, idx) =>
            showAnswer !== true ? (
                <a className="ux-rfi-state-link" onClick={() => renderAnswers(answer.state)}>
                    {answer.state}
                    {idx < rowData.answers.length - 1 && ', '}
                </a>
            ) : answer.state === selectedState ? (
                <div>{answer.answer}</div>
            ) : (
                <></>
            ),
        );
    };

    const toggleCard = (index) => {
        setExpandedCard(expandedCard === index ? null : index);
    };

    const renderProgramCategoryValues = (values, refTableName) => {
        if (values) {
            return values
                .split(',')
                .map((value) => Util.getRefTableDescriptionByCode(refTableName, value))
                .join(', ');
        }
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header
                            className="pt-1 ux-rfi-white-header"
                            size="1"
                            showIf={selectedStateDesc}>
                            {selectedStateDesc}
                        </Header>
                        <Header header-size="4" className="pt-1 ux-rfi-white-header">
                            {collectionData.title}
                        </Header>
                        <Para className="ux-rfi-white-font" showIf={collectionData.description}>
                            {collectionData.description}
                        </Para>
                    </div>
                    {collectionData.rfiDetails.map((rfiDetail, index) => (
                        <div key={index} className="ux-rfi-light-green-border mt-3">
                            <div>
                                <div className="main-component">
                                    <div onClick={() => toggleCard(index)} className="p-1">
                                        <Header
                                            header-size="4"
                                            preIconClass={`${
                                                expandedCard == index
                                                    ? 'fa fa-angle-up'
                                                    : 'fa fa-angle-down'
                                            }`}>
                                            {rfiDetail.title}
                                        </Header>
                                    </div>

                                    {expandedCard === index ? (
                                        <div className="col-9 pb-3">
                                            <Para
                                                labelKey="offering"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                Util.getRefTableDescriptionByCode(
                                                    ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                                    rfiDetail.offering,
                                                )}
                                            <br />
                                            <Para
                                                labelKey="program"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                renderProgramCategoryValues(
                                                    rfiDetail.programs,
                                                    ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                                )}
                                            <br />
                                            <Para
                                                labelKey="category"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                renderProgramCategoryValues(
                                                    rfiDetail.category,
                                                    ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                                )}
                                        </div>
                                    ) : null}

                                    <DataTable
                                        showIf={showTable}
                                        col-data-keys="question,response"
                                        col-default-headers="Question,Response"
                                        customContent={{
                                            Response: renderResponse,
                                        }}
                                        datacollection={
                                            'collectionData.formattedCollectionData[' + index + ']'
                                        }
                                        keyField="id"
                                        hover="false"
                                        bordered="true"
                                        striped="false"
                                        emptymsg-key="no_records_found"
                                        className="va-contacts-table"
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </>
            ) : null}
        </>
    );
};

QuestionResponse.propTypes = {
    renderAnswers: PropTypes.func.isRequired,
    showTable: PropTypes.bool.isRequired,
    showTable: PropTypes.bool.isRequired,
};

export default QuestionResponse;






import React, { useEffect } from 'react';
import { Selectbox, Label, DataTable, Card } from '@d-lift/uxcomponents';
import { Lift, useAppState, Util } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';
import _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

const RespondingState = ({ renderAnswers, collectionData }) => {
    const [originalContacts, setOriginalContacts] = useAppState('originalContacts', undefined);
    const [stateResp, setStateResp] = useAppState('stateResp', { state: undefined });
    const [contacts, setContacts] = useAppState('contacts', []);
    const [showContacts, setShowContacts] = useAppState('showContacts', false);
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');

    useEffect(() => {
        onPageLoadHandler();
    }, []);

    const onPageLoadHandler = async () => {
        try {
            Lift.spinner.show();

            const response = await webService.fetchContacts();

            if (response?.data && !_.isEmpty(response?.data)) {
                // filter the contacts which are from states present in collection data, or
                setOriginalContacts();
                setContacts();
            }
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleStateChange = () => {
        if (
            !_.isEmpty(originalContacts) &&
            stateResp.state !== ConstantKeys.DEFAULT_OPTION.LIFT_default
        ) {
            let filteredList = [];
            originalContacts.forEach((item) => {
                let state = item.state?.split(',');
                if (
                    state?.includes(stateResp.state) ||
                    !stateResp.state ||
                    stateResp.state === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    stateResp.state === ConstantKeys.REF_VALUE.ALL
                ) {
                    filteredList.push(item);
                }
            });
            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                stateResp.state,
            );
            setSelectedStateDesc(selectedStateDescription); //to set collection state name
            renderAnswers(stateResp.state); //to set the response provided by selected state
        } else {
            setContacts(originalContacts);
            setSelectedStateDesc('');
        }
        setShowContacts(true);
    };

    return (
        <Card className="mt-3 w-100 ux-rfi-grey-bg">
            <Selectbox
                id="state"
                labelKey="state"
                list="filteredStates"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                model="stateResp.state"
                className="w-100"
                defaultOptionLabelKey="select_state"
                defaultOption="true"
                onChange={handleStateChange}></Selectbox>
            <Label labelKey="contacts"></Label>
            <div className="table-add">
                <DataTable
                    col-data-keys="email,name"
                    col-default-headers="Email,Name"
                    datacollection="contacts"
                    keyField="email"
                    hover="false"
                    striped={false}
                    emptymsg-key="no_records_found"
                    className="va-contacts-table"
                    pagination="default"
                    pagination-size-per-page="5"
                />
            </div>
        </Card>
    );
};

RespondingState.propTypes = {
    renderAnswers: PropTypes.func.isRequired,
    collectionData: PropTypes.object.isRequired,
};

export default RespondingState;