Untitled
unknown
plain_text
a month ago
4.3 kB
1
Indexable
Never
update the below code so that on state change, we filter the contacts and make a list of contacts for the selected state in the state dropdown(can be captured using event.target.value) then update the contacts datatable with the filtered contact list. then update the SelectedStateDesc with the slected state's desc. then call renderAnswers 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 RFIUtil from '@/Util/RFIUtil'; import _ from 'lodash'; import webService from '@/Services/AdminService'; import PropTypes from 'prop-types'; const RespondingState = ({ renderAnswers, collectionData, setSelectedStateDesc }) => { const [originalContacts, setOriginalContacts] = useAppState('originalContacts', undefined); const [stateResp, setStateResp] = useAppState('stateResp', { state: undefined }); const [contacts, setContacts] = useAppState('contacts', []); const [showContacts, setShowContacts] = useAppState('showContacts', false); useEffect(() => { onPageLoadHandler(); }, []); const onPageLoadHandler = async () => { try { Lift.spinner.show(); const response = await webService.fetchContacts(); if (response?.data && !_.isEmpty(response?.data)) { // filter the contacts which are from states present in collection data, or setOriginalContacts(); setContacts(); } } catch (error) { Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR); } finally { Lift.spinner.hide(); } }; const handleStateChange = () => { if (stateResp.state !== ConstantKeys.DEFAULT_OPTION.LIFT_default) { let filteredList = []; originalContacts.forEach((item) => { let state = item.state?.split(','); if ( state?.includes(filter.state) || !filter.state || filter.state === ConstantKeys.DEFAULT_OPTION.LIFT_default || filter.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(''); } 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" onChange={handleStateChange}></Selectbox> <Label labelKey="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, }; export default RespondingState;
Leave a Comment