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

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

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

package/dist/components/core/kanban/SolidKanbanView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidKanbanView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidKanbanView.tsx"],"names":[],"mappings":"AAoBA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAaxD,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAGF,eAAO,MAAM,eAAe,WAAY,qBAAqB,4CAizB5D,CAAC"}
+{"version":3,"file":"SolidKanbanView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/SolidKanbanView.tsx"],"names":[],"mappings":"AAoBA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAaxD,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAGF,eAAO,MAAM,eAAe,WAAY,qBAAqB,4CAkzB5D,CAAC"}

package/dist/components/core/kanban/SolidKanbanView.js

@@ -222,13 +222,14 @@ export var SolidKanbanView = function (params) {
     };
     // Initial Filter data 
     useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (solidKanbanViewMetaData) {
             setKanbanViewMetaData(solidKanbanViewMetaData);
-            var viewModes_1 = ((_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.allowedViews) && ((_h = (_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.allowedViews.length) > 0 && ((_m = (_l = (_k = (_j = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _j === void 0 ? void 0 : _j.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.allowedViews.map(function (view) { return { label: capitalize(view), value: view }; }));
-            setViewModes(viewModes_1);
-            if (((_r = (_q = (_p = (_o = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.attrs) === null || _r === void 0 ? void 0 : _r.grouped) !== false) {
-                setGroupByFieldName((_v = (_u = (_t = (_s = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.layout) === null || _u === void 0 ? void 0 : _u.attrs) === null || _v === void 0 ? void 0 : _v.groupBy);
+            // const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+            setViewModes((_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.viewModes);
+            // setViewModes(viewModes);
+            if (((_e = (_d = (_c = (_b = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.grouped) !== false) {
+                setGroupByFieldName((_j = (_h = (_g = (_f = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.groupBy);
             }
             else {
                 setGroupByFieldName("deletedTracker");
@@ -699,8 +700,8 @@ export var SolidKanbanView = function (params) {
         if (solidKanbanViewMetaData) {
             var createActionUrl = ((_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.createAction) && ((_j = (_h = (_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.createAction) === null || _j === void 0 ? void 0 : _j.type) === "custom" ? (_p = (_o = (_m = (_l = (_k = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.layout) === null || _m === void 0 ? void 0 : _m.attrs) === null || _o === void 0 ? void 0 : _o.createAction) === null || _p === void 0 ? void 0 : _p.customComponent : "form/new";
             var editActionUrl = ((_t = (_s = (_r = (_q = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _q === void 0 ? void 0 : _q.solidView) === null || _r === void 0 ? void 0 : _r.layout) === null || _s === void 0 ? void 0 : _s.attrs) === null || _t === void 0 ? void 0 : _t.editAction) && ((_y = (_x = (_w = (_v = (_u = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _u === void 0 ? void 0 : _u.solidView) === null || _v === void 0 ? void 0 : _v.layout) === null || _w === void 0 ? void 0 : _w.attrs) === null || _x === void 0 ? void 0 : _x.editAction) === null || _y === void 0 ? void 0 : _y.type) === "custom" ? (_3 = (_2 = (_1 = (_0 = (_z = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _z === void 0 ? void 0 : _z.solidView) === null || _0 === void 0 ? void 0 : _0.layout) === null || _1 === void 0 ? void 0 : _1.attrs) === null || _2 === void 0 ? void 0 : _2.editAction) === null || _3 === void 0 ? void 0 : _3.customComponent : "form";
-            var viewModes_2 = ((_7 = (_6 = (_5 = (_4 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _4 === void 0 ? void 0 : _4.solidView) === null || _5 === void 0 ? void 0 : _5.layout) === null || _6 === void 0 ? void 0 : _6.attrs) === null || _7 === void 0 ? void 0 : _7.allowedViews) && ((_11 = (_10 = (_9 = (_8 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _8 === void 0 ? void 0 : _8.solidView) === null || _9 === void 0 ? void 0 : _9.layout) === null || _10 === void 0 ? void 0 : _10.attrs) === null || _11 === void 0 ? void 0 : _11.allowedViews.length) > 0 && ((_15 = (_14 = (_13 = (_12 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _12 === void 0 ? void 0 : _12.solidView) === null || _13 === void 0 ? void 0 : _13.layout) === null || _14 === void 0 ? void 0 : _14.attrs) === null || _15 === void 0 ? void 0 : _15.allowedViews.map(function (view) { return { label: capitalize(view), value: view }; }));
-            setViewModes(viewModes_2);
+            var viewModes_1 = ((_7 = (_6 = (_5 = (_4 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _4 === void 0 ? void 0 : _4.solidView) === null || _5 === void 0 ? void 0 : _5.layout) === null || _6 === void 0 ? void 0 : _6.attrs) === null || _7 === void 0 ? void 0 : _7.allowedViews) && ((_11 = (_10 = (_9 = (_8 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _8 === void 0 ? void 0 : _8.solidView) === null || _9 === void 0 ? void 0 : _9.layout) === null || _10 === void 0 ? void 0 : _10.attrs) === null || _11 === void 0 ? void 0 : _11.allowedViews.length) > 0 && ((_15 = (_14 = (_13 = (_12 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _12 === void 0 ? void 0 : _12.solidView) === null || _13 === void 0 ? void 0 : _13.layout) === null || _14 === void 0 ? void 0 : _14.attrs) === null || _15 === void 0 ? void 0 : _15.allowedViews.map(function (view) { return { label: capitalize(view), value: view }; }));
+            setViewModes(viewModes_1);
             if (createActionUrl) {
                 setCreateButtonUrl(createActionUrl);
             }