From b82fa5cc4a0634e54675294ae65ca379d49a9ebf Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 27 Nov 2024 21:25:30 +0100
Subject: [PATCH] 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.
---
 .../channel-list-container.component.html     | 181 +++++++++---------
 .../channel-list-container.component.ts       |  17 +-
 2 files changed, 104 insertions(+), 94 deletions(-)

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
index 563f79ae7..ac4539969 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.html
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -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
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.ts b/src/app/player/components/channel-list-container/channel-list-container.component.ts
index bd9540891..12d959cf0 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.ts
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.ts
@@ -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 {