Untitled

update the below code to check for error before submit or draft and throw error if it has error(eg, required field error).

Currently we have the below value in the refTableContent. Create a function which gets called onchange of offerings and filters the program data and keep them in a list (and use that list to render program checkbox) depending on the selected offering . Offering fdropdow has values EE, CS,CW,. if person has selected EE in offering then filter the obj which has flag "Y" and save them in a list then use that list to render program checkbox.

refTableContent=PROGRAM
: 
[
{"CODE:"SNAP",
"DESC":"SNAP",
"EE": "Y",
"CS": "Y",
"CW":"N"},
{"CODE:"AP",
"DESC":"AP",
"EE": "N",
"CS": "Y",
"CW":"Y"},
{"CODE:"PA",
"DESC":"PA",
"EE": "N",
"CS": "N",
"CW":"N"}
]




import BodySection from '@/Layout/BodySection';
import RightSection from '@/Layout/RightSection';
import { useAppState, withPage, Lift, Util } from '@d-lift/core';
import { Page } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import RFIFilters from './Components/RFIFilters';
import RFIRequestForm from './Components/RFIRequestForm';
import './create-rfi.scss';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil'


const RFIRequest = () => {
    const defaultRFIRequest = {
        title: '',
        reqDescription: '',
        questionsList: [{ question: '', description: '' }],
        requestedBy: '',
        neededBy: '',
        offering: ConstantKeys.DEFAULT_OPTION.OFFERING,
        category: ConstantKeys.DEFAULT_OPTION.CATEGORY,
        programs: ConstantKeys.DEFAULT_OPTION.PROGRAM,
        status: '',
    };

    const [rfiRequest, setRFIRequest] = useAppState('rfiRequest', defaultRFIRequest);

    const updateRFIRequest = (newState) => {
        setRFIRequest(newState);
    };

    useEffect(() => {

        let refTableContent = JSON.parse(Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING));
        console.log('refTableContent:', refTableContent);
    });

    // const [refTableContent, setRefTableContent] = useAppState(null);
    // useEffect(() => {
    //     const fetchRefTableContent = (tableName) => {
    //         const offeringRefTableValue = RFIUtil.getRefTableValueFromSession(tableName);
    //         setRefTableContent(offeringRefTableValue);
    //     };

    //     fetchRefTableContent(ConstantKeys.REF_TABLE.GET_OFFERING);

    //     console.log("refTableContent:",refTableContent);
    // });

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING">
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        resetRFIRequest={defaultRFIRequest}></RFIRequestForm>
                </BodySection>
                <RightSection>
                    <RFIFilters
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}></RFIFilters>
                </RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Make a Request Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIRequest,
);




import {
    Button,
    Checkbox,
    Column,
    Grid,
    Header,
    Row,
    Textarea,
    Textbox,
    Label,
    Spinner
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import Questionnaire from './Questionnaire';
import webService from '@/Services/WebService';
import ConstantKeys from '@/Constants/ConstantKeys';
import { Lift } from '@d-lift/core';

const RFIRequestForm = ({ rfiRequest, updateRFIRequest, resetRFIRequest }) => {
    const generateUniqueId = () => {
        return Math.floor(Math.random() * 100 + 1);
    };

    const handleAddQuestion = () => {
        console.log(rfiRequest.category, 'categoryList');

        let updatedQuestions = [
            ...rfiRequest.questionsList,
            { id: generateUniqueId(), question: '', description: '' },
        ];
        updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
    };

    const handleDeleteQuestion = (id) => {
        const questionToDelete = rfiRequest.questionsList.find((q) => q.id === id);

        if (questionToDelete) {
            let updatedQuestions = rfiRequest.questionsList.filter((q) => q.id !== id);
            updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
        } else {
            deleteQuestionFromDatabase(id);
        }
    };

    const deleteQuestionFromDatabase = async (id) => {
        try {
            const response = await webService.deleteRFIQuesion(`/questions/${id}`, {
                requestBody: {
                    questionId: id,
                    requestId: 1, // hard coding the value as of now
                },
            });

            updateRFIRequest({ ...rfiRequest, questionsList: response.data.updatedQuestions });
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        }
    };

    const handleSubmit = () => {
        // event.preventDefault();
        // Lift.spinner.show();
        try {
            const submitRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.SUBMITTED,
            };
            updateRFIRequest(submitRFIRequest);

            webService.createRFIRequest({
                requestBody: submitRFIRequest,
            });

            resetRFIRequest(); // Clear the rfiRequest object after successful API hit
            // Lift.spinner.hide();
        } catch (error) {
            console.log(error);
            // Lift.spinner.hide();
        }
    };

    const saveDraft = () => {
        // Lift.spinner.show();
        try {
            const draftRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.DRAFT,
            };
            updateRFIRequest(draftRFIRequest);

            webService.createRFIRequest({
                requestBody: draftRFIRequest,
            });
            // Lift.spinner.hide();
        } catch (error) {
            console.log(error);
            // Lift.spinner.hide();
        }
    };

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

            <Label className="mb-0 mt-3 mandatory_field" labelKey="title"></Label>

            <Textbox
                name="title"
                model="rfiRequest.title"
                placeholder="Placeholder text"
                className="ux-rfi-remove-padding"
                validationRules="alphaNumericCheck"
                errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                required></Textbox>

            <Textarea
                id="noresize"
                maxLength="100"
                model="rfiRequest.reqDescription"
                placeholderText="Placeholder text"
                validationRules="alphaNumericCheck"
                errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                rows="5"
                wrap="hard"
                labelKey="request_desc">
                {' '}
            </Textarea>

            {rfiRequest?.questionsList.map((q, index) => (
                <Questionnaire
                    key={q.id}
                    index={index}
                    onDeleteQuestion={() => handleDeleteQuestion(q.id)}
                />
            ))}

            <div className="pt-4">
                <Button
                    id="addQues-btn"
                    size="small"
                    className="ux-rfi-green-button"
                    click={handleAddQuestion}
                    labelKey="addQues_btn"></Button>
            </div>
            <Grid>
                <Row className="mt-5 mb-2">
                    <Column className="col-md-4">
                        <Button
                            id="saveDraft-btn"
                            size="small"
                            className="ux-rfi-green-button"
                            click={saveDraft}
                            labelKey="save_draft_btn"></Button>
                    </Column>
                    <Column className="align-self-center col-md-4 ">
                        <Checkbox
                            id="notification"
                            labelKey="email_notification"
                            model="rfiRequest.email_notification"
                        />
                    </Column>
                    <Column className="col-md-4">
                        <Button
                            id="submit-btn"
                            size="small"
                            className="ux-rfi-green-button float-right"
                            click={handleSubmit}
                            labelKey="submit_btn"></Button>
                    </Column>
                </Row>
            </Grid>
        </>
    );
};

RFIRequestForm.propTypes = {
    rfiRequest: PropTypes.object.isRequired,
    updateRFIRequest: PropTypes.func.isRequired,
};
export default RFIRequestForm;