Untitled
unknown
plain_text
a year ago
15 kB
5
Indexable
update the below code to filter the answer that are provided only by the state that was clicked and display the answer inplace of the sstate list(if no answer is provided by that state then keem that column empty).
also update the datacollection used for the dadaTable with the state/answer value so that it will rerender the data table and value of answer will get displayed.
therefore, on click of any state should display the answer provided by that state for all the respective questions, and if no response then keep them empty.
import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, DataTable } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState, Util } from '@d-lift/core';
import webService from '@/Services/WebService';
import _ from 'lodash';
const QuestionResponse = ({}) => {
const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');
const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
const [expandedCard, setExpandedCard] = useAppState('expandedCard', null);
const [selectedAnswers, setSelectedAnswers] = useAppState('selectedAnswers', '');
useEffect(() => {
getRfiCollection();
}, [selectedAnswers]);
const getRfiCollection = async () => {
try {
Lift.spinner.show();
//let response= await webService.fetchRfiCollection();
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: 'ALL',
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);
} 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 },
});
console.log('collectionData', collectionData);
console.log('formattedCollectionData', formattedCollectionData);
};
const renderResponse = (colData, rowData, index) => {
const currentAnswer = selectedAnswers[rowData.id];
return (
<div>
{currentAnswer === undefined ? (
rowData.answers?.map((answer, idx) => (
<React.Fragment key={answer.id}>
<a
href="#"
onClick={(e) => {
e.preventDefault();
setSelectedAnswers((prev) => ({
...prev,
[rowData.id]: answer.answer,
}));
console.log('inside setSelectedAnswers()');
}}>
{answer.state}
</a>
{idx < rowData.answers.length - 1 && ', '}
</React.Fragment>
))
) : (
<Para>{selectedAnswers[rowData.id]}</Para>
)}
</div>
);
};
const toggleCard = (index) => {
setExpandedCard(expandedCard === index ? null : index);
};
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">{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>
{' ' +
Util.getRefTableDescriptionByCode(
ConstantKeys.REF_TABLE_NAMES.PROGRAM,
rfiDetail.programs,
)}
<br />
<Para
labelKey="category"
className="ux-rfi-label-normal font-weight-bold"></Para>
{' ' +
Util.getRefTableDescriptionByCode(
ConstantKeys.REF_TABLE_NAMES.CATEGORY,
rfiDetail.category,
)}
</div>
) : null}
<DataTable
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}
</>
);
};
export default QuestionResponse;
Editor is loading...
Leave a Comment