cilog-lib 1.13.16 → 1.13.17

package/fesm2022/cilog-lib.mjs

@@ -1426,6 +1426,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'cilog-grid-time-mask-editor', imports: [], template: "<input #inputElement\r\n       type=\"text\"\r\n       placeholder=\"HH:MM\"\r\n       [value]=\"value()\"\r\n       (input)=\"onInput($event)\"\r\n       (blur)=\"onBlur()\"\r\n       style=\"width: 100%; height: 100%; border: none; padding: 0 8px; box-sizing: border-box;\" />\r\n" }]
         }], propDecorators: { inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
 
+class GridSetFilterComponent {
+    params;
+    options = [];
+    selectedValues = [];
+    optionLabel = 'label';
+    agInit(params) {
+        this.params = params;
+        // Récupération de la clé passée dans filterParams (ex: 'name', 'label', etc.)
+        if (params.optionLabel) {
+            this.optionLabel = params.optionLabel;
+        }
+        this.extractUniqueObjects();
+    }
+    refresh(params) {
+        this.params = params;
+        if (params.optionLabel) {
+            this.optionLabel = params.optionLabel;
+        }
+        this.extractUniqueObjects();
+        return true;
+    }
+    // Extrait les objets uniques présentés dans la cellule
+    extractUniqueObjects() {
+        const field = this.params.colDef.field;
+        if (!field)
+            return;
+        const mapUniqueObjects = new Map();
+        this.params.api.forEachNode((node) => {
+            const objValue = this.params.getValue(node);
+            if (objValue && typeof objValue === 'object') {
+                const key = objValue[this.optionLabel];
+                if (key != null && !mapUniqueObjects.has(String(key))) {
+                    mapUniqueObjects.set(String(key), objValue);
+                }
+            }
+        });
+        // Tri des objets selon la clé d'affichage
+        this.options = Array.from(mapUniqueObjects.values()).sort((a, b) => {
+            const labelA = String(a[this.optionLabel] || '');
+            const labelB = String(b[this.optionLabel] || '');
+            return labelA.localeCompare(labelB);
+        });
+    }
+    isFilterActive() {
+        return this.selectedValues && this.selectedValues.length > 0;
+    }
+    // Comparaison basée sur la propriété optionLabel des objets
+    doesFilterPass(params) {
+        if (!this.isFilterActive()) {
+            return true;
+        }
+        const cellObject = this.params.getValue(params.node);
+        if (!cellObject)
+            return false;
+        const cellLabel = cellObject[this.optionLabel];
+        return this.selectedValues.some((selectedObj) => selectedObj[this.optionLabel] === cellLabel);
+    }
+    getModel() {
+        if (!this.isFilterActive()) {
+            return null;
+        }
+        return { value: this.selectedValues };
+    }
+    setModel(model) {
+        this.selectedValues = model ? model.value : [];
+    }
+    onSelectionChange() {
+        this.params.filterChangedCallback();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GridSetFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GridSetFilterComponent, isStandalone: true, selector: "cilog-grid-set-filter", ngImport: i0, template: "<div style=\"padding: 10px; min-width: 220px;\">\r\n    <p-multiselect [options]=\"options\"\r\n                   [(ngModel)]=\"selectedValues\"\r\n                   [optionLabel]=\"optionLabel\"\r\n                   (onChange)=\"onSelectionChange()\"\r\n                   placeholder=\"S\u00E9lectionner...\"\r\n                   selectedItemsLabel=\"{0} \u00E9l\u00E9ments s\u00E9lectionn\u00E9s\"\r\n                   [maxSelectedLabels]=\"1\"\r\n                   [virtualScroll]=\"true\"\r\n                   [virtualScrollItemSize]=\"30\"\r\n                   [style]=\"{ width: '100%' }\"\r\n                   [panelStyle]=\"{ minWidth: '220px' }\"\r\n                   [appendTo]=\"'body'\">\r\n    </p-multiselect>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GridSetFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cilog-grid-set-filter', imports: [
+                        MultiSelectModule,
+                        FormsModule
+                    ], template: "<div style=\"padding: 10px; min-width: 220px;\">\r\n    <p-multiselect [options]=\"options\"\r\n                   [(ngModel)]=\"selectedValues\"\r\n                   [optionLabel]=\"optionLabel\"\r\n                   (onChange)=\"onSelectionChange()\"\r\n                   placeholder=\"S\u00E9lectionner...\"\r\n                   selectedItemsLabel=\"{0} \u00E9l\u00E9ments s\u00E9lectionn\u00E9s\"\r\n                   [maxSelectedLabels]=\"1\"\r\n                   [virtualScroll]=\"true\"\r\n                   [virtualScrollItemSize]=\"30\"\r\n                   [style]=\"{ width: '100%' }\"\r\n                   [panelStyle]=\"{ minWidth: '220px' }\"\r\n                   [appendTo]=\"'body'\">\r\n    </p-multiselect>\r\n</div>\r\n" }]
+        }] });
+
 const myTheme = themeQuartz
     .withParams({
     backgroundColor: '#ffffff',
@@ -1488,6 +1568,7 @@ class CilogGridComponent {
                         case ColType.Button:
                         case ColType.File:
                         case ColType.Image:
+                        case ColType.Dropdown:
                             return false;
                         default:
                             return true;
@@ -1498,8 +1579,10 @@ class CilogGridComponent {
                 autoHeaderHeight: this.options().headersAffichageEntier ? true : false,
                 sortable: this.options().sortable && !col.disableSort ? true : false,
                 filter: !col.disableFilter ? this.getTypeFiltre(col) : null,
+                filterParams: this.getFilterParams(col),
                 suppressSizeToFit: col.width != null ? true : false,
                 headerTooltip: col.tooltipHeader ? col.libelle : null,
+                type: col.type == ColType.Number || col.type == ColType.Date ? 'rightAligned' : null,
                 headerClass: (params) => {
                     if (col.backgroundColor != null) {
                         setTimeout(() => {
@@ -1512,7 +1595,6 @@ class CilogGridComponent {
                     }
                     return '';
                 },
-                type: col.type == ColType.Number || col.type == ColType.Date ? 'rightAligned' : null,
                 cellEditorSelector: (params) => {
                     if (!params.data)
                         return undefined;
@@ -1576,67 +1658,66 @@ class CilogGridComponent {
                     return params.data[params.colDef.field].value;
                 },
                 valueFormatter: (params) => {
+                    let value = params.data[params.colDef.field].value;
+                    if (value == null) {
+                        return '';
+                    }
                     let typeSaisie = this.getTypeCellule(params.data, col);
                     switch (typeSaisie) {
+                        case ColType.Dropdown:
+                            let optionLabel = col.options['optionLabel'];
+                            return value[optionLabel];
                         case ColType.Number:
-                            const rawValue = params.data[params.colDef.field]?.value;
-                            if (rawValue == null) {
-                                return '';
-                            }
                             const suffix = col.options?.['suffix'];
                             let formattedValue = '';
                             if (col.options?.modeInteger) {
-                                formattedValue = rawValue;
+                                formattedValue = value;
                             }
                             else {
                                 let formatFr = new Intl.NumberFormat('fr-FR', {
                                     minimumFractionDigits: col.options?.minDecimales != null ? col.options?.minDecimales : 2,
                                     maximumFractionDigits: col.options?.minDecimales != null ? col.options?.minDecimales : 2
                                 });
-                                formattedValue = formatFr.format(rawValue);
+                                formattedValue = formatFr.format(value);
                             }
                             return suffix ? `${formattedValue} ${suffix}` : formattedValue;
                         case ColType.Date:
-                            let val = params.data[params.colDef.field].value;
-                            if (val != null) {
-                                if (col.options != null) {
-                                    switch (col.options['mode']) {
-                                        case 'year':
-                                            return val.getFullYear().toString();
-                                        case 'month':
-                                            const optionMoisAnnee = {
-                                                month: '2-digit',
-                                                year: 'numeric'
-                                            };
-                                            return new Intl.DateTimeFormat('fr-FR', optionMoisAnnee).format(val);
-                                        case 'hour':
-                                            const optionHeureMinute = {
-                                                hour: '2-digit',
-                                                minute: '2-digit',
-                                                hour12: false
-                                            };
-                                            return new Intl.DateTimeFormat('fr-FR', optionHeureMinute).format(val);
-                                        case 'datehour':
-                                            const optionDateHour = {
-                                                year: 'numeric',
-                                                month: '2-digit',
-                                                day: '2-digit',
-                                                hour: '2-digit',
-                                                minute: '2-digit',
-                                                hour12: false
-                                            };
-                                            return new Intl.DateTimeFormat('fr-FR', optionDateHour).format(val);
-                                        default:
-                                            return new Intl.DateTimeFormat('fr-FR').format(val);
-                                    }
-                                }
-                                else {
-                                    return new Intl.DateTimeFormat('fr-FR').format(val);
+                            if (col.options != null) {
+                                switch (col.options['mode']) {
+                                    case 'year':
+                                        return value.getFullYear().toString();
+                                    case 'month':
+                                        const optionMoisAnnee = {
+                                            month: '2-digit',
+                                            year: 'numeric'
+                                        };
+                                        return new Intl.DateTimeFormat('fr-FR', optionMoisAnnee).format(value);
+                                    case 'hour':
+                                        const optionHeureMinute = {
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                            hour12: false
+                                        };
+                                        return new Intl.DateTimeFormat('fr-FR', optionHeureMinute).format(value);
+                                    case 'datehour':
+                                        const optionDateHour = {
+                                            year: 'numeric',
+                                            month: '2-digit',
+                                            day: '2-digit',
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                            hour12: false
+                                        };
+                                        return new Intl.DateTimeFormat('fr-FR', optionDateHour).format(value);
+                                    default:
+                                        return new Intl.DateTimeFormat('fr-FR').format(value);
                                 }
                             }
-                            return '';
+                            else {
+                                return new Intl.DateTimeFormat('fr-FR').format(value);
+                            }
                         default:
-                            return params.data[params.colDef.field].value;
+                            return value;
                     }
                 },
                 cellStyle: (params) => {
@@ -1692,6 +1773,8 @@ class CilogGridComponent {
     };
     getTypeFiltre(col) {
         switch (col.type) {
+            case ColType.Dropdown:
+                return GridSetFilterComponent;
             case ColType.Date:
                 return 'agDateColumnFilter';
             case ColType.Number:
@@ -1700,6 +1783,16 @@ class CilogGridComponent {
                 return 'agTextColumnFilter';
         }
     }
+    getFilterParams(col) {
+        switch (col.type) {
+            case ColType.Dropdown:
+                return {
+                    optionLabel: col.options['optionLabel']
+                };
+            default:
+                return null;
+        }
+    }
     totalRowData = computed(() => {
         let rowsTotal = [{}];
         this.columns().forEach(col => {