@solidstarters/solid-core-ui 1.1.70 → 1.1.71

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

@@ -1,11 +1,19 @@
 'use client';
 import { Message } from "primereact/message";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
 import { getExtensionComponent } from "@/helpers/registry";
-import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { AutoComplete } from "primereact/autocomplete";
+import { Button } from "primereact/button";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { useRelationEntityHandler } from "./widgets/helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "./widgets/helpers/InlineRelationEntityDialog";
+import { capitalize } from "lodash";
+import { Checkbox } from "primereact/checkbox";
+import { Panel } from "primereact/panel";
+
 
 
 
@@ -85,37 +93,30 @@ export class SolidRelationManyToManyField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const [visibleCreateRelationEntity, setVisibleCreateRelationEntity] = useState(false);
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
-        let renderMode = fieldLayoutInfo.attrs.renderMode;
-        if (!renderMode) {
-            renderMode = 'autocomplete';
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRelationManyToManyAutoCompleteFormEditWidget';
         }
-
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+        if (!viewWidget) {
+            viewWidget = 'DefaultRelationOneToManyFormViewWidget';
         }
-
+        const viewMode: string = this.fieldContext.viewMode;
         return (
-
             <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
                         <>
-                            {renderMode &&
-                                this.renderExtensionRenderMode(renderMode, formik, visibleCreateRelationEntity, setVisibleCreateRelationEntity)
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
                             }
                             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                                 <div className="absolute mt-1">
@@ -123,17 +124,16 @@ export class SolidRelationManyToManyField implements ISolidField {
                                 </div>
                             )}
                         </>
-                    )}
+                    )
+                    }
+                </div>
             </>
         );
     }
 
-    renderExtensionRenderMode(widgetName: string, formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
-        let DynamicWidget = getExtensionComponent(widgetName);
-        if (!DynamicWidget) {
-            DynamicWidget = getExtensionComponent('autocomplete');
-        }
-        const widgetProps: SolidRelationManyToManyFieldWidgetProps = {
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
         }
@@ -144,3 +144,166 @@ export class SolidRelationManyToManyField implements ISolidField {
         )
     }
 }
+
+
+
+export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
+    const readOnly = fieldLayoutInfo.attrs?.readOnly;
+
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+
+    const onChange = (e: any) => {
+        formik.setFieldValue(fieldContext.field.attrs.name, e.value);
+    };
+
+    return (
+
+        <div className="mt-4">
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                </label>
+            }
+            <div className="flex align-items-center gap-3 mt-2">
+                <AutoComplete
+                    readOnly={readOnly || readOnlyPermission}
+                    disabled={disabled || readOnlyPermission}
+                    multiple
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown={!readOnlyPermission}
+                    suggestions={autoCompleteItems}
+                    completeMethod={(e) => fetchRelationEntities(e.query)}
+                    onChange={onChange}
+                    className="solid-standard-autocomplete w-full"
+                />
+                {fieldContext.field.attrs.inlineCreate && (
+                    <>
+                        <Button
+                            icon="pi pi-plus"
+                            rounded
+                            outlined
+                            aria-label="Filter"
+                            type="button"
+                            size="small"
+                            onClick={() => setVisibleCreateDialog(true)}
+                            className="custom-add-button"
+                        />
+                        <InlineRelationEntityDialog
+                            visible={visibleCreateDialog}
+                            setVisible={setVisibleCreateDialog}
+                            fieldContext={fieldContext}
+                            onCreate={addNewRelation}
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+
+
+export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    const readOnlyPermission = fieldContext.readOnly;
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+
+    useEffect(() => {
+        fetchRelationEntities();
+    }, []);
+
+    const handleCheckboxChange = (e: any) => {
+        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
+        } else {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
+        }
+    };
+
+    const headerTemplate = (options: any) => {
+        const className = `${options.className} justify-content-space-between`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-3">
+                    {showFieldLabel != false &&
+                        <label className="form-field-label">
+                            {capitalize(fieldLayoutInfo.attrs.name)}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
+                    }
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                            <Button
+                                icon="pi pi-plus"
+                                rounded
+                                outlined
+                                aria-label="Filter"
+                                type="button"
+                                size="small"
+                                onClick={() => setVisibleCreateDialog(true)}
+                                className="custom-add-button"
+                            />
+                            <InlineRelationEntityDialog
+                                visible={visibleCreateDialog}
+                                setVisible={setVisibleCreateDialog}
+                                fieldContext={fieldContext}
+                                onCreate={addNewRelation}
+                            />
+                        </>
+                    )}
+                    {/* <div className="many-to-many-add" >
+                        <Button icon="pi pi-plus"
+                            rounded
+                            outlined
+                            aria-label="Filter"
+                            type="button"
+                            onClick={() => autoCompleteSearch()}
+                        />
+                    </div> */}
+                </div>
+                <div>
+                    {options.togglerElement}
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div>
+            <Panel toggleable headerTemplate={headerTemplate}>
+                <div className="formgrid grid">
+                    {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
+                        return (
+                            <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                                <Checkbox
+                                    readOnly={readOnlyPermission}
+                                    inputId={a.label}
+                                    checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
+                                    onChange={() => handleCheckboxChange(a)}
+                                />
+                                <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
+                            </div>
+                        )
+                    })}
+                </div>
+            </Panel>
+        </div>
+    )
+
+}

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

@@ -14,6 +14,7 @@ import { Dialog } from "primereact/dialog";
 import { Panel } from "primereact/panel";
 import SolidFormView from "../../SolidFormView";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 
 export class SolidRelationManyToOneField implements ISolidField {
@@ -61,190 +62,230 @@ export class SolidRelationManyToOneField implements ISolidField {
     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';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-        const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-
-        // 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([]);
-        const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
-
-            // Get the list view layout & metadata first. 
-            const queryData = {
-                offset: 0,
-                limit: 10,
-                filters: {
-                    [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                        '$containsi': event.query
-                    }
-                }
-            };
 
-            let autocompleteQs = qs.stringify(queryData, {
-                encodeValuesOnly: true,
-            });
-            if (whereClause) {
-                autocompleteQs = `${autocompleteQs}&${whereClause}`;
-            }
-            // TODO: do error handling here, possible errors like modelname is incorrect etc...
-            const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
+        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}>
 
-            // 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;
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
 
-            if (autocompleteData) {
-                const autoCompleteItems = autocompleteData.records.map((item: any) => {
-                    return {
-                        label: item[fieldMetadata?.relationModel?.userKeyField?.name],
-                        value: item['id']
+                        </>
+                    )
                     }
-                });
-                setAutoCompleteItems(autoCompleteItems);
-            }
-        }
+                </div>
+            </>
+        );
+    }
 
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    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 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);
+
+    // 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([]);
+    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    '$containsi': event.query
+                }
+            }
+        };
 
+        let autocompleteQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+        if (whereClause) {
+            autocompleteQs = `${autocompleteQs}&${whereClause}`;
+        }
+        // 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 {
+                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: item['id']
+                }
+            });
+            setAutoCompleteItems(autoCompleteItems);
+        }
+    }
 
-        const customCreateHandler = (values: any) => {
-            const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-            const jsonValues = Object.fromEntries(values.entries());
-            const updatedRelationData = [
-                ...currentRelationData,
-                {
-                    label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-                    value: "new",
-                    original: jsonValues,
-                },
-            ];
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
+    const customCreateHandler = (values: any) => {
+        const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
+        const jsonValues = Object.fromEntries(values.entries());
+        const updatedRelationData = [
+            ...currentRelationData,
+            {
+                label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
+                value: "new",
+                original: jsonValues,
+            },
+        ];
 
-        }
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
 
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
-        }
-        return (
-            <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
-                        <div className={className}>
-                            <div className="mt-4 relative">
-                                {showFieldLabel != false &&
-                                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                                        {fieldLabel}
-                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                    </label>
-                                }
-                                <div className="flex align-items-center gap-3 mt-2">
-                                    <AutoComplete
-                                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                                        id={fieldLayoutInfo.attrs.name}
-                                        field="label"
-                                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                                        dropdown={!readOnlyPermission}
-                                        suggestions={autoCompleteItems}
-                                        completeMethod={autoCompleteSearch}
-                                        onChange={formik.handleChange}
-                                        onFocus={(e) => e.target.select()}
-                                        className="w-full solid-standard-autocomplete"
-                                    />
-                                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
-                                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                                    }
-                                </div>
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    )}
-            </>
-        );
     }
+    return (
+        <div className="mt-4 relative">
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                    {fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                </label>
+            }
+            <div className="flex align-items-center gap-3 mt-2">
+                <AutoComplete
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown={!readOnlyPermission}
+                    suggestions={autoCompleteItems}
+                    completeMethod={autoCompleteSearch}
+                    onChange={formik.handleChange}
+                    onFocus={(e) => e.target.select()}
+                    className="w-full solid-standard-autocomplete"
+                />
+                {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
+                    <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} customCreateHandler={customCreateHandler} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity}></RenderSolidFormEmbededView>
+                }
+            </div>
 
+        </div>
+    );
+}
 
-    renderSolidFormEmbededView(formik: FormikObject, customCreateHandler: any, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
+export const RenderSolidFormEmbededView = ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity }: any) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+    const params = {
+        moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+        id: "new",
+        embeded: true,
+        layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+        customCreateHandler: ((values: any) => {
+            setvisibleCreateRelationEntity(false);
+            customCreateHandler(values)
+        }),
+        inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
+        handlePopupClose: (() => {
+            setvisibleCreateRelationEntity(false);
+        }),
+        modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+    }
+    return (
+        <div >
+            <Button
+                icon="pi pi-plus"
+                rounded
+                outlined
+                aria-label="Filter"
+                type="button"
+                size="small"
+                onClick={() => setvisibleCreateRelationEntity(true)}
+                className="custom-add-button"
+            />
+            <Dialog
+                header=""
+                showHeader={false}
+                visible={visibleCreateRelationEntity}
+                style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
+                onHide={() => {
+                    if (!visibleCreateRelationEntity) return;
+                    setvisibleCreateRelationEntity(false);
+                }}
+                className="solid-dialog"
+            >
+                <SolidFormView {...params} />
+
+            </Dialog>
+        </div>
+    )
+}
 
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
-        const params = {
-            moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-            id: "new",
-            embeded: true,
-            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-            customCreateHandler: ((values: any) => {
-                setvisibleCreateRelationEntity(false);
-                customCreateHandler(values)
-            }),
-            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
-            handlePopupClose: (() => {
-                setvisibleCreateRelationEntity(false);
-            }),
-            modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
-        }
+export const DefaultRelationManyToOneFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
 
-        return (
-            <div >
-                <Button
-                    icon="pi pi-plus"
-                    rounded
-                    outlined
-                    aria-label="Filter"
-                    type="button"
-                    size="small"
-                    onClick={() => setvisibleCreateRelationEntity(true)}
-                    className="custom-add-button"
-                />
-                <Dialog
-                    header=""
-                    showHeader={false}
-                    visible={visibleCreateRelationEntity}
-                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
-                    onHide={() => {
-                        if (!visibleCreateRelationEntity) return;
-                        setvisibleCreateRelationEntity(false);
-                    }}
-                    className="solid-dialog"
-                >
-                    <SolidFormView {...params} />
-
-                </Dialog>
-            </div>
-        )
-    }
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const value = formik.values[fieldLayoutInfo.attrs.name];
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <p className="m-0">{value && value.label}</p>
+        </div>
+    );
 }
+