Untitled

update the below code so as to rfiObj sent from searchrfiform is available and not undefined in the RFIResponse screen.

import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { AppContext, Lift, useAppState, Util } from '@d-lift/core';
import {
    Button,
    Checkbox,
    CheckboxGroup,
    DataTable,
    Group,
    Header,
    Label,
    NavLink,
    Textbox,
    UX,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import '../search.scss';

const SearchRFIForm = ({ searchRFI, updateSearchRFI, filteredPrograms, filteredCategory }) => {
    const [RFIResultList, setRFIResultList] = useAppState('RFIResultList', []);
    const [showAdvanceSearchContent, setShowAdvanceSearchContent] = useAppState(
        'showAdvanceSearchContent',
        false,
    );
    const [searchCompleted, setSearchCompleted] = useAppState('searchCompleted', false);

    const expandAdvanceSearch = () => {
        setShowAdvanceSearchContent(!showAdvanceSearchContent);
    };

    const getTitleLink = (colData, rowData, index) => {
        let StateObj = {
            model: {
                rfi: {
                    id: 1,
                    description: 'rfi from search page',
                },
            },
        };
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response" stateObj={StateObj}>
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getProgramDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData);
    };

    const getCategoryDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, colData);
    };

    const getOfferingDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.OFFERING, colData);
    };

    const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData);
    };

    const handleSearchRFI = async () => {
        if (AppContext.pagedetails.getPageContext().validate({ model: 'searchRFI' }).isError) {
            return;
        }
        try {
            Lift.spinner.show();

            const searchResults = await webService.searchRFIRequest({
                requestBody: searchRFI,
            });

            if (searchResults) {
                setSearchCompleted(true);
            }
            searchResults && searchResults.length > 0
                ? setRFIResultList(searchResults)
                : setRFIResultList([]);
        } catch (error) {
            Lift.Application.Notification.error('Failed to complete the search');
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleCategoryChange = (event) => {
        const selectedCategory = event.target.value;
        let updatedCategory = [...searchRFI.category];

        if (selectedCategory === ConstantKeys.CONTEXT_KEYS.All) {
            updatedCategory = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (updatedCategory.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            updatedCategory = updatedCategory.filter(
                (item) => item !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }

        const newList = { ...searchRFI, category: updatedCategory };
        updateSearchRFI(newList);
    };

    const handleProgramChange = (event) => {
        const value = event.target.value;
        let selectedPrograms = [...searchRFI.programs];

        if (value === ConstantKeys.CONTEXT_KEYS.All) {
            selectedPrograms = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (selectedPrograms.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            selectedPrograms = selectedPrograms.filter(
                (program) => program !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }
        const newList = { ...searchRFI, programs: selectedPrograms };
        updateSearchRFI(newList);
    };

    return (
        <div className="pb-5">
            <Header className="pt-3 ux-rfi-font-header" size="2" labelKey="search"></Header>
            <Group width="9,2">
                <Textbox
                    name="question"
                    className="w-100 ux-rfi-search-bar"
                    model="searchRFI.search"
                    appendIcon="search"
                    placeholder="Search"></Textbox>
                <Button
                    id="submit-btn"
                    className="ux-rfi-green-button mt-4"
                    click={handleSearchRFI}
                    labelKey="search_btn"></Button>
            </Group>

            <Button
                header-size={6}
                postIconClass="fa fa-angle-right"
                className="col-12 text-center mt-1 ux-rfi-search-btn"
                labelKey="advanced_search"
                click={expandAdvanceSearch}></Button>

            {showAdvanceSearchContent && (
                <div>
                    <div className="ux-rfi-grey-border w-100 mt-3">
                        <Label labelKey="category" className="mt-2 ux-rfi-label-normal"></Label>
                        <div className="ux-rfi-grey-border mt-2">
                            <CheckboxGroup
                                model="searchRFI.category"
                                className="ux-rfi-checkbox-d-flex mt-3">
                                {filteredCategory.map((categoryItem, index) => (
                                    <Checkbox
                                        key={index}
                                        id={'category-item-' + index}
                                        text={categoryItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                        value={categoryItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                        change={(event) => handleCategoryChange(event)}></Checkbox>
                                ))}
                            </CheckboxGroup>
                        </div>
                    </div>

                    <div className="ux-rfi-grey-border w-100 mt-4 pt-3 mb-4">
                        <Label className="ux-rfi-label-normal mt-2" labelKey="program"></Label>
                        <div className="ux-rfi-grey-border mt-2">
                            <CheckboxGroup
                                model="searchRFI.programs"
                                className="ux-rfi-checkbox-d-flex mt-3">
                                {filteredPrograms.map((programItem, index) => (
                                    <Checkbox
                                        key={index}
                                        id={'program-item-' + index}
                                        text={programItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                        value={programItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                        change={(event) => handleProgramChange(event)}></Checkbox>
                                ))}
                            </CheckboxGroup>
                        </div>
                    </div>
                </div>
            )}

            <div className="mt-2">
                <DataTable
                    col-data-keys="title,programs,category,offering,state"
                    col-default-headers="Title,Program,Category,Offering,State"
                    datacollection="RFIResultList"
                    customContent={{
                        Title: getTitleLink,
                        Program: getProgramDsc,
                        Category: getCategoryDsc,
                        Offering: getOfferingDsc,
                        State: getStateDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    showIf={searchCompleted}
                />
            </div>
        </div>
    );
};

SearchRFIForm.propTypes = {
    searchRFI: PropTypes.object.isRequired,
    updateSearchRFI: PropTypes.func.isRequired,
};

export default SearchRFIForm;
import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { AppContext, Lift, useAppState, Util } from '@d-lift/core';
import {
    Button,
    Checkbox,
    CheckboxGroup,
    DataTable,
    Group,
    Header,
    Label,
    NavLink,
    Textbox,
    UX,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import '../search.scss';

const SearchRFIForm = ({ searchRFI, updateSearchRFI, filteredPrograms, filteredCategory }) => {
    const [RFIResultList, setRFIResultList] = useAppState('RFIResultList', []);
    const [showAdvanceSearchContent, setShowAdvanceSearchContent] = useAppState(
        'showAdvanceSearchContent',
        false,
    );
    const [searchCompleted, setSearchCompleted] = useAppState('searchCompleted', false);

    const expandAdvanceSearch = () => {
        setShowAdvanceSearchContent(!showAdvanceSearchContent);
    };

    const getTitleLink = (colData, rowData, index) => {
        let StateObj = {
            model: {
                rfi: {
                    id: 1,
                    description: 'rfi from search page',
                },
            },
        };
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response" stateObj={StateObj}>
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getProgramDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData);
    };

    const getCategoryDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, colData);
    };

    const getOfferingDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.OFFERING, colData);
    };

    const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData);
    };

    const handleSearchRFI = async () => {
        if (AppContext.pagedetails.getPageContext().validate({ model: 'searchRFI' }).isError) {
            return;
        }
        try {
            Lift.spinner.show();

            const searchResults = await webService.searchRFIRequest({
                requestBody: searchRFI,
            });

            if (searchResults) {
                setSearchCompleted(true);
            }
            searchResults && searchResults.length > 0
                ? setRFIResultList(searchResults)
                : setRFIResultList([]);
        } catch (error) {
            Lift.Application.Notification.error('Failed to complete the search');
        } finally {
            Lift.spinner.hide();
        }
    };

    const handleCategoryChange = (event) => {
        const selectedCategory = event.target.value;
        let updatedCategory = [...searchRFI.category];

        if (selectedCategory === ConstantKeys.CONTEXT_KEYS.All) {
            updatedCategory = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (updatedCategory.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            updatedCategory = updatedCategory.filter(
                (item) => item !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }

        const newList = { ...searchRFI, category: updatedCategory };
        updateSearchRFI(newList);
    };

    const handleProgramChange = (event) => {
        const value = event.target.value;
        let selectedPrograms = [...searchRFI.programs];

        if (value === ConstantKeys.CONTEXT_KEYS.All) {
            selectedPrograms = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (selectedPrograms.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            selectedPrograms = selectedPrograms.filter(
                (program) => program !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }
        const newList = { ...searchRFI, programs: selectedPrograms };
        updateSearchRFI(newList);
    };

    return (
        <div className="pb-5">
            <Header className="pt-3 ux-rfi-font-header" size="2" labelKey="search"></Header>
            <Group width="9,2">
                <Textbox
                    name="question"
                    className="w-100 ux-rfi-search-bar"
                    model="searchRFI.search"
                    appendIcon="search"
                    placeholder="Search"></Textbox>
                <Button
                    id="submit-btn"
                    className="ux-rfi-green-button mt-4"
                    click={handleSearchRFI}
                    labelKey="search_btn"></Button>
            </Group>

            <Button
                header-size={6}
                postIconClass="fa fa-angle-right"
                className="col-12 text-center mt-1 ux-rfi-search-btn"
                labelKey="advanced_search"
                click={expandAdvanceSearch}></Button>

            {showAdvanceSearchContent && (
                <div>
                    <div className="ux-rfi-grey-border w-100 mt-3">
                        <Label labelKey="category" className="mt-2 ux-rfi-label-normal"></Label>
                        <div className="ux-rfi-grey-border mt-2">
                            <CheckboxGroup
                                model="searchRFI.category"
                                className="ux-rfi-checkbox-d-flex mt-3">
                                {filteredCategory.map((categoryItem, index) => (
                                    <Checkbox
                                        key={index}
                                        id={'category-item-' + index}
                                        text={categoryItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                        value={categoryItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                        change={(event) => handleCategoryChange(event)}></Checkbox>
                                ))}
                            </CheckboxGroup>
                        </div>
                    </div>

                    <div className="ux-rfi-grey-border w-100 mt-4 pt-3 mb-4">
                        <Label className="ux-rfi-label-normal mt-2" labelKey="program"></Label>
                        <div className="ux-rfi-grey-border mt-2">
                            <CheckboxGroup
                                model="searchRFI.programs"
                                className="ux-rfi-checkbox-d-flex mt-3">
                                {filteredPrograms.map((programItem, index) => (
                                    <Checkbox
                                        key={index}
                                        id={'program-item-' + index}
                                        text={programItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]}
                                        value={programItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                        change={(event) => handleProgramChange(event)}></Checkbox>
                                ))}
                            </CheckboxGroup>
                        </div>
                    </div>
                </div>
            )}

            <div className="mt-2">
                <DataTable
                    col-data-keys="title,programs,category,offering,state"
                    col-default-headers="Title,Program,Category,Offering,State"
                    datacollection="RFIResultList"
                    customContent={{
                        Title: getTitleLink,
                        Program: getProgramDsc,
                        Category: getCategoryDsc,
                        Offering: getOfferingDsc,
                        State: getStateDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    showIf={searchCompleted}
                />
            </div>
        </div>
    );
};

SearchRFIForm.propTypes = {
    searchRFI: PropTypes.object.isRequired,
    updateSearchRFI: PropTypes.func.isRequired,
};

export default SearchRFIForm;





import React, { useState, useEffect } from 'react';
import { withPage, Lift, useAppState } from '@d-lift/core';
import BodySection from '@/Layout/BodySection';
import webService from '@/Services/WebService';
import Questions from './Components/Questions';
import { Button, Label, Column, Page, Header, Row, Para } from '@d-lift/uxcomponents';
import './response.scss';

const RFIResponse = () => {
    const [responseData, setResponseData] = useAppState('responseData', []);
    const [rfiObj, setRfiObj] = useAppState('rfiObj');

    useEffect(() => {
        loadResponseData(rfiObj);

        console.log('rfiObj passed from search screen', rfiObj);
        console.log('page loaded');
    }, []);

    const loadResponseData = async (rfiObj) => {
        try {
            Lift.spinner.show();

            const searchRFIRequest = { rfiId: rfiObj?.id, description: rfiObj?.description };
            console.log('searchRFIRequest',searchRFIRequest);
            const data = await webService.getFullDetails({
                requestBody: searchRFIRequest,
            });
            if (data) {
                const formattedData = data.map((item) => ({
                    ...item,
                    questionsList: item.questionsList.map((question) => ({
                        ...question,
                        answers: question.answers.map((answer) => ({
                            ...answer,
                            respondDt: new Date(answer.respondDt).toLocaleDateString('en-US'),
                        })),
                    })),
                }));
                setResponseData(formattedData);
                Lift.Application.Notification.success('Response Data loaded successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <Page>
            <BodySection>
                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Header
                        className="pt-3 ux-rfi-font-header"
                        size="2"
                        labelKey="RFI_Title"></Header>
                    <Row>
                        <Column className="col-9">
                            <Row className="d-flex flex-wrap">
                                <Para
                                    labelKey="very_much_longer"
                                    className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"></Para>
                                <Para
                                    labelKey="selection_1"
                                    className="ux-rfi-green-label mt-2 p-1 ux-rfi-label-normal"></Para>
                            </Row>
                        </Column>

                        <Column>
                            <div className="ux-rfi-grey-border">
                                <Label
                                    labelKey="requested_by"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="massachusetts" className="ux-rfi-bold"></Para>

                                <Label
                                    labelKey="due"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="nov_15" className="ux-rfi-bold"></Para>

                                <Label
                                    labelKey="responses"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para labelKey="18_of_30" className="ux-rfi-bold"></Para>

                                <div className="m-0 p-1">
                                    <Button
                                        id="summarizeBtn"
                                        size="small"
                                        className="ux-rfi-green-button"
                                        // click={}
                                        labelKey="summarize_btn"></Button>
                                </div>
                            </div>
                        </Column>
                    </Row>
                </div>

                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Para labelKey="content" className="mt-2 scrollable-content"></Para>
                </div>

                <Questions responseData={responseData}></Questions>
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);