Untitled

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 &nbsp{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;