@solidxai/core-ui 0.1.4-beta.0 → 0.1.4-beta.2

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

@@ -144,6 +144,47 @@ export class SolidRelationOneToManyField implements ISolidField {
 }
 
 
+
+const buildRelationCustomFilter = ({
+    fieldContext,
+    fieldLayoutInfo,
+}: {
+    fieldContext: any;
+    fieldLayoutInfo?: any;
+}) => {
+    if (!fieldContext) {
+        return { id: { $eq: -1 } };
+    }
+    const relationFieldName =
+        fieldContext.fieldMetadata?.relationCoModelFieldName ??
+        fieldContext.modelName;
+
+    const parentId = fieldContext.data?.id ?? -1;
+
+
+    const baseFilter = {
+        [relationFieldName]: {
+            id: { $eq: parentId },
+        },
+    };
+
+    const whereClause = fieldLayoutInfo?.attrs?.whereClause;
+
+    if (!whereClause) return { $and: [baseFilter] };
+
+    try {
+        const parsedWhereClause = JSON.parse(whereClause);
+
+        return {
+            $and: [baseFilter, parsedWhereClause],
+        };
+    } catch (error) {
+        console.error("Failed to parse whereClause:", error);
+        return { $and: [baseFilter] };
+    }
+};
+
+
 export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldMetadata = fieldContext.fieldMetadata;
     const router = useRouter();
@@ -168,11 +209,11 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
         const urlParams = new URLSearchParams(window.location.search);
         const childEntity = urlParams.get('childEntity');
         if (childEntity === fieldLayoutInfo.attrs.name && lastPathSegment !== "new") {
-            handlePopupOpen('new');
+            handleAddOrEditClickForEmbeddedView('new');
         }
     }, [])
 
-    const handlePopupOpen = (id: any) => {
+    const handleAddOrEditClickForEmbeddedView = (id: any) => {
         if (lastPathSegment === "new") {
             setShowSaveParentEntityConfirmationPopup(true);
         } else {
@@ -208,51 +249,14 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
             customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
             embeded: true,
             id: fieldContext.data ? fieldContext?.data?.id : 'new',
-            customFilter: {
-                [customFilter]: {
-                    id: {
-                        $eq: fieldContext.data && fieldContext.data.id !== undefined ? fieldContext.data.id : -1
-                    }
-                }
-            }
+            customFilter: buildRelationCustomFilter({
+                fieldContext,
+                fieldLayoutInfo,
+            })
         }
         setListViewParams(lisviewparams)
     }
 
-
-
-    const buildCustomFilter = (customFilterKey: any, fieldContext: any, fieldLayoutInfo: any) => {
-        const baseFilter = {
-            [customFilterKey]: {
-                id: {
-                    $eq: fieldContext.data && fieldContext.data.id !== undefined
-                        ? fieldContext.data.id
-                        : -1
-                }
-            }
-        };
-
-        const whereClause = fieldLayoutInfo?.attrs?.whereClause;
-
-        if (whereClause) {
-            try {
-                const parsedWhereClause = JSON.parse(whereClause);
-                return {
-                    [customFilterKey]: {
-                        ...baseFilter[customFilterKey],
-                        ...parsedWhereClause
-                    }
-                };
-            } catch (error) {
-                console.error('Failed to parse whereClause:', error);
-                return baseFilter;
-            }
-        }
-
-        return baseFilter;
-    };
-
-
     //Intial Params 
     useEffect(() => {
 
@@ -265,15 +269,11 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
             customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
             embeded: true,
             id: fieldContext.data ? fieldContext?.data?.id : 'new',
-            customFilter: buildCustomFilter(customFilter, fieldContext, fieldLayoutInfo)
-
-            // customFilter: {
-            //     [customFilter]: {
-            //         id: {
-            //             $eq: fieldContext.data && fieldContext.data.id !== undefined ? fieldContext.data.id : -1
-            //         }
-            //     }
-            // }
+            customFilter: buildRelationCustomFilter({
+                fieldContext,
+                fieldLayoutInfo,
+            })
+
         }
         setListViewParams(listviewparams);
         const formviewparams: FormViewParams = {
@@ -332,7 +332,7 @@ export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }:
 
             {/* {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>} */}
             {listViewParams &&
-                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
             }
             {readOnlyPermission !== true && formViewParams &&
                 <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
@@ -374,48 +374,8 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
     const lastPathSegment = pathname.split('/').pop();
     const userKeyField: any = Object.entries(fieldContext.solidFormViewMetaData.data.solidFieldsMetadata).find(([_, value]: any) => value.isUserKey)?.[0];
 
-    const buildRelationCustomFilter = ({
-        fieldContext,
-        fieldLayoutInfo,
-    }: {
-        fieldContext: any;
-        fieldLayoutInfo?: any;
-    }) => {
-        if (!fieldContext) {
-            return { id: { $eq: -1 } };
-        }
-
-        const relationFieldName =
-            fieldContext.fieldMetadata?.relationCoModelFieldName ??
-            fieldContext.modelName;
-
-        const parentId = fieldContext.data?.id ?? -1;
-
-        const baseFilter = {
-            [relationFieldName]: {
-                id: { $eq: parentId },
-            },
-        };
-
-        const whereClause = fieldLayoutInfo?.attrs?.whereClause;
-
-        if (!whereClause) return { $and: [baseFilter] };
 
-        try {
-            const parsedWhereClause = JSON.parse(whereClause);
-
-            return {
-                $and: [baseFilter, parsedWhereClause],
-            };
-        } catch (error) {
-            console.error("Failed to parse whereClause:", error);
-            return { $and: [baseFilter] };
-        }
-    };
-
-
-
-    const handlePopupOpen = (id: any) => {
+    const handleAddOrEditClickForEmbeddedView = (id: any) => {
 
         const formviewparams: FormViewParams = {
             moduleName: fieldContext.fieldMetadata.relationModelModuleName,
@@ -451,13 +411,6 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
                 fieldContext,
                 fieldLayoutInfo,
             })
-            // customFilter: {
-            //     [customFilter]: {
-            //         id: {
-            //             $eq: fieldContext.data ? fieldContext?.data?.id : -1
-            //         }
-            //     }
-            // }
         }
         setListViewParams(lisviewparams)
     }
@@ -476,15 +429,6 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
                 fieldContext,
                 fieldLayoutInfo,
             })
-
-
-            // customFilter: {
-            //     [customFilter]: {
-            //         id: {
-            //             $eq: fieldContext?.data?.id !== undefined ? fieldContext?.data?.id : -1
-            //         }
-            //     }
-            // }
         }
         setListViewParams(listviewparams);
         const formviewparams: FormViewParams = {
@@ -523,7 +467,7 @@ export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }:
 
             {/* {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>} */}
             {listViewParams &&
-                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
             }
             {readOnlyPermission !== true && formViewParams &&
                 <RenderSolidFormEmbededView fieldLayoutInfo={fieldLayoutInfo} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
@@ -648,7 +592,7 @@ export const PseudoRelationOneToManyFormWidget = ({ formData, field, fieldsMetad
 
 
 
-    const handlePopupOpen = (id: any) => {
+    const handleAddOrEditClickForEmbeddedView = (id: any) => {
 
         const formviewparams: FormViewParams = {
             moduleName: childModuleName,
@@ -736,7 +680,7 @@ export const PseudoRelationOneToManyFormWidget = ({ formData, field, fieldsMetad
 
             {/* {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>} */}
             {listViewParams &&
-                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                <SolidListView key={refreshList.toString()}  {...listViewParams} handleAddClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} handleEditClickForEmbeddedView={handleAddOrEditClickForEmbeddedView} />
             }
             {readOnlyPermission !== true && formViewParams &&
                 <RenderSolidFormEmbededView fieldLayoutInfo={fieldLayoutInfo} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.d.ts

@@ -1,7 +1,17 @@
-export declare const useRelationEntityHandler: ({ fieldContext, formik, autoCompleteLimit }: any) => {
-    autoCompleteItems: never[];
-    fetchRelationEntities: (autocompleteQs?: string, limit?: any) => Promise<void>;
-    populateFormikWithRelatedEntities: () => Promise<void>;
-    addNewRelation: (values: any) => void;
+export type RelationItem = {
+    label: string;
+    value: any;
+    original?: any;
+};
+export declare const useRelationEntityHandler: ({ fieldContext, autoCompleteLimit }: any) => {
+    currentValues: RelationItem[];
+    allOptions: RelationItem[];
+    suggestions: RelationItem[];
+    fetchCurrentValues: () => Promise<void>;
+    linkItem: (item: RelationItem) => Promise<void>;
+    unlinkItem: (item: RelationItem) => Promise<void>;
+    fetchSuggestions: (autocompleteQs?: string) => Promise<void>;
+    fetchAllOptions: (autocompleteQs?: string) => Promise<void>;
+    addNewRelation: (values: any) => Promise<void>;
 };
 //# sourceMappingURL=useRelationEntityHandler.d.ts.map

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRelationEntityHandler.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,gDAAwD,GAAG;;;;6BAsF9D,GAAG;CAwBpC,CAAC"}
+{"version":3,"file":"useRelationEntityHandler.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,wCAAgD,GAAG;;;;;qBAoFxD,YAAY;uBAeV,YAAY;;;6BAqDN,GAAG;CAgC1C,CAAC"}

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js

@@ -47,42 +47,61 @@ import { useState } from "react";
 import qs from "qs";
 import { createSolidEntityApi } from "../../../../../../../redux/api/solidEntityApi";
 export var useRelationEntityHandler = function (_a) {
-    var fieldContext = _a.fieldContext, formik = _a.formik, _b = _a.autoCompleteLimit, autoCompleteLimit = _b === void 0 ? 1000 : _b;
+    var fieldContext = _a.fieldContext, _b = _a.autoCompleteLimit, autoCompleteLimit = _b === void 0 ? 1000 : _b;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
     var entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
     var useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
     var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
-    var _c = useState([]), autoCompleteItems = _c[0], setAutoCompleteItems = _c[1];
-    var fetchRelationEntities = function (autocompleteQs, limit) {
-        if (autocompleteQs === void 0) { autocompleteQs = ""; }
-        if (limit === void 0) { limit = autoCompleteLimit; }
-        return __awaiter(void 0, void 0, void 0, function () {
-            var response, data, mappedItems;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
-                    case 1:
-                        response = _a.sent();
-                        data = response.data;
-                        if (data) {
-                            mappedItems = data.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'],
-                                    original: item
-                                });
-                            });
-                            setAutoCompleteItems(mappedItems);
-                        }
+    var parentEntityApi = createSolidEntityApi(fieldContext.modelName);
+    var usePatchUpdateSolidEntityMutation = parentEntityApi.usePatchUpdateSolidEntityMutation, useUpdateSolidEntityMutation = parentEntityApi.useUpdateSolidEntityMutation;
+    var updateSolidEntity = usePatchUpdateSolidEntityMutation()[0];
+    /**
+     * AUTOCOMPLETE & CHECKBOX:
+     * The currently linked items — drives what chips are shown in the autocomplete
+     * and which checkboxes are checked.
+     */
+    var _c = useState([]), currentValues = _c[0], setCurrentValues = _c[1];
+    /**
+     * CHECKBOX ONLY:
+     * All possible options to render as checkboxes.
+     * For autocomplete this is not needed — options are fetched on user search input.
+     */
+    var _d = useState([]), allOptions = _d[0], setAllOptions = _d[1];
+    /**
+     * AUTOCOMPLETE ONLY:
+     * The live suggestion list shown in the dropdown while the user is typing.
+     * Populated by `fetchSuggestions` on each keystroke.
+     */
+    var _e = useState([]), suggestions = _e[0], setSuggestions = _e[1];
+    // ─── Internal ────────────────────────────────────────────────────────────────
+    var sendLinkCommand = function (item, command) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentId, fieldName, formData;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    parentId = (_a = fieldContext.data) === null || _a === void 0 ? void 0 : _a.id;
+                    fieldName = fieldLayoutInfo.attrs.name;
+                    if (!parentId || parentId === "new")
                         return [2 /*return*/];
-                }
-            });
+                    formData = new FormData();
+                    formData.append("".concat(fieldName, "Ids[0]"), item.value);
+                    formData.append("".concat(fieldName, "Command"), command);
+                    return [4 /*yield*/, updateSolidEntity({ id: parentId, data: formData }).unwrap()];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
         });
-    };
-    var populateFormikWithRelatedEntities = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var relationFieldName, parentId, queryData, qsString, response, data, mappedItems;
+    }); };
+    // ─── Shared ──────────────────────────────────────────────────────────────────
+    /**
+     * Fetch currently linked items and populate `currentValues`.
+     * Call on mount for both autocomplete and checkbox widgets.
+     */
+    var fetchCurrentValues = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var relationFieldName, parentId, queryData, response, mapped;
         var _a;
         var _b, _c, _d, _e;
         return __generator(this, function (_f) {
@@ -94,25 +113,15 @@ export var useRelationEntityHandler = function (_a) {
                         offset: 0,
                         limit: autoCompleteLimit,
                         filters: {
-                            $and: [
-                                (_a = {},
-                                    _a[relationFieldName] = {
-                                        id: { $eq: parentId },
-                                    },
-                                    _a),
-                            ],
+                            $and: [(_a = {}, _a[relationFieldName] = { id: { $eq: parentId } }, _a)],
                         },
                     };
-                    qsString = qs.stringify(queryData, {
-                        encodeValuesOnly: true,
-                    });
-                    return [4 /*yield*/, triggerGetSolidEntities(qsString)];
+                    return [4 /*yield*/, triggerGetSolidEntities(qs.stringify(queryData, { encodeValuesOnly: true }))];
                 case 1:
                     response = _f.sent();
-                    data = response.data;
-                    if (!data)
+                    if (!response.data)
                         return [2 /*return*/];
-                    mappedItems = data.records.map(function (item) {
+                    mapped = response.data.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],
@@ -120,37 +129,164 @@ export var useRelationEntityHandler = function (_a) {
                             original: item,
                         });
                     });
-                    /**
-                     * IMPORTANT:
-                     * 1. Set checkbox options
-                     * 2. Set formik selected values (checked state)
-                     */
-                    formik.setFieldValue(fieldLayoutInfo.attrs.name, mappedItems);
+                    setCurrentValues(mapped);
                     return [2 /*return*/];
             }
         });
     }); };
-    var addNewRelation = function (values) {
-        var _a, _b;
-        var currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
-        var jsonValues = Object.fromEntries(values.entries());
-        var newItem = {
-            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,
-        };
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, __spreadArray(__spreadArray([], currentData, true), [newItem], false));
-        // Optionally add to autocomplete list
-        setAutoCompleteItems(function (prev) {
-            var exists = prev.some(function (item) { return item.label === newItem.label; });
-            return exists ? prev : __spreadArray(__spreadArray([], prev, true), [newItem], false);
+    /**
+     * Link an item: fire the API call, and on success update `currentValues`.
+     * Used by both autocomplete (onSelect) and checkbox (onChange when unchecked).
+     */
+    var linkItem = function (item) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, sendLinkCommand(item, "link")];
+                case 1:
+                    _b.sent();
+                    setCurrentValues(function (prev) {
+                        return prev.some(function (s) { return s.value === item.value; }) ? prev : __spreadArray(__spreadArray([], prev, true), [item], false);
+                    });
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _b.sent();
+                    console.error(((_a = error_1 === null || error_1 === void 0 ? void 0 : error_1.data) === null || _a === void 0 ? void 0 : _a.message) || (error_1 === null || error_1 === void 0 ? void 0 : error_1.message) || "Failed to link ".concat(fieldMetadata.displayName));
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Unlink an item: fire the API call, and on success update `currentValues`.
+     * Used by both autocomplete (onUnselect) and checkbox (onChange when checked).
+     */
+    var unlinkItem = function (item) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_2;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, sendLinkCommand(item, "unlink")];
+                case 1:
+                    _b.sent();
+                    setCurrentValues(function (prev) { return prev.filter(function (s) { return s.value !== item.value; }); });
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_2 = _b.sent();
+                    console.error(((_a = error_2 === null || error_2 === void 0 ? void 0 : error_2.data) === null || _a === void 0 ? void 0 : _a.message) || (error_2 === null || error_2 === void 0 ? void 0 : error_2.message) || "Failed to unlink ".concat(fieldMetadata.displayName));
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    // ─── Autocomplete-specific ───────────────────────────────────────────────────
+    /**
+     * Fetch suggestions for the autocomplete dropdown based on the user's search query.
+     * Call this inside `completeMethod` of the AutoComplete component.
+     */
+    var fetchSuggestions = function (autocompleteQs) {
+        if (autocompleteQs === void 0) { autocompleteQs = ""; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var response, mapped;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.data)
+                            return [2 /*return*/];
+                        mapped = response.data.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"],
+                                original: item,
+                            });
+                        });
+                        setSuggestions(mapped);
+                        return [2 /*return*/];
+                }
+            });
         });
     };
+    // ─── Checkbox-specific ───────────────────────────────────────────────────────
+    /**
+     * Fetch all possible options for the checkbox list.
+     * Call this on mount for the checkbox widget.
+     */
+    var fetchAllOptions = function (autocompleteQs) {
+        if (autocompleteQs === void 0) { autocompleteQs = ""; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var response, mapped;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.data)
+                            return [2 /*return*/];
+                        mapped = response.data.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"],
+                                original: item,
+                            });
+                        });
+                        setAllOptions(mapped);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // ─── Inline create ───────────────────────────────────────────────────────────
+    /**
+     * Handle an inline-created entity: link it and add to both `currentValues`
+     * and `allOptions` (so it shows up in the checkbox list immediately).
+     */
+    var addNewRelation = function (values) { return __awaiter(void 0, void 0, void 0, function () {
+        var jsonValues, newItem;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    jsonValues = Object.fromEntries(values.entries());
+                    newItem = {
+                        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,
+                    };
+                    return [4 /*yield*/, linkItem(newItem)];
+                case 1:
+                    _c.sent();
+                    // Also add to allOptions so checkbox widget shows the new item
+                    setAllOptions(function (prev) {
+                        return prev.some(function (s) { return s.value === newItem.value; }) ? prev : __spreadArray(__spreadArray([], prev, true), [newItem], false);
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     return {
-        autoCompleteItems: autoCompleteItems,
-        fetchRelationEntities: fetchRelationEntities,
-        populateFormikWithRelatedEntities: populateFormikWithRelatedEntities,
-        addNewRelation: addNewRelation
+        // State
+        currentValues: currentValues,
+        allOptions: allOptions,
+        suggestions: suggestions,
+        // Shared
+        fetchCurrentValues: fetchCurrentValues,
+        linkItem: linkItem,
+        unlinkItem: unlinkItem,
+        // Autocomplete-specific
+        fetchSuggestions: fetchSuggestions,
+        // Checkbox-specific
+        fetchAllOptions: fetchAllOptions,
+        // Inline create
+        addNewRelation: addNewRelation,
     };
 };
 //# sourceMappingURL=useRelationEntityHandler.js.map

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRelationEntityHandler.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport qs from \"qs\";\nimport { createSolidEntityApi } from \"../../../../../../../redux/api/solidEntityApi\";\n\nexport const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {\n  const fieldMetadata = fieldContext.fieldMetadata;\n  const fieldLayoutInfo = fieldContext.field;\n\n  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n  const { useLazyGetSolidEntitiesQuery } = entityApi;\n  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n  const [autoCompleteItems, setAutoCompleteItems] = useState([]);\n\n  const fetchRelationEntities = async (autocompleteQs = \"\", limit = autoCompleteLimit) => {\n    // const queryData = {\n    //   offset: 0,\n    //   limit: limit,\n    //   filters: {\n    //     [fieldMetadata?.relationModel?.userKeyField?.name]: {\n    //       '$containsi': query\n    //     }\n    //   }\n    // };\n\n    // const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });\n\n    const response = await triggerGetSolidEntities(autocompleteQs);\n    const data = response.data;\n\n    if (data) {\n      const mappedItems = data.records.map((item: any) => ({\n        label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n        value: item['id'],\n        original: item\n      }));\n      setAutoCompleteItems(mappedItems);\n    }\n  };\n\n  const populateFormikWithRelatedEntities = async () => {\n\n    /**\n     * Example:\n     * permissions filtered by roles.id = current role id\n     */\n\n    const relationFieldName =\n      fieldContext.fieldMetadata?.relationCoModelFieldName ??\n      fieldContext.modelName;\n\n    const parentId = fieldContext.data?.id ?? -1;\n\n    const queryData = {\n      offset: 0,\n      limit: autoCompleteLimit,\n      filters: {\n        $and: [\n          {\n            [relationFieldName]: {\n              id: { $eq: parentId },\n            },\n          },\n        ],\n      },\n    };\n\n    const qsString = qs.stringify(queryData, {\n      encodeValuesOnly: true,\n    });\n\n    const response = await triggerGetSolidEntities(qsString);\n    const data = response.data;\n\n    if (!data) return;\n\n    const mappedItems = data.records.map((item: any) => ({\n      label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: item.id,\n      original: item,\n    }));\n\n    /**\n     * IMPORTANT:\n     * 1. Set checkbox options\n     * 2. Set formik selected values (checked state)\n     */\n    formik.setFieldValue(fieldLayoutInfo.attrs.name, mappedItems);\n  };\n\n  const addNewRelation = (values: any) => {\n    const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];\n    const jsonValues = Object.fromEntries(values.entries());\n    const newItem = {\n      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: \"new\",\n      original: jsonValues,\n    };\n\n    formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);\n\n    // Optionally add to autocomplete list\n    setAutoCompleteItems((prev: any) => {\n      const exists = prev.some((item: any) => item.label === newItem.label);\n      return exists ? prev : [...prev, newItem];\n    });\n  };\n\n  return {\n    autoCompleteItems,\n    fetchRelationEntities,\n    populateFormikWithRelatedEntities,\n    addNewRelation\n  };\n};\n"]}
+{"version":3,"file":"useRelationEntityHandler.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport qs from \"qs\";\nimport { createSolidEntityApi } from \"../../../../../../../redux/api/solidEntityApi\";\n\nexport type RelationItem = {\n  label: string;\n  value: any;\n  original?: any;\n};\n\nexport const useRelationEntityHandler = ({ fieldContext, autoCompleteLimit = 1000 }: any) => {\n  const fieldMetadata = fieldContext.fieldMetadata;\n  const fieldLayoutInfo = fieldContext.field;\n\n  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n  const { useLazyGetSolidEntitiesQuery } = entityApi;\n  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n  const parentEntityApi = createSolidEntityApi(fieldContext.modelName);\n  const { usePatchUpdateSolidEntityMutation, useUpdateSolidEntityMutation } = parentEntityApi;\n  const [updateSolidEntity] = usePatchUpdateSolidEntityMutation();\n\n  /**\n   * AUTOCOMPLETE & CHECKBOX:\n   * The currently linked items — drives what chips are shown in the autocomplete\n   * and which checkboxes are checked.\n   */\n  const [currentValues, setCurrentValues] = useState<RelationItem[]>([]);\n\n  /**\n   * CHECKBOX ONLY:\n   * All possible options to render as checkboxes.\n   * For autocomplete this is not needed — options are fetched on user search input.\n   */\n  const [allOptions, setAllOptions] = useState<RelationItem[]>([]);\n\n  /**\n   * AUTOCOMPLETE ONLY:\n   * The live suggestion list shown in the dropdown while the user is typing.\n   * Populated by `fetchSuggestions` on each keystroke.\n   */\n  const [suggestions, setSuggestions] = useState<RelationItem[]>([]);\n\n  // ─── Internal ────────────────────────────────────────────────────────────────\n\n  const sendLinkCommand = async (item: RelationItem, command: \"link\" | \"unlink\") => {\n    const parentId = fieldContext.data?.id;\n    const fieldName = fieldLayoutInfo.attrs.name;\n\n    if (!parentId || parentId === \"new\") return;\n\n    const formData = new FormData();\n    formData.append(`${fieldName}Ids[0]`, item.value);\n    formData.append(`${fieldName}Command`, command);\n\n    await updateSolidEntity({ id: parentId, data: formData }).unwrap();\n  };\n\n  // ─── Shared ──────────────────────────────────────────────────────────────────\n\n  /**\n   * Fetch currently linked items and populate `currentValues`.\n   * Call on mount for both autocomplete and checkbox widgets.\n   */\n  const fetchCurrentValues = async () => {\n    const relationFieldName =\n      fieldContext.fieldMetadata?.relationCoModelFieldName ?? fieldContext.modelName;\n\n    const parentId = fieldContext.data?.id ?? -1;\n\n    const queryData = {\n      offset: 0,\n      limit: autoCompleteLimit,\n      filters: {\n        $and: [{ [relationFieldName]: { id: { $eq: parentId } } }],\n      },\n    };\n\n    const response = await triggerGetSolidEntities(qs.stringify(queryData, { encodeValuesOnly: true }));\n    if (!response.data) return;\n\n    const mapped: RelationItem[] = response.data.records.map((item: any) => ({\n      label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: item.id,\n      original: item,\n    }));\n\n    setCurrentValues(mapped);\n  };\n\n  /**\n   * Link an item: fire the API call, and on success update `currentValues`.\n   * Used by both autocomplete (onSelect) and checkbox (onChange when unchecked).\n   */\n  const linkItem = async (item: RelationItem) => {\n    try {\n      await sendLinkCommand(item, \"link\");\n      setCurrentValues((prev) =>\n        prev.some((s) => s.value === item.value) ? prev : [...prev, item]\n      );\n    } catch (error: any) {\n      console.error(error?.data?.message || error?.message || `Failed to link ${fieldMetadata.displayName}`);\n    }\n  };\n\n  /**\n   * Unlink an item: fire the API call, and on success update `currentValues`.\n   * Used by both autocomplete (onUnselect) and checkbox (onChange when checked).\n   */\n  const unlinkItem = async (item: RelationItem) => {\n    try {\n      await sendLinkCommand(item, \"unlink\");\n      setCurrentValues((prev) => prev.filter((s) => s.value !== item.value));\n    } catch (error: any) {\n      console.error(error?.data?.message || error?.message || `Failed to unlink ${fieldMetadata.displayName}`);\n    }\n  };\n\n  // ─── Autocomplete-specific ───────────────────────────────────────────────────\n\n  /**\n   * Fetch suggestions for the autocomplete dropdown based on the user's search query.\n   * Call this inside `completeMethod` of the AutoComplete component.\n   */\n  const fetchSuggestions = async (autocompleteQs = \"\") => {\n    const response = await triggerGetSolidEntities(autocompleteQs);\n    if (!response.data) return;\n\n    const mapped: RelationItem[] = response.data.records.map((item: any) => ({\n      label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: item[\"id\"],\n      original: item,\n    }));\n\n    setSuggestions(mapped);\n  };\n\n  // ─── Checkbox-specific ───────────────────────────────────────────────────────\n\n  /**\n   * Fetch all possible options for the checkbox list.\n   * Call this on mount for the checkbox widget.\n   */\n  const fetchAllOptions = async (autocompleteQs = \"\") => {\n    const response = await triggerGetSolidEntities(autocompleteQs);\n    if (!response.data) return;\n\n    const mapped: RelationItem[] = response.data.records.map((item: any) => ({\n      label: item[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: item[\"id\"],\n      original: item,\n    }));\n\n    setAllOptions(mapped);\n  };\n\n  // ─── Inline create ───────────────────────────────────────────────────────────\n\n  /**\n   * Handle an inline-created entity: link it and add to both `currentValues`\n   * and `allOptions` (so it shows up in the checkbox list immediately).\n   */\n  const addNewRelation = async (values: any) => {\n    const jsonValues = Object.fromEntries(values.entries());\n    const newItem: RelationItem = {\n      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],\n      value: \"new\",\n      original: jsonValues,\n    };\n\n    await linkItem(newItem);\n\n    // Also add to allOptions so checkbox widget shows the new item\n    setAllOptions((prev) =>\n      prev.some((s) => s.value === newItem.value) ? prev : [...prev, newItem]\n    );\n  };\n\n  return {\n    // State\n    currentValues,\n    allOptions,\n    suggestions,\n    // Shared\n    fetchCurrentValues,\n    linkItem,\n    unlinkItem,\n    // Autocomplete-specific\n    fetchSuggestions,\n    // Checkbox-specific\n    fetchAllOptions,\n    // Inline create\n    addNewRelation,\n  };\n};"]}