lazy load programs

src/app/components/programs/programs-list.component.html

@@ -1,5 +1,5 @@
 <div class="programs-list">
-    <p-table #dt2 [value]="programs" responsiveLayout="stack" [paginator]="true" [rows]="10"
+    <p-table #dt2 [value]="programs" responsiveLayout="stack" [paginator]="true" [rows]="pageSize" [totalRecords]="totalHits" (onLazyLoad)="loadLazy($event)" [lazy]="true"
         [globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
         <ng-template pTemplate="caption">
             <span class="p-d-flex">

src/app/components/programs/programs-list.component.ts

@@ -10,13 +10,16 @@ import { MessageBrokerService } from 'src/app/services/message-broker.service';
 import { SRApiService } from 'src/app/services/srapi.service';
 import { TranslationService } from 'src/app/services/translation.service';
 import { Program } from '../../models/program';
+import { ProgramsService } from 'src/app/services/programs.service';
 
 @Component({
   selector: 'app-programs-list',
   templateUrl: './programs-list.component.html',
   styleUrls: ['../common/datatable-styling.scss', './programs-list.component.scss']
 })
 export class ProgramsListComponent implements OnInit, OnDestroy, AfterViewInit {
+  totalHits = 0;
+  pageSize = 10;
   programs: Program[];
   categoryOptions: SelectItem[];
   private unsubscribe$ = new Subject();
@@ -32,6 +35,7 @@ export class ProgramsListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   constructor(
     private readonly srApiService: SRApiService,
+    private readonly programsService: ProgramsService,
     private readonly translationService: TranslationService,
     private readonly broker: MessageBrokerService,
     private readonly storage: LocalStorageService
@@ -43,12 +47,17 @@ export class ProgramsListComponent implements OnInit, OnDestroy, AfterViewInit {
       this.localState = oldState;
     }
 
+//    let result = await this.programsService.fetchPrograms(1,10);
+//    this.programs = result.programs;
+//    console.log(this.programs.length)
+    await this.fetch(0);
+    /*
     this.srApiService.programs$.pipe(takeUntil(this.unsubscribe$)).subscribe((values: Program[]) => {
       if (values) {
         this.programs = [];
         this.programs.push(...values);
       }
-    });
+    });*/
     this.srApiService.programCategories$.pipe(takeUntil(this.unsubscribe$)).subscribe((values: ProgramCategory[]) => {
       if (values) {
         this.categoryOptions = [];
@@ -58,6 +67,19 @@ export class ProgramsListComponent implements OnInit, OnDestroy, AfterViewInit {
       }
     });
   }
+
+  async loadLazy(event: any) {
+    await this.fetch(event.first);
+  }
+
+  async fetch(first: number) {
+    console.log(this.localState.selectedCategory)
+    const page = first / this.pageSize + 1;
+    let result = await this.programsService.fetchPrograms(page,this.pageSize, this.localState.selectedCategory);
+    this.totalHits = result.pagination.totalhits;
+    this.programs = result.programs;
+  }
+
 
   ngAfterViewInit(): void {
     if (this.tableComponent) {
@@ -84,6 +106,7 @@ export class ProgramsListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   onShowEpisodes(program: Program) {
+    console.log(program)
     this.broker.sendMessage(new ShowProgramDetailsMessage(program.id));
   }
 

src/app/models/programs-result.ts

@@ -0,0 +1,13 @@
+import { Program } from './program';
+
+export interface ProgramsResult {
+  programs: Program[];
+  pagination: {
+    page: number;
+    size: number;
+    totalhits: number;
+    totalpages: number;
+    nextpage: string;
+    previouspage: string;
+  };
+}

src/app/services/programs.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { EpisodesResult } from '../models/episodes-result';
+import { SRBaseService } from './sr-base.service';
+import { RightNowEpisodes } from '../models/right-now-episodes';
+import { ScheduleResult } from '../models/schedule-result';
+import { EpisodeResult } from '../models/episode';
+import { SRApiService } from './srapi.service';
+import { lastValueFrom } from 'rxjs';
+import { EpisodesOverviewResult } from '../models/episodes-overview-result';
+import { EpisodeGroupResult } from '../models/episode-group-result';
+import { EpisodeOverview } from '../models/episode-overview';
+import { ProgramsResult } from '../models/programs-result';
+import { Program } from '../models/program';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgramsService extends SRBaseService {
+  constructor(private readonly http: HttpClient, private readonly srApiService: SRApiService) {
+    super();
+  }
+
+  async fetchPrograms(page: number, pageSize: number, categoryId: number): Promise<ProgramsResult> {
+    let url = `${this.BaseUrl}programs/?${this.FormatParam}&page=${page}&size=${pageSize}`;
+    if (categoryId) {
+      url = `${url}&programcategoryid=${categoryId}`;
+    }
+    const res = await lastValueFrom(this.http.get<any>(`${url}`));
+
+    const progs: Program[] = res.programs.map((p: Program) => ({
+      name: p.name,
+      id: p.id,
+      fav: false,
+      channel: {
+        id: p?.channel.id,
+        name: p?.channel.name
+      },
+      programimage: p.programimagetemplate + SRApiService.DefaultImagePreset,
+      description: p.description,
+      programcategory: p.programcategory
+    }));
+
+    res.programs = progs;
+
+    return res;
+  }
+
+  /*
+    const progs: Program[] = programsRawResult.programs.map((p: Program) => ({
+      name: p.name,
+      id: p.id,
+      fav: false,
+      channel: {
+        id: p?.channel.id,
+        name: p?.channel.name
+      },
+      programimage: p.programimagetemplate + SRApiService.DefaultImagePreset,
+      description: p.description,
+      programcategory: p.programcategory
+    }));
+
+    this.updateProgramsWithFavs(progs);
+
+
+    private async getAllPrograms(): Promise<any> {
+    const params = `?${this.FormatParam}&page=1&size=10000`;
+    let url = `${this.BaseUrl}programs/${params}`;
+    return lastValueFrom(this.http.get<any>(`${url}`));
+  }
+  */
+
+}

src/app/services/srapi.service.ts

@@ -42,7 +42,7 @@ export class SRApiService extends SRBaseService {
 
   async fetchBaseData() {
     await this.fetchChannelsBaseData();
-    await this.fetchBaseProgramsData();
+//    await this.fetchBaseProgramsData();
     await this.fetchBaseProgramCategoriesData();
     this.baseDataFetched = true;
   }