Untitled
unknown
plain_text
a year ago
22 kB
7
Indexable
update the code for the below 3 files so that we are able to use the renderAnswers function call in the RespondingState component.
import React, { useEffect } from 'react';
import { withPage, Lift, useAppState, AppContext } from '@d-lift/core';
import {
Page,
Header,
Button,
Modal,
Para,
Textbox,
Selectbox,
RadioGroup,
RadioButton,
} from '@d-lift/uxcomponents';
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';
const stateOverview = ({ UXPage, config }) => {
return (
<Page ref-table-list="STATE">
<div className="d-flex ux-rfi-mobile-layout">
<BodySection>
<QuestionResponse></QuestionResponse>
</BodySection>
<RightSection>
<RespondingState></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 { 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', '');
const [showAnswer, setShowAnswer] = useAppState('showAnswer', undefined);
const [showTable, setShowTable] = useAppState('showTable', true);
const [selectedState, setSelectedState] = useAppState('selectedState', undefined);
useEffect(() => {
getRfiCollection();
}, []);
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) => {
return rowData.answers?.map((answer) =>
showAnswer !== true ? (
<div onClick={() => renderAnswers(answer.state)}>{answer.state}</div>
) : answer.state === selectedState ? (
<div>{answer.answer}</div>
) : (
<></>
),
);
};
const renderAnswers = (state) => {
setSelectedState(state);
setShowAnswer(true);
setShowTable(false);
setTimeout(() => {
setShowTable(true);
}, 100);
};
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
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}
</>
);
};
export default QuestionResponse;
import React, { useEffect } from 'react';
import { Selectbox, Label, DataTable, Button, 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';
const RespondingState = ({}) => {
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 [filteredStates, setFilteredStates] = useAppState('filteredStates', []);
const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');
const refTableContent = RFIUtil.getRefTableDataByCacheName(
ConstantKeys.REF_TABLE.REF_TABLES_CACHE,
);
useEffect(() => {
onPageLoadHandler();
}, []);
const onPageLoadHandler = async () => {
try {
Lift.spinner.show();
const response = await webService.fetchContacts();
if (response?.data && !_.isEmpty(response?.data)) {
fetchStateList(response?.data);
let contactList = response.data.map((item) => {
return {
email: item.pocId,
name: item.firstName + ' ' + item.lastName,
};
});
contactList = contactList.sort((a, b) => a.email.localeCompare(b.email));
setOriginalContacts(contactList);
setContacts(contactList);
}
setShowContacts(true);
} catch (error) {
Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
} finally {
Lift.spinner.hide();
}
};
const fetchStateList = (contactList) => {
const distinctStatesValues = [...new Set(contactList.flatMap((item) => item.states))];
if (refTableContent) {
const distinctStatesList = refTableContent.STATE?.filter((state) =>
distinctStatesValues?.includes(state.CODE),
);
if (distinctStatesValues?.includes(ConstantKeys.REF_VALUE.ALL)) {
distinctStatesList.push({
CODE: ConstantKeys.REF_VALUE.ALL,
DESCRIPTION: ConstantKeys.CONTEXT_KEYS.ALL_LOWERCASE,
});
}
setFilteredStates(
distinctStatesList.sort((a, b) => a.DESCRIPTION.localeCompare(b.DESCRIPTION)),
);
}
};
const filterHandler = () => {
setShowContacts(false);
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);
//renderAnswers(stateResp.state); will need this to filter the table for respective states reponse
} else {
setContacts(originalContacts);
setSelectedStateDesc('');
}
setTimeout(() => {
setShowContacts(true);
}, 100);
};
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"></Selectbox>
<Label labelKey="contacts"></Label>
<div className="">
<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>
<Button
size="small"
className="ux-rfi-green-button float-right mr-2 mt-4"
labelKey="filter"
click={filterHandler}></Button>
</Card>
);
};
export default RespondingState;
Editor is loading...
Leave a Comment