arengibook 2.4.636 → 2.4.638

package/dist/index.js

@@ -39088,6 +39088,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     optionLabel = _ref$optionLabel === void 0 ? 'label' : _ref$optionLabel,
     _ref$optionValue = _ref.optionValue,
     optionValue = _ref$optionValue === void 0 ? 'value' : _ref$optionValue,
+    optionsUrl = _ref.optionsUrl,
     _ref$valueStyle = _ref.valueStyle,
     valueStyle = _ref$valueStyle === void 0 ? {} : _ref$valueStyle,
     _ref$filter = _ref.filter,
@@ -39117,40 +39118,151 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _useState4 = _slicedToArray$9(_useState3, 2),
     loadedOptions = _useState4[0],
     setLoadedOptions = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray$9(_useState5, 2),
-    inputValue = _useState6[0];
-    _useState6[1];
   var multiSelectRef = useRef(null);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$9(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray$9(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
   var loadLazyTimeout = useRef();
   var currentPageRef = useRef(1);
   var isOptionsArray = Array.isArray(options);
+  var clickedFromList = useRef(false);
+  var fetchOptionsFromUrl = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var search,
+        _ref3,
+        _ref3$page,
+        page,
+        length,
+        start,
+        queryParams,
+        response,
+        responseJSON,
+        dataAjax,
+        mappedOptions,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+            _ref3 = _args.length > 2 ? _args[2] : undefined, _ref3$page = _ref3.page, page = _ref3$page === void 0 ? 1 : _ref3$page;
+            _context.p = 1;
+            length = 25; // Même valeur que dans loadOptions
+            start = (page - 1) * length;
+            queryParams = new URLSearchParams();
+            if (search) queryParams.append('search[value]', search);
+            queryParams.append('start', start);
+            queryParams.append('length', length);
+            _context.n = 2;
+            return fetch("".concat(optionsUrl, "?").concat(queryParams.toString()));
+          case 2:
+            response = _context.v;
+            if (response.ok) {
+              _context.n = 3;
+              break;
+            }
+            throw new Error("Erreur HTTP: ".concat(response.status));
+          case 3:
+            _context.n = 4;
+            return response.json();
+          case 4:
+            responseJSON = _context.v;
+            // Simule le filtrage et le mapping comme dans loadOptions
+            dataAjax = responseJSON.data.filter(function (data) {
+              // Logique de filtrage si nécessaire (à adapter selon vos besoins)
+              return true;
+            });
+            mappedOptions = dataAjax.map(function (opt) {
+              if (!opt.hasOwnProperty('color') || opt.color === null || opt.color.length === 0) {
+                opt.color = '#ccc';
+              }
+              opt.color = opt.color.toLowerCase();
+              opt.label = opt.nom;
+              opt.value = opt.id;
+              return opt;
+            });
+            return _context.a(2, {
+              options: mappedOptions,
+              hasMore: start + responseJSON.data.length < responseJSON.recordsTotal,
+              additional: {
+                page: page + 1
+              }
+            });
+          case 5:
+            _context.p = 5;
+            _t = _context.v;
+            console.error("Erreur lors de la récupération des options :", _t);
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+        }
+      }, _callee, null, [[1, 5]]);
+    }));
+    return function fetchOptionsFromUrl() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var numObjValue = Array.isArray(objValue) ? objValue.map(function (opt) {
+    return _objectSpread2(_objectSpread2({}, opt), {}, _defineProperty$b({}, optionValue, typeof opt[optionValue] === 'string' ? parseInt(opt[optionValue], 10) : opt[optionValue]));
+  }) : [];
+  var numValue = function numValue() {
+    if (value && Array.isArray(value) && value.length) {
+      return value;
+    } else if (objValue && Array.isArray(objValue) && objValue.length) {
+      return objValue.map(function (opt) {
+        return parseInt(opt.value);
+      });
+    } else {
+      return [];
+    }
+  };
   useEffect(function () {
-    setSelectedOptions(objValue && Array.isArray(objValue) ? objValue.map(function (opt) {
-      return opt[optionValue];
-    }) : value !== null && value !== void 0 ? value : []);
-    console.log(objValue ? _toConsumableArray$7(objValue.map(function (opt) {
+    var _numValue;
+    setSelectedOptions(numObjValue && Array.isArray(numObjValue) && numObjValue.length ? numObjValue.map(function (opt) {
       return opt[optionValue];
-    })) : value !== null && value !== void 0 ? value : []);
+    }) : (_numValue = numValue()) !== null && _numValue !== void 0 ? _numValue : []);
     var loadInitialOptions = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var result, _result$options, exists;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var _result;
+        var result, _result2, exists;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
-              _context.n = 1;
+              if (!(typeof options === 'function')) {
+                _context2.n = 2;
+                break;
+              }
+              _context2.n = 1;
               return options('', [], {
                 page: 1
               });
             case 1:
-              result = _context.v;
-              setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+              result = _context2.v;
+              _context2.n = 5;
+              break;
+            case 2:
+              if (!optionsUrl) {
+                _context2.n = 4;
+                break;
+              }
+              _context2.n = 3;
+              return fetchOptionsFromUrl('', [], {
+                page: 1
+              });
+            case 3:
+              result = _context2.v;
+              _context2.n = 5;
+              break;
+            case 4:
+              result = {
+                options: []
+              };
+            case 5:
+              setLoadedOptions(((_result = result) === null || _result === void 0 ? void 0 : _result.options) || []);
               if (objValue) {
-                exists = result === null || result === void 0 || (_result$options = result.options) === null || _result$options === void 0 ? void 0 : _result$options.some(function (opt) {
+                exists = (_result2 = result) === null || _result2 === void 0 || (_result2 = _result2.options) === null || _result2 === void 0 ? void 0 : _result2.some(function (opt) {
                   return opt[optionValue] === objValue[optionValue];
                 });
                 if (!exists) {
@@ -39159,17 +39271,17 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
                   });
                 }
               }
-            case 2:
-              return _context.a(2);
+            case 6:
+              return _context2.a(2);
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function loadInitialOptions() {
-        return _ref2.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     loadInitialOptions();
-  }, [options]);
+  }, [options, optionsUrl]);
   useEffect(function () {
     var observer = new MutationObserver(function () {
       var panel = document.querySelector('.p-multiselect-panel.p-component');
@@ -39206,13 +39318,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   };
   var optionTemplate = function optionTemplate(option) {
     if (!option) return null;
-    var _ref3 = selectMetaConfig || {};
-      _ref3.labelStyle;
-      var generalIcon = _ref3.generalIcon;
+    var _ref5 = selectMetaConfig || {};
+      _ref5.labelStyle;
+      var generalIcon = _ref5.generalIcon;
     var styleLabel = {
       marginLeft: '10px'
     };
     return /*#__PURE__*/React__default.createElement("div", {
+      onClick: function onClick() {
+        clickedFromList.current = true;
+      },
       style: _objectSpread2({
         fontFamily: 'Arial',
         fontSize: '14px',
@@ -39272,20 +39387,45 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     if (loadLazyTimeout.current) {
       clearTimeout(loadLazyTimeout.current);
     }
-    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var _result3;
       var first, last, _items, result, newOptions, i, virtualscroll;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             first = event.first, last = event.last;
             _items = _toConsumableArray$7(loadedOptions);
-            _context2.n = 1;
-            return options(inputValue, [], {
+            if (!(typeof options === 'function')) {
+              _context3.n = 2;
+              break;
+            }
+            _context3.n = 1;
+            return options("", [], {
               page: currentPageRef.current + 1
             });
           case 1:
-            result = _context2.v;
-            newOptions = (result === null || result === void 0 ? void 0 : result.options) || [];
+            result = _context3.v;
+            _context3.n = 5;
+            break;
+          case 2:
+            if (!optionsUrl) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 3;
+            return fetchOptionsFromUrl("", [], {
+              page: currentPageRef.current + 1
+            });
+          case 3:
+            result = _context3.v;
+            _context3.n = 5;
+            break;
+          case 4:
+            result = {
+              options: []
+            };
+          case 5:
+            newOptions = ((_result3 = result) === null || _result3 === void 0 ? void 0 : _result3.options) || [];
             for (i = first; i < last; i++) {
               if (!_items[i] && newOptions[i - first]) {
                 _items[i] = newOptions[i - first];
@@ -39294,16 +39434,15 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
             setLoadedOptions(_items);
             setLoading(false);
             currentPageRef.current += 1;
-
-            // redimensionnement du conteneur
+            // Redimensionnement du conteneur
             virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
             if (virtualscroll) {
               virtualscroll.style.height = "auto";
             }
-          case 2:
-            return _context2.a(2);
+          case 6:
+            return _context3.a(2);
         }
-      }, _callee2);
+      }, _callee3);
     })), 500);
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -39849,71 +39988,102 @@ var MultiSelectPresets = {
     showSelectAll: false
   },
   // Configuration pour les options asynchrones
+  // SelectMetaAsync: {
+  //     isSelectMeta: true,
+  //     value: [9, 4],
+  //     objValue: [{ label: 'Option 9', value: 9, color: "#67688C" }, { label: 'Option 4', value: 4, color: "#39C9BF" }],
+  //     options: async (search = '', _, { page }) => {
+  //         await simulateNetworkDelay();
+  //         const allOptions = createFakeOptions(0, 100);
+  //         const filtered = allOptions.filter(opt =>
+  //             opt.label.toLowerCase().includes(search.toLowerCase())
+  //         );
+  //         const pageSize = 30;
+  //         const start = (page - 1) * pageSize;
+  //         return {
+  //             options: filtered.slice(start, start + pageSize),
+  //             hasMore: start + pageSize < filtered.length,
+  //             additional: { page: page + 1 },
+  //         };
+  //     },
+  //     optionLabel: 'label',
+  //     optionValue: 'value',
+  //
+  //     // value: [3,4],
+  //     // objValue: [{ name: 'Clementine Bauch', id: 3 }, { name: 'Patricia Lebsack', id: 4 }],
+  //     // optionsUrl: "https://jsonplaceholder.typicode.com/users",
+  //     // optionLabel: 'name',
+  //     // optionValue: 'id',
+  //
+  //     placeholder: 'Sélectionnez une ou plusieurs options',
+  //     valueStyle: { marginRight: '15px', marginBottom: '5px' },
+  //     selectMetaConfig: {
+  //         labelStyle: { fontWeight: 'bold' },
+  //         generalIcon: 'pi pi-tag',
+  //     },
+  //     filter: false,
+  //     showClear: false,
+  //     useCheckbox: false,
+  //     showSelectAll: false,
+  // },
+
   SelectMetaAsync: {
     isSelectMeta: true,
+    value: [9, 4],
     objValue: [{
       label: 'Option 9',
       value: 9,
-      color: "#67688C"
+      color: "#67688C",
+      nom: 'Option 9',
+      id: 9
     }, {
       label: 'Option 4',
       value: 4,
-      color: "#39C9BF"
+      color: "#39C9BF",
+      nom: 'Option 4',
+      id: 4
     }],
-    // objValue: [
-    //     {
-    //         "id": 2299,
-    //         "nom": "Economique",
-    //         "color": "#62BAC0",
-    //         "label": "Economique",
-    //         "value": 2299
-    //     },
-    //     {
-    //         "id": 2300,
-    //         "nom": "Financière",
-    //         "color": "#40839E",
-    //         "label": "Financière",
-    //         "value": 2300
-    //     },
-    //     {
-    //         "id": 2301,
-    //         "nom": "Données bancaires",
-    //         "color": "#E5E798",
-    //         "label": "Données bancaires",
-    //         "value": 2301
-    //     }
-    // ],
-    // value: ['3', '4'],
     options: function () {
       var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var search,
           _ref3,
+          _ref3$page,
           page,
           allOptions,
           filtered,
-          pageSize,
+          length,
           start,
+          paginatedOptions,
           _args2 = arguments;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
               search = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
-              _ref3 = _args2.length > 2 ? _args2[2] : undefined, page = _ref3.page;
+              _ref3 = _args2.length > 2 ? _args2[2] : undefined, _ref3$page = _ref3.page, page = _ref3$page === void 0 ? 1 : _ref3$page;
               _context2.n = 1;
               return simulateNetworkDelay();
             case 1:
-              allOptions = createFakeOptions(0, 100);
+              allOptions = createFakeOptions(0, 100).map(function (opt) {
+                return _objectSpread2(_objectSpread2({}, opt), {}, {
+                  nom: opt.label,
+                  id: opt.value,
+                  color: opt.color || '#ccc'
+                });
+              });
               filtered = allOptions.filter(function (opt) {
-                return opt.label.toLowerCase().includes(search.toLowerCase());
+                return opt.nom.toLowerCase().includes(search.toLowerCase());
               });
-              pageSize = 30;
-              start = (page - 1) * pageSize;
+              length = 25;
+              start = (page - 1) * length; // Simule la réponse de votre API Symfony
+              paginatedOptions = filtered.slice(start, start + length);
               return _context2.a(2, {
-                options: filtered.slice(start, start + pageSize),
-                hasMore: start + pageSize < filtered.length,
+                options: paginatedOptions,
+                hasMore: start + length < filtered.length,
                 additional: {
                   page: page + 1
-                }
+                },
+                data: paginatedOptions,
+                recordsTotal: filtered.length
               });
           }
         }, _callee2);
@@ -39923,9 +40093,9 @@ var MultiSelectPresets = {
       }
       return options;
     }(),
+    optionLabel: 'nom',
+    optionValue: 'id',
     placeholder: 'Sélectionnez une ou plusieurs options',
-    optionLabel: 'label',
-    optionValue: 'value',
     valueStyle: {
       marginRight: '15px',
       marginBottom: '5px'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "2.4.636",
+  "version": "2.4.638",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {