@recursyve/nice-data-filter-kit 14.5.1 → 14.5.3

package/fesm2020/recursyve-nice-data-filter-kit.mjs

@@ -1,5 +1,5 @@
 import { plainToInstance } from 'class-transformer';
-import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+import { map, takeUntil, debounceTime, switchMap, distinctUntilChanged, combineLatestWith } from 'rxjs/operators';
 import { HttpParams } from '@angular/common/http';
 import * as i5$1 from '@recursyve/nice-ui-kit.v2';
 import { isNullOrUndefined, ObjectUtils, FileUtils, ArrayUtils, ExportBottomSheetComponent, NiceLoadingSpinnerModule, NiceTypeaheadModule, NiceExportBottomSheetModule, NiceAsyncTypeaheadProvider, NICE_ASYNC_TYPEAHEAD_PROVIDER, NiceAsyncTypeaheadModule } from '@recursyve/nice-ui-kit.v2';
@@ -3263,83 +3263,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     args: [NiceFilterService]
                 }] }]; }, propDecorators: { resetResult: [] } });
 
-class AdvancedFiltersUtils {
-    static isSingleInput(filterOperator) {
-        if (!filterOperator) {
-            return false;
-        }
-        return AdvancedFiltersUtils.singleInputOperators.includes(filterOperator);
-    }
-    static isDoubleInput(filterOperator) {
-        if (!filterOperator) {
-            return false;
-        }
-        return AdvancedFiltersUtils.doubleInputOperators.includes(filterOperator);
-    }
-    static isNoInput(filterOperator) {
-        if (!filterOperator) {
-            return false;
-        }
-        return AdvancedFiltersUtils.noInputOperators.includes(filterOperator);
-    }
-    static createRule(config, operator) {
-        const base = {
-            id: config.id,
-            operation: operator || config.operators[0].id
-        };
-        switch (config.type) {
-            case FilterType.Text:
-                return {
-                    ...base,
-                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? ["", ""] : ""
-                };
-            case FilterType.Number:
-            case FilterType.Select:
-                return {
-                    ...base,
-                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [null, null] : null
-                };
-            case FilterType.Date:
-                return {
-                    ...base,
-                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date()
-                };
-            case FilterType.Radio:
-                return {
-                    ...base,
-                    value: AdvancedFiltersUtils.isDoubleInput(operator)
-                        ? [config.options?.[0].key, config.options?.[0].key]
-                        : config.options?.[0].key
-                };
-        }
-    }
-}
-AdvancedFiltersUtils.noInputOperators = [
-    FilterOperatorTypes.IsEmpty,
-    FilterOperatorTypes.IsNotEmpty,
-    FilterOperatorTypes.IsNull,
-    FilterOperatorTypes.IsNotNull,
-    FilterOperatorTypes.None
-];
-AdvancedFiltersUtils.singleInputOperators = [
-    FilterOperatorTypes.Equal,
-    FilterOperatorTypes.NotEqual,
-    FilterOperatorTypes.Less,
-    FilterOperatorTypes.LessOrEqual,
-    FilterOperatorTypes.Greater,
-    FilterOperatorTypes.GreaterOrEqual,
-    FilterOperatorTypes.BeginsWith,
-    FilterOperatorTypes.NotBeginsWith,
-    FilterOperatorTypes.EndsWith,
-    FilterOperatorTypes.NotEndsWith,
-    FilterOperatorTypes.Contains,
-    FilterOperatorTypes.NotContains
-];
-AdvancedFiltersUtils.doubleInputOperators = [
-    FilterOperatorTypes.Between,
-    FilterOperatorTypes.NotBetween
-];
-
 const ADVANCED_FILTER_ICONS = new InjectionToken("advanced_filter_icons");
 
 class NiceFilterGroupIconPipe {
@@ -3483,7 +3406,7 @@ class NiceAdvancedFiltersButtonComponent {
         this.query = query;
         this.service = service;
         this.shouldShowAdvancedFilters$ = this.query.selectSubState("showAdvancedFilters");
-        this.hasParameters$ = this.query.selectFilterParameters().pipe(withLatestFrom(this.query.selectFilterConfig()), map(([parameter, config]) => !!parameter
+        this.hasParameters$ = this.query.selectFilterParameters().pipe(combineLatestWith(this.query.selectFilterConfig()), map(([parameter, config]) => !!parameter
             .rules
             ?.filter((rule) => config.some((conf) => conf?.id === rule.rules[0]?.id))
             ?.length));
@@ -3492,16 +3415,15 @@ class NiceAdvancedFiltersButtonComponent {
         this.service.updateSubState("showAdvancedFilters", !this.query.getSubState("showAdvancedFilters"));
     }
     onSelectedFilter(filter) {
-        const rule = AdvancedFiltersUtils.createRule(filter);
-        this.service.setRules([{ condition: "and", rules: [rule] }]);
         this.service.updateSubState("showAdvancedFilters", true);
+        this.service.updateSubState("selectedFilter", filter);
     }
 }
 NiceAdvancedFiltersButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }], target: i0.ɵɵFactoryTarget.Component });
-NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersButtonComponent, selector: "nice-advanced-filters-button", ngImport: i0, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceAdvancedFiltersButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersButtonComponent, selector: "nice-advanced-filters-button", ngImport: i0, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-1 right-1 w-2 h-2 z-10 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: AdvancedFiltersTriggerDirective, selector: "[niceAdvancedFiltersTrigger]", inputs: ["position"], outputs: ["advancedFilterSelected"], exportAs: ["niceAdvancedFiltersTrigger"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-advanced-filters-button", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-2 right-2 w-1 h-1 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"] }]
+            args: [{ selector: "nice-advanced-filters-button", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <ng-container *ngIf=\"(hasParameters$ | async) && (shouldShowAdvancedFilters$ | async) !== true\">\n        <div class=\"absolute top-1 right-1 w-2 h-2 z-10 rounded bg-accent\"></div>\n\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"shouldShowAdvancedFilters$ | async\">\n        <button mat-icon-button (click)=\"clickToggleShowAdvancedFilters()\">\n            <mat-icon [svgIcon]=\"icons.close.svgIcon\">{{ icons.close.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"(hasParameters$ | async) !== true && (shouldShowAdvancedFilters$ | async) !== true\">\n        <button mat-icon-button niceAdvancedFiltersTrigger (advancedFilterSelected)=\"onSelectedFilter($event)\">\n            <mat-icon [svgIcon]=\"icons.queryBuilder.svgIcon\">{{ icons.queryBuilder.matIcon }}</mat-icon>\n        </button>\n    </ng-container>\n</div>\n", styles: ["nice-advanced-filters-button{width:40px;height:40px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3652,6 +3574,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: NiceFilterService }]; } });
 
+class AdvancedFiltersUtils {
+    static isSingleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return AdvancedFiltersUtils.singleInputOperators.includes(filterOperator);
+    }
+    static isDoubleInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return AdvancedFiltersUtils.doubleInputOperators.includes(filterOperator);
+    }
+    static isNoInput(filterOperator) {
+        if (!filterOperator) {
+            return false;
+        }
+        return AdvancedFiltersUtils.noInputOperators.includes(filterOperator);
+    }
+    static createRule(config, operator) {
+        const base = {
+            id: config.id,
+            operation: operator || config.operators[0].id
+        };
+        switch (config.type) {
+            case FilterType.Text:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? ["", ""] : ""
+                };
+            case FilterType.Number:
+            case FilterType.Select:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [null, null] : null
+                };
+            case FilterType.Date:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date()
+                };
+            case FilterType.Radio:
+                return {
+                    ...base,
+                    value: AdvancedFiltersUtils.isDoubleInput(operator)
+                        ? [config.options?.[0].key, config.options?.[0].key]
+                        : config.options?.[0].key
+                };
+        }
+    }
+}
+AdvancedFiltersUtils.noInputOperators = [
+    FilterOperatorTypes.IsEmpty,
+    FilterOperatorTypes.IsNotEmpty,
+    FilterOperatorTypes.IsNull,
+    FilterOperatorTypes.IsNotNull,
+    FilterOperatorTypes.None
+];
+AdvancedFiltersUtils.singleInputOperators = [
+    FilterOperatorTypes.Equal,
+    FilterOperatorTypes.NotEqual,
+    FilterOperatorTypes.Less,
+    FilterOperatorTypes.LessOrEqual,
+    FilterOperatorTypes.Greater,
+    FilterOperatorTypes.GreaterOrEqual,
+    FilterOperatorTypes.BeginsWith,
+    FilterOperatorTypes.NotBeginsWith,
+    FilterOperatorTypes.EndsWith,
+    FilterOperatorTypes.NotEndsWith,
+    FilterOperatorTypes.Contains,
+    FilterOperatorTypes.NotContains
+];
+AdvancedFiltersUtils.doubleInputOperators = [
+    FilterOperatorTypes.Between,
+    FilterOperatorTypes.NotBetween
+];
+
 class FilterComponent {
     constructor() {
         this.propagateChanges = (_) => { };
@@ -3884,10 +3883,17 @@ class NiceAdvancedFiltersComponent {
         this.rules$ = this.rulesFormArray.valueChanges.pipe(startWith(this.rulesFormArray.value));
     }
     ngOnInit() {
-        const { filterParameters } = this.query.getValue();
+        const { filterParameters, subStates } = this.query.getValue();
         if (filterParameters.rules?.length) {
             this.formGroup.patchValue(new AdvancedFiltersForm(filterParameters.rules[0]));
         }
+        if (subStates.selectedFilter) {
+            this.onClickAddRule(subStates.selectedFilter);
+            return;
+        }
+    }
+    ngOnDestroy() {
+        this.removeEmptyRules({ reload: false });
     }
     onClickAddRule(filterConfigurationModel) {
         this.rulesFormArray.push(new FilterForm(AdvancedFiltersUtils.createRule(filterConfigurationModel)));
@@ -3902,6 +3908,7 @@ class NiceAdvancedFiltersComponent {
         }
     }
     onClose() {
+        this.removeEmptyRules();
         this.service.updateSubState("showAdvancedFilters", false);
     }
     onRefresh() {
@@ -3909,6 +3916,31 @@ class NiceAdvancedFiltersComponent {
         this.service.resetResult(true);
         this.service.filter();
     }
+    removeEmptyRules({ reload } = { reload: true }) {
+        if (this.rulesFormArray.length !== 1) {
+            return;
+        }
+        const values = this.rulesFormArray.get([0, "values"]).getRawValue();
+        if (values.length !== 1) {
+            return;
+        }
+        const value = values[0];
+        if (value.value || value.value === false || value.secondValue || value.secondValue === true) {
+            return;
+        }
+        this.rulesFormArray.removeAt(0);
+        const { filterParameters } = this.query.getValue();
+        if (!filterParameters.rules.length || !filterParameters.rules[0].rules.length) {
+            return;
+        }
+        this.service.setRules([]);
+        if (!reload) {
+            return;
+        }
+        if (filterParameters.rules[0].rules[0].value) {
+            this.service.filter();
+        }
+    }
 }
 NiceAdvancedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAdvancedFiltersComponent, deps: [{ token: ADVANCED_FILTER_ICONS, optional: true }, { token: i1$3.GeneratedFormGroup }, { token: NiceFilterViewQuery }, { token: NiceFilterViewService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 NiceAdvancedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAdvancedFiltersComponent, selector: "nice-advanced-filters", providers: [