Untitled

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;