Untitled

For category & program checkbox,default option should be checked as "all".  If all option has been selected then the other options should be disabled, if they unselect "all" then should be able to select other options. 



import React, { useState } from 'react';
import { withPage, useAppState } 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';
import './create-rfi.scss';

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: 'PIPP', value: 'PIPP' },
    ];

    const generateUniqueId = () => {
        return Math.floor(Math.random() * 100 + 1);
    };

    const [questions, setQuestions] = useState([
        { id: generateUniqueId(), question: '', description: '' },
    ]);

    const [RFIRequest, setRFIRequest] = useAppState('RFIRequest');

    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>
                        <div className="ux-rfi-calendar">
                            <Date
                                id="neededByDate"
                                model="RFIRequest.neededBy"
                                monthDropdown
                                yearDropdown></Date>
                        </div>
                    </Group>

                    <MultiSelect
                        model="RFIRequest.offering"
                        id="offering"
                        isMulti="false"
                        labelKey="offering"
                        className="w-100 pt-3 mt-0 "
                        list={offeringList}
                        defaultValue={[offeringList[0]]}></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
                                            key={item.value}
                                            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
                                            key={item.value}
                                            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';
import '../create-rfi/create-rfi.scss';

const Questionnaire = ({ index, question, description, onInputChange, onDeleteQuestion }) => {
    return (
        <div className="ux-rfi-green-border mt-4">
            <Group width="9,3" colClass="ux-rfi-delete-btn">
                <Label className="mb-0 ">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;