feat(category-view): extract template to own file

This commit is contained in:
4gray committed 2024-12-20 23:11:10 +01:00
1 parent 13b4cf3992
commit b565636189
2 files changed
+40 -48

No files matched your search

@@ -0,0 +1,36 @@
@let items = xtreamStore.getCategoriesBySelectedType();
@if (items?.length > 0) {
<mat-nav-list>
@for (item of items; track $index) {
<mat-list-item
class="category-item"
[class.selected]="isSelected(item)"
(click)="categoryClicked.emit(item)"
>
{{
item.category_name || $any(item).name || 'No category name'
}}
</mat-list-item>
}
@if (!items?.length) {
<app-playlist-error-view
title="No results"
[description]="
'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate
"
[showActionButtons]="false"
[viewType]="'NO_SEARCH_RESULTS'"
/>
}
</mat-nav-list>
} @else {
<app-playlist-error-view
[title]="'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE' | translate"
[description]="
'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION' | translate
"
[showActionButtons]="false"
[viewType]="'EMPTY_CATEGORY'"
/>
}
@@ -6,13 +6,11 @@ import {
inject,
} from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { XtreamCategory } from '../../../../shared/xtream-category.interface';
import { FilterPipe } from '../../shared/pipes/filter.pipe';
import { PlaylistErrorViewComponent } from '../playlist-error-view/playlist-error-view.component';
import { XtreamStore } from '../xtream.store';
@@ -20,63 +18,21 @@ import { XtreamStore } from '../xtream.store';
selector: 'app-category-view',
standalone: true,
imports: [
FilterPipe,
MatCardModule,
MatIconModule,
MatListModule,
MatTooltipModule,
PlaylistErrorViewComponent,
TranslateModule,
MatTooltipModule,
],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@let items = xtreamStore.getCategoriesBySelectedType();
@if (items?.length > 0) {
<mat-nav-list>
@for (item of items; track $index) {
<mat-list-item
class="category-item"
[class.selected]="isSelected(item)"
(click)="categoryClicked.emit(item)"
>
{{
item.category_name ||
$any(item).name ||
'No category name'
}}
</mat-list-item>
}
@if (!items?.length) {
<app-playlist-error-view
title="No results"
[description]="
'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS'
| translate
"
[showActionButtons]="false"
[viewType]="'NO_SEARCH_RESULTS'"
/>
}
</mat-nav-list>
} @else {
<app-playlist-error-view
[title]="'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE' | translate"
[description]="
'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION' | translate
"
[showActionButtons]="false"
[viewType]="'EMPTY_CATEGORY'"
/>
}
`,
templateUrl: './category-view.component.html',
styleUrl: './category-view.component.scss',
})
export class CategoryViewComponent {
@Output() categoryClicked = new EventEmitter<XtreamCategory>();
xtreamStore = inject(XtreamStore);
route = inject(ActivatedRoute);
readonly xtreamStore = inject(XtreamStore);
private readonly route = inject(ActivatedRoute);
ngOnInit(): void {
const { categoryId } = this.route.snapshot.params;