Untitled
unknown
plain_text
a month ago
4.4 kB
2
Indexable
Never
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 _ from 'lodash'; import webService from '@/Services/AdminService'; import PropTypes from 'prop-types'; const RespondingState = ({ renderAnswers, collectionData, setSelectedStateDesc }) => { const [originalContacts, setOriginalContacts] = useAppState('originalContacts', []); 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)) { // Extract unique states from collectionData const distinctStates = [ ...new Set(collectionData.rfiDetails.map((item) => item.state)), ]; // Filter contacts based on the states present in collectionData const filteredContacts = response.data.filter((contact) => distinctStates.includes(contact.state) ); setOriginalContacts(filteredContacts); setContacts(filteredContacts); } } catch (error) { Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR); } finally { Lift.spinner.hide(); } }; const handleStateChange = (event) => { const selectedState = event.target.value; setStateResp({ state: selectedState }); if (selectedState !== ConstantKeys.DEFAULT_OPTION.LIFT_default) { const filteredList = originalContacts.filter((item) => { const states = item.state?.split(','); return ( states?.includes(selectedState) || !selectedState || selectedState === ConstantKeys.DEFAULT_OPTION.LIFT_default || selectedState === ConstantKeys.REF_VALUE.ALL ); }); setContacts(filteredList); const selectedStateDescription = Util.getRefTableDescriptionByCode( ConstantKeys.REF_TABLE_NAMES.STATE, selectedState, ); setSelectedStateDesc(selectedStateDescription); // to set collection state name renderAnswers(selectedState); // 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, setSelectedStateDesc: PropTypes.func.isRequired, }; export default RespondingState;
Leave a Comment