diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html index 2dddcd256..bea239efc 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html @@ -14,11 +14,11 @@ {{ 'WORKSPACE.SOURCES.TYPE' | translate }} @for (option of typeOptions; track option.id) { - {{ option.icon }} @@ -31,28 +31,7 @@ - - } - - - -
-
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss index bdea40228..8c0df9dec 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss @@ -98,5 +98,5 @@ text-transform: uppercase; letter-spacing: 0.08em; color: var(--mat-sys-on-surface-variant); - opacity: 0.6; + opacity: 0.85; } diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts index d0965e3e9..630a4ffae 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts @@ -1,5 +1,4 @@ import { computed, Component, inject } from '@angular/core'; -import { toSignal } from '@angular/core/rxjs-interop'; import { MatIcon } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; import { Store } from '@ngrx/store'; @@ -9,7 +8,6 @@ import { selectAllPlaylistsMeta, } from 'm3u-state'; import { TranslatePipe } from '@ngx-translate/core'; -import { SortBy, SortOrder, SortService } from 'services'; type PlaylistFilterId = 'all' | 'm3u' | 'xtream' | 'stalker'; @@ -20,13 +18,6 @@ interface PlaylistFilterOption { translationKey?: string; } -interface SortOption { - by: SortBy; - order: SortOrder; - icon: string; - translationKey: string; -} - const ALL_FILTERS = ['m3u', 'xtream', 'stalker']; @Component({ @@ -37,17 +28,12 @@ const ALL_FILTERS = ['m3u', 'xtream', 'stalker']; }) export class WorkspaceSourcesFiltersPanelComponent { private readonly store = inject(Store); - private readonly sortService = inject(SortService); private readonly activeTypeFilters = this.store.selectSignal( selectActiveTypeFilters ); private readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta); - readonly currentSortOptions = toSignal(this.sortService.getSortOptions(), { - requireSync: true, - }); - readonly typeOptions: PlaylistFilterOption[] = [ { id: 'all', @@ -71,39 +57,6 @@ export class WorkspaceSourcesFiltersPanelComponent { }, ]; - readonly sortOptions: SortOption[] = [ - { - by: SortBy.DATE_ADDED, - order: SortOrder.DESC, - icon: 'schedule', - translationKey: 'HOME.SORT_OPTIONS.NEWEST', - }, - { - by: SortBy.DATE_ADDED, - order: SortOrder.ASC, - icon: 'history', - translationKey: 'HOME.SORT_OPTIONS.OLDEST', - }, - { - by: SortBy.NAME, - order: SortOrder.ASC, - icon: 'sort_by_alpha', - translationKey: 'HOME.SORT_OPTIONS.NAME_ASC', - }, - { - by: SortBy.NAME, - order: SortOrder.DESC, - icon: 'sort_by_alpha', - translationKey: 'HOME.SORT_OPTIONS.NAME_DESC', - }, - { - by: SortBy.CUSTOM, - order: SortOrder.ASC, - icon: 'drag_indicator', - translationKey: 'HOME.SORT_OPTIONS.CUSTOM_ORDER', - }, - ]; - readonly typeCounts = computed(() => { const items = this.playlists(); return { @@ -144,16 +97,4 @@ export class WorkspaceSourcesFiltersPanelComponent { } return counts[filterId]; } - - isSortActive(option: SortOption): boolean { - const current = this.currentSortOptions(); - return current.by === option.by && current.order === option.order; - } - - setSortOption(option: SortOption): void { - this.sortService.setSortOptions({ - by: option.by, - order: option.order, - }); - } } diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html index bcf0ae945..5e7e1964b 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html @@ -1,7 +1,35 @@
-

{{ title() }}

-

{{ subtitle() }}

+
+

{{ title() }}

+

{{ subtitle() }}

+
+ + + @for (option of sortOptions; track option.translationKey) { + + } +
params.get('q') ?? '')), { initialValue: '' } @@ -97,10 +153,34 @@ export class WorkspaceSourcesComponent { }); }); + readonly activeSortLabel = computed(() => { + this.languageTick(); + const current = this.currentSortOptions(); + const match = this.sortOptions.find( + (option) => + option.by === current.by && option.order === current.order + ); + return this.translateText( + match?.translationKey ?? 'HOME.SORT_OPTIONS.NEWEST' + ); + }); + onAddPlaylist(): void { this.workspaceActions.openAddPlaylistDialog(); } + isSortActive(option: SortOption): boolean { + const current = this.currentSortOptions(); + return current.by === option.by && current.order === option.order; + } + + setSortOption(option: SortOption): void { + this.sortService.setSortOptions({ + by: option.by, + order: option.order, + }); + } + private translateText( key: string, params?: Record