Untitled
unknown
plain_text
a year ago
8.7 kB
7
Indexable
update the below code to use the same handleSubmitResponse for saving the edited value as well, but call the hideResponseModal() only when submit is hit, and not in save btn call 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, 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 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 = () => { setEditMode(!editMode); }; 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" onChange={(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}></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={handleSubmitResponse} 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" 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, updateResponseData: PropTypes.func.isRequired, }; export default Questions;
Editor is loading...
Leave a Comment