Untitled

update the below code for getTitleLink, so that we can pass the id in rfiObj on click of the link


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 [resultsFound, setResultsFound] = useAppState('resultsFound', '');
    const expandAdvanceSearch = () => {
        setShowAdvanceSearchContent(!showAdvanceSearchContent);
    };

    const getTitleLink = (colData, rowData, index) => {
        let model = 'searchRFI[' + rowData.id + '].title';
        let rfiObj = {
            id: 'jhghk',
        };
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response" state={rfiObj}>
                    {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?.length > 0) {
                setResultsFound(true);
                setRFIResultList(searchResults);
            }

            Lift.Application.Notification.success('Search completed successfully');
        } 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,
                        }}
                        emptymsg-key="Empty_message"
                        keyfield="id"
                        hover="false"
                        bordered="true"
                        striped="true"
                        emptymsg-key="no_records"
                    />
                </div>
            </div>
        </>
    );
};

// Is this needed
SearchRFIForm.propTypes = {
    searchRFI: PropTypes.object.isRequired,
    updateSearchRFI: PropTypes.func.isRequired,
};
export default SearchRFIForm;