Untitled
unknown
plain_text
a year ago
16 kB
6
Indexable
Update the below code to display the each object in the response array as separate cards. Also add a toggle function to show the div on click of preicon in header, and hide it on other click(the toggle function should set value to true if false , and vice versa)
import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, AccordianElement, Accordian, DataTable, Row } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState, Util } from '@d-lift/core';
import webService from '@/Services/WebService';
const QuestionResponse = ({}) => {
const [selectedStateDesc] = useAppState('selectedStateDesc', '');
const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
const [originalCollectionData, setOriginalCollectionData] = useAppState(
'originalCollectionData',
undefined,
);
useEffect(() => {
getRfiCollection();
}, []);
const getRfiCollection = async () => {
try {
Lift.spinner.show();
//const response = await webService.fetchRfiCollection();
let response = {
catalogId: 551,
title: 'dfsdf',
description: 'gsdfgsdfgdsfg',
rfiDetails: [
{
id: 23601,
questionsList: [
{
rfiId: 23601,
id: 36052,
question: 'q1',
description: 'd1',
},
],
title: 'rfi',
description: 'desc',
reqDT: '2024-07-26T11:29:18.130079',
state: 'IN',
programs: 'ALL',
category: 'ALL',
status: 'OP',
dueDT: '08-10-2024',
offering: 'EE',
},
{
id: 23651,
questionsList: [
{
rfiId: 23651,
id: 36053,
question: 'ww',
description: '',
},
],
title: 'rfbb',
description: ' bb',
reqDT: '2024-07-26T11:40:24.512873',
state: 'CT',
programs: 'ALL',
category: 'ALL',
status: 'OP',
dueDT: '08-10-2024',
offering: 'EE',
},
{
id: 20451,
questionsList: [
{
rfiId: 20451,
id: 27151,
question: 'fsdgd',
description: '',
},
],
title: 'fdsaf',
description: '',
reqDT: '2024-06-28T13:50:50.481233',
state: 'NY',
programs: 'ALL',
category: 'ALL',
status: 'CL',
dueDT: '06-28-2024',
offering: 'EE',
},
{
id: 15751,
questionsList: [
{
rfiId: 15751,
id: 19151,
question: 'nvmn',
description: '',
},
],
title: 'vmnv',
description: '',
reqDT: '2024-06-13T21:42:22.562716',
state: 'NM',
programs: 'ALL',
category: 'ALL',
status: 'CL',
dueDT: '06-13-2024',
offering: 'EE',
},
{
id: 15801,
questionsList: [
{
rfiId: 15801,
id: 19201,
question: 'dfg',
description: 'gfd',
},
],
title: 'abc',
description: 'fgdg',
reqDT: '2024-06-14T10:25:56.403095',
state: 'AL',
programs: 'ALL',
category: 'ALL',
status: 'CL',
dueDT: '06-14-2024',
offering: 'EE',
},
{
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',
},
],
},
{
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',
},
],
};
setCollectionData(response);
setOriginalCollectionData(response);
} catch (error) {
Lift.Application.Notification.error(
ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
);
} finally {
Lift.spinner.hide();
}
};
const getQuestion = (colData, rowData, index) => {
// how to aaaaaaaaaaaaaaaa
};
return (
<>
{collectionData ? (
<>
<div className="ux-rfi-green-bg">
<Header
className="pt-3 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>
<div className="ux-rfi-light-green-border mt-3">
<div>
{collectionData.rfiDetails.map((rfiDetail, index) => (
<div className="main-component">
<Header header-size="4" preIconClass="fa fa-angle-right">
{rfiDetail.title}
</Header>
{/* // this div should only get displayed on click of down-arrow */}
<div id="hidden-component">
<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>
</div>
<DataTable
col-data-keys="question,response"
col-default-headers="Question,Response"
customContent={{
Question: getQuestion,
//Response: getResponse,
}}
datacollection={rfiDetail.questionsList}
keyField="question"
hover="false"
bordered="true"
striped="false"
emptymsg-key="no_records_found"
className="va-contacts-table"
/>
</div>
))}
</div>
</div>
</>
) : (
<></>
)}
</>
);
};
export default QuestionResponse;
Editor is loading...
Leave a Comment