Untitled
unknown
plain_text
9 months ago
7.8 kB
4
Indexable
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); } 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> <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 w-25" pagination="default" pagination-size-per-page="5" /> <Button size="small" className="ux-rfi-green-button float-right mr-2 mt-4" labelKey="filter" click={filterHandler}></Button> </Card> ); }; export default RespondingState; import ConstantKeys from '@/Constants/ConstantKeys'; import { Para, Selectbox, Header, AccordianElement, Label, Accordian, DataTable, Row, } from '@d-lift/uxcomponents'; import React from 'react'; import { useAppState } from '@d-lift/core'; const QuestionResponse = ({}) => { const [selectedStateDesc] = useAppState('selectedStateDesc', ''); return ( <> <div className="ux-rfi-green-bg"> <Header className="pt-3 ux-rfi-white-header" size="1"> {selectedStateDesc || 'Virginia'} </Header> <Header header-size="4" className="pt-1 ux-rfi-white-header" labelKey="state_summary_header"></Header> <Para className="ux-rfi-white-font"> This is the description text for this RFI Collection. Do not display if empty, null, or blank. </Para> </div> <div className="ux-rfi-light-green-border mt-3"> <Accordian id="outer-accordian-2"> <AccordianElement labelKey="requirements_subHeader" className="font-weight-bold"> <Row className="col-9 pl-4"> <Para labelKey="offering" className="ux-rfi-label-normal font-weight-bold "></Para> <br /> <Para labelKey="program" className="ux-rfi-label-normal font-weight-bold"></Para> <br /> <Para labelKey="category" className="ux-rfi-label-normal font-weight-bold"></Para> </Row> <DataTable col-data-keys="question,response" col-default-headers="Question,Response" datacollection="contactList" keyField="question" hover="false" bordered="true" striped="false" emptymsg-key="no_records_found" className="va-contacts-table" /> </AccordianElement> </Accordian> </div> </> ); }; export default QuestionResponse;
Editor is loading...
Leave a Comment