Untitled
unknown
plain_text
a year ago
10 kB
5
Indexable
Update the below code for the requirements: 1- default option displayed are offering- 1st optn,category- all option and rest is disabled ,program - all option and rest is disabled 2- For category and program if the option is selected as ALL then disable all other options. import React, { useState } from 'react'; import { withPage } from '@d-lift/core'; import webService from '../../Services/WebService'; import { Page, Header, Label, Textbox, Textarea, Button, Group, Date, MultiSelect, CheckboxGroup, Checkbox, Column, Row, Grid, } from '@d-lift/uxcomponents'; import RightSection from '@/Layout/RightSection'; import BodySection from '@/Layout/BodySection'; import Questionnaire from '../Components/Questionnaire'; const Home = ({ UXPage, config }) => { const offeringList = [ { label: 'Eligibility and Enrollment', value: 'EE' }, { label: 'Child Support', value: 'CS' }, { label: 'Child Welfare', value: 'CW' }, ]; const categoryList = [ { label: 'ALL', value: 'AL' }, { label: 'Eligibility', value: 'EL' }, { label: 'Front Office', value: 'FO' }, { label: 'Interfaces', value: 'IN' }, { label: 'Reports', value: 'RE' }, { label: 'General/Other', value: 'GO' }, ]; const programList = [ { label: 'ALL', value: 'AL' }, { label: 'AU', value: 'AU' }, { label: 'MA', value: 'MA' }, { label: 'LIHEAP', value: 'LIHEAP' }, { label: 'CC', value: 'CC' }, { label: 'PIPPr', value: 'PIPP' }, ]; const generateUniqueId = () => { return Math.floor(Math.random() * 100 + 1); }; const [questions, setQuestions] = useState([ { id: generateUniqueId(), question: '', description: '' }, ]); const handleAddQuestion = () => { setQuestions([...questions, { id: generateUniqueId(), question: '', description: '' }]); }; const handleInputChange = (index, name, value) => { const newQuestions = [...questions]; newQuestions[index][name] = value; setQuestions(newQuestions); }; const handleDeleteQuestion = (id) => { const questionToDelete = questions.find((q) => q.id === id); if (questionToDelete.saved) { deleteQuestionFromDatabase(id); } else { setQuestions(questions.filter((q) => q.id !== id)); } }; const deleteQuestionFromDatabase = async (id) => { try { // Your delete request logic here // Example: await webService.deleteRFIQuesion(`/questions/${id}`); setQuestions(questions.filter((q) => q.id !== id)); } catch (error) { console.error('Failed to delete the question from the database', error); } }; const handleSubmit = (event) => { event.preventDefault(); console.log('Submitted data', questions); // Add your save logic here }; return ( <Page> <div className="d-flex"> <BodySection> <Header size="2" labelKey="request_header"></Header> <Textbox name="title" model="RFIRequest.title" placeholder="Placeholder text" labelKey="title" className=" pt-4"> {' '} </Textbox> <Textarea id="noresize" maxLength="100" model="RFIRequest.reqDescription" placeholderText="Placeholder text" rows="5" wrap="hard" labelKey="request_desc"> {' '} </Textarea> {questions.map((q, index) => ( <Questionnaire key={q.id} index={index} question={q.question} description={q.description} onInputChange={handleInputChange} onDeleteQuestion={() => handleDeleteQuestion(q.id)} /> ))} <div className="pt-4"> <Button id="addQues-btn" size="small" className="ux-rfi-green-button" click={handleAddQuestion} labelKey="addQues_btn"></Button> </div> <Grid> <Row className="mt-5 mb-2"> <Column className="col-md-4"> <Button id="saveDraft-btn" size="small" className="ux-rfi-green-button" labelKey="save_draft_btn"></Button> </Column> <Column className="align-self-center col-md-4"> <Checkbox id="notification" labelKey="email_notification" model="RFIRequest.email_notification" /> </Column> <Column className="col-md-4"> <Button id="submit-btn" size="small" className="ux-rfi-green-button float-right" click={handleSubmit} labelKey="submit_btn"></Button> </Column> </Row> </Grid> </BodySection> <RightSection> <MultiSelect id="requestedBy" labelKey="requesting_as" model="RFIRequest.requestedBy" isMulti="false" className="w-100" placeholder="-Select A State -"></MultiSelect> <Group width="3,9"> <Label className="pt-4 " labelKey="needed_by"></Label> <Date id="neededByDate" model="RFIRequest.neededBy" monthDropdown yearDropdown></Date> </Group> <MultiSelect model="RFIRequest.offering" id="offering" isMulti="false" labelKey="offering" className="w-100 pt-3 mt-0" list={offeringList}></MultiSelect> <div className="ux-rfi-grey-border w-100 mt-3"> <Label labelKey="category"></Label> <div className="ux-rfi-grey-border"> <CheckboxGroup model="RFIRequest.category"> {categoryList.map((item) => { return <Checkbox text={item.label} value={item.value} />; })} </CheckboxGroup> </div> </div> <div className="ux-rfi-grey-border w-100 mt-4 pt-1"> <Label labelKey="program"></Label> <div className="ux-rfi-grey-border"> <CheckboxGroup model="RFIRequest.programs"> {programList.map((item) => { return <Checkbox text={item.label} value={item.value} />; })} </CheckboxGroup> </div> </div> </RightSection> </div> </Page> ); }; export default withPage( { Description: 'Home Page', ContentManager: true, LayoutStyle: 'rfi-dashboard', TemplateOptions: { cardWorkFlow: true }, }, Home, ); import React from 'react'; import { Textarea, Textbox, Button, Group, Label } from '@d-lift/uxcomponents'; const Questionnaire = ({ index, question, description, onInputChange, onDeleteQuestion }) => { return ( <div className="ux-rfi-green-border mt-4"> <Group width="9,3"> <Label>Question  {index + 1} :</Label> {index > 0 && ( <div className="temp"> <Button id="deleteQues-btn" mode="danger" size="small" className="float-right" click={onDeleteQuestion} labelKey="delete_btn"></Button> </div> )} </Group> <Textbox name="question" model="RFIRequest.questionsList.question" placeholder="Placeholder text" className="ux-rfi-remove-padding" onChange={(e) => onInputChange(index, 'question', e.target.value)}></Textbox> <Textarea id="noresize" maxLength="100" rows="5" wrap="hard" name="description" model="RFIRequest.questionsList.description" placeholderText="Placeholder text" labelKey="request_desc" onChange={(e) => onInputChange(index, 'description', e.target.value)}></Textarea> </div> ); }; export default Questionnaire;
Editor is loading...
Leave a Comment