Very naive pagination implementation

client/admin/src/app/talkgroups/talkgroups.component.html

@@ -15,7 +15,8 @@
       </tr>
     </thead>
     <tbody>
-      @for (tg of talkgroups$ | async ; track tg.id) {
+      @let tgs = talkgroups$ | async;
+      @for (tg of tgs?.talkgroups ; track tg.id) {
         <tr>
           <!-- <td class="tgIcon" [innerHTML]="(tg | iconify).iconSvg! | sanitizeHtml"></td> -->
           <td class="tgIcon"><ng-icon [name]="(tg | iconify).iconSvg!"></ng-icon></td>
@@ -35,4 +36,10 @@
       }
     </tbody>
   </table>
+  <div class="w-100">
+    Total: {{ tgs?.count }}
+    <button class="btn btn-primary" (click)="prevPage()" [class.btn-ghost]="page == 1"><ng-icon name="ionChevronBack"></ng-icon></button>
+    Page {{ page }} of {{ totalPages }}
+    <button class="btn btn-primary" (click)="nextPage()" [class.btn-ghost]="page == totalPages"><ng-icon name="ionChevronForward"></ng-icon></button>
+  </div>
 </div>

client/admin/src/app/talkgroups/talkgroups.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject, Pipe, PipeTransform } from '@angular/core';
-import { TalkgroupService } from './talkgroups.service';
+import { TalkgroupService, TalkgroupsPaginated } from './talkgroups.service';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { ionCreateOutline } from '@ng-icons/ionicons';
+import { ionCreateOutline, ionChevronBack, ionChevronForward  } from '@ng-icons/ionicons';
 import {
   matFireTruckOutline,
   matLocalPoliceOutline,
@@ -12,7 +12,7 @@ import {
 import { Talkgroup, iconMapping } from '../talkgroup';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, tap } from 'rxjs/operators';
 import { RouterModule, RouterOutlet, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@@ -68,23 +68,33 @@ export class SanitizeHtmlPipe implements PipeTransform {
   matEmergencyOutline,
   matDirectionsBusOutline,
   matGroupWorkOutline,
+  ionChevronBack,
+  ionChevronForward,
 })],
 })
 export class TalkgroupsComponent {
   selectedSys: number = 0;
   selectedId: number = 0;
-  talkgroups$!: Observable<Talkgroup[]>;
+  talkgroups$!: Observable<TalkgroupsPaginated>;
   tgService: TalkgroupService = inject(TalkgroupService);
   page: number = 1;
   perPage: number = 20;
+  totalPages: number = 1;
 
   constructor(private route: ActivatedRoute) {}
 
   prevPage() {
     if (this.page > 1) {
       this.page--;
+      this.fetchTGs();
+    }
+  }
+
+  nextPage() {
+    if (this.page < this.totalPages) {
+      this.page++;
+      this.fetchTGs();
     }
-    this.fetchTGs();
   }
 
   fetchTGs() {
@@ -92,7 +102,11 @@ export class TalkgroupsComponent {
       switchMap((params) => {
         this.selectedSys = Number(params.get('sys'));
         this.selectedId = Number(params.get('tg'));
-        return this.tgService.getTalkgroups({page: this.page, perPage: perPage});
+        return this.tgService.getTalkgroupsPag({page: this.page, perPage: this.perPage}).pipe(
+          tap((event) => {
+            this.totalPages = Math.ceil(event.count/this.perPage);
+          })
+        );
       }),
     );
   }

client/admin/src/app/talkgroups/talkgroups.service.ts

@@ -3,25 +3,29 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Talkgroup, TalkgroupUpdate } from '../talkgroup';
 
-@Injectable({
-  providedIn: 'root',
-})
-
 export interface Pagination {
   page: number;
   perPage: number;
 }
 
+export interface TalkgroupsPaginated {
+  talkgroups: Talkgroup[];
+  count: number;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
 export class TalkgroupService {
   loggedIn: boolean = false;
   constructor(private http: HttpClient) {}
 
-  getTalkgroups(pagination?: Pagination): Observable<Talkgroup[]> {
-    if (pagination == null) {
-      return this.http.get<Talkgroup[]>('/api/talkgroup/');
-    }
+  getTalkgroups(): Observable<Talkgroup[]> {
+    return this.http.get<Talkgroup[]>('/api/talkgroup/');
+  }
 
-    return this.http.post<Talkgroup[]>('/api/talkgroup/', pagination);
+  getTalkgroupsPag(pagination: Pagination): Observable<TalkgroupsPaginated> {
+    return this.http.post<TalkgroupsPaginated>('/api/talkgroup/', pagination);
   }
 
   getTalkgroup(sys: number, tg: number): Observable<Talkgroup> {