@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -1,1009 +0,0 @@
-
-import { createSolidEntityApi } from "../../../../../redux/api/solidEntityApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Message } from "primereact/message";
-import qs from "qs";
-import { useEffect, useRef, useState } from "react";
-import * as Yup from 'yup';
-import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
-import { camelCase } from "lodash";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import SolidFormView from '../../../../../components/core/form/SolidFormView';
-import { getExtensionComponent } from "../../../../../helpers/registry";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import showToast from "../../../../../helpers/showToast";
-// import Handlebars from "handlebars/dist/handlebars";
-import * as Handlebars from "handlebars";
-import { Toast } from "primereact/toast";
-import { SolidFieldTooltip } from "../../../../../components/common/SolidFieldTooltip";
-import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
-import { getVirtualScrollerOptions } from "../../../../../helpers/autoCompleteVirtualScroll";
-
-
-export type FormViewParams = {
-    moduleName: any;
-    modelName: any;
-    id: any;
-    embeded: any;
-    inlineCreateAutoSave: any;
-    layout: any;
-}
-
-export class SolidRelationManyToOneField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    initialValue(): any {
-
-        const manyToOneFieldData = this.fieldContext?.data[this.fieldContext?.field?.attrs?.name];
-        const fieldMetadata = this.fieldContext?.fieldMetadata;
-        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
-        const manyToOneColVal = manyToOneFieldData ? manyToOneFieldData[userKeyField] : '';
-        if (manyToOneColVal) {
-            return { solidManyToOneLabel: manyToOneColVal || '', solidManyToOneValue: manyToOneFieldData?.id || '', ...manyToOneFieldData };
-        }
-        if (this.fieldContext.parentData) {
-            const parentDataForKey = this.fieldContext.parentData[userKeyField];
-            if (parentDataForKey && typeof parentDataForKey === 'object') {
-                const [key, value]: any = Object.entries(this.fieldContext.parentData)[0] || [];
-                if (key && value !== undefined) {
-                    return { solidManyToOneLabel: value.solidManyToOneLabel, solidManyToOneValue: value.solidManyToOneValue };
-                }
-            }
-        }
-        return {}
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value?.solidManyToOneValue) {
-            formData.append(`${fieldLayoutInfo.attrs.name}Id`, value.solidManyToOneValue);
-        }
-    }
-
-    validationSchema(): Yup.Schema {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        let schema = Yup.mixed();
-        // Custom validation for relation field
-        if (fieldMetadata.required) {
-            schema = schema.test(
-                ERROR_MESSAGES.REQUIRED_REALTION,
-                ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel),
-                function (value: any) {
-                    // Handle empty values
-                    if (!value) return false;
-
-                    // If it's an object with solidManyToOneValue, check if it's valid
-                    if (typeof value === 'object' && value !== null && (value as any).solidManyToOneValue) {
-                        return true;
-                    }
-
-                    // If it's a string (user typed but didn't select), it's invalid for required field
-                    if (typeof value === 'string') {
-                        return false;
-                    }
-
-                    return false;
-                }
-            );
-        }
-
-        // Add validation to ensure valid selection
-        schema = schema.test(
-            ERROR_MESSAGES.VALIDATE_SELECTION,
-            ERROR_MESSAGES.SELECT_VALID_FROM_DROPDOWN(fieldLabel),
-            function (value: any) {
-                // If not required and empty, it's valid
-                if (!fieldMetadata.required && (!value || value === '')) {
-                    return true;
-                }
-
-                // If it's an object with solidManyToOneValue, it's a valid selection
-                if (typeof value === 'object' && value !== null && (value as any).solidManyToOneValue) {
-                    return true;
-                }
-
-                // If it's a string (user typed but didn't select), it's invalid
-                if (typeof value === 'string' && value.trim() !== '') {
-                    return false;
-                }
-
-                // Empty value for non-required field
-                return !fieldMetadata.required;
-            }
-        );
-
-        return schema;
-    }
-
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-
-        let isVisible = fieldLayoutInfo.attrs?.visible || true;
-        if (this.fieldContext.parentData && this.fieldContext.parentFieldName === fieldLayoutInfo.attrs.name) {
-            isVisible = false;
-        }
-
-        // const isVisible = this.fieldContext.parentData ? fieldLayoutInfo.attrs?.visible === true : fieldLayoutInfo.attrs?.visible !== false;
-
-        if (!isVisible) {
-            return null;
-        }
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultRelationManyToOneFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultRelationManyToOneFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" && this.renderExtensionRenderMode(viewWidget, formik)}
-                    {viewMode === "edit" && (<>{editWidget && this.renderExtensionRenderMode(editWidget, formik)}</>)}
-                </div>
-            </>
-        );
-    }
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-}
-
-export const DefaultRelationManyToOneFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const toast = useRef<Toast>(null);
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-    const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-    const [formViewParams, setformViewParams] = useState<FormViewParams>()
-    // auto complete specific code. 
-    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-    const { useLazyGetSolidEntitiesQuery } = entityApi;
-    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-    const whereClause = fieldLayoutInfo.attrs.whereClause;
-
-    const [autoCompleteItems, setAutoCompleteItems] = useState<any[]>([]);
-    const [offset, setOffset] = useState(0);
-    const [hasMore, setHasMore] = useState(true);
-    const [currentQuery, setCurrentQuery] = useState("");
-    const LIMIT = 50;
-    const [loading, setLoading] = useState(false);
-
-    useEffect(() => {
-        const formviewparams: FormViewParams = {
-            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
-            id: "new",
-            embeded: true,
-            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
-            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout
-        }
-        setformViewParams(formviewparams);
-    }, [])
-
-    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
-        setOffset(0);
-        setCurrentQuery(event.query || "");
-        setHasMore(true);
-        // Get the list view layout & metadata first. 
-        const queryData = {
-            offset: 0,
-            limit: LIMIT,
-            filters: {
-                $and: [
-                    {
-                        [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                            [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']: event.query
-                        }
-                    }
-                ]
-            }
-        };
-        let fixedFilterToBeApplied = false;
-        let fixedFilterParsed = false;
-        if (solidFormViewMetaData?.data?.solidView?.model?.singularName === "listOfValues" && fieldContext.fieldMetadata.relationCoModelSingularName !== "moduleMetadata") {
-            fixedFilterToBeApplied = true;
-        }
-        if (fieldMetadata?.relationFieldFixedFilter || fieldLayoutInfo?.attrs?.whereClause) {
-            const convertedFixedFilter = fieldLayoutInfo?.attrs?.whereClause ? fieldLayoutInfo?.attrs?.whereClause : fieldMetadata?.relationFieldFixedFilter;
-            fixedFilterToBeApplied = true;
-            const fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-            const renderedFilter = fixedFilterTemplate(formik.values);
-
-            // Parse the result into a JS object
-            let parsedFilter;
-            try {
-                parsedFilter = JSON.parse(renderedFilter);
-                const isValid = (obj: any): boolean => {
-                    if (!obj || typeof obj !== 'object') return false;
-
-                    // Recursively check all nested values
-                    const hasValidValue = (val: any): boolean => {
-                        if (val === null || val === undefined || val === '') return false;
-                        if (typeof val === 'object') {
-                            return Object.values(val).some(hasValidValue);
-                        }
-                        return true;
-                    };
-
-                    return hasValidValue(obj);
-                };
-
-                if (isValid(parsedFilter)) {
-                    queryData.filters.$and.push(parsedFilter);
-                    fixedFilterParsed = true;
-                } else {
-                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter);
-                }
-            } catch (e) {
-                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                parsedFilter = {}; // fallback or throw error as needed
-            }
-
-        }
-
-        let autocompleteQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-        // if (whereClause) {
-        //     autocompleteQs = `${autocompleteQs}&${whereClause}`;
-        // }
-
-
-        if (fixedFilterToBeApplied && !fixedFilterParsed) {
-            showToast(toast, "error", ERROR_MESSAGES.SELECT_RELEVANT_FIELD, ERROR_MESSAGES.FIELD_NOT_SELECT);
-
-        } else {
-            try {
-                setLoading(true);
-                // TODO: do error handling here, possible errors like modelname is incorrect etc...
-                const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
-
-                // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-                const autocompleteData = autocompleteResponse.data;
-
-                if (autocompleteData) {
-                    const autoCompleteItems = autocompleteData.records.map((item: any) => {
-                        return {
-                            solidManyToOneLabel: item[fieldMetadata?.relationModel?.userKeyField?.name],
-                            solidManyToOneValue: item['id'],
-                            ...item,
-                        }
-                    });
-                    setAutoCompleteItems(autoCompleteItems);
-                    setOffset(autocompleteData.records.length);
-                    setHasMore(autocompleteData.records.length === LIMIT);
-                }
-            }
-            finally {
-                setLoading(false);
-            }
-        }
-
-
-    }
-
-    const onLazyLoad = async (event: { first: number; last: number }) => {
-        if (!hasMore || loading) return;
-        if (event.last < autoCompleteItems.length - 1) return; // Only load if user reaches bottom
-
-        const queryData = {
-            offset: offset,
-            limit: LIMIT,
-            filters: {
-                $and: [
-                    {
-                        [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                            [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']: currentQuery
-                        }
-                    }
-                ]
-            }
-        };
-
-        let fixedFilterToBeApplied = false;
-        let fixedFilterParsed = false;
-        if (solidFormViewMetaData?.data?.solidView?.model?.singularName === "listOfValues" && fieldContext.fieldMetadata.relationCoModelSingularName !== "moduleMetadata") {
-            fixedFilterToBeApplied = true;
-        }
-        if (fieldMetadata?.relationFieldFixedFilter || fieldLayoutInfo?.attrs?.whereClause) {
-            const convertedFixedFilter = fieldLayoutInfo?.attrs?.whereClause ? fieldLayoutInfo?.attrs?.whereClause : fieldMetadata?.relationFieldFixedFilter;
-            fixedFilterToBeApplied = true;
-            const fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-            const renderedFilter = fixedFilterTemplate(formik.values);
-
-            // Parse the result into a JS object
-            let parsedFilter;
-            try {
-                parsedFilter = JSON.parse(renderedFilter);
-                const isValid = (obj: any): boolean => {
-                    if (!obj || typeof obj !== 'object') return false;
-
-                    // Recursively check all nested values
-                    const hasValidValue = (val: any): boolean => {
-                        if (val === null || val === undefined || val === '') return false;
-                        if (typeof val === 'object') {
-                            return Object.values(val).some(hasValidValue);
-                        }
-                        return true;
-                    };
-
-                    return hasValidValue(obj);
-                };
-
-                if (isValid(parsedFilter)) {
-                    queryData.filters.$and.push(parsedFilter);
-                    fixedFilterParsed = true;
-                } else {
-                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter);
-                }
-            } catch (e) {
-                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                parsedFilter = {}; // fallback or throw error as needed
-            }
-
-        }
-
-        const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
-        if (fixedFilterToBeApplied && !fixedFilterParsed) {
-            showToast(toast, "error", ERROR_MESSAGES.SELECT_RELEVANT_FIELD, ERROR_MESSAGES.FIELD_NOT_SELECT);
-
-        } else {
-            try {
-                setLoading(true);
-                const response = await triggerGetSolidEntities(autocompleteQs);
-                const records = response.data?.records || [];
-                if (records.length < LIMIT) setHasMore(false);
-                setAutoCompleteItems(prev => [...prev, ...records.map((item: any) => ({
-                    solidManyToOneLabel: item[fieldMetadata?.relationModel?.userKeyField?.name],
-                    solidManyToOneValue: item.id,
-                    ...item
-                }))]);
-                setOffset(prev => prev + records.length);
-            } finally {
-                setLoading(false);
-            }
-        }
-    };
-
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-    const customCreateHandler = (values: any) => {
-        const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-        const jsonValues = Object.fromEntries(values.entries());
-        const updatedRelationData = [
-            ...currentRelationData,
-            {
-                solidManyToOneLabel: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-                solidManyToOneValue: "new",
-                original: jsonValues,
-            },
-        ];
-
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
-
-    }
-    return (
-        <div className="relative">
-            <Toast ref={toast} />
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                        {fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        <SolidFieldTooltip fieldContext={fieldContext} />
-                    </label>
-                }
-                <div className="flex align-items-center gap-3">
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="solidManyToOneLabel"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown={!readOnlyPermission}
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                        onFocus={(e) => e.target.select()}
-                        className="w-full solid-standard-autocomplete"
-                        // virtualScrollerOptions={{
-                        //     itemSize: 38,
-                        //     lazy: true,
-                        //     onLazyLoad
-                        // }}
-                        virtualScrollerOptions={getVirtualScrollerOptions({
-                            itemsLength: autoCompleteItems.length,
-                            lazy: true,
-                            onLazyLoad,
-                        })}
-                    />
-                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams &&
-                        <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} customCreateHandler={customCreateHandler} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams}></RenderSolidFormEmbededView>
-                    }
-                </div>
-            </div>
-            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <div className="absolute mt-1">
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-export const RenderSolidFormEmbededView = ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams }: any) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const parentModelName = fieldLayoutInfo?.attrs?.parentModelName;
-    const childModelName = fieldLayoutInfo?.attrs?.childModelName;
-    const parentFieldName = fieldLayoutInfo?.attrs?.parentFieldName;
-    const childFieldName = fieldLayoutInfo?.attrs?.childFieldName;
-    const parentModuleName = fieldLayoutInfo?.attrs?.parentModuleName;
-
-
-    const params = {
-        moduleName: formViewParams.moduleName,
-        modelName: camelCase(formViewParams.modelName),
-        id: formViewParams.id,
-        embeded: formViewParams.embeded,
-        inlineCreateAutoSave: formViewParams.inlineCreateAutoSave,
-        layout: formViewParams.layout,
-        customCreateHandler: ((values: any) => {
-            setvisibleCreateRelationEntity(false);
-            customCreateHandler(values)
-        }),
-        handlePopupClose: (() => {
-            setvisibleCreateRelationEntity(false);
-        }),
-    }
-    return (
-        <div>
-            <div>
-                <Button
-                    icon="pi pi-plus"
-                    rounded
-                    outlined
-                    aria-label="Filter"
-                    type="button"
-                    size="small"
-                    onClick={() => setvisibleCreateRelationEntity(true)}
-                    className="custom-add-button"
-                />
-            </div>
-            <Dialog
-                header=""
-                showHeader={false}
-                visible={visibleCreateRelationEntity}
-                style={{
-                    width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw",
-                    height: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.height ?? "auto"
-                }}
-                onHide={() => {
-                    if (!visibleCreateRelationEntity) return;
-                    setvisibleCreateRelationEntity(false);
-                }}
-                className="solid-dialog"
-                breakpoints={{ '1199px': '35rem', "767px": '85vw', "550px": '90vw' }}
-
-            >
-                <SolidFormView {...params} />
-
-            </Dialog>
-        </div>
-    )
-}
-
-
-export const DefaultRelationManyToOneFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const value = formik.values[fieldLayoutInfo.attrs.name];
-    const userKeyField = fieldLayoutInfo?.attrs?.coModelFieldToDisplay ? fieldLayoutInfo?.attrs?.coModelFieldToDisplay : fieldMetadata?.relationModel?.userKeyField?.name;
-    const displayValue = value?.[userKeyField];
-    return (
-        <div className="mt-2 flex-column gap-2">
-            {showFieldLabel !== false && (
-                <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            )}
-            <p className="m-0">{displayValue}</p>
-        </div>
-    );
-}
-
-
-
-
-
-export const PseudoRelationManyToOneFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const toast = useRef<Toast>(null);
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly ? fieldContext.readOnly : false;
-
-    const parentModelName = fieldLayoutInfo?.attrs?.parentModelName;
-    const childModelName = fieldLayoutInfo?.attrs?.childModelName;
-    const parentFieldName = fieldLayoutInfo?.attrs?.parentFieldName;
-    const childFieldName = fieldLayoutInfo?.attrs?.childFieldName;
-    const parentModuleName = fieldLayoutInfo?.attrs?.parentModuleName;
-    const parentFieldLabels = fieldLayoutInfo?.attrs?.parentFieldLabels;
-    const parentSearchFields = fieldLayoutInfo?.attrs?.parentSearchFields;
-
-    const [formViewParams, setformViewParams] = useState<FormViewParams>()
-
-    const viewMode: string = fieldContext.viewMode;
-
-    useEffect(() => {
-        const formviewparams: FormViewParams = {
-            moduleName: parentModuleName,
-            modelName: camelCase(parentModelName),
-            id: "new",
-            embeded: true,
-            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
-            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout
-        }
-        setformViewParams(formviewparams);
-    }, [])
-
-
-    const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-    // auto complete specific code. 
-    const entityApi = createSolidEntityApi(parentModelName || "userViewMetadata");
-    const { useLazyGetSolidEntitiesQuery } = entityApi;
-    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-    const whereClause = fieldLayoutInfo.attrs.whereClause;
-
-    const [autoCompleteItems, setAutoCompleteItems] = useState<any[]>([]);
-    const [offset, setOffset] = useState(0);
-    const [hasMore, setHasMore] = useState(true);
-    const [currentQuery, setCurrentQuery] = useState("");
-    const LIMIT = 50;
-    const [loading, setLoading] = useState(false);
-    const [viewDisplayValue, setViewDisplayValue] = useState<any>(null);
-
-
-    useEffect(() => {
-        const fn = async () => {
-            if (fieldContext.data[fieldLayoutInfo.attrs.name]) {
-                const queryData = {
-                    offset: 0,
-                    limit: LIMIT,
-                    filters: {
-                        $and: [
-                            {
-                                [parentFieldName]: {
-                                    [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$eqi']: fieldContext.data[fieldLayoutInfo.attrs.name] ?? formik.values[fieldLayoutInfo.attrs.name]
-                                }
-                            }
-                        ]
-                    }
-                };
-                let autocompleteQs = qs.stringify(queryData, {
-                    encodeValuesOnly: true,
-                });
-                const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
-                // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-                const autocompleteData = autocompleteResponse.data;
-                if (autocompleteData) {
-                    const formattedRecords = autocompleteData.records.map((item: any) => {
-                        const label = parentFieldLabels && parentFieldLabels.length > 0 ? parentFieldLabels.map((label: any) => item[label]).join(" - ") : item[parentFieldName];
-                        return {
-                            solidManyToOneLabel: label,
-                            solidManyToOneValue: item[parentFieldName],
-                            ...item,
-                        }
-                    });
-                    if (formattedRecords.length > 0) {
-                        formik.setFieldValue(fieldLayoutInfo.attrs.name, formattedRecords[0]);
-                    }
-                }
-            }
-        }
-        fn()
-    }, [])
-
-    // Add this NEW useEffect - only for view mode refresh
-    useEffect(() => {
-        const fn = async () => {
-            if (viewMode !== "view") {
-                setViewDisplayValue(null);
-                return;
-            }
-
-            const rawValue =
-                fieldContext.data[fieldLayoutInfo.attrs.name] ??
-                formik.values[fieldLayoutInfo.attrs.name];
-
-            if (!rawValue) return;
-
-            const searchValue =
-                typeof rawValue === "object"
-                    ? rawValue[parentFieldName]
-                    : rawValue;
-
-            const queryData = {
-                offset: 0,
-                limit: 1,
-                filters: {
-                    $and: [
-                        {
-                            [parentFieldName]: {
-                                [fieldLayoutInfo?.attrs?.autocompleteMatchMode || "$eqi"]:
-                                    searchValue,
-                            },
-                        },
-                    ],
-                },
-            };
-
-            const qsStr = qs.stringify(queryData, { encodeValuesOnly: true });
-            const res = await triggerGetSolidEntities(qsStr);
-            const record = res.data?.records?.[0];
-            if (!record) return;
-
-            const label =
-                parentFieldLabels?.length > 0
-                    ? parentFieldLabels.map((l: string) => record[l]).join(" - ")
-                    : record[parentFieldName];
-            console.log("Final View Label", label, record[parentFieldName])
-            setViewDisplayValue({
-                solidManyToOneLabel: label,
-                solidManyToOneValue: record[parentFieldName],
-                ...record,
-            });
-        };
-
-        fn();
-    }, [viewMode, formik.values[fieldLayoutInfo.attrs.name]]);
-
-
-    const resolvedValue = viewMode === "view" ? viewDisplayValue : formik.values[fieldLayoutInfo.attrs.name];
-
-    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
-        setOffset(0);
-        setCurrentQuery(event.query || "");
-        setHasMore(true);
-        // Get the list view layout & metadata first. 
-        const queryData = {
-            offset: 0,
-            limit: LIMIT,
-            filters: {
-                $and: [
-                    ...(parentSearchFields?.length > 0
-                        ? [
-                            {
-                                $or: parentSearchFields.map((field: any) => ({
-                                    [field]: {
-                                        [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']:
-                                            event.query
-                                    }
-                                }))
-                            }
-                        ]
-                        : [
-                            {
-                                [parentFieldName]: {
-                                    [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']:
-                                        event.query
-                                }
-                            }
-                        ])
-
-                ]
-            }
-        };
-        let fixedFilterToBeApplied = false;
-        let fixedFilterParsed = false;
-        if (solidFormViewMetaData?.data?.solidView?.model?.singularName === "listOfValues" && fieldContext.fieldMetadata.relationCoModelSingularName !== "moduleMetadata") {
-            fixedFilterToBeApplied = true;
-        }
-        if (fieldMetadata?.relationFieldFixedFilter || fieldLayoutInfo?.attrs?.whereClause) {
-            const convertedFixedFilter = fieldLayoutInfo?.attrs?.whereClause ? fieldLayoutInfo?.attrs?.whereClause : fieldMetadata?.relationFieldFixedFilter;
-            fixedFilterToBeApplied = true;
-            const fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-            const renderedFilter = fixedFilterTemplate(formik.values);
-
-            // Parse the result into a JS object
-            let parsedFilter;
-            try {
-                parsedFilter = JSON.parse(renderedFilter);
-                const isValid = (obj: any): boolean => {
-                    if (!obj || typeof obj !== 'object') return false;
-
-                    // Recursively check all nested values
-                    const hasValidValue = (val: any): boolean => {
-                        if (val === null || val === undefined || val === '') return false;
-                        if (typeof val === 'object') {
-                            return Object.values(val).some(hasValidValue);
-                        }
-                        return true;
-                    };
-
-                    return hasValidValue(obj);
-                };
-
-                if (isValid(parsedFilter)) {
-                    queryData.filters.$and.push(parsedFilter);
-                    fixedFilterParsed = true;
-                } else {
-                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter);
-                }
-            } catch (e) {
-                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                parsedFilter = {}; // fallback or throw error as needed
-            }
-
-        }
-
-        let autocompleteQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-        // if (whereClause) {
-        //     autocompleteQs = `${autocompleteQs}&${whereClause}`;
-        // }
-
-
-        if (fixedFilterToBeApplied && !fixedFilterParsed) {
-            showToast(toast, "error", ERROR_MESSAGES.SELECT_RELEVANT_FIELD, ERROR_MESSAGES.FIELD_NOT_SELECT);
-
-        } else {
-            try {
-                setLoading(true);
-                // TODO: do error handling here, possible errors like modelname is incorrect etc...
-                const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
-
-                // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-                const autocompleteData = autocompleteResponse.data;
-
-                if (autocompleteData) {
-                    const autoCompleteItems = autocompleteData.records.map((item: any) => {
-                        const label = parentFieldLabels && parentFieldLabels.length > 0 ? parentFieldLabels.map((label: any) => item[label]).join(" - ") : item[parentFieldName];
-                        return {
-                            solidManyToOneLabel: label,
-                            solidManyToOneValue: item[parentFieldName],
-                            ...item,
-                        }
-                    });
-                    // const autoCompleteItems = autocompleteData.records.map((item: any) => {label: item[parentFieldName],value});
-
-                    setAutoCompleteItems(autoCompleteItems);
-                    setOffset(autocompleteData.records.length);
-                    setHasMore(autocompleteData.records.length === LIMIT);
-                }
-            }
-            finally {
-                setLoading(false);
-            }
-        }
-    }
-
-    const onLazyLoad = async (event: { first: number; last: number }) => {
-        if (!hasMore || loading) return;
-        if (event.last < autoCompleteItems.length - 1) return; // Only load if user reaches bottom
-
-        const queryData = {
-            offset: offset,
-            limit: LIMIT,
-            filters: {
-                $and: [
-                    ...(parentSearchFields?.length > 0
-                        ? [
-                            {
-                                $or: parentSearchFields.map((field: any) => ({
-                                    [field]: {
-                                        [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']:
-                                            currentQuery
-                                    }
-                                }))
-                            }
-                        ]
-                        : [
-                            {
-                                [parentFieldName]: {
-                                    [fieldLayoutInfo?.attrs?.autocompleteMatchMode || '$containsi']:
-                                        currentQuery
-                                }
-                            }
-                        ])
-
-                ]
-            }
-        };
-
-        let fixedFilterToBeApplied = false;
-        let fixedFilterParsed = false;
-        if (solidFormViewMetaData?.data?.solidView?.model?.singularName === "listOfValues" && fieldContext.fieldMetadata.relationCoModelSingularName !== "moduleMetadata") {
-            fixedFilterToBeApplied = true;
-        }
-        if (fieldMetadata?.relationFieldFixedFilter || fieldLayoutInfo?.attrs?.whereClause) {
-            const convertedFixedFilter = fieldLayoutInfo?.attrs?.whereClause ? fieldLayoutInfo?.attrs?.whereClause : fieldMetadata?.relationFieldFixedFilter;
-            fixedFilterToBeApplied = true;
-            const fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-            const renderedFilter = fixedFilterTemplate(formik.values);
-
-            // Parse the result into a JS object
-            let parsedFilter;
-            try {
-                parsedFilter = JSON.parse(renderedFilter);
-                const isValid = (obj: any): boolean => {
-                    if (!obj || typeof obj !== 'object') return false;
-
-                    // Recursively check all nested values
-                    const hasValidValue = (val: any): boolean => {
-                        if (val === null || val === undefined || val === '') return false;
-                        if (typeof val === 'object') {
-                            return Object.values(val).some(hasValidValue);
-                        }
-                        return true;
-                    };
-
-                    return hasValidValue(obj);
-                };
-
-                if (isValid(parsedFilter)) {
-                    queryData.filters.$and.push(parsedFilter);
-                    fixedFilterParsed = true;
-                } else {
-                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter);
-                }
-            } catch (e) {
-                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                parsedFilter = {}; // fallback or throw error as needed
-            }
-
-        }
-
-        const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
-        if (fixedFilterToBeApplied && !fixedFilterParsed) {
-            showToast(toast, "error", ERROR_MESSAGES.SELECT_RELEVANT_FIELD, ERROR_MESSAGES.FIELD_NOT_SELECT);
-
-        } else {
-            try {
-                setLoading(true);
-                const response = await triggerGetSolidEntities(autocompleteQs);
-                const records = response.data?.records || [];
-                if (records.length < LIMIT) setHasMore(false);
-                setAutoCompleteItems((prev: any) => [...prev, ...records.map((item: any) => {
-                    const label = parentFieldLabels && parentFieldLabels.length > 0 ? parentFieldLabels.map((label: any) => item[label]).join(" - ") : item[parentFieldName];
-                    return {
-                        solidManyToOneLabel: label,
-                        solidManyToOneValue: item[parentFieldName],
-                        ...item
-                    }
-                }
-                )]);
-                setOffset((prev: any) => prev + records.length);
-            } finally {
-                setLoading(false);
-            }
-        }
-    };
-
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-    const customCreateHandler = (values: any) => {
-        const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-        const jsonValues = Object.fromEntries(values.entries());
-        console.log("jsonValues", jsonValues);
-        const label = parentFieldLabels && parentFieldLabels.length > 0 ? parentFieldLabels.map((label: any) => jsonValues[label]).join(" - ") : jsonValues[parentFieldName];
-
-        const updatedRelationData = [
-            ...currentRelationData,
-            // jsonValues[parentFieldName]
-            {
-                solidManyToOneLabel: label,
-                solidManyToOneValue: "new",
-                original: jsonValues,
-            },
-        ];
-
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
-
-    }
-    return (
-        <div className="relative" >
-            <Toast ref={toast} />
-            < div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4" >
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label" >
-                        {fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500" > * </span>}
-                        <SolidFieldTooltip fieldContext={fieldContext} />
-                    </label>
-                }
-                <div className="flex align-items-center gap-3" >
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission || viewMode === "view"}
-                        field="solidManyToOneLabel"
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        value={resolvedValue || null}
-                        dropdown={!readOnlyPermission}
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                        onFocus={(e) => e.target.select()}
-                        className="w-full solid-standard-autocomplete"
-                        // virtualScrollerOptions={{
-                        //     itemSize: 38,
-                        //     lazy: true,
-                        //     onLazyLoad
-                        // }}
-                        virtualScrollerOptions={getVirtualScrollerOptions({
-                            itemsLength: autoCompleteItems.length,
-                            lazy: true,
-                            onLazyLoad,
-                        })}
-                    />
-                    {
-                        fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams && viewMode !== "view" &&
-                        <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} customCreateHandler={customCreateHandler} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} > </RenderSolidFormEmbededView>
-                    }
-                </div>
-            </div>
-            {
-                isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1" >
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )
-            }
-        </div>
-    );
-}
-