Untitled
unknown
plain_text
a month ago
16 kB
4
Indexable
Never
collectionData:{
"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": "CL",
"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": "CL",
"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": "CL",
"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"
},
{
"id": 93952,
"quesnId": 36007,
"answer": "",
"respondDt": "2024-07-30T12:24:43.623291",
"state": "CT"
}
]
}
],
"title": "MI RFI Created Title",
"description": "",
"reqDT": "2024-07-25T17:05:21.534463",
"state": "MI",
"programs": "ALL",
"category": "ALL",
"status": "CL",
"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": "CL",
"dueDT": "07-26-2024",
"offering": "EE"
}
]
},
Update the below code for fetchStateList() to filter states with the value of unique states from the collectionData. then set it to filteredStates to be used in the datatable.
in onPageLoadHandler filter the contacts list as well so that it has contacts only from states that are in collectionData and set it to contacts state.
Also remove the filter button and move the filterHandler function call from filter button to the onchange of state and rename the function accordingly.
value of contacts currently: [
{
"firstName": "Divya",
"lastName": "Nidhi",
"pocId": "dnidhi@deloitte.com",
"states": [
"TN"
],
"offerings": [
"EE"
]
},
{
"firstName": "Haley",
"lastName": "Stokes",
"pocId": "hstokes@deloitte.com",
"states": [
"ME"
],
"offerings": [
"EE"
]
},
{
"firstName": "Anil",
"lastName": "Dayanand",
"pocId": "adayanand@deloitte.com",
"states": [
"MI"
],
"offerings": [
"EE"
]
}]
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';
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 [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 = (collectionData) => {
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); //to set collection state name
renderAnswers(stateResp.state); //to set the response provided by selected state
} 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="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>
<Button
size="small"
className="ux-rfi-green-button float-right mr-2 mt-4"
labelKey="filter"
click={filterHandler}></Button>
</Card>
);
};
RespondingState.propTypes = {
renderAnswers: PropTypes.func.isRequired,
collectionData: PropTypes.object.isRequired,
};
export default RespondingState;
Leave a Comment