Untitled
unknown
plain_text
a year ago
12 kB
8
Indexable
in the below code, on click of edit all the accordianelements are becoming editable instead of the only one for which edit is selected.Update the code so that only the element for whichh edit is selected is converted to textarea from para. 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, Util } from '@d-lift/core'; import webService from '@/Services/WebService'; import rfiUtil from '@/Util/RFIUtil'; import ConstantKeys from '@/Constants/ConstantKeys'; import { set } from 'lodash'; 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 getStateDsc = (stateCode) => { return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, stateCode); }; const showResponseModal = (question) => { setCurrentQuestion(question); setResponseModal({ state: '', answer: '' }); setOpenModal(true); AppContext.pagedetails.getPageContext().clearValidations(); }; const hideResponseModal = () => { setOpenModal(false); setResponseModal({ state: '', answer: '' }); setCurrentQuestion(null); }; const handleSubmitResponse = async () => { try { setOpenModal(false); 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('responseData', responseData); if (response.message.code === 200) { // Update the responseData with the new answer const updatedQuestions = responseData.map((question) => { if (question.id === currentQuestion.id) { let answers = question.answers ? question.answers : [responseRequest]; question = { ...question, answers: answers, }; } 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'); } } 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); console.log(responseData); if (responseObj.message.code === 200) { // Update the responseData with the updated answer const updatedQuestions = responseData.map((question) => { if (question.id === quesnId) { return { ...question, answers: question.answers.map((answer) => answer.id === id ? { ...answer, answer: responseModal.answer } : answer, ), }; } return question; }); 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={getStateDsc(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(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" 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