Untitled

import React from 'react';
import { withPage, usePageState, useAppState } 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] = React.useState([{ question: '', description: '' }]);

    const handleAddQuestion = () => {
        console.log('Adding question');
        setQuestions([...questions, { question: '', description: '' }]);
        console.log(questions, 'value of questions');
    };

    const handleInputChange = (index, event) => {
        const { name, value } = event.target;
        const newQuestions = [...questions];
        newQuestions[index][name] = value;
        setQuestions(newQuestions);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log( questions,'Submitted data');
    };

    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="textarea"
                        rows="5"
                        wrap="hard"
                        model="RFIRequest.desc">
                        {' '}
                    </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"
                                click={handleAddQuestion}
                                labelKey="addQues_btn"></Button>

                            <Button
                                id="submit-btn"
                                className="ux-rfi-green-button"
                                click={handleSubmit}
                                labelKey="submit_btn"></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="bold-font" className="ux-rfi-bold-font">
                Question {index + 1} :
            </Label>
            <Textbox
                name="question"
                value={question}
                onChange={(e) => onInputChange(index, e)}></Textbox>

            <Label className="bold-font" className="ux-rfi-bold-font" labelKey="request_desc">
                
            </Label>
            <Textarea
                id="noresize"
                maxLength="100"
                rows="5"
                wrap="hard"
                name="description"
                value={description}
                onChange={(e) => onInputChange(index, e)}></Textarea>
        </div>
    );
};

export default Questionnaire;