Untitled

import React, { useState } from 'react';
import {
    Accordian,
    AccordianElement,
    Label,
    Button,
    Modal,
    Para,
    Selectbox,
    Group,
    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';

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

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

    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;
                    });

                    setResponseData(prevData => ({
                        ...prevData,
                        questions: updatedQuestions
                    }));

                    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 (
        <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}>
                                    <Para>{answer.answer}</Para>

                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-4 mb-2"
                                        labelKey="edit_response"
                                    ></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

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

            <Modal isOpen={openModal}>
                <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"
                        click={hideResponseModal}
                        labelKey="cancel_btn"></Button>
                    <Button
                        size="small"
                        className="ux-rfi-green-button float-right mt-3"
                        click={handleSubmitResponse}
                        labelKey="submit_ans_btn"></Button>
                </Group>
            </Modal>
        </div>
    );
};

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

export default Questions;







import React, { useState, useEffect } from 'react';
import { withPage, Lift, useAppState, Util } from '@d-lift/core';
import { useLocation } from 'react-router-dom';
import BodySection from '@/Layout/BodySection';
import webService from '@/Services/WebService';
import Questions from './Components/Questions';
import { Button, Label, Column, Page, Header, Row, Para } from '@d-lift/uxcomponents';
import './response.scss';

const RFIResponse = () => {
    const [responseData, setResponseData] = useAppState('responseData', false);
    const [rfi, setRfi] = useAppState('rfi');

    useEffect(() => {
        loadResponseData(rfi);
        console.log(rfi);
    }, [rfi]);

    const loadResponseData = async (rfi) => {
        try {
            Lift.spinner.show();

            const response = await webService.getFullDetails({
                requestBody: { rfiId: rfi?.id },
            });

            console.log(response);
            if (response) {
                setResponseData(response);
                Lift.Application.Notification.success('Response Data loaded successfully');
            }
        } catch (error) {
            console.log(error);
            Lift.Application.Notification.error('Failed to load Response Data');
        } finally {
            Lift.spinner.hide();
        }
    };

    const calculateResponseStats = (data) => {
        const totalQuestions = data.length;
        const answeredQuestions = data.filter((q) => q.answers && q.answers.length > 0).length;
        const percentageAnswered =
            totalQuestions > 0 ? ((answeredQuestions / totalQuestions) * 100).toFixed(2) : 0;
        return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`;
    };

    return (
        <Page ref-table-list="OFFERING,STATE,PROGRAM">
            <BodySection>
                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Header className="pt-3 ux-rfi-font-header" size="2">
                        {' '}
                        {rfi.title}
                    </Header>
                    <Row>
                        <Column className="col-9">
                            <Row className="d-flex flex-wrap">
                                <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label">
                                    {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)}
                                </Para>
                                <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                    {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)}
                                </Para>
                                <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal">
                                    {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)}
                                </Para>
                            </Row>
                        </Column>

                        <Column>
                            <div className="ux-rfi-grey-border">
                                <Label
                                    labelKey="requested_by"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para className="ux-rfi-bold">{Util.getRefTableDescriptionByCode('STATE', rfi.state)}</Para>

                                <Label
                                    labelKey="due"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                                <Para className="ux-rfi-bold">{rfi.dueDt}</Para>

                                <Label
                                    labelKey="responses"
                                    className="mt-1 ux-rfi-label-normal ux-rfi-grey-font">
                                    <Para className="ux-rfi-bold">
                                        {/* {calculateResponseStats(responseData.questions)} */}
                                    </Para>
                                </Label>

                                <div className="m-0 p-1">
                                    <Button
                                        id="summarizeBtn"
                                        size="small"
                                        className="ux-rfi-green-button"
                                        // click={}
                                        labelKey="summarize_btn"></Button>
                                </div>
                            </div>
                        </Column>
                    </Row>
                </div>

                <div className="ux-rfi-grey-border w-100 mt-3">
                    <Para className="mt-2 scrollable-content">{rfi.description}</Para>
                </div>

                {responseData && <Questions responseData={responseData.questions} setResponseData={setResponseData}></Questions>}
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);