fix(filter-bar): added onClosePipe output (#DS-3769) (#755)

Author: lskramarov

packages/components-dev/filter-bar/module.ts

@@ -18,6 +18,7 @@ import {
     KbqFilter,
     KbqFilterBar,
     KbqFilterBarModule,
+    KbqPipe,
     KbqPipeTemplate,
     KbqPipeTypes
 } from '@koobiq/components/filter-bar';
@@ -170,6 +171,7 @@ export class DevApp implements AfterViewInit {
             pipes: [
                 {
                     name: 'required',
+                    id: 'MultiSelect',
                     value: [
                         { name: 'Не определен', id: '1' },
                         { name: 'Легитимное действие', id: '2' }
@@ -182,6 +184,7 @@ export class DevApp implements AfterViewInit {
                 },
                 {
                     name: 'required',
+                    id: 'MultiSelect',
                     value: [{ name: 'Не определен', id: '1' }],
                     type: KbqPipeTypes.MultiSelect,
 
@@ -191,6 +194,7 @@ export class DevApp implements AfterViewInit {
                 },
                 {
                     name: 'empty',
+                    id: 'MultiSelect',
                     type: KbqPipeTypes.MultiSelect,
                     value: null,
 
@@ -200,6 +204,7 @@ export class DevApp implements AfterViewInit {
                 },
                 {
                     name: 'cleanable',
+                    id: 'MultiSelect',
                     value: [{ name: 'Не определен', id: '1' }],
                     type: KbqPipeTypes.MultiSelect,
 
@@ -209,6 +214,7 @@ export class DevApp implements AfterViewInit {
                 },
                 {
                     name: 'removable',
+                    id: 'MultiSelect',
                     value: [{ name: 'Не определен', id: '1' }],
                     type: KbqPipeTypes.MultiSelect,
 
@@ -218,6 +224,7 @@ export class DevApp implements AfterViewInit {
                 },
                 {
                     name: 'disabled',
+                    id: 'MultiSelect',
                     value: [{ name: 'Не определен', id: '1' }],
                     type: KbqPipeTypes.MultiSelect,
 
@@ -583,7 +590,7 @@ export class DevApp implements AfterViewInit {
         }
     ];
     pipeTemplates: KbqPipeTemplate[];
-    defaultFilter: KbqFilter | null = this.filters[9];
+    defaultFilter: KbqFilter | null = this.filters[1];
     activeFilter: KbqFilter | null = this.defaultFilter;
 
     ngAfterViewInit(): void {
@@ -630,6 +637,7 @@ export class DevApp implements AfterViewInit {
             },
             {
                 name: 'MultiSelect',
+                id: 'MultiSelect',
                 type: KbqPipeTypes.MultiSelect,
                 values: [
                     { name: 'Option 1', id: '1', type: 'error' },
@@ -820,4 +828,8 @@ export class DevApp implements AfterViewInit {
     onSearch(value: string) {
         console.log('onSearch: ', value);
     }
+
+    onClosePipe($event: KbqPipe) {
+        console.log('onClosePipe: ', $event);
+    }
 }

packages/components-dev/filter-bar/template.html

@@ -10,6 +10,7 @@
         [pipeTemplates]="pipeTemplates"
         [(filter)]="activeFilter"
         (filterChange)="onFilterChange($event)"
+        (onClosePipe)="onClosePipe($event)"
     >
         <kbq-filters
             [filters]="filters"

packages/components/filter-bar/filter-bar.ts

@@ -105,6 +105,8 @@ export class KbqFilterBar {
     @Output() readonly onChangePipe = new EventEmitter<KbqPipe>();
     /** Event that emits whenever the pipe deleted. */
     @Output() readonly onRemovePipe = new EventEmitter<KbqPipe>();
+    /** Event that emits whenever the select or multiselect pipe closed. */
+    @Output() readonly onClosePipe = new EventEmitter<KbqPipe>();
 
     /** Whether the current filter is saved and changed */
     get isSavedAndChanged(): boolean {

packages/components/filter-bar/pipes/base-pipe.ts

@@ -2,6 +2,7 @@ import {
     afterNextRender,
     AfterViewInit,
     ChangeDetectorRef,
+    DestroyRef,
     Directive,
     ElementRef,
     inject,
@@ -45,6 +46,8 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
     protected readonly filterBar = inject(KbqFilterBar, { optional: true });
     /** @docs-private */
     protected readonly changeDetectorRef = inject(ChangeDetectorRef);
+    /** @docs-private */
+    protected readonly destroyRef = inject(DestroyRef);
 
     /** values to select from the pipe template */
     protected values;

packages/components/filter-bar/pipes/pipe-multi-select.ts

@@ -1,5 +1,6 @@
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
 import {
+    AfterViewInit,
     ChangeDetectionStrategy,
     Component,
     OnInit,
@@ -8,6 +9,7 @@ import {
     ViewChildren,
     ViewEncapsulation
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule } from '@koobiq/components/button';
@@ -59,7 +61,7 @@ import { KbqPipeTitleDirective } from './pipe-title';
         KbqPseudoCheckboxModule
     ]
 })
-export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl = new UntypedFormControl();
     /** filtered by search options */
@@ -110,6 +112,15 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         );
     }
 
+    /** @docs-private */
+    override ngAfterViewInit() {
+        super.ngAfterViewInit();
+
+        this.select.closedStream
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
+    }
+
     /** @docs-private */
     onSelect(item: KbqSelectValue[]) {
         this.data.value = item;

packages/components/filter-bar/pipes/pipe-select.ts

@@ -1,5 +1,6 @@
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqDividerModule } from '@koobiq/components/divider';
@@ -47,7 +48,7 @@ import { KbqPipeTitleDirective } from './pipe-title';
         AsyncPipe
     ]
 })
-export class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+export class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl = new UntypedFormControl();
     /** filtered by search options */
@@ -66,13 +67,23 @@ export class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implemen
         return !this.data.value;
     }
 
+    /** @docs-private */
     ngOnInit(): void {
         this.filteredOptions = merge(
             of(this.values),
             this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value)))
         );
     }
 
+    /** @docs-private */
+    override ngAfterViewInit() {
+        super.ngAfterViewInit();
+
+        this.select.closedStream
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
+    }
+
     onSelect(item: KbqSelectValue) {
         this.data.value = item;
         this.filterBar?.onChangePipe.emit(this.data);

tools/public_api_guard/components/filter-bar.api.md

@@ -8,6 +8,7 @@ import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { ChangeDetectorRef } from '@angular/core';
+import { DestroyRef } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FormControl } from '@angular/forms';
@@ -102,6 +103,7 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
     constructor();
     protected readonly changeDetectorRef: ChangeDetectorRef;
     readonly data: KbqPipeData<V>;
+    protected readonly destroyRef: DestroyRef;
     protected readonly filterBar: KbqFilterBar | null;
     get isEmpty(): boolean;
     isMac: boolean;
@@ -172,6 +174,7 @@ export class KbqFilterBar {
     get isSavedAndChanged(): boolean;
     protected readonly localeService: KbqLocaleService | null;
     readonly onChangePipe: EventEmitter<KbqPipe>;
+    readonly onClosePipe: EventEmitter<KbqPipe>;
     readonly onRemovePipe: EventEmitter<KbqPipe>;
     readonly openPipe: BehaviorSubject<string | number | null>;
     get pipeTemplates(): KbqPipeTemplate[];
@@ -181,7 +184,7 @@ export class KbqFilterBar {
     restoreFilterState(filter?: KbqFilter): void;
     saveFilterState(filter?: KbqFilter): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBar, never>;
 }
@@ -507,11 +510,12 @@ export class KbqPipeMinWidth {
 }
 
 // @public (undocumented)
-export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements AfterViewInit, OnInit {
     get checkboxState(): KbqPseudoCheckboxState;
     compareByValue: (o1: any, o2: any) => boolean;
     filteredOptions: Observable<any[]>;
     get isEmpty(): boolean;
+    ngAfterViewInit(): void;
     ngOnInit(): void;
     onClear(): void;
     onSelect(item: KbqSelectValue[]): void;
@@ -539,11 +543,11 @@ export class KbqPipeReadonlyComponent extends KbqBasePipe<string | null> {
 }
 
 // @public (undocumented)
-export class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+export class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements AfterViewInit, OnInit {
     compareByValue: (o1: any, o2: any) => boolean;
     filteredOptions: Observable<any[]>;
     get isEmpty(): boolean;
-    // (undocumented)
+    ngAfterViewInit(): void;
     ngOnInit(): void;
     // (undocumented)
     onSelect(item: KbqSelectValue): void;