Untitled

answers: (2) [{…}, {…}]
category: "FO"
description: "gvfcxgv"
dueDT: "06-18-2024"
id: 17951
offering: "EE"
programs: "SNAP"
question: "dfgsdf"
replies: "1 of 1"
reqDT: "2024-06-11T18:45:31.147479"
rfiId: 14451
state: "AL"
status: "SB"
title: "ismail 2"


above we have the value of the myRFISubmittedData, can you update the below code so that we are able to render the values of myRFISubmittedData's title. it etc correctly.


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

const MyRFIDashboard = ({ myRFIFilter, myRFIData, myRFISubmittedData }) => {
    const getTitleLink = (colData, rowData, index) => {
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response">
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getSubmittedTableTitleLink = () => {
        Navigate.to('/response');
    };

    // const getProgramDsc = (colData) => {
    //     if (typeof colData === 'string') {
    //         const programCodes = colData.split(',');
    //         return programCodes
    //             .map((code) =>
    //                 Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, code),
    //             )
    //             .join(',');
    //     } else {
    //         return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData);
    //     }
    // };

    // const getCategoryDsc = (colData) => {
    //     if (typeof colData === 'string') {
    //         const programCodes = colData.split(',');
    //         return programCodes
    //             .map((code) =>
    //                 Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, code),
    //             )
    //             .join(', ');
    //     } else {
    //         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 getStatusDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATUS, colData);
    };

    const getRowStyle = (item) => ({
        border: item.status === 'Incomplete' ? '2px solid red' : 'none',
    });

    const getRowClass = (item) => (item.status === 'Incomplete' ? 'incompleteStatus' : '');

    return (
        <>
            <Button
                id="continue-editing-btn"
                className="ux-rfi-yellow-button"
                labelKey="continue_editing_btn"
                click={getSubmittedTableTitleLink}
            />

            <Header className="pt-3 ux-rfi-font-header" size="2">
                RFIs submitted by team {getStateDsc(myRFIFilter?.state)}:
            </Header>

            {myRFIData?.rfiSubmitted ? (
                <DataTable
                    col-data-keys="title,dueDT,offering,programs,category,replies,status"
                    col-default-headers="Title,Opened Due,Offering,Program,Category,Responded,Status"
                    className="dt-container border border-secondary"
                    datacollection="myRFIData.rfiSubmitted"
                    customContent={{
                        // Program: getProgramDsc,
                        // Category: getCategoryDsc,
                        Offering: getOfferingDsc,
                        State: getStateDsc,
                        Status: getStatusDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    responsive={true}
                />
            ) : (
                <></>
            )}

            <Header
                className="pt-3 ux-rfi-font-header"
                size="2"
                labelKey="require_attention"></Header>

            {myRFIData?.rfiRequireAttention ? (
                <DataTable
                    col-data-keys="dueDT,title,offering"
                    col-default-headers="Due,Title,Offering"
                    className="dt-container border border-secondary"
                    datacollection="myRFIData.rfiRequireAttention"
                    customContent={{
                        Title: getTitleLink,
                        Offering: getOfferingDsc,
                    }}
                    keyfield="id"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    responsive={true}
                />
            ) : (
                <></>
            )}
            <Header className="pt-3 ux-rfi-font-header" size="2">
                Responses submitted by team {getStateDsc(myRFIFilter?.state)}:
            </Header>

            <Section>
                {myRFISubmittedData?.map(
                    (item, index) => (
                        // item.status !== 'Incomplete' ? (
                        <div id={index}>
                            <div className="ux-rfi-response-container">
                                <LineBreak size={1} />
                                <div className="pr-4 pl-1">
                                    <Button
                                        className="ux-rfi-white-button w-100"
                                        mode="link"
                                        click={getSubmittedTableTitleLink}>
                                        {item.title}
                                    </Button>
                                </div>
                                <div className="p-3">
                                    <DataTable
                                        col-data-keys="question,dueDT,offering,programs,category,replies"
                                        col-default-headers="Title,Submitted,Offering,Program,Category,Replies"
                                        datacollection={item.id}
                                        className="dt-container bg-white"
                                        emptymsg-key="Empty_message"
                                        keyfield="id"
                                        hover="false"
                                        bordered={true}
                                        striped={false}
                                        responsive={true}
                                        colWidths={5}
                                    />
                                </div>
                            </div>
                            <LineBreak size={1} />
                        </div>
                    ),
                    // ) : null,
                )}
            </Section>
        </>
    );
};

MyRFIDashboard.propTypes = {
    myRFIFilter: PropTypes.object.isRequired,
    myRFIData: PropTypes.object.isRequired,
    myRFISubmittedData: PropTypes.object.isRequired,
};

export default MyRFIDashboard;