mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
refactor: fix drag&drop in favorites list, simplify template
Refactor the channel list component to improve readability and maintainability. Remove unnecessary and streamline the template structure by using Angular's structural directives. This enhances the clarity of the code and reduces complexity in the HTML markup.
This commit is contained in:
4gray committed
1 parent
75b08985fd
commit
b82fa5cc4a
2 files changed
+104
-94
No files matched your search
+93
-88
@@ -57,100 +57,105 @@
|
||||
</ng-template>
|
||||
<mat-nav-list id="groups-list">
|
||||
<mat-accordion multi>
|
||||
<ng-container
|
||||
*ngFor="let groups of groupedChannels | keyvalue"
|
||||
>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header
|
||||
*ngIf="groups.value.length > 0"
|
||||
>
|
||||
{{
|
||||
groups.key ||
|
||||
('CHANNELS.UNGROUPED' | translate)
|
||||
| titlecase
|
||||
}}
|
||||
({{ groups.value.length }})
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<ng-container
|
||||
*ngFor="
|
||||
let channel of groups.value;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
>
|
||||
<app-channel-list-item
|
||||
[name]="
|
||||
i +
|
||||
1 +
|
||||
'. ' +
|
||||
(channel?.name ||
|
||||
'CHANNELS.UNNAMED_CHANNEL'
|
||||
| translate)
|
||||
@for (groups of groupedChannels | keyvalue; track $index) {
|
||||
@if (groups.value.length > 0) {
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
{{
|
||||
groups.key ||
|
||||
('CHANNELS.UNGROUPED' | translate)
|
||||
| titlecase
|
||||
}}
|
||||
({{ groups.value.length }})
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<ng-template matExpansionPanelContent>
|
||||
<ng-container
|
||||
*ngFor="
|
||||
let channel of groups.value;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
[logo]="channel?.tvg?.logo"
|
||||
(clicked)="selectChannel(channel)"
|
||||
[selected]="selected?.id === channel.id"
|
||||
></app-channel-list-item>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
>
|
||||
<app-channel-list-item
|
||||
[name]="
|
||||
i +
|
||||
1 +
|
||||
'. ' +
|
||||
(channel?.name ||
|
||||
'CHANNELS.UNNAMED_CHANNEL'
|
||||
| translate)
|
||||
"
|
||||
[logo]="channel?.tvg?.logo"
|
||||
(clicked)="selectChannel(channel)"
|
||||
[selected]="
|
||||
selected?.id === channel.id
|
||||
"
|
||||
></app-channel-list-item>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
}
|
||||
}
|
||||
</mat-accordion>
|
||||
</mat-nav-list>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab *ngIf="(playlistId$ | async) !== 'GLOBAL_FAVORITES'">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">star</mat-icon>
|
||||
<div class="tab-title">
|
||||
{{ 'CHANNELS.FAVORITES' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
<mat-nav-list
|
||||
cdkDropList
|
||||
*ngIf="favorites$ | async as favorites"
|
||||
(cdkDropListDropped)="drop($event, favorites)"
|
||||
id="favorites-list"
|
||||
>
|
||||
<ng-container *ngIf="favorites.length > 0; else noFavorites">
|
||||
<app-channel-list-item
|
||||
*ngFor="
|
||||
let channel of favorites;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
[name]="
|
||||
i +
|
||||
1 +
|
||||
'. ' +
|
||||
(channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
|
||||
| translate)
|
||||
"
|
||||
[isDraggable]="true"
|
||||
[logo]="channel?.tvg?.logo"
|
||||
(clicked)="selectChannel(channel)"
|
||||
[selected]="selected?.id === channel?.id"
|
||||
[showFavoriteButton]="true"
|
||||
(favoriteToggled)="
|
||||
toggleFavoriteChannel(channel, $event)
|
||||
"
|
||||
></app-channel-list-item>
|
||||
</ng-container>
|
||||
<ng-template #noFavorites>
|
||||
<mat-list-item
|
||||
><strong>{{
|
||||
'CHANNELS.NO_FAVORITES' | translate
|
||||
}}</strong></mat-list-item
|
||||
>
|
||||
<mat-list-item>
|
||||
{{
|
||||
'CHANNELS.USE_STAR_TO_FAVORITE' | translate
|
||||
}}</mat-list-item
|
||||
>
|
||||
@let showFavorites = (playlistId$ | async) !== 'GLOBAL_FAVORITES';
|
||||
@if (showFavorites) {
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon class="tab-icon">star</mat-icon>
|
||||
<div class="tab-title">
|
||||
{{ 'CHANNELS.FAVORITES' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-nav-list>
|
||||
</mat-tab>
|
||||
@let favorites = favorites$ | async;
|
||||
@if (favorites) {
|
||||
<mat-nav-list
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="drop($event, favorites)"
|
||||
id="favorites-list"
|
||||
>
|
||||
@if (favorites.length > 0) {
|
||||
<app-channel-list-item
|
||||
*ngFor="
|
||||
let channel of favorites;
|
||||
index as i;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
[name]="
|
||||
i +
|
||||
1 +
|
||||
'. ' +
|
||||
(channel?.name || 'CHANNELS.UNNAMED_CHANNEL'
|
||||
| translate)
|
||||
"
|
||||
[isDraggable]="true"
|
||||
[logo]="channel?.tvg?.logo"
|
||||
(clicked)="selectChannel(channel)"
|
||||
[selected]="selected?.id === channel?.id"
|
||||
[showFavoriteButton]="true"
|
||||
(favoriteToggled)="
|
||||
toggleFavoriteChannel(channel, $event)
|
||||
"
|
||||
/>
|
||||
} @else {
|
||||
<mat-list-item
|
||||
><strong>{{
|
||||
'CHANNELS.NO_FAVORITES' | translate
|
||||
}}</strong></mat-list-item
|
||||
>
|
||||
<mat-list-item>
|
||||
{{
|
||||
'CHANNELS.USE_STAR_TO_FAVORITE' | translate
|
||||
}}</mat-list-item
|
||||
>
|
||||
}
|
||||
</mat-nav-list>
|
||||
}
|
||||
</mat-tab>
|
||||
}
|
||||
</mat-tab-group>
|
||||
} @else {
|
||||
No channels there
|
||||
|
||||
+11
-6
@@ -1,4 +1,8 @@
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import {
|
||||
CdkDragDrop,
|
||||
DragDropModule,
|
||||
moveItemInArray,
|
||||
} from '@angular/cdk/drag-drop';
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
import { CommonModule, TitleCasePipe } from '@angular/common';
|
||||
import {
|
||||
@@ -37,8 +41,11 @@ import { ChannelListItemComponent } from './channel-list-item/channel-list-item.
|
||||
templateUrl: './channel-list-container.component.html',
|
||||
styleUrls: ['./channel-list-container.component.scss'],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChannelListItemComponent,
|
||||
CommonModule,
|
||||
DragDropModule,
|
||||
FilterPipe,
|
||||
FormsModule,
|
||||
MatDividerModule,
|
||||
MatExpansionModule,
|
||||
MatFormFieldModule,
|
||||
@@ -46,11 +53,9 @@ import { ChannelListItemComponent } from './channel-list-item/channel-list-item.
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatTabsModule,
|
||||
TranslateModule,
|
||||
TitleCasePipe,
|
||||
FilterPipe,
|
||||
FormsModule,
|
||||
ScrollingModule,
|
||||
TitleCasePipe,
|
||||
TranslateModule,
|
||||
],
|
||||
})
|
||||
export class ChannelListContainerComponent {
|
||||
|
||||
Reference in new issue
Block a user