Untitled

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, useState } from 'react';
import RFIFilters from './Components/RFIFilters';
import RFIRequestForm from './Components/RFIRequestForm';
import './create-rfi.scss';
import ConstantKeys from '@/Constants/ConstantKeys';

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

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

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

    useEffect(() => {
        let refTableContent = JSON.parse(Util.getSessionData(ConstantKeys.REF_TABLE.GET_OFFERING));
        filterPrograms(refTableContent.PROGRAM, rfiRequest.offering);
    }, [rfiRequest.offering]);

    const filterPrograms = (programs, offering) => {
        const filteredPrograms = programs.filter(program => program[offering] === 'Y');
        setProgramList(filteredPrograms);
    };

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING">
            <div className="d-flex">
                <BodySection>
                    <RFIRequestForm
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest}
                        resetRFIRequest={defaultRFIRequest}
                        programList={programList} />
                </BodySection>
                <RightSection>
                    <RFIFilters
                        rfiRequest={rfiRequest}
                        updateRFIRequest={updateRFIRequest} />
                </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,
    Notification
} 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, programList }) => {
    const generateUniqueId = () => {
        return Math.floor(Math.random() * 100 + 1);
    };

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

    const handleDeleteQuestion = (id) => {
        const updatedQuestions = rfiRequest.questionsList.filter((q) => q.id !== id);
        updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
    };

    const handleSubmit = () => {
        if (!validateForm()) return;

        const submitRFIRequest = {
            ...rfiRequest,
            status: ConstantKeys.STATUS_CODES.SUBMITTED,
        };
        updateRFIRequest(submitRFIRequest);

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

        resetRFIRequest(); // Clear the rfiRequest object after successful API hit
    };

    const saveDraft = () => {
        if (!validateForm()) return;

        const draftRFIRequest = {
            ...rfiRequest,
            status: ConstantKeys.STATUS_CODES.DRAFT,
        };
        updateRFIRequest(draftRFIRequest);

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

    const validateForm = () => {
        if (!rfiRequest.title || !rfiRequest.reqDescription) {
            Notification.show('Please fill in all required fields.', 'error');
            return false;
        }
        return true;
    };

    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>
            
            <Label className="mb-0 mt-3" labelKey="programs"></Label>
            {programList.map(program => (
                <Checkbox
                    key={program.CODE}
                    id={`program-${program.CODE}`}
                    label={program.DESC}
                    model={`rfiRequest.programs.${program.CODE}`}
                />
            ))}

            <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,
    resetRFIRequest: PropTypes.func.isRequired,
    programList: PropTypes.array.isRequired,
};

export default RFIRequestForm;