Untitled

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 generateUniqueId = () => {
        Math.floor(Math.random() * 100 + 1);
    };

    const [questions, setQuestions] = useState([
        { id: Math.random() * 100 + 1, 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>
                    <Group>
                        <Label className=" pt-5" labelKey="requesting_as"></Label>
                        <Textbox name="requestedBy" model="RFIRequest.requestedBy">
                            {' '}
                        </Textbox>
                    </Group>
                    <Group>
                        <Label className=" pt-5" labelKey="needed_by"></Label>
                        <Date
                            id="neededByDate"
                            maxDate="next year"
                            minDate="last week"
                            model="RFIRequest.neededBy"
                            monthDropdown
                            yearDropdown></Date>
                    </Group>
                    <Label className=" 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 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 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, Group } from '@d-lift/uxcomponents';

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

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

export default Questionnaire;