Untitled

mail@pastecode.io avatar
unknown
plain_text
5 months ago
23 kB
1
Indexable
in the respondedstate component, the value of selectedStateDesc Which we added is not getting displayed in header of QuestionResponse component.

import React from 'react';
import { withPage, Lift, useAppState } from '@d-lift/core';
import BodySection from '@/Layout/BodySection';
import RightSection from '@/Layout/RightSection';
import QuestionResponse from './Components/QuestionResponse';
import RespondingState from './Components/RespondingState';
import './state-overview.scss';
import RFIUtil from '@/Util/RFIUtil';
import ConstantKeys from '@/Constants/ConstantKeys';
import {
    Page,
    Header,
    Button,
    Modal,
    Para,
    Textbox,
    Selectbox,
    RadioGroup,
    RadioButton,
} from '@d-lift/uxcomponents';

const StateOverview = ({ UXPage, config }) => {
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [showAnswer, setShowAnswer] = useAppState('showAnswer', undefined);
    const [showTable, setShowTable] = useAppState('showTable', true);
    const [selectedState, setSelectedState] = useAppState('selectedState', undefined);
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');

    const renderAnswers = (state) => {
        setSelectedState(state);
        setShowAnswer(true);
        setShowTable(false);
        setTimeout(() => {
            setShowTable(true);
        }, 100);
    };

    return (
        <Page ref-table-list="STATE">
            <div className="d-flex ux-rfi-mobile-layout">
                <BodySection>
                    <QuestionResponse
                        renderAnswers={renderAnswers}
                        showAnswer={showAnswer}
                        showTable={showTable}
                        selectedState={selectedState}
                        collectionData={collectionData}
                        setCollectionData={setCollectionData}></QuestionResponse>
                </BodySection>

                <RightSection>
                    <RespondingState
                        renderAnswers={renderAnswers}
                        selectedState={selectedState}
                        selectedStateDesc={selectedStateDesc}
                        setSelectedStateDesc={setSelectedStateDesc}></RespondingState>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'State Overview Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    StateOverview,
);




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,
    selectedStateDesc,
}) => {
    const [expandedCard, setExpandedCard] = useAppState('expandedCard', null);
    const [selectedAnswers, setSelectedAnswers] = useAppState('selectedAnswers', '');
    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 },
            });

            // let response = {
            //     catalogId: 551,
            //     title: 'dfsdf',
            //     description: 'gsdfgsdfgdsfg',
            //     rfiDetails: [
            //         {
            //             id: 23451,
            //             questionsList: [
            //                 {
            //                     rfiId: 23451,
            //                     id: 36003,
            //                     question: 'Question 1 for AK RFI for testing attention needed',
            //                     description: '',
            //                     answers: [
            //                         {
            //                             id: 93755,
            //                             quesnId: 36003,
            //                             answer: 'IL RESPONDED ',
            //                             respondDt: '2024-07-25T17:40:48.69381',
            //                             state: 'IL',
            //                         },
            //                         {
            //                             id: 93750,
            //                             quesnId: 36003,
            //                             answer: 'IL RESPONDED 2',
            //                             respondDt: '2024-07-25T17:40:48.69381',
            //                             state: 'AK',
            //                         },
            //                     ],
            //                 },
            //                 {
            //                     rfiId: 23451,
            //                     id: 36004,
            //                     question: 'Question 2 AK RFI for testing attention needed',
            //                     description: '',
            //                     answers: [
            //                         {
            //                             id: 93753,
            //                             quesnId: 36004,
            //                             answer: 'Responded as Michigan',
            //                             respondDt: '2024-07-25T15:50:54.130178',
            //                             state: 'MI',
            //                         },
            //                     ],
            //                 },
            //                 {
            //                     rfiId: 23451,
            //                     id: 36005,
            //                     question: 'Question 3 AK RFI for testing attention needed',
            //                     description: '',
            //                     answers: [
            //                         {
            //                             id: 93802,
            //                             quesnId: 36005,
            //                             answer: 'gdfgdsfg',
            //                             respondDt: '2024-07-26T11:42:54.20372',
            //                             state: 'NH',
            //                         },
            //                     ],
            //                 },
            //                 {
            //                     rfiId: 23451,
            //                     id: 36006,
            //                     question: 'Question 4 AK RFI for testing attention needed',
            //                     description: '',
            //                     answers: [
            //                         {
            //                             id: 93803,
            //                             quesnId: 36006,
            //                             answer: 'gsdfgsdfgsdfg',
            //                             respondDt: '2024-07-26T11:43:03.513999',
            //                             state: 'NV',
            //                         },
            //                     ],
            //                 },
            //             ],
            //             title: 'AK RFI for testing attention needed',
            //             description: 'Description for AK RFI for testing attention needed',
            //             reqDT: '2024-07-25T15:46:59.142912',
            //             state: 'AR',
            //             programs: 'SNAP,LIHEAP',
            //             category: 'ALL',
            //             status: 'OP',
            //             dueDT: '07-26-2024',
            //             offering: 'EE',
            //         },
            //         {
            //             id: 23501,
            //             questionsList: [
            //                 {
            //                     rfiId: 23501,
            //                     id: 36007,
            //                     question: 'Question MI',
            //                     description: '',
            //                     answers: [
            //                         {
            //                             id: 93754,
            //                             quesnId: 36007,
            //                             answer: 'IL RESPONDED ',
            //                             respondDt: '2024-07-25T17:39:23.427467',
            //                             state: 'IL',
            //                         },
            //                     ],
            //                 },
            //             ],
            //             title: 'MI RFI Created Title',
            //             description: '',
            //             reqDT: '2024-07-25T17:05:21.534463',
            //             state: 'MI',
            //             programs: 'ALL',
            //             category: 'ALL',
            //             status: 'OP',
            //             dueDT: '07-26-2024',
            //             offering: 'EE',
            //         },
            //         {
            //             id: 23551,
            //             questionsList: [
            //                 {
            //                     rfiId: 23551,
            //                     id: 36008,
            //                     question: 'QUES1',
            //                     description: '',
            //                 },
            //             ],
            //             title: 'IL RFI',
            //             description: '',
            //             reqDT: '2024-07-25T17:38:19.4079',
            //             state: 'IL',
            //             programs: 'ALL',
            //             category: 'ALL',
            //             status: 'OP',
            //             dueDT: '07-26-2024',
            //             offering: 'EE',
            //         },
            //     ],
            // };

            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 _ from 'lodash';
import webService from '@/Services/AdminService';
import PropTypes from 'prop-types';

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

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

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

            const response = await webService.fetchContacts();

            console.log('collectionData inside onPageLoadHandler', collectionData);

            if (response?.data && !_.isEmpty(response?.data)) {
                setOriginalContacts(response.data);
                setContacts(response.data);
            }
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleStateChange = (stateVal) => {
        console.log('State changed to:', stateVal);
        setStateResp({ state: stateVal });
        setSelectedStateAnswer(stateVal);

        if (stateVal !== ConstantKeys.DEFAULT_OPTION.LIFT_default) {
            const filteredList = originalContacts.filter((item) => {
                const states = item.state?.split(',');
                return (
                    states?.includes(stateVal) ||
                    !stateVal ||
                    stateVal === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    stateVal === ConstantKeys.REF_VALUE.ALL
                );
            });

            setContacts(filteredList);
            const selectedStateDescription = Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.STATE,
                stateVal,
            );
            setSelectedStateDesc(selectedStateDescription); // to set collection state name
            console.log(selectedStateDesc);
            renderAnswers(stateVal); // 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"
                change={(event) => handleStateChange(event.target.value)}></Selectbox>
            <Label showIf={showContacts}>{selectedStateAnswer} &nbsp Contacts</Label>
            <div className="ux-rfi-contact-table">
                <DataTable
                    showIf={showContacts}
                    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,
    setSelectedStateDesc: PropTypes.func.isRequired,
};

export default RespondingState;


Leave a Comment