@recursyve/nice-data-filter-kit 14.5.0 → 14.5.2

package/fesm2015/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';
@@ -2748,72 +2748,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
-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) {
-        var _a, _b, _c;
-        const base = {
-            id: config.id,
-            operation: operator || config.operators[0].id
-        };
-        switch (config.type) {
-            case FilterType.Text:
-                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? ["", ""] : "" });
-            case FilterType.Number:
-            case FilterType.Select:
-                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? [null, null] : null });
-            case FilterType.Date:
-                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date() });
-            case FilterType.Radio:
-                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator)
-                        ? [(_a = config.options) === null || _a === void 0 ? void 0 : _a[0].key, (_b = config.options) === null || _b === void 0 ? void 0 : _b[0].key]
-                        : (_c = config.options) === null || _c === void 0 ? void 0 : _c[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");
 
 const EXPORTS_SETTINGS = new InjectionToken("exports_settings");
@@ -3284,6 +3218,7 @@ class NiceFilterViewService {
             this.store.update({
                 filterResult: null
             });
+            this.store.set([]);
         }
         else {
             this.store.update({
@@ -3294,6 +3229,12 @@ class NiceFilterViewService {
 }
 NiceFilterViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService, deps: [{ token: NiceFilterViewStore }, { token: NiceFilterService }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceFilterViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService });
+__decorate([
+    transaction(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], NiceFilterViewService.prototype, "resetResult", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceFilterViewService, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
@@ -3301,7 +3242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                         type: Inject,
                         args: [NiceFilterService]
                     }] }];
-    } });
+    }, propDecorators: { resetResult: [] } });
 
 class NiceFilterGroupIconPipe {
     constructor(service) {
@@ -3448,7 +3389,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]) => {
+        this.hasParameters$ = this.query.selectFilterParameters().pipe(combineLatestWith(this.query.selectFilterConfig()), map(([parameter, config]) => {
             var _a, _b;
             return !!((_b = (_a = parameter
                 .rules) === null || _a === void 0 ? void 0 : _a.filter((rule) => config.some((conf) => { var _a; return (conf === null || conf === void 0 ? void 0 : conf.id) === ((_a = rule.rules[0]) === null || _a === void 0 ? void 0 : _a.id); }))) === null || _b === void 0 ? void 0 : _b.length);
@@ -3458,16 +3399,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
@@ -3622,6 +3562,72 @@ 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) {
+        var _a, _b, _c;
+        const base = {
+            id: config.id,
+            operation: operator || config.operators[0].id
+        };
+        switch (config.type) {
+            case FilterType.Text:
+                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? ["", ""] : "" });
+            case FilterType.Number:
+            case FilterType.Select:
+                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? [null, null] : null });
+            case FilterType.Date:
+                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator) ? [new Date(), new Date()] : new Date() });
+            case FilterType.Radio:
+                return Object.assign(Object.assign({}, base), { value: AdvancedFiltersUtils.isDoubleInput(operator)
+                        ? [(_a = config.options) === null || _a === void 0 ? void 0 : _a[0].key, (_b = config.options) === null || _b === void 0 ? void 0 : _b[0].key]
+                        : (_c = config.options) === null || _c === void 0 ? void 0 : _c[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 = (_) => { };
@@ -3862,10 +3868,17 @@ class NiceAdvancedFiltersComponent {
     }
     ngOnInit() {
         var _a;
-        const { filterParameters } = this.query.getValue();
+        const { filterParameters, subStates } = this.query.getValue();
         if ((_a = filterParameters.rules) === null || _a === void 0 ? void 0 : _a.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)));
@@ -3880,6 +3893,7 @@ class NiceAdvancedFiltersComponent {
         }
     }
     onClose() {
+        this.removeEmptyRules();
         this.service.updateSubState("showAdvancedFilters", false);
     }
     onRefresh() {
@@ -3887,6 +3901,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: [
@@ -4126,6 +4165,10 @@ class NiceSelectableListStateService {
         var _a, _b;
         return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.preloadWindow) !== null && _b !== void 0 ? _b : 2;
     }
+    get queryParamsDisabled() {
+        var _a, _b;
+        return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.disableQueryParams) !== null && _b !== void 0 ? _b : false;
+    }
     setActive(entity) {
         this.store.setActive(entity[this.idKey]);
     }
@@ -4339,10 +4382,12 @@ class NiceSelectableListStateService {
         };
     }
     setQueryParams() {
-        this.router.navigate([], {
-            queryParams: this.generateQueryParams(),
-            queryParamsHandling: "merge"
-        });
+        if (!this.queryParamsDisabled) {
+            this.router.navigate([], {
+                queryParams: this.generateQueryParams(),
+                queryParamsHandling: "merge"
+            });
+        }
     }
 }
 
@@ -4960,6 +5005,10 @@ class NiceSelectableListDirective {
         this.unsubscribeQuerySub$ = new Subject();
     }
     ngOnInit() {
+        var _a;
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.disableQueryParams) {
+            return;
+        }
         combineLatest([
             this.route.queryParams.pipe(map((params) => params.selection), distinct()),
             this.route.queryParams.pipe(map((params) => params.selected), distinct())
@@ -4992,7 +5041,7 @@ class NiceSelectableListDirective {
         }
         if ("state" in changes) {
             this.service.setState(this.state);
-            this.stateService = this.selectableListService.withState(this.state);
+            this.stateService = this.selectableListService.withState(this.state, this.options);
             this.stateQuery = this.selectableListService.query(this.state);
             this.listenOnStateChanges();
         }