Untitled
unknown
plain_text
a year ago
4.1 kB
2
Indexable
import React, { useState } from 'react'; import { withPage } from '@d-lift/core'; import { Page, Header, Label, Textbox, Textarea, Button, Group } from '@d-lift/uxcomponents'; import RightSection from '@/Layout/RightSection'; import BodySection from '@/Layout/BodySection'; import Questionnaire from '../Components/Questionnaire'; const Home = ({ UXPage, config }) => { const [questions, setQuestions] = useState([{ question: '', description: '' }]); const handleAddQuestion = () => { setQuestions([...questions, { question: '', description: '' }]); }; const handleInputChange = (index, name, value) => { const newQuestions = [...questions]; newQuestions[index][name] = value; setQuestions(newQuestions); }; const handleSubmit = (event) => { event.preventDefault(); console.log('Submitted data', questions); }; return ( <Page> <div className="d-flex"> <BodySection> <Header size="3" labelKey="request_header"></Header> <Label className="ux-rfi-bold-font pt-5" labelKey="cc"></Label> <Textbox name="cc" model="RFIRequest.cc"> {' '} </Textbox> <Label className="ux-rfi-bold-font" labelKey="request_desc"> {' '} </Label> <Textarea id="noresize" maxLength="100" model="RFIRequest.desc" rows="5" wrap="hard" > {' '} </Textarea> {questions.map((q, index) => ( <Questionnaire key={index} index={index} question={q.question} description={q.description} onInputChange={handleInputChange} /> ))} <div className="pt-4"> <Group> <Button id="addQues-btn" className="ux-rfi-green-button" onClick={handleAddQuestion} text="Add Another Question" ></Button> <Button id="submit-btn" className="ux-rfi-green-button" onClick={handleSubmit} text="Submit Request" ></Button> </Group> </div> </BodySection> <RightSection></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, Label } from '@d-lift/uxcomponents'; const Questionnaire = ({ index, question, description, onInputChange }) => { return ( <div className="ux-rfi-green-border mt-4"> <Label className="ux-rfi-bold-font">Question {index + 1} :</Label> <Textbox name="question" value={question} onChange={(e) => onInputChange(index, 'question', e.target.value)} ></Textbox> <Label className="ux-rfi-bold-font">Description:</Label> <Textarea id="noresize" maxLength="100" rows="5" wrap="hard" name="description" value={description} onChange={(e) => onInputChange(index, 'description', e.target.value)} ></Textarea> </div> ); }; export default Questionnaire;
Editor is loading...
Leave a Comment