x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-11 11:06:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat(portal): add category sorting controls (#940)

Browse Source 
* feat(portal): add category sort modes

* fix(portal): address category sort review feedback
This commit is contained in:
4gray authored and GitHub committed 2026-05-15 00:28:32 +02:00
1 parent 2a5b1d1da7
commit 8232a86a1e
34 files changed
+579 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

libs/workspace/shell/feature/project.json
+8
View File
@@ -6,6 +6,14 @@
"projectType": "library",
"tags": ["scope:workspace", "domain:workspace", "type:feature"],
"targets": {
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "libs/workspace/shell/feature/jest.config.ts",
"tsConfig": "libs/workspace/shell/feature/tsconfig.spec.json"
}
},
"lint": {
"executor": "@nx/eslint:lint"
}
libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.ts
+1 -1
View File
@@ -27,7 +27,7 @@ interface WorkspaceCategoryViewItem {
styleUrl: './workspace-context-category-view.component.scss',
})
export class WorkspaceContextCategoryViewComponent {
readonly items = input<WorkspaceCategoryViewItem[]>([]);
readonly items = input<ReadonlyArray<WorkspaceCategoryViewItem>>([]);
readonly selectedCategoryId = input<string | number | null | undefined>();
readonly itemCounts = input<Map<number, number>>(new Map());
readonly showCounts = input(false);
libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.html
+41
View File
@@ -18,6 +18,47 @@
<mat-icon>search</mat-icon>
</button>
}
@if (canSearchCategories()) {
<button
type="button"
mat-icon-button
class="context-header__action"
[class.context-header__action--active]="
categorySortMode() !== 'server'
"
[matMenuTriggerFor]="categorySortMenu"
[matTooltip]="
('WORKSPACE.SORT_LABEL' | translate) +
(categorySortLabelKey() | translate)
"
[attr.aria-label]="
'WORKSPACE.CATEGORY_SORT_ARIA' | translate
"
>
<mat-icon>{{ categorySortIcon() }}</mat-icon>
</button>
<mat-menu #categorySortMenu="matMenu">
@for (
option of categorySortOptions;
track option.mode
) {
<button
mat-menu-item
(click)="setCategorySortMode(option.mode)"
>
<mat-icon>{{ option.icon }}</mat-icon>
<span>{{
option.translationKey | translate
}}</span>
@if (categorySortMode() === option.mode) {
<mat-icon class="context-sort-check"
>check</mat-icon
>
}
</button>
}
</mat-menu>
}
@if (isXtreamCategories()) {
<button
type="button"
libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
+4
View File
@@ -80,6 +80,10 @@
text-transform: uppercase;
}
.context-sort-check {
margin-left: auto;
}
.context-header p {
margin: 4px 0 0;
font-size: 0.78rem;
libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.spec.ts
+145 -2
View File
@@ -6,6 +6,7 @@ import { TranslateService } from '@ngx-translate/core';
import { of } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
import { WORKSPACE_CATEGORY_SORT_STORAGE_KEY } from '@iptvnator/portal/shared/util';
import {
XtreamContentLoadState,
XtreamStore,
@@ -17,6 +18,11 @@ const translations: Record<string, string> = {
'WORKSPACE.CONTEXT.RADIO_CATEGORIES': 'Radio Categories',
'WORKSPACE.CONTEXT.XTREAM_SYNCING_LIVE': 'Syncing live categories...',
'WORKSPACE.CONTEXT.XTREAM_SYNCING_MOVIES': 'Syncing movie categories...',
'WORKSPACE.CATEGORY_SORT_ARIA': 'Sort categories',
'WORKSPACE.SORT_LABEL': 'Sort: ',
'WORKSPACE.SORT_NAME_ASC': 'Name A-Z',
'WORKSPACE.SORT_NAME_DESC': 'Name Z-A',
'WORKSPACE.SORT_SERVER': 'Server sorting',
'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING':
'Fetching playlist data from source...',
};
@@ -35,13 +41,20 @@ function createRouteSnapshot(
return {
routeConfig: path ? { path } : null,
paramMap: {
has: (param: string) =>
hasCategoryId && param === 'categoryId',
has: (param: string) => hasCategoryId && param === 'categoryId',
},
children,
};
}
function getCategoryLabels(
fixture: ComponentFixture<WorkspaceContextPanelComponent>
): string[] {
return Array.from(
fixture.nativeElement.querySelectorAll('.category-item .nav-item-label')
).map((element: Element) => element.textContent?.trim() ?? '');
}
describe('WorkspaceContextPanelComponent', () => {
let fixture: ComponentFixture<WorkspaceContextPanelComponent>;
const xtreamCategories = signal([
@@ -98,6 +111,7 @@ describe('WorkspaceContextPanelComponent', () => {
};
beforeEach(async () => {
localStorage.removeItem(WORKSPACE_CATEGORY_SORT_STORAGE_KEY);
xtreamCategories.set([
{ id: 1, name: 'News' },
{ id: 2, name: 'Sports' },
@@ -255,6 +269,135 @@ describe('WorkspaceContextPanelComponent', () => {
]);
});
it('keeps xtream categories in server order by default and sorts them from the menu modes', () => {
fixture.componentRef.setInput('section', 'vod');
xtreamSelectedTypeContentState.set('ready');
xtreamCategories.set([
{ id: 1, name: 'Sports' },
{ id: 2, name: 'Movies' },
{ id: 3, name: 'News' },
]);
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'Sports',
'Movies',
'News',
]);
fixture.componentInstance.setCategorySortMode('name-asc');
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'Movies',
'News',
'Sports',
]);
fixture.componentInstance.setCategorySortMode('name-desc');
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'Sports',
'News',
'Movies',
]);
expect(localStorage.getItem(WORKSPACE_CATEGORY_SORT_STORAGE_KEY)).toBe(
'name-desc'
);
});
it('uses translated category sort labels and distinct mode icons', () => {
fixture.componentRef.setInput('section', 'vod');
xtreamSelectedTypeContentState.set('ready');
fixture.detectChanges();
const sortButton = Array.from(
fixture.nativeElement.querySelectorAll('.context-header__action')
).at(1) as HTMLButtonElement | undefined;
expect(sortButton?.getAttribute('aria-label')).toBe('Sort categories');
expect(fixture.componentInstance.categorySortLabelKey()).toBe(
'WORKSPACE.SORT_SERVER'
);
expect(fixture.componentInstance.categorySortIcon()).toBe('dns');
expect(
fixture.componentInstance.categorySortOptions.map((option) => ({
mode: option.mode,
translationKey: option.translationKey,
icon: option.icon,
}))
).toEqual([
{
mode: 'server',
translationKey: 'WORKSPACE.SORT_SERVER',
icon: 'dns',
},
{
mode: 'name-asc',
translationKey: 'WORKSPACE.SORT_NAME_ASC',
icon: 'sort_by_alpha',
},
{
mode: 'name-desc',
translationKey: 'WORKSPACE.SORT_NAME_DESC',
icon: 'arrow_downward',
},
]);
fixture.componentInstance.setCategorySortMode('name-desc');
fixture.detectChanges();
expect(fixture.componentInstance.categorySortLabelKey()).toBe(
'WORKSPACE.SORT_NAME_DESC'
);
expect(fixture.componentInstance.categorySortIcon()).toBe(
'arrow_downward'
);
});
it('applies the category sort menu modes to stalker categories', () => {
fixture.componentRef.setInput('context', {
provider: 'stalker',
playlistId: 'stalker-1',
});
fixture.componentRef.setInput('section', 'series');
stalkerStore.getCategoryResource.set([
{ category_id: '*', category_name: 'All Categories' },
{ category_id: 'z', category_name: 'Zulu' },
{ category_id: 'a', category_name: 'Alpha' },
{ category_id: 'm', category_name: 'Movies' },
]);
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'All Categories',
'Zulu',
'Alpha',
'Movies',
]);
fixture.componentInstance.setCategorySortMode('name-asc');
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'All Categories',
'Alpha',
'Movies',
'Zulu',
]);
fixture.componentInstance.setCategorySortMode('name-desc');
fixture.detectChanges();
expect(getCategoryLabels(fixture)).toEqual([
'All Categories',
'Zulu',
'Movies',
'Alpha',
]);
});
it('preserves the active xtream live item when switching live categories', () => {
fixture.componentRef.setInput('section', 'live');
xtreamSelectedTypeContentState.set('ready');
libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.ts
+102 -24
View File
@@ -13,10 +13,17 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatIconButton } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltip } from '@angular/material/tooltip';
import { Router } from '@angular/router';
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
import {
PortalCategorySortMode,
persistPortalCategorySortMode,
restorePortalCategorySortMode,
sortPortalCategoryItems,
} from '@iptvnator/portal/shared/util';
import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
import { WorkspaceContextCategoryViewComponent } from './components/workspace-context-category-view.component';
import { WorkspaceContextErrorViewComponent } from './components/workspace-context-error-view.component';
@@ -34,11 +41,19 @@ interface XtreamCategoryLike {
category_id?: number | string;
}
interface WorkspaceCategoryLike {
readonly category_id?: string | number;
readonly category_name?: string;
readonly id?: string | number;
readonly name?: string;
}
@Component({
selector: 'app-workspace-context-panel',
imports: [
MatIconButton,
MatIcon,
MatMenuModule,
MatTooltip,
TranslatePipe,
WorkspaceContextCategoryViewComponent,
@@ -100,9 +115,7 @@ export class WorkspaceContextPanelComponent {
this.isXtreamCategoryInteractionEnabled() ? 'ready' : 'loading'
);
readonly canManageXtreamCategories = computed(
() =>
this.isXtreamCategories() &&
this.xtreamSelectedTypeCountsReady()
() => this.isXtreamCategories() && this.xtreamSelectedTypeCountsReady()
);
readonly xtreamStatusText = computed(() => {
if (
@@ -140,39 +153,78 @@ export class WorkspaceContextPanelComponent {
viewChild<ElementRef<HTMLInputElement>>('searchInput');
readonly isSearchOpen = signal(false);
readonly categorySearchTerm = signal('');
readonly categorySortMode = signal<PortalCategorySortMode>(
restorePortalCategorySortMode()
);
readonly categorySortLabelKey = computed(() =>
this.getCategorySortLabelKey(this.categorySortMode())
);
readonly categorySortOptions: ReadonlyArray<{
mode: PortalCategorySortMode;
translationKey: string;
icon: string;
}> = [
{
mode: 'server',
translationKey: 'WORKSPACE.SORT_SERVER',
icon: 'dns',
},
{
mode: 'name-asc',
translationKey: 'WORKSPACE.SORT_NAME_ASC',
icon: 'sort_by_alpha',
},
{
mode: 'name-desc',
translationKey: 'WORKSPACE.SORT_NAME_DESC',
icon: 'arrow_downward',
},
];
readonly categorySortIcon = computed(
() =>
this.categorySortOptions.find(
(option) => option.mode === this.categorySortMode()
)?.icon ?? 'dns'
);
readonly canSearchCategories = computed(
() =>
(this.isXtreamCategories() &&
this.xtreamCategories().length > 0) ||
(this.isStalkerCategories() &&
this.stalkerCategories().length > 0)
(this.isXtreamCategories() && this.xtreamCategories().length > 0) ||
(this.isStalkerCategories() && this.stalkerCategories().length > 0)
);
readonly filteredXtreamCategories = computed(() => {
const cats = this.xtreamCategories();
const term = this.categorySearchTerm().trim().toLowerCase();
if (!term) return cats;
return cats.filter((c) => {
const label =
(c as { category_name?: string }).category_name ??
(c as { name?: string }).name ??
'';
return label.toLowerCase().includes(term);
});
const filtered = term
? cats.filter((category) =>
this.getCategoryLabel(category).toLowerCase().includes(term)
)
: cats;
return sortPortalCategoryItems(
filtered,
this.categorySortMode(),
(category) => this.getCategoryLabel(category),
(category) => this.isAllCategory(category)
);
});
readonly filteredStalkerCategories = computed(() => {
const cats = this.stalkerCategories();
const term = this.categorySearchTerm().trim().toLowerCase();
if (!term) return cats;
return cats.filter((c) => {
const label =
(c as { name?: string }).name ??
(c as { category_name?: string }).category_name ??
'';
return label.toLowerCase().includes(term);
});
const filtered = term
? cats.filter((category) =>
this.getCategoryLabel(category).toLowerCase().includes(term)
)
: cats;
return sortPortalCategoryItems(
filtered,
this.categorySortMode(),
(category) => this.getCategoryLabel(category),
(category) => this.isAllCategory(category)
);
});
readonly title = computed(() => {
@@ -240,6 +292,11 @@ export class WorkspaceContextPanelComponent {
this.searchInput()?.nativeElement.focus();
}
setCategorySortMode(mode: PortalCategorySortMode): void {
this.categorySortMode.set(mode);
persistPortalCategorySortMode(mode);
}
openManageCategories(): void {
if (!this.canManageXtreamCategories()) {
return;
@@ -262,7 +319,8 @@ export class WorkspaceContextPanelComponent {
data: {
playlistId: context.playlistId,
contentType,
itemCounts: this.xtreamStore.getCategoryItemCounts(),
itemCounts:
this.xtreamStore.getCategoryItemCounts(),
},
width: '500px',
maxHeight: '90vh',
@@ -396,4 +454,24 @@ export class WorkspaceContextPanelComponent {
return '';
}
}
private getCategorySortLabelKey(mode: PortalCategorySortMode): string {
switch (mode) {
case 'name-asc':
return 'WORKSPACE.SORT_NAME_ASC';
case 'name-desc':
return 'WORKSPACE.SORT_NAME_DESC';
case 'server':
default:
return 'WORKSPACE.SORT_SERVER';
}
}
private getCategoryLabel(category: WorkspaceCategoryLike): string {
return category.category_name ?? category.name ?? '';
}
private isAllCategory(category: WorkspaceCategoryLike): boolean {
return String(category.category_id ?? category.id) === '*';
}
}
libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
+4 -1
View File
@@ -593,7 +593,10 @@ export class WorkspaceShellFacade {
if (
context?.provider !== 'stalker' ||
!section ||
(section !== 'vod' && section !== 'series' && section !== 'itv')
(section !== 'vod' &&
section !== 'series' &&
section !== 'itv' &&
section !== 'radio')
) {
return;
}