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

feat(sort): implement sorting functionality for playlists with user-defined options

Browse Source
This commit is contained in:
4gray committed 2025-03-01 22:27:50 +01:00
1 parent 6b9e021d74
commit 996cb30f4c
7 files changed
+256 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/shared/components/header/header.component.html
+83 -9
View File
@@ -16,20 +16,22 @@
>
<mat-icon>add</mat-icon>
</button>
<!-- <button
mat-icon-button
[matTooltip]="'HOME.FILTER_BY_NAME' | translate"
data-test-id="filter-playlist-by-name"
>
<mat-icon>search</mat-icon>
</button> -->
<!-- Sort button -->
<button
mat-icon-button
[matMenuTriggerFor]="sortMenu"
[matTooltip]="'HOME.SORT_PLAYLISTS' | translate"
data-test-id="sort-playlists"
>
<mat-icon>sort</mat-icon>
</button>
<button
mat-icon-button
[matMenuTriggerFor]="filterPlaylistMenu"
[matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
data-test-id="filter-playlist-by-type"
>
<mat-icon>filter_list</mat-icon>
<mat-icon>filter_alt</mat-icon>
</button>
<button
*ngIf="isElectron || isTauri; else pwaMenu"
@@ -41,12 +43,84 @@
<mat-icon>settings</mat-icon>
</button>
<!-- Sort menu -->
<mat-menu #sortMenu="matMenu">
<div
class="dropdown-menu-header"
(click)="$event.stopPropagation()"
>
{{ 'HOME.SORT_BY' | translate }}
</div>
<button
mat-menu-item
(click)="setSortOptions(SortBy.NAME, SortOrder.ASC)"
[class.active-sort]="isSortActive(SortBy.NAME, SortOrder.ASC)"
>
<mat-icon>sort_by_alpha</mat-icon>
<span>{{ 'HOME.SORT_OPTIONS.NAME_ASC' | translate }}</span>
<mat-icon
*ngIf="isSortActive(SortBy.NAME, SortOrder.ASC)"
class="check-icon"
>check</mat-icon
>
</button>
<button
mat-menu-item
(click)="setSortOptions(SortBy.NAME, SortOrder.DESC)"
[class.active-sort]="isSortActive(SortBy.NAME, SortOrder.DESC)"
>
<mat-icon>sort_by_alpha</mat-icon>
<span>{{ 'HOME.SORT_OPTIONS.NAME_DESC' | translate }}</span>
<mat-icon
*ngIf="isSortActive(SortBy.NAME, SortOrder.DESC)"
class="check-icon"
>check</mat-icon
>
</button>
<mat-divider></mat-divider>
<button
mat-menu-item
(click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.DESC)"
[class.active-sort]="
isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)
"
>
<mat-icon>date_range</mat-icon>
<span>{{ 'HOME.SORT_OPTIONS.NEWEST' | translate }}</span>
<mat-icon
*ngIf="isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)"
class="check-icon"
>check</mat-icon
>
</button>
<button
mat-menu-item
(click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.ASC)"
[class.active-sort]="
isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)
"
>
<mat-icon>date_range</mat-icon>
<span>{{ 'HOME.SORT_OPTIONS.OLDEST' | translate }}</span>
<mat-icon
*ngIf="isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)"
class="check-icon"
>check</mat-icon
>
</button>
</mat-menu>
<mat-menu #filterPlaylistMenu="matMenu">
<section
(click)="$event.stopPropagation()"
class="filter-container"
>
<h4>{{ 'HOME.FILTER_BY_TYPE' | translate }}:</h4>
<div
class="dropdown-menu-header"
(click)="$event.stopPropagation()"
>
{{ 'HOME.FILTER_BY_TYPE' | translate }}
</div>
@for (type of playlistTypes; track $index) {
<p>
<mat-checkbox