Untitled
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}   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