From b7faa5ce8ae0f6a1bf2f4ffac222f80f897fc572 Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Mon, 27 Nov 2023 15:29:57 +0300 Subject: [PATCH 1/3] fix(addon-table): fix sorting on table with dynamic columns --- .../components/table/directives/sort-by.directive.ts | 6 +++++- .../components/table/directives/sortable.directive.ts | 10 ++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/projects/addon-table/components/table/directives/sort-by.directive.ts b/projects/addon-table/components/table/directives/sort-by.directive.ts index b808589ae005..3ee763f05c9d 100644 --- a/projects/addon-table/components/table/directives/sort-by.directive.ts +++ b/projects/addon-table/components/table/directives/sort-by.directive.ts @@ -1,4 +1,5 @@ import { + ChangeDetectorRef, ContentChildren, Directive, Inject, @@ -8,7 +9,7 @@ import { } from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {EMPTY_QUERY} from '@taiga-ui/cdk'; -import {filter, map} from 'rxjs/operators'; +import {filter, map, tap} from 'rxjs/operators'; import {TuiSortableDirective} from './sortable.directive'; import {TuiTableDirective} from './table.directive'; @@ -25,11 +26,14 @@ export class TuiSortByDirective>> { @Output() readonly tuiSortByChange = this.table.sorterChange.pipe( + // recalculate ContentChildren (sortables) https://github.com/angular/angular/issues/38976 + tap(() => this.cdr.detectChanges()), filter(() => !!this.sortables.length), map(sorter => this.getKey(sorter)), ); constructor( + @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef, @Inject(TuiTableDirective) private readonly table: TuiTableDirective, ) {} diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index ecbe0940b1a8..9280294ce15b 100644 --- a/projects/addon-table/components/table/directives/sortable.directive.ts +++ b/projects/addon-table/components/table/directives/sortable.directive.ts @@ -1,4 +1,4 @@ -import {Directive, DoCheck, forwardRef, Inject, OnInit} from '@angular/core'; +import {Directive, forwardRef, Inject, OnInit} from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {TuiThComponent} from '../th/th.component'; @@ -9,7 +9,7 @@ import {TuiTableDirective} from './table.directive'; selector: 'th[tuiTh][tuiSortable]', }) export class TuiSortableDirective>> - implements DoCheck, OnInit + implements OnInit { constructor( @Inject(forwardRef(() => TuiSortByDirective)) @@ -29,12 +29,6 @@ export class TuiSortableDirective>> this.th.sorter = this.sorter; } - ngDoCheck(): void { - if (this.match && this.table.sorter !== this.sorter) { - this.table.updateSorter(this.sorter); - } - } - private get match(): boolean { return this.sortBy.tuiSortBy === this.key; } From 587f557c67efe3a87283da88a0c9e3ea700c1d53 Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Tue, 28 Nov 2023 12:47:23 +0300 Subject: [PATCH 2/3] chore: comments --- .../components/table/directives/sortable.directive.ts | 10 ++++++++-- .../addon-table/components/table/th/th.component.ts | 8 ++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index 9280294ce15b..ecbe0940b1a8 100644 --- a/projects/addon-table/components/table/directives/sortable.directive.ts +++ b/projects/addon-table/components/table/directives/sortable.directive.ts @@ -1,4 +1,4 @@ -import {Directive, forwardRef, Inject, OnInit} from '@angular/core'; +import {Directive, DoCheck, forwardRef, Inject, OnInit} from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {TuiThComponent} from '../th/th.component'; @@ -9,7 +9,7 @@ import {TuiTableDirective} from './table.directive'; selector: 'th[tuiTh][tuiSortable]', }) export class TuiSortableDirective>> - implements OnInit + implements DoCheck, OnInit { constructor( @Inject(forwardRef(() => TuiSortByDirective)) @@ -29,6 +29,12 @@ export class TuiSortableDirective>> this.th.sorter = this.sorter; } + ngDoCheck(): void { + if (this.match && this.table.sorter !== this.sorter) { + this.table.updateSorter(this.sorter); + } + } + private get match(): boolean { return this.sortBy.tuiSortBy === this.key; } diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index 2ed676eae649..2bceceb21650 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -13,6 +13,7 @@ import {tuiDefaultSort, TuiTableSortKeyException} from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF} from '@taiga-ui/core'; import {TuiHeadDirective} from '../directives/head.directive'; +import {TuiSortByDirective} from '../directives/sort-by.directive'; import {TuiTableDirective} from '../directives/table.directive'; import {TUI_TABLE_OPTIONS, TuiTableOptions} from '../table.options'; @@ -52,6 +53,9 @@ export class TuiThComponent>> { @Optional() @Inject(forwardRef(() => TuiTableDirective)) readonly table: TuiTableDirective | null, + @Optional() + @Inject(forwardRef(() => TuiSortByDirective)) + private readonly sortBy: TuiSortByDirective | null, ) {} get key(): keyof T { @@ -77,6 +81,10 @@ export class TuiThComponent>> { } updateSorterAndDirection(): void { + if (this.sortBy) { + this.sortBy.tuiSortBy = this.key; + } + this.table?.updateSorterAndDirection( this.isCurrentAndAscDirection ? null : this.sorter, ); From f621ced1c63957c4130c41fe3adc018095ad3f13 Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Wed, 29 Nov 2023 17:52:11 +0300 Subject: [PATCH 3/3] chore: comments --- .../table/directives/sort-by.directive.ts | 21 ++++++++++++------- .../table/directives/sortable.directive.ts | 6 +++--- .../components/table/th/th.component.ts | 8 ------- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/projects/addon-table/components/table/directives/sort-by.directive.ts b/projects/addon-table/components/table/directives/sort-by.directive.ts index 3ee763f05c9d..88d66f7da919 100644 --- a/projects/addon-table/components/table/directives/sort-by.directive.ts +++ b/projects/addon-table/components/table/directives/sort-by.directive.ts @@ -1,5 +1,4 @@ import { - ChangeDetectorRef, ContentChildren, Directive, Inject, @@ -9,7 +8,7 @@ import { } from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {EMPTY_QUERY} from '@taiga-ui/cdk'; -import {filter, map, tap} from 'rxjs/operators'; +import {delay, filter, map} from 'rxjs/operators'; import {TuiSortableDirective} from './sortable.directive'; import {TuiTableDirective} from './table.directive'; @@ -21,22 +20,30 @@ export class TuiSortByDirective>> { @ContentChildren(TuiSortableDirective, {descendants: true}) private readonly sortables: QueryList> = EMPTY_QUERY; - @Input() - tuiSortBy: string | keyof T | null = null; + @Input('tuiSortBy') + set sortBy(sortBy: string | keyof T | null) { + this.tuiSortBy = sortBy; + this.checkSortables(); + } @Output() readonly tuiSortByChange = this.table.sorterChange.pipe( - // recalculate ContentChildren (sortables) https://github.com/angular/angular/issues/38976 - tap(() => this.cdr.detectChanges()), + // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976 + delay(0), filter(() => !!this.sortables.length), map(sorter => this.getKey(sorter)), ); + tuiSortBy: string | keyof T | null = null; + constructor( - @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef, @Inject(TuiTableDirective) private readonly table: TuiTableDirective, ) {} + checkSortables(): void { + this.sortables.forEach(s => s.check()); + } + private getKey(sorter: TuiComparator | null): keyof T | null { return this.sortables.find(s => s.sorter === sorter)?.key || null; } diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index ecbe0940b1a8..2910999ac707 100644 --- a/projects/addon-table/components/table/directives/sortable.directive.ts +++ b/projects/addon-table/components/table/directives/sortable.directive.ts @@ -1,4 +1,4 @@ -import {Directive, DoCheck, forwardRef, Inject, OnInit} from '@angular/core'; +import {Directive, forwardRef, Inject, OnInit} from '@angular/core'; import {TuiComparator} from '@taiga-ui/addon-table/types'; import {TuiThComponent} from '../th/th.component'; @@ -9,7 +9,7 @@ import {TuiTableDirective} from './table.directive'; selector: 'th[tuiTh][tuiSortable]', }) export class TuiSortableDirective>> - implements DoCheck, OnInit + implements OnInit { constructor( @Inject(forwardRef(() => TuiSortByDirective)) @@ -29,7 +29,7 @@ export class TuiSortableDirective>> this.th.sorter = this.sorter; } - ngDoCheck(): void { + check(): void { if (this.match && this.table.sorter !== this.sorter) { this.table.updateSorter(this.sorter); } diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index 2bceceb21650..2ed676eae649 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -13,7 +13,6 @@ import {tuiDefaultSort, TuiTableSortKeyException} from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF} from '@taiga-ui/core'; import {TuiHeadDirective} from '../directives/head.directive'; -import {TuiSortByDirective} from '../directives/sort-by.directive'; import {TuiTableDirective} from '../directives/table.directive'; import {TUI_TABLE_OPTIONS, TuiTableOptions} from '../table.options'; @@ -53,9 +52,6 @@ export class TuiThComponent>> { @Optional() @Inject(forwardRef(() => TuiTableDirective)) readonly table: TuiTableDirective | null, - @Optional() - @Inject(forwardRef(() => TuiSortByDirective)) - private readonly sortBy: TuiSortByDirective | null, ) {} get key(): keyof T { @@ -81,10 +77,6 @@ export class TuiThComponent>> { } updateSorterAndDirection(): void { - if (this.sortBy) { - this.sortBy.tuiSortBy = this.key; - } - this.table?.updateSorterAndDirection( this.isCurrentAndAscDirection ? null : this.sorter, );