Untitled
unknown
plain_text
a month ago
23 kB
1
Indexable
Never
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}   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