Untitled
unknown
plain_text
a month ago
14 kB
1
Indexable
Never
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;
Leave a Comment