Untitled

import React, { useState } from 'react';
import { withPage } from '@d-lift/core';
import {
    Page,
    Header,
    Label,
    Textbox,
    Textarea,
    Button,
    Group,
    Date,
    MultiSelect,
    CheckboxGroup,
    Checkbox,
} 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([{ id: Date.now(), question: '', description: '' }]);

    const handleAddQuestion = () => {
        setQuestions([...questions, { id: Date.now(), 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.delete(`/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="3" labelKey="request_header"></Header>
                    <Label className="ux-rfi-bold-font pt-5" labelKey="title"></Label>
                    <Textbox
                        name="title"
                        model="RFIRequest.title"
                        placeholder="Placeholder text">
                        {' '}
                    </Textbox>

                    <Label className="ux-rfi-bold-font" labelKey="request_desc">
                        {' '}
                    </Label>
                    <Textarea
                        id="noresize"
                        maxLength="100"
                        model="RFIRequest.reqDescription"
                        placeholderText="Placeholder text"
                        rows="5"
                        wrap="hard">
                        {' '}
                    </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"
                            className="ux-rfi-green-button"
                            click={handleAddQuestion}
                            labelKey="addQues_btn"></Button>
                    </div>
                    <div className="pt-4">
                        <Group width="6,3,3">
                            <Button
                                id="saveDraft-btn"
                                className="ux-rfi-green-button"
                                click={handleAddQuestion}
                                labelKey="save_draft_btn"></Button>

                            <Checkbox
                                id="notification"
                                labelKey="email_notification"
                                className="float-right"
                                model="RFIRequest.email_notification"
                            />

                            <Button
                                id="submit-btn"
                                className="ux-rfi-green-button float-right"
                                click={handleSubmit}
                                labelKey="submit_btn"></Button>
                        </Group>
                    </div>
                </BodySection>
                <RightSection>
                    <Group>
                        <Label className="ux-rfi-bold-font pt-5" labelKey="requesting_as"></Label>
                        <Textbox name="requestedBy" model="RFIRequest.requestedBy">
                            {' '}
                        </Textbox>
                    </Group>
                    <Group>
                        <Label className="ux-rfi-bold-font pt-5" labelKey="needed_by"></Label>
                        <Date
                            id="neededByDate"
                            maxDate="next year"
                            minDate="last week"
                            model="RFIRequest.neededBy"
                            monthDropdown
                            yearDropdown></Date>
                    </Group>
                    <Label className="ux-rfi-bold-font pt-5" labelKey="offering"></Label>
                    <MultiSelect
                        list={[
                            { label: 'Any', value: 'AN' },
                            { label: 'Eligibility & Enrollment', value: 'EE' },
                            { label: 'Child Welfare', value: 'CW' },
                            { label: 'Child Support', value: 'CS' },
                            { label: 'ERAP', value: 'ER' },
                            { label: 'Long Term Care Services', value: 'LT' },
                        ]}
                        model="RFIRequest.offering"
                        id="offering"
                        isMulti="false"
                        className="w-100 pt-0 mt-0"></MultiSelect>

                    <div className="ux-rfi-grey-border w-100">
                        <Label className="ux-rfi-bold-font" labelKey="category"></Label>
                        <CheckboxGroup
                            model="RFIRequest.category"
                            className="ux-rfi-grey-border p-3">
                            <Checkbox text="Eligibility" value="Eligibility" />
                            <Checkbox text="Front Office" value="Front Office" />
                            <Checkbox text="Interfaces" value="Interfaces" />
                            <Checkbox text="Reports" value="Reports" />
                            <Checkbox text="General/Other" value="General/Other" />
                        </CheckboxGroup>
                    </div>
                    <div className="ux-rfi-grey-border w-100">
                        <Label className="ux-rfi-bold-font" labelKey="program"></Label>
                        <CheckboxGroup
                            model="RFIRequest.programs"
                            className="ux-rfi-grey-border p-3">
                            <Checkbox text="AU" value="AU" />
                            <Checkbox text="SNAP" value="SNAP" />
                            <Checkbox text="MA" value="MA" />
                            <Checkbox text="LIHEAP" value="LIHEAP" />
                            <Checkbox text="CC" value="CC" />
                            <Checkbox text="PIPP" value="PIPP" />
                        </CheckboxGroup>
                    </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, Label, Button } from '@d-lift/uxcomponents';

const Questionnaire = ({ index, question, description, onInputChange, onDeleteQuestion }) => {
    return (
        <div className="ux-rfi-green-border mt-4">
            <div>
                <Label className="ux-rfi-bold-font">Question {index + 1} :</Label>
                <Textbox
                    name="question"
                    model="RFIRequest.question"
                    placeholder="Placeholder text"
                    onChange={(e) => onInputChange(index, 'question', e.target.value)}></Textbox>

                <Label className="ux-rfi-bold-font" labelKey="request_desc"></Label>
                <Textarea
                    id="noresize"
                    maxLength="100"
                    rows="5"
                    wrap="hard"
                    name="description"
                    model="RFIRequest.description"
                    placeholderText="Placeholder text"
                    onChange={(e) => onInputChange(index, 'description', e.target.value)}></Textarea>
            </div>
            <div>
                <Button
                    id="deleteQues-btn"
                    mode="danger"
                    click={onDeleteQuestion}
                    labelKey="delete_btn"></Button>
            </div>
        </div>
    );
};

export default Questionnaire;