Untitled

update the below code for checkboxgroup as we are getting th emodel value as undefined. what ever we are entering that should get stored in model and appcontext.model.getvalue() should give us the entered value.


import React from 'react';
import PropTypes from 'prop-types';
import uuid from 'uuid';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import PrimeCheckBox from './primeCheckBox';
import PrimeLabel from '../primeLabel/primeLabel';
import { Util } from '@d-lift/core';
import { useFormContext } from 'react-hook-form';
import { get } from 'lodash';

const PrimeCheckboxGroup = (props) => {
    const {
        id,
        required,
        model,
        trueValue,
        falseValue,
        checkStyle,
        inline,
        name,
        labelClassName,
        value,
        readOnly,
        disabled,
        className,
        checked,
        style,
        tooltip,
        children,
        tooltipOptions,
        autoFocus,
        invalid,
        unstyled,
        refTable,
        list,
        customListModel,
        evalRefTableData,
        displayName,
        evalLangText,
        evalAria,
        defaultOption,
        noOptionsMessage,
        labelKey: WCMlabelText,
        label,
        ...rest
    } = props;

    const {
        formState: { errors },
    } = useFormContext();
    const hasGroupError = !!get(errors, model);

    const idlist = id === undefined ? uuid() : id;

    let refTableData;
    if (refTable !== undefined) {
        const tableData = props.evalRefTableData(refTable, Util.getLocale());
        if (tableData) {
            refTableData = tableData.map((item) => ({
                value: item.CODE,
                label: item.DESCRIPTION,
            }));
        }
    }

    return (
        <div className={`p-field-checkbox-group`} id="test group id">
            {(WCMlabelText || label) && (
                <div>
                    <PrimeLabel id={idlist} className={labelClassName}>
                        {props.evalLangText(WCMlabelText, label)}
                    </PrimeLabel>
                </div>
            )}
            <div>
                {refTableData !== undefined && (
                    <>
                        {refTableData.map((refTbl, refTblIndex) => (
                            <PrimeCheckBox
                                key={`${refTable}_${id}_${refTblIndex}_${refTbl.CODE}`}
                                id={`${idlist}_${refTblIndex}`}
                                name={`${idlist}_${refTblIndex}`}
                                text={refTbl.label}
                                invalid={hasGroupError}
                                arialabel={refTbl.label}
                                renderChildren={false}
                                required={required}
                                model={model}
                                groupModel={model}
                                groupValue={value || []}
                                value={refTbl.value}
                                truevalue={trueValue}
                                isGroup={true}
                                falsevalue={falseValue}
                                checkStyle={checkStyle}
                                inline={inline}
                                checked={value && value.includes(refTbl.value)}
                                invalid={hasGroupError}
                                readOnly={readOnly}
                                disabled={disabled}
                                className={className}
                                style={style}
                                tooltip={tooltip}
                                tooltipOptions={tooltipOptions}
                                autoFocus={refTblIndex === 0 && autoFocus}
                                unstyled={unstyled}
                                {...rest}
                            />
                        ))}
                    </>
                )}

                {list !== undefined && (
                    <>
                        {list.map((lsItem, lsItemIndex) => (
                            <PrimeCheckBox
                                key={lsItemIndex}
                                id={`${idlist}_${lsItem.labelKey}`}
                                name={`${idlist}_${lsItem.labelKey}`}
                                groupValue={value || []}
                                value={lsItem.value}
                                checked={value && value.includes(lsItem.value)}
                                renderChildren={false}
                                required={required}
                                disabled={disabled}
                                trueValue={trueValue}
                                invalid={hasGroupError}
                                groupModel={model}
                                isGroup={true}
                                falseValue={falseValue}
                                text={lsItem.label ? lsItem.label : lsItem.value}
                                model={model}
                                arialabel={lsItem.label}
                                arialabelledby={lsItem.label}
                                checkStyle={checkStyle}
                                inline={inline}
                                readOnly={readOnly}
                                className={className}
                                style={style}
                                autoFocus={lsItemIndex === 0 && autoFocus}
                                unstyled={unstyled}
                                {...rest}
                            />
                        ))}
                    </>
                )}

                {refTable === undefined && list === undefined && (
                    <>
                        {(() => {
                            const valuesArray = [];

                            React.Children.forEach(children, (child) => {
                                if (
                                    child.props.checked &&
                                    !valuesArray.includes(child.props.value) &&
                                    model !== undefined &&
                                    child.props.model === undefined
                                ) {
                                    valuesArray.push(child.props.value);
                                }
                            });

                            return React.Children.map(children, (child, index) => {
                                const newProps = {};
                                if (model !== undefined) {
                                    newProps.model = child.props.model ? child.props.model : model;
                                    newProps.name = child.props.name ? child.props.name : name;
                                } else {
                                    newProps.model = child.props.model;
                                }
                                newProps.required = child.props.required
                                    ? child.props.required
                                    : required;
                                if (model === undefined && child.props.model === undefined) {
                                    console.warn(
                                        "The Model prop should not be defined in CheckboxGroup and Checkbox! It's mutually exclusive, please define at either at checkboxgroup or checkbox.",
                                    );
                                }

                                const id = child.props.id === undefined ? uuid() : child.props.id;
                                return React.cloneElement(child, {
                                    ...child.props,
                                    index,
                                    id,
                                    renderChildren: !child.props.model,
                                    inline: inline,
                                    readOnly: readOnly,
                                    checkStyle: checkStyle,
                                    className: child.props.className
                                        ? child.props.className
                                        : className,
                                    disabled: child.props.disabled
                                        ? child.props.disabled
                                        : disabled,
                                    tooltip: child.props.tooltip ? child.props.tooltip : tooltip,
                                    required: child.props.required
                                        ? child.props.required
                                        : required,
                                    tooltipOptions: child.props.tooltipOptions
                                        ? child.props.tooltipOptions
                                        : tooltipOptions,
                                    style: child.props.style ? child.props.style : style,
                                    unstyled: child.props.unstyled
                                        ? child.props.unstyled
                                        : unstyled,
                                    isGroup: !child.props.model,
                                    groupModel: child.props.model ? child.props.model : model,
                                    invalid: hasGroupError,
                                    autoFocus: child.props.autoFocus
                                        ? child.props.autoFocus
                                        : index === 0 && autoFocus,
                                    valuesArray, // Pass the array to the cloned element
                                    ...newProps,
                                });
                            });
                        })()}
                    </>
                )}
            </div>
            {hasGroupError && (
                <span
                    id={`errorMessageSpanForElementWithId_${id}`}
                    className={`p-error error-container`}
                    role="alert"
                    data-is-error="true"
                    style={{ display: 'flex' }}
                >
                    {get(errors, model)?.message}
                </span>
            )}
        </div>
    );
};

PrimeCheckboxGroup.propTypes = {
    model: PropTypes.string,
    readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
    className: PropTypes.string,
    id: PropTypes.string,
    ariaDescribedby: PropTypes.string,
    disabled: PropTypes.bool,
    refTable: PropTypes.any,
    list: PropTypes.any,
    required: PropTypes.bool,
    trueValue: PropTypes.any,
    falseValue: PropTypes.any,
    inline: PropTypes.bool,
    customListModel: PropTypes.string,
    style: PropTypes.object,
    tooltip: PropTypes.string,
    tooltipOptions: PropTypes.object,
    autoFocus: PropTypes.bool,
    children: PropTypes.node,
    invalid: PropTypes.bool,
    unstyled: PropTypes.bool,
    name: PropTypes.string, // Added to resolve SonarLint issues
    value: PropTypes.any, // Added to resolve SonarLint issues
    checked: PropTypes.bool, // Added to resolve SonarLint issues
    checkStyle: PropTypes.string, // Added to resolve SonarLint issues
    displayName: PropTypes.string, // Added to resolve SonarLint issues
    evalLangText: PropTypes.func, // Added to resolve SonarLint issues
    evalAria: PropTypes.func, // Added to resolve SonarLint issues
    defaultOption: PropTypes.any, // Added to resolve SonarLint issues
    noOptionsMessage: PropTypes.string, // Added to resolve SonarLint issues
    labelKey: PropTypes.string, // Added to resolve SonarLint issues
    label: PropTypes.string, // Added to resolve SonarLint issues
    evalRefTableData: PropTypes.func, // Added to resolve SonarLint issues
};

export default PrimeWrapper(PrimeCheckboxGroup);