arengibook 2.0.24-table → 2.0.26-table

package/dist/index.js

@@ -44173,7 +44173,7 @@ var ToastPresets = {
   }
 };
 
-var css_248z$1 = ".arengi-table td {\n  overflow: visible !important;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column {\n  z-index: 1;\n  background-color: var(--surface-0, #ffffff);\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column {\n  background-color: var(--surface-b, #f8f9fa);\n}\n\n.arengi-table .p-cell-editing input,\n.arengi-table .p-cell-editing .p-inputtext,\n.arengi-table .p-cell-editing .p-dropdown,\n.arengi-table .p-cell-editing .p-multiselect,\n.arengi-table .p-cell-editing .p-calendar {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.cell-devise {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n  font-size: 0.875rem;\n}\n.cell-devise--editable {\n  cursor: pointer;\n}\n.cell-devise--empty {\n  display: block;\n  width: 100%;\n  height: 1.5rem;\n  cursor: pointer;\n}\n.cell-devise .span-sub {\n  font-size: 0.75rem;\n  color: #71717a;\n}\n\n.devise-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.devise-editor-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  width: 100%;\n  position: relative;\n}\n.devise-editor-fields .p-dropdown-panel {\n  position: absolute;\n  z-index: 1000;\n  top: 100%;\n  left: 0;\n  width: 100%;\n}\n.devise-editor-save {\n  align-self: flex-end;\n}\n\n.arengi-table .p-cell-editing .devise-editor-fields input,\n.arengi-table .p-cell-editing .devise-editor-fields .p-inputtext,\n.arengi-table .p-cell-editing .devise-editor-fields .p-dropdown {\n  width: 100%;\n  min-width: 0;\n}\n\n.doc-cell-empty {\n  color: #aaa;\n  font-size: 0.85rem;\n}\n\n.doc-cell {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.doc-cell-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 0.875rem;\n}\n.doc-cell-summary .pi-paperclip {\n  color: #71717a;\n  font-size: 0.8rem;\n}\n.doc-cell-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n  padding-left: 1.1rem;\n  font-size: 0.8rem;\n}\n.doc-cell-list a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n.doc-cell-list a:hover {\n  text-decoration: underline;\n}\n\n.doc-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.doc-editor-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n.doc-editor-table td {\n  padding: 0.2rem 0.35rem;\n  vertical-align: middle;\n}\n.doc-editor-table td a {\n  color: #3b82f6;\n  text-decoration: none;\n  word-break: break-all;\n}\n.doc-editor-table td a:hover {\n  text-decoration: underline;\n}\n.doc-editor-table td:last-child {\n  width: 2rem;\n  text-align: center;\n}\n.doc-editor-add {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  cursor: pointer;\n  align-self: flex-start;\n}\n\n.tab_label {\n  display: inline-block;\n  padding: 3px 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  border-radius: 10px;\n}";
+var css_248z$1 = ".arengi-table td {\n  overflow: hidden;\n}\n\n.cell-text {\n  display: block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column {\n  z-index: 1;\n  background-color: var(--surface-0, #ffffff);\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column {\n  background-color: var(--surface-b, #f8f9fa);\n}\n\n.arengi-table .p-cell-editing input,\n.arengi-table .p-cell-editing .p-inputtext,\n.arengi-table .p-cell-editing .p-dropdown,\n.arengi-table .p-cell-editing .p-multiselect,\n.arengi-table .p-cell-editing .p-calendar {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.cell-devise {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n  font-size: 0.875rem;\n}\n.cell-devise--editable {\n  cursor: pointer;\n}\n.cell-devise--empty {\n  display: block;\n  width: 100%;\n  height: 1.5rem;\n  cursor: pointer;\n}\n.cell-devise .span-sub {\n  font-size: 0.75rem;\n  color: #71717a;\n}\n\n.devise-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.devise-editor-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  width: 100%;\n  position: relative;\n}\n.devise-editor-fields .p-dropdown-panel {\n  position: absolute;\n  z-index: 1000;\n  top: 100%;\n  left: 0;\n  width: 100%;\n}\n.devise-editor-save {\n  align-self: flex-end;\n}\n\n.arengi-table .p-cell-editing .devise-editor-fields input,\n.arengi-table .p-cell-editing .devise-editor-fields .p-inputtext,\n.arengi-table .p-cell-editing .devise-editor-fields .p-dropdown {\n  width: 100%;\n  min-width: 0;\n}\n\n.doc-cell-empty {\n  color: #aaa;\n  font-size: 0.85rem;\n}\n\n.doc-cell {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.doc-cell-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 0.875rem;\n}\n.doc-cell-summary .pi-paperclip {\n  color: #71717a;\n  font-size: 0.8rem;\n}\n.doc-cell-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n  padding-left: 1.1rem;\n  font-size: 0.8rem;\n}\n.doc-cell-list a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n.doc-cell-list a:hover {\n  text-decoration: underline;\n}\n\n.doc-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.doc-editor-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n.doc-editor-table td {\n  padding: 0.2rem 0.35rem;\n  vertical-align: middle;\n}\n.doc-editor-table td a {\n  color: #3b82f6;\n  text-decoration: none;\n  word-break: break-all;\n}\n.doc-editor-table td a:hover {\n  text-decoration: underline;\n}\n.doc-editor-table td:last-child {\n  width: 2rem;\n  text-align: center;\n}\n.doc-editor-add {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  cursor: pointer;\n  align-self: flex-start;\n}\n\n.arengi-table .arengi-table-grey-title-box {\n  overflow: hidden;\n  min-width: 0;\n}\n\n.arengi-table .table-item-title {\n  display: block !important;\n  min-width: 0 !important;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab_label {\n  display: inline-block;\n  padding: 3px 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  border-radius: 10px;\n}";
 styleInject(css_248z$1);
 
 function _extends$3() {
@@ -48339,6 +48339,8 @@ var Table = function Table(_ref1) {
     editable = _ref1$editable === void 0 ? false : _ref1$editable,
     _ref1$rowEdit = _ref1.rowEdit,
     rowEdit = _ref1$rowEdit === void 0 ? false : _ref1$rowEdit,
+    _ref1$columnFilter = _ref1.columnFilter,
+    columnFilter = _ref1$columnFilter === void 0 ? true : _ref1$columnFilter,
     onChange = _ref1.onChange,
     onCellChange = _ref1.onCellChange,
     carto = _ref1.carto;
@@ -48403,6 +48405,38 @@ var Table = function Table(_ref1) {
     globalFilter = _useState30[0],
     setGlobalFilter = _useState30[1];
   var columnPickerRef = useRef(null);
+
+  // --- Column filters ---
+  var initialFilters = useMemo(function () {
+    if (!columnFilter) return {};
+    var f = {};
+    columns.forEach(function (col) {
+      f[col.field] = {
+        value: null,
+        matchMode: FilterMatchMode$2.CONTAINS
+      };
+    });
+    return f;
+  }, [columns, columnFilter]);
+  var _useState31 = useState(initialFilters),
+    _useState32 = _slicedToArray$d(_useState31, 2),
+    filters = _useState32[0],
+    setFilters = _useState32[1];
+  useEffect(function () {
+    if (columnFilter) setFilters(initialFilters);
+  }, [initialFilters, columnFilter]);
+  var textFilterElement = useCallback(function (options) {
+    var _options$value2;
+    return /*#__PURE__*/React__default.createElement(InputText, {
+      value: (_options$value2 = options.value) !== null && _options$value2 !== void 0 ? _options$value2 : '',
+      onChange: function onChange(e) {
+        return options.filterApplyCallback(e.target.value || null);
+      },
+      style: {
+        width: '100%'
+      }
+    });
+  }, []);
   useEffect(function () {
     var nextVisible = columns;
     var defaultVisible = columns.filter(function (c) {
@@ -48428,12 +48462,47 @@ var Table = function Table(_ref1) {
       var _ref10, _col$href;
       var label = rowData[col.field];
       var href = typeof col.href === 'function' ? col.href(rowData) : (_ref10 = (_col$href = col.href) !== null && _col$href !== void 0 ? _col$href : rowData[col.field + 'Url']) !== null && _ref10 !== void 0 ? _ref10 : '#';
+      var actions = col.actions || [];
       return /*#__PURE__*/React__default.createElement("div", {
         className: "arengi-table-grey-title-box"
       }, /*#__PURE__*/React__default.createElement("a", {
         href: href,
-        className: "table-item-title"
-      }, label));
+        className: "table-item-title cell-text"
+      }, label), actions.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+        className: "ghost-btnBox"
+      }, actions.map(function (action, i) {
+        var _rowData$action$hrefF, _action$href;
+        var actionHref = action.hrefField ? (_rowData$action$hrefF = rowData[action.hrefField]) !== null && _rowData$action$hrefF !== void 0 ? _rowData$action$hrefF : '#' : (_action$href = action.href) !== null && _action$href !== void 0 ? _action$href : '#';
+        var extraAttrs = {};
+        if (action.hrefAttr === 'data-href') {
+          extraAttrs.href = '#';
+          extraAttrs['data-href'] = actionHref;
+        } else {
+          extraAttrs.href = actionHref;
+        }
+        if (action.data) {
+          Object.entries(action.data).forEach(function (_ref11) {
+            var _ref12 = _slicedToArray$d(_ref11, 2),
+              k = _ref12[0],
+              v = _ref12[1];
+            extraAttrs[k] = v;
+          });
+        }
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "ghost-btnBox-OPT",
+          key: i
+        }, /*#__PURE__*/React__default.createElement("a", _extends$J({
+          className: action["class"],
+          title: action.title
+        }, extraAttrs), /*#__PURE__*/React__default.createElement("span", {
+          className: "material-icons"
+        }, action.icon), /*#__PURE__*/React__default.createElement("div", {
+          className: "test-title",
+          style: {
+            display: 'none'
+          }
+        }, action.title)));
+      })));
     };
   }, []);
   var dateTemplate = useCallback(function (rowData, options) {
@@ -48486,7 +48555,9 @@ var Table = function Table(_ref1) {
     return function (rowData) {
       var _rowData$col$field4;
       if (typeof col.textTemplate === 'function') return col.textTemplate(rowData);
-      return (_rowData$col$field4 = rowData[col.field]) !== null && _rowData$col$field4 !== void 0 ? _rowData$col$field4 : '';
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: "cell-text"
+      }, (_rowData$col$field4 = rowData[col.field]) !== null && _rowData$col$field4 !== void 0 ? _rowData$col$field4 : '');
     };
   }, []);
   var colorTextTemplate = useCallback(function (col) {
@@ -48524,6 +48595,38 @@ var Table = function Table(_ref1) {
       }), text);
     };
   }, []);
+  var badgesTemplate = useCallback(function (col) {
+    return function (rowData) {
+      var _col$badgesMax;
+      var items = rowData[col.field];
+      if (!Array.isArray(items) || items.length === 0) return '';
+      var maxVisible = (_col$badgesMax = col.badgesMax) !== null && _col$badgesMax !== void 0 ? _col$badgesMax : 3;
+      if (items.length > maxVisible) {
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: "tab_label",
+          title: items.join(', '),
+          style: {
+            cursor: 'default'
+          }
+        }, items.length);
+      }
+      return /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.25rem'
+        }
+      }, items.map(function (label, i) {
+        return /*#__PURE__*/React__default.createElement("span", {
+          key: i,
+          className: "tab_label",
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }, label);
+      }));
+    };
+  }, []);
   var numericTemplate = useCallback(function (col) {
     return function (rowData) {
       var val = rowData[col.field];
@@ -48534,6 +48637,38 @@ var Table = function Table(_ref1) {
       return bounded.toLocaleString('fr-FR');
     };
   }, []);
+  var progressTemplate = useCallback(function (col) {
+    return function (rowData) {
+      var _rowData$col$field5;
+      var pct = Math.min(100, Math.max(0, parseFloat((_rowData$col$field5 = rowData[col.field]) !== null && _rowData$col$field5 !== void 0 ? _rowData$col$field5 : 0)));
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px'
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "progress_bar_menu",
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "progress_bar_menu_black"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "progress_bar_menu_load",
+        style: {
+          width: pct + '%',
+          backgroundColor: '#db2e11'
+        }
+      }))), /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          whiteSpace: 'nowrap',
+          minWidth: '2.5em',
+          textAlign: 'right'
+        }
+      }, Math.round(pct), "%"));
+    };
+  }, []);
   var calculTemplate = useCallback(function (col) {
     return function (rowData) {
       if (typeof col.render === 'function') return col.render(rowData);
@@ -48543,8 +48678,8 @@ var Table = function Table(_ref1) {
   }, []);
   var documentTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _rowData$col$field5;
-      var docs = (_rowData$col$field5 = rowData[col.field]) !== null && _rowData$col$field5 !== void 0 ? _rowData$col$field5 : [];
+      var _rowData$col$field6;
+      var docs = (_rowData$col$field6 = rowData[col.field]) !== null && _rowData$col$field6 !== void 0 ? _rowData$col$field6 : [];
       if (!docs.length) return /*#__PURE__*/React__default.createElement("span", {
         className: "doc-cell-empty"
       }, /*#__PURE__*/React__default.createElement("i", {
@@ -48601,7 +48736,7 @@ var Table = function Table(_ref1) {
       return /*#__PURE__*/React__default.createElement("div", {
         style: {
           display: 'flex',
-          flexWrap: 'wrap',
+          flexDirection: 'column',
           gap: '0.25rem'
         }
       }, vals.map(function (v) {
@@ -48628,9 +48763,9 @@ var Table = function Table(_ref1) {
   // --- Cell editors by type ---
 
   useCallback(function (options) {
-    var _options$value2;
+    var _options$value3;
     return /*#__PURE__*/React__default.createElement(InputText, {
-      value: (_options$value2 = options.value) !== null && _options$value2 !== void 0 ? _options$value2 : '',
+      value: (_options$value3 = options.value) !== null && _options$value3 !== void 0 ? _options$value3 : '',
       onChange: function onChange(e) {
         return options.editorCallback(e.target.value);
       },
@@ -48680,10 +48815,10 @@ var Table = function Table(_ref1) {
   }, []);
   useCallback(function (col) {
     return function (options) {
-      var _options$value3;
+      var _options$value4;
       return /*#__PURE__*/React__default.createElement(InputText, {
         type: "number",
-        value: (_options$value3 = options.value) !== null && _options$value3 !== void 0 ? _options$value3 : '',
+        value: (_options$value4 = options.value) !== null && _options$value4 !== void 0 ? _options$value4 : '',
         min: col.min,
         max: col.max,
         step: col.step,
@@ -48699,9 +48834,9 @@ var Table = function Table(_ref1) {
   }, []);
   useCallback(function (col) {
     return function (options) {
-      var _options$value4;
+      var _options$value5;
       return /*#__PURE__*/React__default.createElement(MultiSelect, _extends$J({}, MultiSelectPresets.Base, {
-        value: (_options$value4 = options.value) !== null && _options$value4 !== void 0 ? _options$value4 : [],
+        value: (_options$value5 = options.value) !== null && _options$value5 !== void 0 ? _options$value5 : [],
         options: col.options,
         onChange: function onChange(ids) {
           return options.editorCallback(ids);
@@ -48817,6 +48952,12 @@ var Table = function Table(_ref1) {
       case 'numeric':
         displayFn = numericTemplate(col);
         break;
+      case 'badges':
+        displayFn = badgesTemplate(col);
+        break;
+      case 'progress':
+        displayFn = progressTemplate(col);
+        break;
       case 'text':
       default:
         displayFn = col.textTemplate ? textTemplate(col) : undefined;
@@ -48847,7 +48988,7 @@ var Table = function Table(_ref1) {
       };
     }
     return displayFn;
-  }, [rowEdit, editable, editingRows, updateRow, onCellEditComplete, linkTemplate, dateTemplate, selectTemplate, selectMultipleTemplate, colorTextTemplate, pictoTemplate, textTemplate, numericTemplate, calculTemplate, documentTemplate, deviseTemplate, treeSelectTemplate]);
+  }, [rowEdit, editable, editingRows, updateRow, onCellEditComplete, linkTemplate, dateTemplate, selectTemplate, selectMultipleTemplate, colorTextTemplate, pictoTemplate, textTemplate, numericTemplate, badgesTemplate, calculTemplate, documentTemplate, deviseTemplate, treeSelectTemplate]);
   var getSortField = useCallback(function (col) {
     return col.field;
   }, []);
@@ -48958,6 +49099,11 @@ var Table = function Table(_ref1) {
     selection: selection,
     onSelectionChange: onSelectionChange,
     globalFilter: globalFilter,
+    filters: columnFilter ? filters : undefined,
+    filterDisplay: columnFilter ? 'row' : undefined,
+    onFilter: columnFilter ? function (e) {
+      return setFilters(e.filters);
+    } : undefined,
     editMode: editable || rowEdit || columns.some(function (c) {
       return c.editable === true;
     }) ? rowEdit ? 'row' : 'cell' : undefined,
@@ -48981,6 +49127,10 @@ var Table = function Table(_ref1) {
       field: col.field,
       sortField: getSortField(col),
       header: col.header,
+      filter: columnFilter,
+      filterField: col.field,
+      filterElement: textFilterElement,
+      showFilterMenu: false,
       body: getBodyTemplate(col),
       editor: getEditorTemplate(col),
       onCellEditComplete: !rowEdit && (editable ? col.editable !== false : col.editable === true) ? onCellEditComplete : undefined,
@@ -49110,7 +49260,8 @@ var dataTyped = [{
       return d.value === 'EUR';
     })
   },
-  service: 'tech-dev'
+  service: 'tech-dev',
+  owners: ['Marie Dupont', 'Jean Martin']
 }, {
   id: 2,
   nom: 'Bob Dupont',
@@ -49139,7 +49290,8 @@ var dataTyped = [{
       return d.value === 'USD';
     })
   },
-  service: 'metier-compta'
+  service: 'metier-compta',
+  owners: ['Sophie Bernard', 'Paul Leroy', 'Claire Moreau', 'Lucas Petit']
 }, {
   id: 3,
   nom: 'Clara Leroy',
@@ -49160,7 +49312,8 @@ var dataTyped = [{
       return d.value === 'GBP';
     })
   },
-  service: 'support'
+  service: 'support',
+  owners: ['Alice Rousseau']
 }, {
   id: 4,
   nom: 'David Bernard',
@@ -49176,7 +49329,8 @@ var dataTyped = [{
   score: null,
   fichiers: [],
   montant: null,
-  service: 'tech-infra'
+  service: 'tech-infra',
+  owners: []
 }, {
   id: 5,
   nom: 'Emma Petit',
@@ -49201,7 +49355,8 @@ var dataTyped = [{
       return d.value === 'EUR';
     })
   },
-  service: null
+  service: null,
+  owners: ['Marc Girard', 'Isabelle Noir', 'Thomas Klein', 'Nadia Sow', 'Romain Vénel']
 }, {
   id: 6,
   nom: 'François Morel',
@@ -49222,7 +49377,8 @@ var dataTyped = [{
       return d.value === 'EUR';
     })
   },
-  service: 'metier-rh'
+  service: 'metier-rh',
+  owners: ['Pierre Simon', 'Lucie Blanc']
 }, {
   id: 7,
   nom: 'Grace Rousseau',
@@ -49230,7 +49386,7 @@ var dataTyped = [{
   dateNaissance: '1993-03-18',
   statut: 'actif',
   categorie: 'partenaire',
-  categorieColor: '#8E44AD',
+  colorText: '#8E44AD',
   niveau: 'Faible',
   niveauPicto: '/bundles/arengimain/img/picto/faible.png',
   competences: ['symfony', 'sql'],
@@ -49255,7 +49411,8 @@ var dataTyped = [{
       return d.value === 'USD';
     })
   },
-  service: 'tech-secu'
+  service: 'tech-secu',
+  owners: ['Camille Durand', 'Alexis Foret', 'Yasmine Aït']
 }];
 var columnsTyped = [{
   field: 'nom',
@@ -49322,6 +49479,10 @@ var columnsTyped = [{
   options: serviceTree,
   selectionMode: 'single',
   filter: true
+}, {
+  field: 'owners',
+  header: 'Responsables',
+  type: 'badges'
 }];
 var TablePresets = {
   Base: {

package/package.json

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