Untitled

        in the function handleDeleteQuestion, we have key only if the data is not drafted, if draft is clicked we get id. hence, we can not fetch the value for questionToDelete as AbortSignalEventMap, as after draft this value is going as undefined, update the code accordingly


import {
    Button,
    Checkbox,
    Column,
    Grid,
    Header,
    Row,
    Textarea,
    Textbox,
    Label,
} 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, AppContext } from '@d-lift/core';
import { findIndex } from 'lodash';

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

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

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

    const handleSubmit = async () => {
        if (AppContext.pagedetails.getPageContext().validate({ model: 'rfiRequest' }).isError) {
            return;
        }
        try {
            Lift.spinner.show();
            const submitRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.SUBMITTED,
            };
            updateRFIRequest(submitRFIRequest);

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

            resetRFIRequest();
            console.log('rfi request after resetting the obj:', rfiRequest);

            Lift.Application.Notification.success('Application submitted successfully');
        } catch (error) {
            Lift.Application.Notification.error('Application could not be submitted');
        } finally {
            Lift.spinner.hide();
        }
    };

    const saveDraft = async () => {
        if (AppContext.pagedetails.getPageContext().validate({ model: 'rfiRequest' }).isError) {
            return;
        }
        try {
            Lift.spinner.show();
            const draftRFIRequest = {
                ...rfiRequest,
                status: ConstantKeys.STATUS_CODES.DRAFT,
            };
            updateRFIRequest(draftRFIRequest);

            const updatedData = await webService.createRFIRequest({
                requestBody: draftRFIRequest,
            });

            if (updatedData) {
                const dueDate = new Date(updatedData.dueDT);
                const formattedDueDt =
                    updatedData.status === 'DT'
                        ? dueDate.toISOString().split('T')[0]
                        : updatedData.neededBy;

                const updatedRfiRequest = {
                    ...updatedData,
                    category: updatedData.category.split(','),
                    programs: updatedData.programs.split(','),
                    neededBy: formattedDueDt,
                    requestedBy: updatedData.state,
                };
                updateRFIRequest(updatedRfiRequest);
                Lift.Application.Notification.success('Draft saved successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Draft could not be saved');
        } finally {
            Lift.spinner.hide();
        }
    };

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

        // If the question does not have an id, it was added locally and has not been saved to the backend.
        if (!questionToDelete.id) {
            updateRFIRequest({ ...rfiRequest, questionsList: updatedQuestions });
        } else {
            deleteQuestionFromDatabase(questionToDelete.rfiId, questionToDelete.id);
        }
    };

    const deleteQuestionFromDatabase = async (rfiId, id) => {
        try {
            Lift.spinner.show();
            const deleteResponse = await webService.deleteRFIQuesion({
                requestBody: {
                    rfiId: rfiId,
                    id: id,
                },
            });

            if (deleteResponse) {
                //let quesIndex = rfiRequest.questionsList.findIndex((q) => q.id === id);

                // AppContext.pagedetails
                //     .getPageContext()
                //     .clearValidations({
                //         model: 'rfiRequest.questionsList[' + quesIndex + '].question',
                //     });

                updateRFIRequest({ ...rfiRequest, questionsList: deleteResponse.data.questionsList });

                Lift.Application.Notification.success('Question deleted successfully');
            }
        } catch (error) {
            console.error('Failed to delete the question from the database', error);
        } finally {
            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.description"
                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.key}
                    index={index}
                    onDeleteQuestion={() => handleDeleteQuestion(q.key)}
                />
            ))}

            <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,
    resetRFIRequest: PropTypes.func.isRequired,
};
export default RFIRequestForm;