Untitled

import React, { useState } from 'react';
import {
    Accordian,
    AccordianElement,
    Label,
    Button,
    Para,
    Textarea,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';
import { useAppState, Lift } from '@d-lift/core';
import webService from '@/Services/WebService';
import ResponseModal from './ResponseModal';

const Questions = ({ responseData, updateResponseData }) => {
    const [openModal, setOpenModal] = useAppState('openModal', false);
    const [responseModal, setResponseModal] = useAppState('responseModal', {
        state: '',
        answer: '',
    });
    const [currentQuestion, setCurrentQuestion] = useState(null);
    const [editMode, setEditMode] = useState(null);

    const showResponseModal = (question) => {
        setCurrentQuestion(question);
        setOpenModal(true);
    };

    const enableEditMode = (answer) => {
        setEditMode(answer.id);
        setResponseModal({ ...responseModal, answer: answer.answer, state: answer.state });
    };

    const handleSaveEdit = async (answerId) => {
        try {
            Lift.spinner.show();

            const responseRequest = {
                quesnId: currentQuestion.id,
                id: answerId,
                answer: responseModal.answer,
                state: responseModal.state,
            };

            const response = await webService.submitRFIResponse({
                requestBody: responseRequest,
            });

            console.log(response);

            if (response.message.code === 200) {
                // Update the responseData with the new answer
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === currentQuestion.id) {
                        return {
                            ...question,
                            answers: question.answers.map((ans) =>
                                ans.id === response.data.id ? response.data : ans
                            ),
                        };
                    }

                    return question;
                });

                const updatedResponseObject = {
                    ...responseData,
                    questions: updatedQuestions,
                };

                updateResponseData(updatedResponseObject);
                setEditMode(null);
                Lift.Application.Notification.success('Response updated successfully');
            } else {
                Lift.Application.Notification.error('Response could not be updated');
            }
        } catch (error) {
            Lift.Application.Notification.error('Response could not be updated');
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData?.map((question, index) => (
                <Accordian id={`outer-accordian-${index}`} key={question.id}>
                    <AccordianElement headerText={question.question}>
                        <Label>{question?.answers?.length} &nbsp Responses:</Label>

                        {question?.answers?.map((answer, aIndex) => (
                            <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}>
                                <AccordianElement headerText={answer.state}>
                                    {editMode === answer.id ? (
                                        <>
                                            <Textarea
                                                id="response"
                                                maxLength="100"
                                                model="responseModal.answer"
                                                placeholderText="Placeholder text"
                                                validationRules="alphaNumericCheck"
                                                errormessages={{
                                                    alphaNumericCheck: 'only_alphabets_allowed',
                                                }}
                                                rows="5"
                                                wrap="hard"
                                                value={responseModal.answer}
                                                onChange={(e) =>
                                                    setResponseModal({
                                                        ...responseModal,
                                                        answer: e.target.value,
                                                    })
                                                }
                                            ></Textarea>
                                            <Button
                                                size="small"
                                                className="ux-rfi-white-button-bold float-left mt-3"
                                                onClick={() => setEditMode(null)}
                                                labelKey="cancel_btn"
                                            ></Button>
                                            <Button
                                                size="small"
                                                className="ux-rfi-green-button float-right mt-3"
                                                onClick={() => handleSaveEdit(answer.id)}
                                                labelKey="save_response"
                                            ></Button>
                                        </>
                                    ) : (
                                        <>
                                            <Para>{answer.answer}</Para>
                                            <Button
                                                size="small"
                                                className="ux-rfi-green-button float-right mt-2 mb-2"
                                                onClick={() =>
                                                    enableEditMode(answer)
                                                }
                                                labelKey="edit_response"
                                            ></Button>
                                        </>
                                    )}
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-2 mb-2"
                            labelKey="respond_question"
                            onClick={() => showResponseModal(question)}
                        ></Button>
                    </AccordianElement>
                </Accordian>
            ))}

            <ResponseModal
                isOpen={openModal}
                responseModal={responseModal}
                setResponseModal={setResponseModal}
                currentQuestion={currentQuestion}
                responseData={responseData}
                updateResponseData={updateResponseData}
                setOpenModal={setOpenModal}
                setCurrentQuestion={setCurrentQuestion}
            />
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
    updateResponseData: PropTypes.func.isRequired,
};

export default Questions;






import React from 'react';
import { Modal, Group, Label, Selectbox, Textarea, Button } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import { Lift } from '@d-lift/core';
import webService from '@/Services/WebService';

const ResponseModal = ({
    isOpen,
    responseModal,
    setResponseModal,
    currentQuestion,
    responseData,
    updateResponseData,
    setOpenModal,
    setCurrentQuestion,
}) => {
    const hideResponseModal = () => {
        setOpenModal(false);
        setResponseModal({ state: '', answer: '' });
        setCurrentQuestion(null);
    };

    const handleSubmitResponse = async () => {
        if (currentQuestion) {
            try {
                Lift.spinner.show();

                const responseRequest = {
                    quesnId: currentQuestion.id,
                    id: currentQuestion.id,
                    answer: responseModal.answer,
                    state: responseModal.state,
                };

                const response = await webService.submitRFIResponse({
                    requestBody: responseRequest,
                });

                console.log(response);

                if (response.message.code === 200) {
                    // Update the responseData with the new answer
                    const updatedQuestions = responseData.map((question) => {
                        if (question.id === currentQuestion.id) {
                            return {
                                ...question,
                                answers: [...question.answers, response.data],
                            };
                        }

                        return question;
                    });

                    const updatedResponseObject = {
                        ...responseData,
                        questions: updatedQuestions,
                    };

                    updateResponseData(updatedResponseObject);

                    hideResponseModal();

                    Lift.Application.Notification.success('Response saved successfully');
                } else {
                    Lift.Application.Notification.error('Response could not be submitted');
                }

                hideResponseModal();
            } catch (error) {
                Lift.Application.Notification.error('Response could not be submitted');
            } finally {
                Lift.spinner.hide();
            }
        } else {
            Lift.Application.Notification.error('Please fill in all fields');
        }
    };

    return (
        <Modal isOpen={isOpen}>
            <Group width="3,4">
                <Label labelKey="respond_as" />
                <Selectbox
                    id="respond_as"
                    model="responseModal.state"
                    defaultOptionLabelKey="select_state"
                    ref-table="STATE"
                    defaultOption="true"
                    onChange={(e) => setResponseModal({ ...responseModal, state: e.target.value })}
                ></Selectbox>
            </Group>
            <Label labelKey="response"></Label>
            <Textarea
                id="response"
                maxLength="100"
                model="responseModal.answer"
                placeholderText="Placeholder text"
                validationRules="alphaNumericCheck"
                errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                rows="5"
                wrap="hard"
                onChange={(e) => setResponseModal({ ...responseModal, answer: e.target.value })}
            ></Textarea>
            <Group>
                <Button
                    size="small"
                    className="ux-rfi-white-button-bold float-left mt-3"
                    onClick={hideResponseModal}
                    labelKey="cancel_btn"
                ></Button>
                <Button
                    size="small"
                    className="ux-rfi-green-button float-right mt-3"
                    onClick={handleSubmitResponse}
                    labelKey="submit_ans_btn"
                ></Button>
            </Group>
        </Modal>
    );
};

ResponseModal.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    responseModal: PropTypes.object.isRequired,
    setResponseModal: PropTypes.func.isRequired,
    currentQuestion: PropTypes.object,
    responseData: PropTypes.array.isRequired,
    updateResponseData: PropTypes.func.isRequired,
    setOpenModal: PropTypes.func.isRequired,
    setCurrentQuestion: PropTypes.func.isRequired,
};

export default ResponseModal;