@solidstarters/solid-core-ui 1.1.70 → 1.1.71

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

@@ -0,0 +1,309 @@
+'use client';
+import { Message } from "primereact/message";
+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 { 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";
+
+
+
+
+
+export class SolidRelationManyToManyField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    initialValue(): any {
+
+        const manyToManyFieldData = this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+        if (manyToManyFieldData) {
+            return manyToManyFieldData.map((e: any) => {
+                const manyToManyColVal = e[userKeyField] || '';
+                return {
+                    label: manyToManyColVal,
+                    value: e?.id || '',
+                    original: e
+                };
+            });
+        }
+
+        return [];
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value && value.length > 0) {
+            const shouldUseOriginal = value.every((item: any) => item.original && item.original.id);
+
+            value.forEach((item: any, index: number) => {
+                if (shouldUseOriginal) {
+                    formData.append(
+                        `${fieldLayoutInfo.attrs.name}Ids[${index}]`,
+                        item.value
+                    );
+                } else {
+                    formData.append(
+                        `${fieldLayoutInfo.attrs.name}[${index}]`,
+                        JSON.stringify(item.original)
+                    );
+                }
+            });
+            if (shouldUseOriginal) {
+                formData.append(`${fieldLayoutInfo.attrs.name}Command`, "set")
+            } else {
+                formData.append(`${fieldLayoutInfo.attrs.name}Command`, "update")
+
+            }
+
+        }
+    }
+
+    validationSchema(): Schema {
+        let schema = Yup.array();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema
+                .min(1, `You must select at least one ${fieldLabel}.`)
+                .required(`${fieldLabel} is required.`);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        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 viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRelationManyToManyAutoCompleteFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultRelationOneToManyFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
+        return (
+            <>
+                <div className={className}>
+                    {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>
+                            )}
+                        </>
+                    )
+                    }
+                </div>
+            </>
+        );
+    }
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
+
+
+
+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/dist/components/core/form/fields/relations/SolidRelationManyToOneField.d.ts

@@ -1,5 +1,6 @@
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 export declare class SolidRelationManyToOneField implements ISolidField {
     private fieldContext;
     constructor(fieldContext: SolidFieldProps);
@@ -7,6 +8,9 @@ export declare class SolidRelationManyToOneField implements ISolidField {
     updateFormData(value: any, formData: FormData): any;
     validationSchema(): Schema;
     render(formik: FormikObject): import("react/jsx-runtime").JSX.Element;
-    renderSolidFormEmbededView(formik: FormikObject, customCreateHandler: any, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any): import("react/jsx-runtime").JSX.Element;
+    renderExtensionRenderMode(widget: string, formik: FormikObject): import("react/jsx-runtime").JSX.Element;
 }
+export declare const DefaultRelationManyToOneFormEditWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderSolidFormEmbededView: ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultRelationManyToOneFormViewWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidRelationManyToOneField.d.ts.map

package/dist/components/core/form/fields/relations/SolidRelationManyToOneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAU5E,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAYnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,gBAAgB,IAAI,MAAM;IAe1B,MAAM,CAAC,MAAM,EAAE,YAAY;IAyI3B,0BAA0B,CAAC,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,EAAE,2BAA2B,EAAE,GAAG,EAAE,8BAA8B,EAAE,GAAG;CAoDnJ"}
+{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAQ5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAYnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,gBAAgB,IAAI,MAAM;IAe1B,MAAM,CAAC,MAAM,EAAE,YAAY;IAyC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAajE;AAED,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CA0GzG,CAAA;AAED,eAAO,MAAM,0BAA0B,+GAAgH,GAAG,4CAiDzJ,CAAA;AAGD,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAYzG,CAAA"}

package/dist/components/core/form/fields/relations/SolidRelationManyToOneField.js

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createSolidEntityApi } from "../../../../../redux/api/solidEntityApi";
 import { AutoComplete } from "primereact/autocomplete";
 import { Message } from "primereact/message";
@@ -101,120 +101,149 @@ var SolidRelationManyToOneField = /** @class */ (function () {
         return schema;
     };
     SolidRelationManyToOneField.prototype.render = function (formik) {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b;
         var fieldMetadata = this.fieldContext.fieldMetadata;
         var fieldLayoutInfo = this.fieldContext.field;
-        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
-        var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-        var solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
-        var readOnlyPermission = this.fieldContext.readOnly;
-        var _o = useState(false), visibleCreateRelationEntity = _o[0], setvisibleCreateRelationEntity = _o[1];
-        // auto complete specific code. 
-        var entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-        var useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-        var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
-        var fieldDisabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
-        var fieldReadonly = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.readonly;
-        var formDisabled = (_h = (_g = (_f = solidFormViewMetaData.data.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.disabled;
-        var formReadonly = (_l = (_k = (_j = solidFormViewMetaData.data.solidView) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.attrs) === null || _l === void 0 ? void 0 : _l.readonly;
-        var whereClause = fieldLayoutInfo.attrs.whereClause;
-        var _p = useState([]), autoCompleteItems = _p[0], setAutoCompleteItems = _p[1];
-        var autoCompleteSearch = function (event) { return __awaiter(_this, void 0, void 0, function () {
-            var queryData, autocompleteQs, autocompleteResponse, autocompleteData, autoCompleteItems_1;
-            var _a;
-            var _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        queryData = {
-                            offset: 0,
-                            limit: 10,
-                            filters: (_a = {},
-                                _a[(_c = (_b = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _b === void 0 ? void 0 : _b.userKeyField) === null || _c === void 0 ? void 0 : _c.name] = {
-                                    '$containsi': event.query
-                                },
-                                _a)
-                        };
-                        autocompleteQs = qs.stringify(queryData, {
-                            encodeValuesOnly: true,
-                        });
-                        if (whereClause) {
-                            autocompleteQs = "".concat(autocompleteQs, "&").concat(whereClause);
-                        }
-                        return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
-                    case 1:
-                        autocompleteResponse = _d.sent();
-                        autocompleteData = autocompleteResponse.data;
-                        if (autocompleteData) {
-                            autoCompleteItems_1 = autocompleteData.records.map(function (item) {
-                                var _a, _b;
-                                return {
-                                    label: item[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
-                                    value: item['id']
-                                };
-                            });
-                            setAutoCompleteItems(autoCompleteItems_1);
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        }); };
         var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-        var customCreateHandler = function (values) {
-            var _a, _b;
-            var currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-            var jsonValues = Object.fromEntries(values.entries());
-            var updatedRelationData = __spreadArray(__spreadArray([], currentRelationData, true), [
-                {
-                    label: jsonValues[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
-                    value: "new",
-                    original: jsonValues,
-                },
-            ], false);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
-        };
+        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
+        var viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        var editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRelationManyToOneFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultRelationManyToOneFormViewWidget';
+        }
         var viewMode = this.fieldContext.viewMode;
-        var DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
-        var widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
-        };
-        return (_jsxs(_Fragment, { children: [viewMode === "view" &&
-                    _jsx("div", { className: className, children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }), viewMode === "edit" &&
-                    (_jsx("div", { className: className, children: _jsxs("div", { className: "mt-4 relative", children: [showFieldLabel != false &&
-                                    _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" })] }), _jsxs("div", { className: "flex align-items-center gap-3 mt-2", children: [_jsx(AutoComplete, __assign({ 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: function (e) { return e.target.select(); }, className: "w-full solid-standard-autocomplete" })), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
-                                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }) }))] }) }))] }));
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" && (_jsxs(_Fragment, { children: [editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_b = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _b === void 0 ? void 0 : _b.toString() }) }))] }))] }) }));
     };
-    SolidRelationManyToOneField.prototype.renderSolidFormEmbededView = function (formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var fieldMetadata = this.fieldContext.fieldMetadata;
-        var fieldLayoutInfo = this.fieldContext.field;
-        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-6 flex flex-column gap-2 mt-4';
-        var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-        var params = {
-            moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-            id: "new",
-            embeded: true,
-            layout: (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.inlineCreateLayout,
-            customCreateHandler: (function (values) {
-                setvisibleCreateRelationEntity(false);
-                customCreateHandler(values);
-            }),
-            inlineCreateAutoSave: (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.inlineCreateAutoSave,
-            handlePopupClose: (function () {
-                setvisibleCreateRelationEntity(false);
-            }),
-            modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
+    SolidRelationManyToOneField.prototype.renderExtensionRenderMode = function (widget, formik) {
+        var DynamicWidget = getExtensionComponent(widget);
+        var widgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
         };
-        return (_jsxs("div", { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setvisibleCreateRelationEntity(true); }, className: "custom-add-button" }), _jsx(Dialog, { header: "", showHeader: false, visible: visibleCreateRelationEntity, style: { width: (_h = (_g = (_f = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.inlineCreateLayout) === null || _f === void 0 ? void 0 : _f.attrs) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : "60vw" }, onHide: function () {
-                        if (!visibleCreateRelationEntity)
-                            return;
-                        setvisibleCreateRelationEntity(false);
-                    }, className: "solid-dialog", children: _jsx(SolidFormView, __assign({}, params)) })] }));
+        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
     };
     return SolidRelationManyToOneField;
 }());
 export { SolidRelationManyToOneField };
+export var DefaultRelationManyToOneFormEditWidget = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
+    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
+    var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
+    var readOnlyPermission = fieldContext.readOnly;
+    var _o = useState(false), visibleCreateRelationEntity = _o[0], setvisibleCreateRelationEntity = _o[1];
+    // auto complete specific code. 
+    var entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    var useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
+    var fieldDisabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
+    var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
+    var formDisabled = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.disabled;
+    var formReadonly = (_m = (_l = (_k = solidFormViewMetaData.data.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.readonly;
+    var whereClause = fieldLayoutInfo.attrs.whereClause;
+    var _p = useState([]), autoCompleteItems = _p[0], setAutoCompleteItems = _p[1];
+    var autoCompleteSearch = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var queryData, autocompleteQs, autocompleteResponse, autocompleteData, autoCompleteItems_1;
+        var _a;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    queryData = {
+                        offset: 0,
+                        limit: 10,
+                        filters: (_a = {},
+                            _a[(_c = (_b = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _b === void 0 ? void 0 : _b.userKeyField) === null || _c === void 0 ? void 0 : _c.name] = {
+                                '$containsi': event.query
+                            },
+                            _a)
+                    };
+                    autocompleteQs = qs.stringify(queryData, {
+                        encodeValuesOnly: true,
+                    });
+                    if (whereClause) {
+                        autocompleteQs = "".concat(autocompleteQs, "&").concat(whereClause);
+                    }
+                    return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
+                case 1:
+                    autocompleteResponse = _d.sent();
+                    autocompleteData = autocompleteResponse.data;
+                    if (autocompleteData) {
+                        autoCompleteItems_1 = autocompleteData.records.map(function (item) {
+                            var _a, _b;
+                            return {
+                                label: item[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
+                                value: item['id']
+                            };
+                        });
+                        setAutoCompleteItems(autoCompleteItems_1);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
+    var customCreateHandler = function (values) {
+        var _a, _b;
+        var currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
+        var jsonValues = Object.fromEntries(values.entries());
+        var updatedRelationData = __spreadArray(__spreadArray([], currentRelationData, true), [
+            {
+                label: jsonValues[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
+                value: "new",
+                original: jsonValues,
+            },
+        ], false);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
+    };
+    return (_jsxs("div", { className: "mt-4 relative", children: [showFieldLabel != false &&
+                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" })] }), _jsxs("div", { className: "flex align-items-center gap-3 mt-2", children: [_jsx(AutoComplete, __assign({ 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: function (e) { return e.target.select(); }, className: "w-full solid-standard-autocomplete" })), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
+                        _jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, customCreateHandler: customCreateHandler, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity })] })] }));
+};
+export var RenderSolidFormEmbededView = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var formik = _a.formik, fieldContext = _a.fieldContext, customCreateHandler = _a.customCreateHandler, visibleCreateRelationEntity = _a.visibleCreateRelationEntity, setvisibleCreateRelationEntity = _a.setvisibleCreateRelationEntity;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-6 flex flex-column gap-2 mt-4';
+    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
+    var params = {
+        moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+        id: "new",
+        embeded: true,
+        layout: (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.inlineCreateLayout,
+        customCreateHandler: (function (values) {
+            setvisibleCreateRelationEntity(false);
+            customCreateHandler(values);
+        }),
+        inlineCreateAutoSave: (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.inlineCreateAutoSave,
+        handlePopupClose: (function () {
+            setvisibleCreateRelationEntity(false);
+        }),
+        modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+    };
+    return (_jsxs("div", { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setvisibleCreateRelationEntity(true); }, className: "custom-add-button" }), _jsx(Dialog, { header: "", showHeader: false, visible: visibleCreateRelationEntity, style: { width: (_j = (_h = (_g = (_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.inlineCreateLayout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : "60vw" }, onHide: function () {
+                    if (!visibleCreateRelationEntity)
+                        return;
+                    setvisibleCreateRelationEntity(false);
+                }, className: "solid-dialog", children: _jsx(SolidFormView, __assign({}, params)) })] }));
+};
+export var DefaultRelationManyToOneFormViewWidget = function (_a) {
+    var _b;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var value = formik.values[fieldLayoutInfo.attrs.name];
+    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), _jsx("p", { className: "m-0", children: value && value.label })] }));
+};
 //# sourceMappingURL=SolidRelationManyToOneField.js.map