Untitled

In the questions screen,on click of submit button user should be able to save responseModal(state,answer) by sending the below request to the webservice , and if the response status is 200 then show success notification. the id and question id needs to be sent on click of the question for which we are clicking respond to question button.



request 
 
{
    "quesnId": 17951,
    "id":51,
    "answer":"ismail",
    "state":"AL"
 
}


Response

{
    "timestamp": "2024-06-12T08:40:28.043104100Z",
    "message": {
        "code": 200,
        "notify": false
    },
    "data": {
        "id": 101,
        "quesnId": 18001,
        "answer": "ismail",
        "state": "AL"
    },
    "correlationId": "40BC615D6FF94DC89F4B9045093ACE23"
}




CODE->

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}></Questions>}
            </BodySection>
        </Page>
    );
};

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




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


const Questions = ({ responseData }) => {
    const [openModal, setOpenModal] = useAppState('openModal', false);

    const showResponseModal = () => {
        setOpenModal(true);
    };
    const hideResponseModal = () => {
        setOpenModal(false);
    };

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

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

            hideResponseModal();

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

    console.log(responseData);
    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}>
                                    {/* {Util.getRefTableDescriptionByCode('STATE', 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"
                                        // click={() => Navigate.to('/responseModal')}
                                    ></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}></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"></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"></Textarea>
                <Group>
                    <Button
                        id=""
                        size="small"
                        className="ux-rfi-white-button-bold float-left mt-3"
                        click={hideResponseModal}
                        labelKey="cancel_btn"></Button>
                    <Button
                        id=""
                        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,
};

export default Questions;