fix(filter-bar): different pipes with the same type (#DS-3692)

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

@@ -31,6 +31,9 @@ import { DevLocaleSelector } from '../locale-selector';
     imports: [FilterBarExamplesModule],
     selector: 'dev-docs-examples',
     template: `
+        <filter-bar-uniq-pipes-example />
+        <br />
+        <br />
         <filter-bar-custom-pipe-example />
         <br />
         <br />
@@ -613,6 +616,25 @@ export class DemoComponent implements AfterViewInit {
                 removable: false,
                 disabled: false
             },
+            {
+                name: 'mySelect',
+                type: KbqPipeTypes.Select,
+                id: 'mySelect',
+                values: [
+                    { name: 'Option 1', id: '1', type: 'error' },
+                    { name: 'Option 2', id: '2', type: 'warning' },
+                    { name: 'Option 3', id: '3', type: 'success' },
+                    { name: 'Option 4', id: '4', type: 'error' },
+                    { name: 'Option 5', id: '5', type: 'warning' }
+                ],
+                valueTemplate: this.optionTemplate,
+                search: true,
+
+                required: false,
+                cleanable: false,
+                removable: false,
+                disabled: false
+            },
             {
                 name: 'MultiSelect',
                 type: KbqPipeTypes.MultiSelect,
@@ -636,6 +658,25 @@ export class DemoComponent implements AfterViewInit {
                 removable: true,
                 disabled: false
             },
+            {
+                name: 'myMultiSelect',
+                type: KbqPipeTypes.MultiSelect,
+                id: 'myMultiSelect',
+                values: [
+                    { name: 'Option 1', id: '1', type: 'error' },
+                    { name: 'Option 2', id: '2', type: 'warning' },
+                    { name: 'Option 3', id: '3', type: 'success' },
+                    { name: 'Option 4', id: '4', type: 'error' },
+                    { name: 'Option 5', id: '5', type: 'warning' }
+                ],
+                valueTemplate: this.optionTemplate,
+                search: true,
+
+                required: false,
+                cleanable: false,
+                removable: true,
+                disabled: false
+            },
             {
                 name: 'Text',
                 type: KbqPipeTypes.Text,
@@ -645,6 +686,16 @@ export class DemoComponent implements AfterViewInit {
                 removable: false,
                 disabled: false
             },
+            {
+                name: 'myText',
+                type: KbqPipeTypes.Text,
+                id: 'myText',
+
+                required: false,
+                cleanable: false,
+                removable: false,
+                disabled: false
+            },
             {
                 name: 'Date',
                 type: KbqPipeTypes.Date,
@@ -661,6 +712,23 @@ export class DemoComponent implements AfterViewInit {
                 removable: false,
                 disabled: false
             },
+            {
+                name: 'myDate',
+                type: KbqPipeTypes.Date,
+                id: 'myDate',
+                values: [
+                    { name: 'Последний день', end: null, start: { days: -1 } },
+                    { name: 'Последние 3 дня', end: null, start: { days: -3 } },
+                    { name: 'Последние 7 дней', end: null, start: { days: -7 } },
+                    { name: 'Последние 30 дней', end: null, start: { days: -30 } },
+                    { name: 'Последние 90 дней', end: null, start: { days: -90 } },
+                    { name: 'Последний год', end: null, start: { years: -1 } }
+                ],
+                required: false,
+                cleanable: false,
+                removable: false,
+                disabled: false
+            },
             {
                 name: 'Datetime',
                 type: KbqPipeTypes.Datetime,
@@ -676,6 +744,23 @@ export class DemoComponent implements AfterViewInit {
                 cleanable: true,
                 removable: false,
                 disabled: false
+            },
+            {
+                name: 'myDatetime',
+                type: KbqPipeTypes.Datetime,
+                id: 'myDatetime',
+                values: [
+                    { name: 'Последний день', end: null, start: { days: -1 } },
+                    { name: 'Последние 3 дня', end: null, start: { days: -3 } },
+                    { name: 'Последние 7 дней', end: null, start: { days: -7 } },
+                    { name: 'Последние 30 дней', end: null, start: { days: -30 } },
+                    { name: 'Последние 90 дней', end: null, start: { days: -90 } },
+                    { name: 'Последний год', end: null, start: { years: -1 } }
+                ],
+                required: false,
+                cleanable: true,
+                removable: false,
+                disabled: false
             }
         ];
     }

packages/components/filter-bar/examples.filter-bar.en.md

@@ -1 +1,7 @@
+#### Example of adding a custom pipe
+
 <!-- example(filter-bar-complete-functions) -->
+
+#### Example of multiple pipes with the same type
+
+<!-- example(filter-bar-uniq-pipes) -->

packages/components/filter-bar/examples.filter-bar.ru.md

@@ -1,3 +1,7 @@
 #### Пример добавления пользовательского пайпа
 
 <!-- example(filter-bar-custom-pipe) -->
+
+#### Пример множества пайпов с одинаковым типом
+
+<!-- example(filter-bar-uniq-pipes) -->

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

@@ -18,6 +18,7 @@ import { KbqSelect, KbqSelectModule } from '@koobiq/components/select';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { KbqFilterBar } from './filter-bar';
 import { KbqFilter, KbqPipe, KbqPipeTemplate } from './filter-bar.types';
+import { getId } from './pipes/base-pipe';
 
 @Component({
     standalone: true,
@@ -92,14 +93,14 @@ export class KbqPipeAdd {
     constructor() {
         this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
             if (this.filterBar?.filter) {
-                this.addedPipes = this.filterBar.filter.pipes.map((pipe: KbqPipe) => pipe.id || pipe.name);
+                this.addedPipes = this.filterBar.filter.pipes.map((pipe: KbqPipe) => getId(pipe));
             }
         });
     }
 
     addPipeFromTemplate(option: KbqOption) {
         if (option.selected) {
-            this.filterBar.openPipe.next(option.value.id || option.value.name);
+            this.filterBar.openPipe.next(getId(option.value));
         } else {
             option.select();
 
@@ -125,6 +126,6 @@ export class KbqPipeAdd {
      * should be returned.
      */
     compareWith(o1: KbqPipe, o2: string): boolean {
-        return (o1.id || o1.name) === o2;
+        return getId(o1) === o2;
     }
 }

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

@@ -13,11 +13,16 @@ import { isMac } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { delay, filter } from 'rxjs/operators';
 import { KbqFilterBar } from '../filter-bar';
-import { KbqPipeData, KbqPipeTemplate } from '../filter-bar.types';
+import { KbqPipeData, KbqPipeTemplate, KbqPipeType } from '../filter-bar.types';
 
 /** Injection Token for providing configuration of filter-bar */
 export const KBQ_PIPE_DATA = new InjectionToken('KBQ_PIPE_DATA');
 
+/** function to get unique identifier of an element */
+export function getId(item: KbqPipeTemplate): KbqPipeType | string | number {
+    return item?.id ?? item?.name;
+}
+
 @Directive({
     standalone: true,
     host: {
@@ -86,8 +91,8 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
             this.open();
         }
 
-        this.filterBar?.openPipe.pipe(filter(Boolean)).subscribe((name) => {
-            if (this.data.name === name) {
+        this.filterBar?.openPipe.pipe(filter(Boolean)).subscribe((id) => {
+            if (getId(this.data) === id) {
                 this.open();
             }
         });
@@ -100,7 +105,7 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
 
     /** updates values for selection and value template */
     updateTemplates = (templates: KbqPipeTemplate[] | null) => {
-        const template = templates?.find((template) => template.type === this.data?.type);
+        const template = templates?.find((template) => getId(template) === getId(this.data));
 
         if (template?.values) {
             this.values = template.values;

packages/docs-examples/components/filter-bar/filter-bar-removable/filter-bar-removable-example.ts

@@ -41,7 +41,7 @@ export class FilterBarRemovableExample {
                 disabled: false
             },
             {
-                name: 'SelectMultiple',
+                name: 'MultiSelect',
                 type: KbqPipeTypes.MultiSelect,
                 value: [],