@gisce/react-ooui 0.10.3 → 0.11.0

package/dist/widgets/custom/Tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAQ7E,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,aAAK,cAAc,GAAG,SAAS,GAAG;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,gBAQpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,gBAqG9C,CAAC"}
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAgB,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAO7E,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,aAAK,cAAc,GAAG,SAAS,GAAG;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,SAAS,gBAQpC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,gBAsH9C,CAAC"}

package/dist/widgets/custom/Tags.js

@@ -75,7 +75,6 @@ var Field_1 = __importDefault(require("@/common/Field"));
 var use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
 var FormContext_1 = require("@/context/FormContext");
 var antd_1 = require("antd");
-var one2manyHelper_1 = require("@/helpers/one2manyHelper");
 var formHelper_1 = require("@/helpers/formHelper");
 var ConnectionProvider_1 = __importDefault(require("@/ConnectionProvider"));
 var Tags = function (props) {
@@ -87,99 +86,101 @@ exports.Tags = Tags;
 var TagsInput = function (props) {
     var value = props.value, ooui = props.ooui, onChange = props.onChange;
     var _a = (value || {}).items, items = _a === void 0 ? [] : _a;
-    var _b = react_1.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var itemsToShow = items.filter(function (item) { return item.operation !== "pendingRemove"; }).map(function (item) { return item.id; });
+    var _b = react_1.useState([]), options = _b[0], setOptions = _b[1];
     var _c = react_1.useState(), error = _c[0], setError = _c[1];
+    var _d = react_1.useState(false), isLoadingOptions = _d[0], setIsLoadingOptions = _d[1];
     var relation = ooui.relation, context = ooui.context, readOnly = ooui.readOnly, field = ooui.field;
-    var itemsToShow = items.filter(function (item) { return item.values && item.operation !== "pendingRemove"; });
     var formContext = react_1.useContext(FormContext_1.FormContext);
     var getContext = (formContext || {}).getContext;
     use_deep_compare_effect_1.default(function () {
-        if (items.some(function (item) { return !item.values; })) {
-            fetchData();
-        }
+        fetchOptions();
     }, [items]);
     var triggerChange = function (changedValue) {
         onChange === null || onChange === void 0 ? void 0 : onChange({
             items: changedValue,
         });
     };
-    function fetchData() {
+    function fetchOptions() {
         return __awaiter(this, void 0, void 0, function () {
-            var fieldsDef, itemsWithValues, err_1;
+            var params, optionsRead, options_1, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        setIsLoading(true);
-                        setError(undefined);
-                        return [4 /*yield*/, ConnectionProvider_1.default.getHandler().getFields({
-                                model: relation,
-                                fields: [field],
-                                context: getContext(),
-                            })];
+                        setIsLoadingOptions(true);
+                        params = (formContext === null || formContext === void 0 ? void 0 : formContext.domain) || [];
+                        if (readOnly) {
+                            params = [['id', 'in', itemsToShow]];
+                        }
+                        _a.label = 1;
                     case 1:
-                        fieldsDef = _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        _a.trys.push([2, 4, 5, 6]);
-                        return [4 /*yield*/, one2manyHelper_1.readObjectValues({
-                                treeFields: {},
-                                formFields: fieldsDef,
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, ConnectionProvider_1.default.getHandler().search({
                                 model: relation,
-                                items: items,
+                                params: params,
+                                fields: [field],
                                 context: __assign(__assign({}, getContext === null || getContext === void 0 ? void 0 : getContext()), context),
                             })];
+                    case 2:
+                        optionsRead = _a.sent();
+                        options_1 = optionsRead.map(function (item) {
+                            var value = item[field];
+                            var formattedValue = value;
+                            if (Array.isArray(value)) {
+                                formattedValue = value[1];
+                            }
+                            return { label: formattedValue, value: item.id };
+                        });
+                        setOptions(options_1);
+                        return [3 /*break*/, 5];
                     case 3:
-                        itemsWithValues = _a.sent();
-                        triggerChange(itemsWithValues);
-                        return [3 /*break*/, 6];
-                    case 4:
                         err_1 = _a.sent();
                         setError(err_1);
-                        return [3 /*break*/, 6];
-                    case 5:
-                        setIsLoading(false);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsLoadingOptions(false);
                         return [7 /*endfinally*/];
-                    case 6: return [2 /*return*/];
+                    case 5:
+                        if (error) {
+                            return [2 /*return*/, react_1.default.createElement(antd_1.Alert, { className: "mt-10", message: error, type: "error", banner: true })];
+                        }
+                        return [2 /*return*/];
                 }
             });
         });
     }
-    if (error) {
-        return react_1.default.createElement(antd_1.Alert, { className: "mt-10", message: error, type: "error", banner: true });
-    }
-    if (isLoading) {
-        return react_1.default.createElement(antd_1.Spin, null);
-    }
-    var removeItem = function (item) {
-        var newItems = items.map(function (i) {
-            if (i.id === item.id) {
-                return __assign(__assign({}, item), { operation: "pendingRemove" });
+    ;
+    var onChangeSelected = function (ids) {
+        var newItems = items.map(function (item) {
+            if (ids.includes(item.id)) {
+                if (item.operation == "pendingRemove") {
+                    return __assign(__assign({}, item), { operation: "pendingLink" });
+                }
+                else {
+                    return item;
+                }
             }
             else {
-                return i;
+                return { id: item.id, operation: 'pendingRemove' };
             }
         });
+        var currentIds = newItems.map(function (item) { return item.id; });
+        ids.filter(function (id) { return !currentIds.includes(id); }).map(function (id) {
+            newItems.push({ id: id, operation: 'pendingLink' });
+        });
         triggerChange(newItems);
     };
+    var tagRender = function (props) {
+        var label = props.label, closable = props.closable, onClose = props.onClose;
+        var onPreventMouseDown = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        return (react_1.default.createElement(antd_1.Tag, { color: formHelper_1.colorFromString(label), onMouseDown: onPreventMouseDown, style: { margin: '5px' }, closable: closable, onClose: onClose }, label));
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { style: { padding: "1rem" } }, itemsToShow.map(function (item, index) {
-            var _a;
-            var value = (_a = item.values) === null || _a === void 0 ? void 0 : _a[field];
-            var formattedValue = value;
-            if (ooui.selectionValues.size) {
-                formattedValue = ooui.selectionValues.get(value);
-            }
-            else if (Array.isArray(value)) {
-                formattedValue = value[1];
-            }
-            if (!value) {
-                return null;
-            }
-            return (react_1.default.createElement(antd_1.Tag, { key: index, color: formHelper_1.colorFromString(formattedValue), closable: !readOnly, style: { margin: '5px' }, onClose: function (e) {
-                    e.preventDefault();
-                    removeItem(item);
-                } }, formattedValue));
-        }))));
+        react_1.default.createElement("div", { style: { padding: "1rem" } },
+            react_1.default.createElement(antd_1.Select, { mode: "multiple", value: options.length ? itemsToShow : [], tagRender: tagRender, bordered: !readOnly, disabled: readOnly, options: options, onChange: onChangeSelected, loading: isLoadingOptions }))));
 };
 exports.TagsInput = TagsInput;
 //# sourceMappingURL=Tags.js.map

package/dist/widgets/custom/Tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/widgets/custom/Tags.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,yDAAmC;AAEnC,oFAA2D;AAC3D,qDAAqE;AACrE,6BAAoD;AACpD,mDAAuD;AACvD,4EAAsD;AAW/C,IAAM,IAAI,GAAG,UAAC,KAAgB;IAC3B,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;IAEvB,OAAO,CACL,8BAAC,eAAK,aAAC,IAAI,EAAE,OAAO,IAAM,KAAK;QAC7B,8BAAC,iBAAS,IAAC,IAAI,EAAE,IAAI,GAAK,CACpB,CACT,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,IAAI,QAQf;AAEK,IAAM,SAAS,GAAG,UAAC,KAAqB;IACrC,IAAA,KAAK,GAAqB,KAAK,MAA1B,EAAE,IAAI,GAAe,KAAK,KAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IAChC,IAAA,KAAe,CAAA,KAAK,IAAI,EAAE,CAAA,MAAhB,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAiB;IACnC,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAC9B,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,SAAS,KAAK,eAAe,EAAlC,CAAkC,CAC7C,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,EAAP,CAAO,CAAa,CAAC;IAE/B,IAAA,KAAwB,gBAAQ,CAAQ,EAAE,CAAC,EAA1C,OAAO,QAAA,EAAE,UAAU,QAAuB,CAAC;IAC5C,IAAA,KAAoB,gBAAQ,EAAU,EAArC,KAAK,QAAA,EAAE,QAAQ,QAAsB,CAAC;IACvC,IAAA,KAA0C,gBAAQ,CAAU,KAAK,CAAC,EAAjE,gBAAgB,QAAA,EAAE,mBAAmB,QAA4B,CAAC;IACjE,IAAA,QAAQ,GAA+B,IAAI,SAAnC,EAAE,OAAO,GAAsB,IAAI,QAA1B,EAAE,QAAQ,GAAY,IAAI,SAAhB,EAAE,KAAK,GAAK,IAAI,MAAT,CAAU;IAGpD,IAAM,WAAW,GAAG,kBAAU,CAAC,yBAAW,CAAoB,CAAC;IACvD,IAAA,UAAU,GAAK,CAAA,WAAW,IAAI,EAAE,CAAA,WAAtB,CAAuB;IAEzC,iCAAoB,CAAC;QACnB,YAAY,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAM,aAAa,GAAG,UAAC,YAAiC;QACtD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG;YACT,KAAK,EAAE,YAAY;SACpB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAe,YAAY;;;;;;wBACzB,mBAAmB,CAAC,IAAI,CAAC,CAAC;wBACtB,MAAM,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,KAAI,EAAE,CAAC;wBACvC,IAAI,QAAQ,EAAE;4BACZ,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;yBACrC;;;;wBAEqB,qBAAM,4BAAkB,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC;gCAC/D,KAAK,EAAE,QAAQ;gCACf,MAAM,EAAE,MAAM;gCACd,MAAM,EAAE,CAAC,KAAK,CAAC;gCACf,OAAO,wBAAO,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,GAAK,OAAO,CAAE;6BAC3C,CAAC,EAAA;;wBALI,WAAW,GAAG,SAKlB;wBACI,YAAU,WAAW,CAAC,GAAG,CAAC,UAAC,IAAQ;4BACvC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;4BAC1B,IAAI,cAAc,GAAG,KAAK,CAAC;4BAC3B,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gCACxB,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;6BAC3B;4BACD,OAAO,EAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAC,CAAA;wBAChD,CAAC,CAAC,CAAC;wBACH,UAAU,CAAC,SAAO,CAAC,CAAC;;;;wBAGpB,QAAQ,CAAC,KAAU,CAAC,CAAA;;;wBAEpB,mBAAmB,CAAC,KAAK,CAAC,CAAC;;;wBAE7B,IAAI,KAAK,EAAE;4BACT,sBAAO,8BAAC,YAAK,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,MAAM,SAAG,EAAC;yBACxE;;;;;KAEF;IAAA,CAAC;IAEF,IAAM,gBAAgB,GAAG,UAAC,GAAa;QACrC,IAAM,QAAQ,GAAmB,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI;YAC9C,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAY,CAAC,EAAE;gBACnC,IAAI,IAAI,CAAC,SAAS,IAAI,eAAe,EAAE;oBACrC,6BACK,IAAI,KACP,SAAS,EAAE,aAAa,IACzB;iBACF;qBAAM;oBACL,OAAO,IAAI,CAAA;iBACZ;aACF;iBAAM;gBACL,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,EAAC,CAAA;aACjD;QACH,CAAC,CAAC,CAAA;QACF,IAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,EAAE,EAAP,CAAO,CAAC,CAAA;QAChD,GAAG,CAAC,MAAM,CAAC,UAAA,EAAE,IAAI,OAAA,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAxB,CAAwB,CAAC,CAAC,GAAG,CAAC,UAAC,EAAE;YAChD,QAAQ,CAAC,IAAI,CAAC,EAAC,EAAE,IAAA,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QACH,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,KAAU;QACnB,IAAA,KAAK,GAAwB,KAAK,MAA7B,EAAE,QAAQ,GAAc,KAAK,SAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAC3C,IAAM,kBAAkB,GAAG,UAAC,KAAwC;YAClE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,CAAC;QACF,OAAO,CACL,8BAAC,UAAM,IACL,KAAK,EAAE,4BAAe,CAAC,KAAK,CAAC,EAC7B,WAAW,EAAE,kBAAkB,EAC/B,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IACb,KAAK,CACD,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL;QACE,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC7B,8BAAC,aAAM,IACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EACxC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,gBAAgB,GAElB,CACL,CACL,CACJ,CAAC;AAEJ,CAAC,CAAC;AAtHW,QAAA,SAAS,aAsHpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "main": "dist/index.js",
   "files": [
     "dist",

package/src/stories/custom/Tags.stories.tsx

@@ -4,7 +4,6 @@ import { TagsInput } from "../../widgets/custom/Tags";
 import { Tags as TagsOoui } from "@gisce/ooui";
 import "antd/dist/antd.css";
 import LocaleProvider from "../../context/LocaleContext";
-import { One2manyInput } from "../../widgets/base/one2many/One2manyInput";
 
 export default {
   title: "Components/Widgets/Custom/Tags",
@@ -14,15 +13,16 @@ export const Default = (): React.ReactElement => {
   const ooui = new TagsOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    field: "name"
+    field: "name",
+    relation: "res.partner.category"
   });
 
   return (
     <LocaleProvider lang="en_US">
       <TagsInput ooui={ooui} value={{items: [
-          {id: 1, operation: "original", values: {name: "test"}},
-          {id: 2, operation: "original", values: {name: "foo"}},
-          {id: 3, operation: "pendingRemove", values: {name: "remove"}}
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
         ]}}
       />
     </LocaleProvider>
@@ -34,15 +34,16 @@ export const Readonly = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     field: "name",
-    readonly: true
+    readonly: true,
+    relation: "res.partner.category",
   });
 
   return (
     <LocaleProvider lang="en_US">
       <TagsInput ooui={ooui} value={{items: [
-          {id: 1, operation: "original", values: {name: "test"}},
-          {id: 2, operation: "original", values: {name: "foo"}},
-          {id: 3, operation: "pendingRemove", values: {name: "remove"}}
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
         ]}}
       />
     </LocaleProvider>

package/src/stories/mocks/index.ts

@@ -13,6 +13,7 @@ import switching from "./models/switching";
 import attachment from "./models/attachment";
 import crm_case from "./models/crm_case";
 import form_with_gridfiber from "./models/form_with_gridfiber";
+import partner_category from "./models/res_partner_category";
 
 const allModels = [
   cups,
@@ -30,6 +31,7 @@ const allModels = [
   attachment,
   crm_case,
   form_with_gridfiber,
+  partner_category,
 ];
 
 const getMock = (model: string) => {

package/src/stories/mocks/mockProvider.ts

@@ -19,6 +19,7 @@ import {
   SearchAllIdsRequest,
   NameSearchRequest,
   SearchCountRequest,
+  GetFieldsRequest,
 } from "../../types/index";
 
 const init = () => {
@@ -50,6 +51,14 @@ const init = () => {
       const data = getMock(model);
       return data[type];
     },
+    getFields: async (options: GetFieldsRequest) => {
+      const { model, fields } = options;
+      await new Promise((resolve) => setTimeout(resolve, timeout));
+      const data = getMock(model);
+      const fieldsDef = Object.fromEntries(Object.entries(data.form.fields).filter(([key]) => fields.includes(key)));
+      return fieldsDef;
+
+    },
     searchAllIds: async (options: SearchCountRequest) => {
       await new Promise((resolve) => setTimeout(resolve, timeout));
       return [6];
@@ -57,10 +66,7 @@ const init = () => {
     search: async (options: SearchRequest) => {
       await new Promise((resolve) => setTimeout(resolve, timeout));
       const data = getMock(options.model);
-      return {
-        totalItems: 1,
-        results: [data.exampleValues],
-      };
+      return [data.exampleValues];
     },
     searchForTree: async (options: SearchRequest) => {
       await new Promise((resolve) => setTimeout(resolve, timeout));

package/src/stories/mocks/models/res_partner_category.ts

@@ -0,0 +1,15 @@
+export default {
+  model: "res.partner.category",
+  exampleValues: {
+    id: 1,
+    name: "foo",
+  },
+  form: {
+    fields: {
+      name: {
+        string: "Name",
+        type: "char",
+      },
+    }
+  }
+}

package/src/widgets/custom/Tags.tsx

@@ -4,8 +4,7 @@ import Field from "@/common/Field";
 import { One2manyItem, One2manyValue } from "../base/one2many/One2manyInput";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { FormContext, FormContextType } from "@/context/FormContext";
-import { Spin, Alert, Timeline as AntTimeline, Tag as AntTag } from "antd";
-import { readObjectValues } from "@/helpers/one2manyHelper";
+import { Alert, Tag as AntTag, Select } from "antd";
 import { colorFromString } from "@/helpers/formHelper";
 import ConnectionProvider from "@/ConnectionProvider";
 
@@ -31,21 +30,21 @@ export const Tags = (props: TagsProps) => {
 export const TagsInput = (props: TagsInputProps) => {
   const { value, ooui, onChange } = props;
   const { items = [] } = value || {};
+  const itemsToShow = items.filter(
+    (item) => item.operation !== "pendingRemove"
+  ).map((item) => item.id) as number[];
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [options, setOptions] = useState<any[]>([]);
   const [error, setError] = useState<string>();
+  const [isLoadingOptions, setIsLoadingOptions] = useState<boolean>(false);
   const { relation, context, readOnly, field } = ooui;
-  const itemsToShow = items.filter(
-    (item) => item.values && item.operation !== "pendingRemove"
-  );
+
 
   const formContext = useContext(FormContext) as FormContextType;
   const { getContext } = formContext || {};
 
   useDeepCompareEffect(() => {
-    if (items.some((item) => !item.values)) {
-      fetchData();
-    }
+    fetchOptions();
   }, [items]);
 
   const triggerChange = (changedValue: Array<One2manyItem>) => {
@@ -54,79 +53,96 @@ export const TagsInput = (props: TagsInputProps) => {
     });
   };
 
-  async function fetchData() {
-    setIsLoading(true);
-    setError(undefined);
-
-    const fieldsDef = await ConnectionProvider.getHandler().getFields({
-      model: relation,
-      fields: [field],
-      context: getContext(),
-    });
-
+  async function fetchOptions() {
+    setIsLoadingOptions(true);
+    let params = formContext?.domain || [];
+    if (readOnly) {
+      params = [['id', 'in', itemsToShow]]
+    }
     try {
-      const itemsWithValues = await readObjectValues({
-        treeFields: {},
-        formFields: fieldsDef,
+      const optionsRead = await ConnectionProvider.getHandler().search({
         model: relation,
-        items,
+        params: params,
+        fields: [field],
         context: { ...getContext?.(), ...context },
       });
-      triggerChange(itemsWithValues);
+      const options = optionsRead.map((item:any) => {
+        const value = item[field];
+        let formattedValue = value;
+        if (Array.isArray(value)) {
+          formattedValue = value[1];
+        }
+        return {label: formattedValue, value: item.id}
+      });
+      setOptions(options);
+      
     } catch (err) {
-      setError(err as any);
+      setError(err as any)
     } finally {
-      setIsLoading(false);
+      setIsLoadingOptions(false);
+    }
+    if (error) {
+      return <Alert className="mt-10" message={error} type="error" banner />;
     }
-  }
-
-  if (error) {
-    return <Alert className="mt-10" message={error} type="error" banner />;
-  }
 
-  if (isLoading) {
-    return <Spin />;
-  }
+  };
 
-  const removeItem = (item: One2manyItem) => {
-    const newItems: One2manyItem[] = items.map(i => {
-      if (i.id === item.id) {
-        return {
-          ...item,
-          operation: "pendingRemove",
+  const onChangeSelected = (ids: number[]) => {
+    const newItems: One2manyItem[] = items.map((item) => {
+      if (ids.includes(item.id as number)) {
+        if (item.operation == "pendingRemove") {
+          return {
+            ...item,
+            operation: "pendingLink"
+          }
+        } else {
+          return item
         }
       } else {
-        return i
+        return {id: item.id, operation: 'pendingRemove'}
       }
+    })
+    const currentIds = newItems.map(item => item.id)
+    ids.filter(id => !currentIds.includes(id)).map((id) => {
+      newItems.push({id, operation: 'pendingLink'});
     });
     triggerChange(newItems);
   };
 
+  const tagRender = (props: any) => {
+    const { label, closable, onClose } = props;
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    return (
+      <AntTag
+        color={colorFromString(label)}
+        onMouseDown={onPreventMouseDown}
+        style={{margin: '5px'}}
+        closable={closable}
+        onClose={onClose}>
+          {label}
+      </AntTag>
+    );
+  };
+  
   return (
     <>
       <div style={{ padding: "1rem" }}>
-        
-        {itemsToShow.map((item, index) => {
-          const value = item.values?.[field];
-          let formattedValue = value;
-          if (ooui.selectionValues.size) {
-            formattedValue = ooui.selectionValues.get(value);
-          } else if (Array.isArray(value)) {
-            formattedValue = value[1];
-          }
-          if (!value) {
-            return null;
-          }
-          return (
-            <AntTag key={index} color={colorFromString(formattedValue)} closable={!readOnly} style={{margin: '5px'}} onClose={e => {
-              e.preventDefault();
-              removeItem(item);
-
-            }}>{formattedValue}</AntTag>
-          );
-        })}
+        <Select
+          mode="multiple"
+          value={options.length ? itemsToShow : []}
+          tagRender={tagRender}
+          bordered={!readOnly}
+          disabled={readOnly}
+          options={options}
+          onChange={onChangeSelected}
+          loading={isLoadingOptions}
+          >
+        </Select>
       </div>
-     
     </>
   );
+  
 };