From a6c0a3604df7ef63b361ed4b63cbe99305498195 Mon Sep 17 00:00:00 2001 From: Tomas Rimkus Date: Mon, 9 Dec 2024 12:02:03 +0100 Subject: [PATCH] fix(addon-table): sort icons are reversed (#9904) --- .../directives/direction-order.directive.ts | 4 +++- .../table/directives/table.directive.ts | 12 ++++++++---- .../test/direction-order.directive.spec.ts | 12 ++++++------ .../components/table/pipes/table-sort.pipe.ts | 3 ++- .../components/table/table.options.ts | 10 ++++++++-- .../components/table/th/th.component.ts | 17 ++++++++++------- 6 files changed, 37 insertions(+), 21 deletions(-) diff --git a/projects/addon-table/components/table/directives/direction-order.directive.ts b/projects/addon-table/components/table/directives/direction-order.directive.ts index ca6de78c4314..3db803d9e07c 100644 --- a/projects/addon-table/components/table/directives/direction-order.directive.ts +++ b/projects/addon-table/components/table/directives/direction-order.directive.ts @@ -1,6 +1,7 @@ import {Directive, inject, Input, Output} from '@angular/core'; import {map} from 'rxjs'; +import {TuiSortDirection} from '../table.options'; import {TuiTableDirective} from './table.directive'; @Directive({ @@ -17,6 +18,7 @@ export class TuiTableDirectionOrder { @Input() public set directionOrder(order: 'asc' | 'desc') { - this.table.direction = order === 'asc' ? 1 : -1; + this.table.direction = + order === 'asc' ? TuiSortDirection.Asc : TuiSortDirection.Desc; } } diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts index 73d1c95d7257..71051fc19c92 100644 --- a/projects/addon-table/components/table/directives/table.directive.ts +++ b/projects/addon-table/components/table/directives/table.directive.ts @@ -23,7 +23,7 @@ import {tuiChipOptionsProvider} from '@taiga-ui/kit/components/chip'; import {tuiProgressOptionsProvider} from '@taiga-ui/kit/components/progress'; import {Subject} from 'rxjs'; -import {TUI_TABLE_OPTIONS} from '../table.options'; +import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options'; import {TuiStuck} from './stuck.directive'; @Component({ @@ -72,7 +72,7 @@ export class TuiTableDirective>> public direction = this.options.direction; @Output() - public readonly directionChange = new EventEmitter<-1 | 1>(); + public readonly directionChange = new EventEmitter(); @Output() public readonly sorterChange = new EventEmitter | null>(); @@ -94,7 +94,11 @@ export class TuiTableDirective>> public updateSorterAndDirection(sorter: TuiComparator | null): void { if (this.sorter === sorter) { - this.updateDirection(this.direction === 1 ? -1 : 1); + this.updateDirection( + this.direction === TuiSortDirection.Asc + ? TuiSortDirection.Desc + : TuiSortDirection.Asc, + ); } else { this.updateSorter(sorter); this.updateDirection(1); @@ -115,7 +119,7 @@ export class TuiTableDirective>> this.change$.next(); } - private updateDirection(direction: -1 | 1): void { + private updateDirection(direction: TuiSortDirection): void { this.direction = direction; this.directionChange.emit(this.direction); this.change$.next(); diff --git a/projects/addon-table/components/table/directives/test/direction-order.directive.spec.ts b/projects/addon-table/components/table/directives/test/direction-order.directive.spec.ts index cf2cff5b7a77..369998da2baf 100644 --- a/projects/addon-table/components/table/directives/test/direction-order.directive.spec.ts +++ b/projects/addon-table/components/table/directives/test/direction-order.directive.spec.ts @@ -1,7 +1,7 @@ import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import type {ComponentFixture} from '@angular/core/testing'; import {TestBed} from '@angular/core/testing'; -import {TuiTable, TuiTableDirective} from '@taiga-ui/addon-table'; +import {TuiSortDirection, TuiTable, TuiTableDirective} from '@taiga-ui/addon-table'; describe('TuiDirectionOrder directive', () => { @Component({ @@ -44,31 +44,31 @@ describe('TuiDirectionOrder directive', () => { it('sets the sort direction of table to ascending', () => { fixture.detectChanges(); - expect(testComponent.table.direction).toBe(1); + expect(testComponent.table.direction).toBe(TuiSortDirection.Asc); }); it('sets the sort direction of table to descending', () => { testComponent.directionOrder = 'desc'; fixture.detectChanges(); - expect(testComponent.table.direction).toBe(-1); + expect(testComponent.table.direction).toBe(TuiSortDirection.Desc); }); describe('when table emits direction change', () => { it('emits ascending directionOrder', () => { - testComponent.table.directionChange.emit(1); + testComponent.table.directionChange.emit(TuiSortDirection.Asc); expect(testComponent.directionOrderChange).toHaveBeenCalledWith('asc'); }); it('emits descending directionOrder', () => { - testComponent.table.directionChange.emit(-1); + testComponent.table.directionChange.emit(TuiSortDirection.Desc); expect(testComponent.directionOrderChange).toHaveBeenCalledWith('desc'); }); it('should not emit directionChange when updating sorter programmatically', () => { - testComponent.table.updateSorter(() => -1); + testComponent.table.updateSorter(() => TuiSortDirection.Desc); expect(testComponent.directionOrderChange).not.toHaveBeenCalled(); }); diff --git a/projects/addon-table/components/table/pipes/table-sort.pipe.ts b/projects/addon-table/components/table/pipes/table-sort.pipe.ts index f52441b492f4..2e1c5b59e402 100644 --- a/projects/addon-table/components/table/pipes/table-sort.pipe.ts +++ b/projects/addon-table/components/table/pipes/table-sort.pipe.ts @@ -4,6 +4,7 @@ import type {TuiComparator} from '@taiga-ui/addon-table/types'; import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous'; import {TuiTableDirective} from '../directives/table.directive'; +import type {TuiSortDirection} from '../table.options'; @Pipe({ standalone: true, @@ -21,7 +22,7 @@ export class TuiTableSortPipe>> implements PipeTran private sort( data: readonly T[], sorter: TuiComparator, - direction: -1 | 1, + direction: TuiSortDirection, ): readonly T[] { return [...data].sort((a, b) => direction * sorter(a, b)); } diff --git a/projects/addon-table/components/table/table.options.ts b/projects/addon-table/components/table/table.options.ts index 293de4867962..1f67be1001d5 100644 --- a/projects/addon-table/components/table/table.options.ts +++ b/projects/addon-table/components/table/table.options.ts @@ -2,8 +2,14 @@ import type {Provider} from '@angular/core'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; +export const TuiSortDirection = { + Asc: 1, + Desc: -1, +} as const; +export type TuiSortDirection = (typeof TuiSortDirection)[keyof typeof TuiSortDirection]; + export interface TuiTableOptions { - readonly direction: -1 | 1; + readonly direction: TuiSortDirection; readonly requiredSort: boolean; readonly open: boolean; readonly resizable: boolean; @@ -21,7 +27,7 @@ export const TUI_TABLE_DEFAULT_OPTIONS: TuiTableOptions = { resizable: false, open: true, size: 'm', - direction: 1, + direction: TuiSortDirection.Asc, requiredSort: false, sortIcons: { asc: '@tui.chevron-up', diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index b8be54bab86e..3b6046f03514 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -14,7 +14,7 @@ import {TuiIcon} from '@taiga-ui/core/components/icon'; import {TuiTableHead} from '../directives/head.directive'; import {TuiTableResized} from '../directives/resized.directive'; import {TuiTableDirective} from '../directives/table.directive'; -import {TUI_TABLE_OPTIONS} from '../table.options'; +import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options'; @Component({ standalone: true, @@ -70,9 +70,9 @@ export class TuiTableTh>> { protected get icon(): string { if (this.isCurrent) { - return this.table?.direction === 1 - ? this.options.sortIcons.desc - : this.options.sortIcons.asc; + return this.table?.direction === TuiSortDirection.Asc + ? this.options.sortIcons.asc + : this.options.sortIcons.desc; } return this.options.sortIcons.off; @@ -82,7 +82,7 @@ export class TuiTableTh>> { const sorter = this.requiredSort ? this.sorter : null; this.table?.updateSorterAndDirection( - this.isCurrentAndAscDirection ? sorter : this.sorter, + this.isCurrentAndDescDirection ? sorter : this.sorter, ); } @@ -90,8 +90,11 @@ export class TuiTableTh>> { this.width = width; } - private get isCurrentAndAscDirection(): boolean { - return this.sorter === this.table?.sorter && this.table?.direction === -1; + private get isCurrentAndDescDirection(): boolean { + return ( + this.sorter === this.table?.sorter && + this.table?.direction === TuiSortDirection.Desc + ); } }