@solidxai/core-ui 0.1.3 → 0.1.4-beta.1

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

@@ -45,16 +45,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Message } from "primereact/message";
 import { useEffect, useState } from "react";
 import * as Yup from 'yup';
@@ -63,14 +54,18 @@ import { AutoComplete } from "primereact/autocomplete";
 import { Button } from "primereact/button";
 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";
 import { SolidFieldTooltip } from "../../../../../components/common/SolidFieldTooltip";
 import qs from 'qs';
-// import Handlebars from "handlebars/dist/handlebars";
 import * as Handlebars from "handlebars";
 import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
+import { useRouter } from "../../../../../hooks/useRouter";
+import { usePathname } from "../../../../../hooks/usePathname";
+import { camelCase, capitalize } from "lodash";
+import { SolidListView } from "../../../../core/list/SolidListView";
+import { RenderSolidFormEmbededView } from "./SolidRelationManyToOneField";
+import { Dialog } from "primereact/dialog";
 var SolidRelationManyToManyField = /** @class */ (function () {
     function SolidRelationManyToManyField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -86,20 +81,6 @@ var SolidRelationManyToManyField = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function () {
-            var _a, _b;
-            var manyToManyFieldData = this.fieldContext.data[this.fieldContext.field.attrs.name];
-            var fieldMetadata = this.fieldContext.fieldMetadata;
-            var userKeyField = (_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;
-            if (manyToManyFieldData) {
-                return manyToManyFieldData.map(function (e) {
-                    var manyToManyColVal = e[userKeyField] || '';
-                    return {
-                        label: manyToManyColVal,
-                        value: (e === null || e === void 0 ? void 0 : e.id) || '',
-                        original: e
-                    };
-                });
-            }
             return [];
         }
     });
@@ -108,28 +89,8 @@ var SolidRelationManyToManyField = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function (value, formData) {
-            var fieldLayoutInfo = this.fieldContext.field;
-            //if empty then clear the field
-            if (value && value.length === 0) {
-                formData.append("".concat(fieldLayoutInfo.attrs.name, "Command"), "clear");
-            }
-            if (value && value.length > 0) {
-                var shouldUseOriginal_1 = value.every(function (item) { return item.original && item.original.id; });
-                value.forEach(function (item, index) {
-                    if (shouldUseOriginal_1) {
-                        formData.append("".concat(fieldLayoutInfo.attrs.name, "Ids[").concat(index, "]"), item.value);
-                    }
-                    else {
-                        formData.append("".concat(fieldLayoutInfo.attrs.name, "[").concat(index, "]"), JSON.stringify(item.original));
-                    }
-                });
-                if (shouldUseOriginal_1) {
-                    formData.append("".concat(fieldLayoutInfo.attrs.name, "Command"), "set");
-                }
-                else {
-                    formData.append("".concat(fieldLayoutInfo.attrs.name, "Command"), "update");
-                }
-            }
+            // Link/unlink is handled per-interaction in each widget.
+            // No bulk update needed on form submit for many-to-many.
         }
     });
     Object.defineProperty(SolidRelationManyToManyField.prototype, "validationSchema", {
@@ -142,7 +103,6 @@ var SolidRelationManyToManyField = /** @class */ (function () {
             var fieldMetadata = this.fieldContext.fieldMetadata;
             var fieldLayoutInfo = this.fieldContext.field;
             var fieldLabel = (_a = fieldLayoutInfo.attrs.label) !== null && _a !== void 0 ? _a : fieldMetadata.displayName;
-            // 1. required 
             if (fieldMetadata.required) {
                 schema = schema
                     .min(1, ERROR_MESSAGES.SELECT_ATLEAST_ONE(fieldLabel))
@@ -156,24 +116,17 @@ var SolidRelationManyToManyField = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function (formik) {
-            var _a, _b;
-            var fieldMetadata = this.fieldContext.fieldMetadata;
+            var _a;
             var fieldLayoutInfo = this.fieldContext.field;
             var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
-            var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-            var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
             var viewWidget = fieldLayoutInfo.attrs.viewWidget;
             var editWidget = fieldLayoutInfo.attrs.editWidget;
-            if (!editWidget) {
+            if (!editWidget)
                 editWidget = 'DefaultRelationManyToManyAutoCompleteFormEditWidget';
-            }
-            if (!viewWidget) {
-                viewWidget = 'DefaultRelationOneToManyFormViewWidget';
-            }
+            if (!viewWidget)
+                viewWidget = 'DefaultRelationManyToManyListFormEditWidget';
             var viewMode = this.fieldContext.viewMode;
-            return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
-                            this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" && (_jsx(_Fragment, { children: editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik) }))] }) }));
+            return (_jsxs("div", { className: className, children: [viewMode === "view" && this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" && editWidget && this.renderExtensionRenderMode(editWidget, formik)] }));
         }
     });
     Object.defineProperty(SolidRelationManyToManyField.prototype, "renderExtensionRenderMode", {
@@ -182,36 +135,47 @@ var SolidRelationManyToManyField = /** @class */ (function () {
         writable: true,
         value: function (widget, formik) {
             var DynamicWidget = getExtensionComponent(widget);
-            var widgetProps = {
-                formik: formik,
-                fieldContext: this.fieldContext,
-            };
-            return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
+            var widgetProps = { formik: formik, fieldContext: this.fieldContext };
+            return _jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) });
         }
     });
     return SolidRelationManyToManyField;
 }());
 export { SolidRelationManyToManyField };
+/**
+ * AUTOCOMPLETE WIDGET
+ *
+ * State:
+ *   currentValues  — chips shown in the input (currently linked items)
+ *   suggestions    — dropdown options populated on each keystroke
+ *
+ * Flow:
+ *   mount            → fetchCurrentValues()
+ *   user types       → fetchSuggestions() via completeMethod
+ *   user selects     → linkItem()   → on success, adds to currentValues
+ *   user removes chip→ unlinkItem() → on success, removes from currentValues
+ */
 export var DefaultRelationManyToManyAutoCompleteFormEditWidget = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     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 showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
     var readOnlyPermission = fieldContext.readOnly;
-    var disabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
-    var readOnly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readOnly;
-    var whereClause = fieldLayoutInfo.attrs.whereClause;
+    var disabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
+    var readOnly = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.readOnly;
     var _h = useState(false), visibleCreateDialog = _h[0], setVisibleCreateDialog = _h[1];
-    var _j = useRelationEntityHandler({ fieldContext: fieldContext, formik: formik }), autoCompleteItems = _j.autoCompleteItems, fetchRelationEntities = _j.fetchRelationEntities, addNewRelation = _j.addNewRelation;
-    var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    // const onChange = (e: any) => {
-    //     formik.setFieldValue(fieldContext.field.attrs.name, e.value);
-    // };
+    var _j = useRelationEntityHandler({ fieldContext: fieldContext }), currentValues = _j.currentValues, suggestions = _j.suggestions, fetchCurrentValues = _j.fetchCurrentValues, fetchSuggestions = _j.fetchSuggestions, linkItem = _j.linkItem, unlinkItem = _j.unlinkItem, addNewRelation = _j.addNewRelation;
+    var isFormFieldValid = function (formik, fieldName) {
+        return formik.touched[fieldName] && formik.errors[fieldName];
+    };
+    // On mount: load already-linked items into currentValues
+    useEffect(function () {
+        fetchCurrentValues();
+    }, [(_f = fieldContext.data) === null || _f === void 0 ? void 0 : _f.id]);
     var autoCompleteSearch = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var queryData, fixedFilterToBeApplied, fixedFilterParsed, convertedFixedFilter, fixedFilterTemplate, renderedFilter, parsedFilter_1, isValid, autocompleteQs;
+        var queryData, fixedFilterToBeApplied, fixedFilterParsed, rawFilter, rendered, parsed, hasValue_1;
         var _a, _b;
         var _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
@@ -224,147 +188,343 @@ export var DefaultRelationManyToManyAutoCompleteFormEditWidget = function (_a) {
                             _a[(_d = (_c = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _c === void 0 ? void 0 : _c.userKeyField) === null || _d === void 0 ? void 0 : _d.name] = (_b = {},
                                 _b[((_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.autocompleteMatchMode) || '$containsi'] = event.query,
                                 _b),
-                            _a)
-                    ]
-                }
+                            _a),
+                    ],
+                },
             };
             fixedFilterToBeApplied = false;
             fixedFilterParsed = false;
             if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter) || ((_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.whereClause)) {
-                convertedFixedFilter = ((_g = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.whereClause) ? (_h = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.whereClause : fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter;
+                rawFilter = (_h = (_g = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.whereClause) !== null && _h !== void 0 ? _h : fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter;
                 fixedFilterToBeApplied = true;
-                fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-                renderedFilter = fixedFilterTemplate(formik.values);
+                rendered = Handlebars.compile(rawFilter)(formik.values);
                 try {
-                    parsedFilter_1 = JSON.parse(renderedFilter);
-                    isValid = function (obj) {
-                        if (!obj || typeof obj !== 'object')
+                    parsed = JSON.parse(rendered);
+                    hasValue_1 = function (val) {
+                        if (val === null || val === undefined || val === '')
                             return false;
-                        var hasValidValue = function (val) {
-                            if (val === null || val === undefined || val === '')
-                                return false;
-                            if (typeof val === 'object') {
-                                return Object.values(val).some(hasValidValue);
-                            }
-                            return true;
-                        };
-                        return hasValidValue(parsedFilter_1);
+                        if (typeof val === 'object')
+                            return Object.values(val).some(hasValue_1);
+                        return true;
                     };
-                    if (isValid(parsedFilter_1)) {
-                        queryData.filters.$and.push(parsedFilter_1);
+                    if (hasValue_1(parsed)) {
+                        queryData.filters.$and.push(parsed);
                         fixedFilterParsed = true;
                     }
                     else {
-                        console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter_1);
+                        console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsed);
                     }
                 }
                 catch (e) {
-                    console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                    parsedFilter_1 = {};
+                    console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, rendered);
                 }
             }
-            autocompleteQs = qs.stringify(queryData, {
-                encodeValuesOnly: true,
-            });
-            // if (whereClause) {
-            //     autocompleteQs = `${autocompleteQs}&${whereClause}`;
-            // }
             if (fixedFilterToBeApplied && !fixedFilterParsed) {
                 console.error(ERROR_MESSAGES.FIXED_FILTER_NOT_APPLIED);
             }
             else {
-                //  const autocompleteQs = qs.stringify(queryData, {
-                //     encodeValuesOnly: true,
-                // });
-                fetchRelationEntities(autocompleteQs);
+                fetchSuggestions(qs.stringify(queryData, { encodeValuesOnly: true }));
             }
             return [2 /*return*/];
         });
     }); };
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(AutoComplete, __assign({ readOnly: readOnly || readOnlyPermission, disabled: disabled || readOnlyPermission, multiple: true }, formik.getFieldProps(fieldLayoutInfo.attrs.name), { id: fieldLayoutInfo.attrs.name, field: "label", value: formik.values[fieldLayoutInfo.attrs.name] || '', dropdown: !readOnlyPermission, suggestions: autoCompleteItems, completeMethod: autoCompleteSearch, onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, className: "solid-standard-autocomplete w-full" })), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button" }) }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_g = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _g === void 0 ? void 0 : _g.toString() }) }))] }));
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(AutoComplete, { readOnly: readOnly || readOnlyPermission, disabled: disabled || readOnlyPermission, multiple: true, id: fieldLayoutInfo.attrs.name, field: "label", value: currentValues, dropdown: !readOnlyPermission, suggestions: suggestions, completeMethod: autoCompleteSearch, onChange: function () {
+                                    // Intentionally empty — currentValues is managed via onSelect/onUnselect
+                                }, onSelect: function (e) { return linkItem(e.value); }, onUnselect: function (e) { return unlinkItem(e.value); }, className: "solid-standard-autocomplete w-full" }), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button" }) }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_g = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _g === void 0 ? void 0 : _g.toString() }) }))] }));
 };
+/**
+ * CHECKBOX WIDGET
+ *
+ * State:
+ *   allOptions     — every possible item to render as a checkbox row
+ *   currentValues  — the subset that is currently linked (drives checked state)
+ *
+ * Flow:
+ *   mount            → fetchCurrentValues() + fetchAllOptions()
+ *   user checks      → linkItem()   → on success, adds to currentValues
+ *   user unchecks    → unlinkItem() → on success, removes from currentValues
+ */
 export var DefaultRelationManyToManyCheckBoxFormEditWidget = function (_a) {
-    var _b;
+    var _b, _c;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
     var showFieldLabel = (_b = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.showLabel;
     var readOnlyPermission = fieldContext.readOnly;
-    var _c = useState(false), visibleCreateDialog = _c[0], setVisibleCreateDialog = _c[1];
-    var _d = useRelationEntityHandler({ fieldContext: fieldContext, formik: formik }), autoCompleteItems = _d.autoCompleteItems, fetchRelationEntities = _d.fetchRelationEntities, addNewRelation = _d.addNewRelation;
+    var _d = useState(false), visibleCreateDialog = _d[0], setVisibleCreateDialog = _d[1];
+    var _e = useRelationEntityHandler({ fieldContext: fieldContext }), currentValues = _e.currentValues, allOptions = _e.allOptions, fetchCurrentValues = _e.fetchCurrentValues, fetchAllOptions = _e.fetchAllOptions, linkItem = _e.linkItem, unlinkItem = _e.unlinkItem, addNewRelation = _e.addNewRelation;
+    // On mount: load already-linked items + all possible options
+    useEffect(function () {
+        fetchCurrentValues();
+    }, [(_c = fieldContext.data) === null || _c === void 0 ? void 0 : _c.id]);
     useEffect(function () {
         var _a, _b, _c;
-        var fieldMetadata = fieldContext.fieldMetadata;
-        var fieldLayoutInfo = fieldContext.field;
         var queryData = {
             offset: 0,
             limit: 1000,
-            filters: {
-                $and: []
-            }
+            filters: { $and: [] },
         };
         var fixedFilterToBeApplied = false;
         var fixedFilterParsed = false;
         if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter) || ((_a = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.whereClause)) {
-            var convertedFixedFilter = ((_b = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.whereClause) ? (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.whereClause : fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter;
+            var rawFilter = (_c = (_b = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.whereClause) !== null && _c !== void 0 ? _c : fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationFieldFixedFilter;
             fixedFilterToBeApplied = true;
-            var fixedFilterTemplate = Handlebars.compile(convertedFixedFilter);
-            var renderedFilter = fixedFilterTemplate(formik.values);
-            var parsedFilter_2;
+            var rendered = Handlebars.compile(rawFilter)(formik.values);
             try {
-                parsedFilter_2 = JSON.parse(renderedFilter);
-                var isValid = function (obj) {
-                    if (!obj || typeof obj !== 'object')
+                var parsed = JSON.parse(rendered);
+                var hasValue_2 = function (val) {
+                    if (val === null || val === undefined || val === '')
                         return false;
-                    var hasValidValue = function (val) {
-                        if (val === null || val === undefined || val === '')
-                            return false;
-                        if (typeof val === 'object') {
-                            return Object.values(val).some(hasValidValue);
-                        }
-                        return true;
-                    };
-                    return hasValidValue(parsedFilter_2);
+                    if (typeof val === 'object')
+                        return Object.values(val).some(hasValue_2);
+                    return true;
                 };
-                if (isValid(parsedFilter_2)) {
-                    queryData.filters.$and.push(parsedFilter_2);
+                if (hasValue_2(parsed)) {
+                    queryData.filters.$and.push(parsed);
                     fixedFilterParsed = true;
                 }
                 else {
-                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsedFilter_2);
+                    console.warn(ERROR_MESSAGES.SKIPPING_EMPTY_FIXED_FILTER, parsed);
                 }
             }
             catch (e) {
-                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, renderedFilter);
-                parsedFilter_2 = {};
+                console.error(ERROR_MESSAGES.INVALID_JSON_WHERECLAUSE, rendered);
             }
         }
         if (fixedFilterToBeApplied && !fixedFilterParsed) {
             console.error(ERROR_MESSAGES.FIXED_FILTER_NOT_APPLIED);
         }
         else {
-            var autocompleteQs = qs.stringify(queryData, {
-                encodeValuesOnly: true,
-            });
-            fetchRelationEntities(autocompleteQs);
+            fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));
         }
     }, [fieldContext, formik.values]);
-    var handleCheckboxChange = function (e) {
-        if (formik.values[fieldLayoutInfo.attrs.name].some(function (item) { return item.value === e.value; })) {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter(function (s) { return s.value !== e.value; }));
+    var handleCheckboxChange = function (item) {
+        var isCurrentlyLinked = currentValues.some(function (s) { return s.value === item.value; });
+        if (isCurrentlyLinked) {
+            unlinkItem(item);
         }
         else {
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, __spreadArray(__spreadArray([], formik.values[fieldLayoutInfo.attrs.name], true), [e], false));
+            linkItem(item);
         }
     };
-    var headerTemplate = function (options) {
-        var className = "".concat(options.className, " justify-content-space-between");
-        return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [showFieldLabel != false &&
-                            _jsxs("label", { className: "form-field-label", children: [capitalize(fieldLayoutInfo.attrs.name), fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button" }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }), _jsx("div", { children: options.togglerElement })] }));
+    var headerTemplate = function (options) { return (_jsxs("div", { className: "".concat(options.className, " justify-content-space-between"), children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [showFieldLabel !== false && (_jsxs("label", { className: "form-field-label", children: [capitalize(fieldLayoutInfo.attrs.name), fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button" }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }), _jsx("div", { children: options.togglerElement })] })); };
+    return (_jsx("div", { children: _jsx(Panel, { toggleable: true, headerTemplate: headerTemplate, children: _jsx("div", { className: "formgrid grid", children: allOptions.map(function (item, i) { return (_jsxs("div", { className: "field col-6 flex gap-2 ".concat(i >= 2 ? 'mt-3' : ''), children: [_jsx(Checkbox, { readOnly: readOnlyPermission, inputId: item.label, checked: currentValues.some(function (s) { return s.value === item.value; }), onChange: function () { return handleCheckboxChange(item); } }), _jsx("label", { htmlFor: item.label, className: "form-field-label m-0", children: item.label })] }, item.value)); }) }) }) }));
+};
+var buildRelationCustomFilter = function (_a) {
+    var _b;
+    var _c, _d, _e, _f, _g;
+    var fieldContext = _a.fieldContext, fieldLayoutInfo = _a.fieldLayoutInfo;
+    if (!fieldContext)
+        return { id: { $eq: -1 } };
+    var relationFieldName = (_d = (_c = fieldContext.fieldMetadata) === null || _c === void 0 ? void 0 : _c.relationCoModelFieldName) !== null && _d !== void 0 ? _d : fieldContext.modelName;
+    var parentId = (_f = (_e = fieldContext.data) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : -1;
+    var baseFilter = (_b = {}, _b[relationFieldName] = { id: { $eq: parentId } }, _b);
+    var whereClause = (_g = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.whereClause;
+    if (!whereClause)
+        return { $and: [baseFilter] };
+    try {
+        return { $and: [baseFilter, JSON.parse(whereClause)] };
+    }
+    catch (error) {
+        console.error("Failed to parse whereClause:", error);
+        return { $and: [baseFilter] };
+    }
+};
+export var DefaultRelationManyToManyListFormEditWidget = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var router = useRouter();
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    var _l = useState(false), visibleCreateRelationEntity = _l[0], setvisibleCreateRelationEntity = _l[1];
+    var _m = useState(), listViewParams = _m[0], setListViewParams = _m[1];
+    var _o = useState(), formViewParams = _o[0], setformViewParams = _o[1];
+    var _p = useState(false), refreshList = _p[0], setRefreshList = _p[1];
+    var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
+    var readOnlyPermission = fieldContext.readOnly;
+    var pathname = usePathname();
+    var lastPathSegment = pathname.split('/').pop();
+    var userKeyField = (_d = Object.entries(fieldContext.solidFormViewMetaData.data.solidFieldsMetadata).find(function (_a) {
+        var _ = _a[0], value = _a[1];
+        return value.isUserKey;
+    })) === null || _d === void 0 ? void 0 : _d[0];
+    var _q = useState(false), showSaveParentEntityConfirmationPopup = _q[0], setShowSaveParentEntityConfirmationPopup = _q[1];
+    var _r = useState(false), visibleLinkDialog = _r[0], setVisibleLinkDialog = _r[1];
+    var _s = useState([]), linkSearchResults = _s[0], setLinkSearchResults = _s[1];
+    var _t = useState(null), selectedLinkItem = _t[0], setSelectedLinkItem = _t[1];
+    var _u = useState(false), isLinking = _u[0], setIsLinking = _u[1];
+    var _v = useRelationEntityHandler({ fieldContext: fieldContext }), fetchSuggestions = _v.fetchSuggestions, linkItem = _v.linkItem, unlinkItem = _v.unlinkItem, suggestions = _v.suggestions;
+    var handleAddClickForEmbeddedView = function () {
+        if (lastPathSegment === "new") {
+            setShowSaveParentEntityConfirmationPopup(true);
+        }
+        else {
+            setSelectedLinkItem(null);
+            setLinkSearchResults([]);
+            setVisibleLinkDialog(true);
+        }
     };
-    return (_jsx("div", { children: _jsx(Panel, { toggleable: true, headerTemplate: headerTemplate, children: _jsx("div", { className: "formgrid grid", children: autoCompleteItems && autoCompleteItems.map(function (a, i) {
-                    return (_jsxs("div", { className: "field col-6 flex gap-2 ".concat(i >= 2 ? 'mt-3' : ''), children: [_jsx(Checkbox, { readOnly: readOnlyPermission, inputId: a.label, checked: formik.values[fieldLayoutInfo.attrs.name].some(function (item) { return item.label === a.label; }), onChange: function () { return handleCheckboxChange(a); } }), _jsxs("label", { htmlFor: a.label, className: "form-field-label m-0", children: [" ", a.label] })] }, a.label));
-                }) }) }) }));
+    var handleLinkSearch = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var queryData;
+        var _a, _b;
+        var _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    queryData = {
+                        offset: 0,
+                        limit: 1000,
+                        filters: {
+                            $and: [
+                                (_a = {},
+                                    _a[(_d = (_c = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _c === void 0 ? void 0 : _c.userKeyField) === null || _d === void 0 ? void 0 : _d.name] = (_b = {},
+                                        _b[((_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.autocompleteMatchMode) || '$containsi'] = event.query,
+                                        _b),
+                                    _a),
+                            ],
+                        },
+                    };
+                    return [4 /*yield*/, fetchSuggestions(qs.stringify(queryData, { encodeValuesOnly: true }))];
+                case 1:
+                    _f.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleLinkConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!selectedLinkItem)
+                        return [2 /*return*/];
+                    setIsLinking(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, linkItem(selectedLinkItem)];
+                case 2:
+                    _a.sent();
+                    setVisibleLinkDialog(false);
+                    setSelectedLinkItem(null);
+                    setRefreshList(function (prev) { return !prev; });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLinking(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteClick = function (id) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, unlinkItem({ value: id, label: '' })];
+                case 1:
+                    _a.sent();
+                    setRefreshList(function (prev) { return !prev; });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleEditClickForEmbeddedView = function (id) {
+        var _a;
+        var _b, _c;
+        if (id === "new") {
+            setShowSaveParentEntityConfirmationPopup(true);
+        }
+        else {
+            setformViewParams({
+                moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+                id: id,
+                embeded: true,
+                isCustomCreate: false,
+                customLayout: (_b = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.inlineCreateLayout,
+                modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+                parentFieldName: fieldContext.fieldMetadata.relationCoModelFieldName,
+                parentData: userKeyField
+                    ? (_a = {}, _a[userKeyField] = { solidManyToOneLabel: fieldContext.data[userKeyField], solidManyToOneValue: fieldContext.data['id'] }, _a) : {},
+                onEmbeddedFormSave: fieldContext.onEmbeddedFormSave,
+                inlineCreateAutoSave: (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.inlineCreateAutoSave,
+            });
+            setvisibleCreateRelationEntity(true);
+        }
+    };
+    var handlePopupClose = function () {
+        var _a, _b, _c;
+        setvisibleCreateRelationEntity(false);
+        var currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.delete('childEntity');
+        router.push(currentUrl.toString());
+        setRefreshList(function (prev) { return !prev; });
+        setListViewParams({
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false,
+            customLayout: (_a = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.inlineListLayout,
+            embeded: true,
+            id: (_c = (_b = fieldContext.data) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : 'new',
+            customFilter: buildRelationCustomFilter({ fieldContext: fieldContext, fieldLayoutInfo: fieldLayoutInfo }),
+        });
+    };
+    useEffect(function () {
+        var _a;
+        var _b, _c, _d, _e, _f;
+        setListViewParams({
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false,
+            customLayout: (_b = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.inlineListLayout,
+            embeded: true,
+            id: (_d = (_c = fieldContext.data) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : 'new',
+            customFilter: buildRelationCustomFilter({ fieldContext: fieldContext, fieldLayoutInfo: fieldLayoutInfo }),
+        });
+        setformViewParams({
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            parentFieldName: fieldContext.fieldMetadata.relationCoModelFieldName,
+            id: "new",
+            embeded: true,
+            isCustomCreate: false,
+            customLayout: (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.inlineCreateLayout,
+            parentData: userKeyField
+                ? (_a = {}, _a[userKeyField] = { solidManyToOneLabel: fieldContext.data[userKeyField], solidManyToOneValue: fieldContext.data['id'] }, _a) : {},
+            onEmbeddedFormSave: fieldContext.onEmbeddedFormSave,
+            inlineCreateAutoSave: (_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.inlineCreateAutoSave,
+        });
+    }, [readOnlyPermission]);
+    var saveParentEntity = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var currentUrl, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    currentUrl = new URL(window.location.href);
+                    currentUrl.searchParams.set('childEntity', fieldLayoutInfo.attrs.name);
+                    currentUrl.searchParams.set('viewMode', 'edit');
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    router.push(currentUrl.toString());
+                    return [4 /*yield*/, formik.handleSubmit()];
+                case 2:
+                    _b.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    return [3 /*break*/, 4];
+                case 4:
+                    setShowSaveParentEntityConfirmationPopup(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", { children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), listViewParams && (_jsx(SolidListView, __assign({}, listViewParams, { embededFieldRelationType: "many-to-many", handleAddClickForEmbeddedView: handleAddClickForEmbeddedView, handleEditClickForEmbeddedView: handleEditClickForEmbeddedView, handleDeleteClick: handleDeleteClick }), refreshList.toString())), readOnlyPermission !== true && formViewParams && (_jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, handlePopupClose: handlePopupClose })), _jsx(Dialog, { header: "Link existing ".concat(fieldLabel), visible: visibleLinkDialog, style: { width: '30vw', minWidth: 320 }, onHide: function () { return setVisibleLinkDialog(false); }, footer: _jsxs("div", { className: "flex gap-2 justify-content-end", children: [_jsx(Button, { label: "Link", size: "small", disabled: !selectedLinkItem || isLinking, loading: isLinking, onClick: handleLinkConfirm }), _jsx(Button, { label: "Cancel", size: "small", outlined: true, className: "bg-primary-reverse", onClick: function () { return setVisibleLinkDialog(false); } })] }), children: _jsxs("div", { className: "flex flex-column gap-2 pt-2", children: [_jsxs("label", { className: "form-field-label", children: ["Search ", fieldLabel] }), _jsx(AutoComplete, { field: "label", value: selectedLinkItem, suggestions: suggestions, completeMethod: handleLinkSearch, onChange: function (e) { return setSelectedLinkItem(e.value); }, onSelect: function (e) { return setSelectedLinkItem(e.value); }, placeholder: "Type to search...", className: "w-full", dropdown: true })] }) }), _jsx(Dialog, { showHeader: false, headerClassName: "py-2", contentClassName: "px-0 pb-0", className: "solid-confirm-dialog", contentStyle: { borderRadius: 6 }, visible: showSaveParentEntityConfirmationPopup, style: { width: '20vw' }, onHide: function () {
+                    if (!showSaveParentEntityConfirmationPopup)
+                        return;
+                    setShowSaveParentEntityConfirmationPopup(false);
+                }, children: _jsxs("div", { className: "p-4", children: [_jsxs("p", { className: "m-0 solid-primary-title", style: { fontSize: 16 }, children: ["Before Creating ", fieldLabel, " you need to save", ' ', ((_g = (_f = (_e = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.model) === null || _g === void 0 ? void 0 : _g.displayName)
+                                    ? (_k = (_j = (_h = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _h === void 0 ? void 0 : _h.solidView) === null || _j === void 0 ? void 0 : _j.model) === null || _k === void 0 ? void 0 : _k.displayName
+                                    : capitalize(fieldContext.modelName), ". Please click save if you wish to proceed?"] }), _jsxs("div", { className: "flex align-items-center justify-content-start gap-2 mt-3", children: [_jsx(Button, { label: "Save", size: "small", onClick: saveParentEntity }), _jsx(Button, { label: "Cancel", size: "small", onClick: function () { return setShowSaveParentEntityConfirmationPopup(false); }, outlined: true, className: "bg-primary-reverse" })] })] }) })] }));
 };
 //# sourceMappingURL=SolidRelationManyToManyField.js.map