Untitled
unknown
plain_text
10 months ago
12 kB
4
Indexable
import React, { useState, useEffect } 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, AppContext } from '@d-lift/core'; import webService from '@/Services/WebService'; import rfiUtil from '@/Util/RFIUtil'; import ConstantKeys from '@/Constants/ConstantKeys'; 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(false); const [filteredStates, setFilteredStates] = useAppState('filteredStates', []); const refTableContent = rfiUtil.getRefTableDataByCacheName( ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES, ); useEffect(() => { const stateList = rfiUtil.getAuthorizedStateList(); if (refTableContent) { const filteredStateValues = refTableContent.STATE.filter((state) => stateList.includes(state.CODE), ); setFilteredStates(filteredStateValues); } console.log(responseData); // let state_val= }, []); const showResponseModal = (question) => { setCurrentQuestion(question); setOpenModal(true); }; const hideResponseModal = () => { setOpenModal(false); setResponseModal({ state: '', answer: '' }); setCurrentQuestion(null); }; const handleSubmitResponse = async () => { 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) { console.log({ ...question }); return { ...question, answers: [...question.answers, response.data], }; } return question; }); console.log(updatedQuestions); 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(); } }; const toggleEdit = (prevAns) => { if (prevAns) { AppContext.model.setValue('responseModal.answer', prevAns); } setEditMode(!editMode); }; const handleSaveResponse = async (id, quesnId, state) => { try { Lift.spinner.show(); const saveRequest = { id: id, quesnId: quesnId, answer: responseModal.answer, state: state, }; const responseObj = await webService.submitRFIResponse({ requestBody: saveRequest, }); console.log(responseObj); if (responseObj.message.code === 200) { // Update the responseData with the new answer const updatedQuestions = responseData.map((question) => { if (question.id === quesnId) { return { ...question, answers: question.answers.map((answer) => answer.id === id ? responseObj.data : answer ), }; } return question; }); console.log(updatedQuestions); const updatedResponseObject = { ...responseData, questions: updatedQuestions, }; updateResponseData(updatedResponseObject); toggleEdit(); 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}   Responses:</Label> {question?.answers?.map((answer, aIndex) => ( <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}> <AccordianElement headerText={answer.state}> <Para showIf={!editMode}>{answer.answer}</Para> <Textarea id="response" showIf={editMode} maxLength="100" model="responseModal.answer" placeholderText="Placeholder text" validationRules="alphaNumericCheck" errormessages={{ alphaNumericCheck: 'only_alphabets_allowed', }} rows="5" wrap="hard" change={(e) => setResponseModal({ ...responseModal, answer: e.target.value, }) }></Textarea> <Button id={`edit-btn-${index}-${aIndex}`} size="small" className="ux-rfi-green-button float-right mt-2 mb-2" labelKey="edit_response" showIf={!editMode} click={() => toggleEdit(answer.answer)}></Button> <Button showIf={editMode} size="small" className="ux-rfi-white-button-bold float-left mt-2 mb-2" click={toggleEdit} labelKey="cancel_btn"></Button> <Button showIf={editMode} id={`edit-btn-${index}-${aIndex}`} size="small" click={() => handleSaveResponse( answer.id, answer.quesnId, answer.state, ) } className="ux-rfi-green-button float-right mt-2 mb-2" labelKey="save_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" 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" list="filteredStates" optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION} optionValue={ConstantKeys.REF_TABLE_COLS.CODE} defaultOption="true" change={(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, updateResponseData: PropTypes.func.isRequired, }; export default Questions;
Editor is loading...
Leave a Comment