Simple Managment webapp [LLM]

webapp/src/app/features/messages/message-list/message-list.component.ts

@@ -11,6 +11,7 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { Message, MessageListParams } from '../../../core/models';
@@ -31,6 +32,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzSpinModule,
     NzCardModule,
     NzToolTipModule,
+    NzPaginationModule,
     RelativeTimePipe,
   ],
   templateUrl: './message-list.component.html',
@@ -43,7 +45,11 @@ export class MessageListComponent implements OnInit {
 
   messages = signal<Message[]>([]);
   loading = signal(false);
-  nextPageToken = signal<string | null>(null);
+
+  // Pagination
+  currentPage = signal(1);
+  pageSize = 50;
+  totalCount = signal(0);
 
   // Filters
   searchText = '';
@@ -80,11 +86,11 @@ export class MessageListComponent implements OnInit {
     });
   }
 
-  loadMessages(append = false): void {
+  loadMessages(): void {
     this.loading.set(true);
 
     const params: MessageListParams = {
-      page_size: 50,
+      page_size: this.pageSize,
       trimmed: true,
     };
 
@@ -97,22 +103,17 @@ export class MessageListComponent implements OnInit {
     if (this.channelFilter.length > 0) {
       params.channel = this.channelFilter.join(',');
     }
-    if (append && this.nextPageToken()) {
-      params.next_page_token = this.nextPageToken()!;
+
+    // Use page-index based pagination: $1 = page 1, $2 = page 2, etc.
+    const page = this.currentPage();
+    if (page > 1) {
+      params.next_page_token = `$${page}`;
     }
 
     this.apiService.getMessages(params).subscribe({
       next: (response) => {
-        if (append) {
-          this.messages.update(msgs => [...msgs, ...response.messages]);
-        } else {
-          this.messages.set(response.messages);
-        }
-        this.nextPageToken.set(
-          response.next_page_token && response.next_page_token !== '@end'
-            ? response.next_page_token
-            : null
-        );
+        this.messages.set(response.messages);
+        this.totalCount.set(response.total_count);
         this.loading.set(false);
       },
       error: () => {
@@ -123,37 +124,44 @@ export class MessageListComponent implements OnInit {
 
   applyFilters(): void {
     this.appliedSearchText = this.searchText;
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   onPriorityFilterChange(filters: string[] | null): void {
     this.priorityFilter = filters ?? [];
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   onChannelFilterChange(filters: string[] | null): void {
     this.channelFilter = filters ?? [];
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   clearSearch(): void {
     this.searchText = '';
     this.appliedSearchText = '';
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   clearChannelFilter(): void {
     this.channelFilter = [];
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   removeChannelFilter(channel: string): void {
     this.channelFilter = this.channelFilter.filter(c => c !== channel);
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
   clearPriorityFilter(): void {
     this.priorityFilter = [];
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
@@ -162,6 +170,7 @@ export class MessageListComponent implements OnInit {
     this.appliedSearchText = '';
     this.channelFilter = [];
     this.priorityFilter = [];
+    this.currentPage.set(1);
     this.loadMessages();
   }
 
@@ -175,10 +184,9 @@ export class MessageListComponent implements OnInit {
     return channel?.text?.toString() ?? internalName;
   }
 
-  loadMore(): void {
-    if (this.nextPageToken()) {
-      this.loadMessages(true);
-    }
+  goToPage(page: number): void {
+    this.currentPage.set(page);
+    this.loadMessages();
   }
 
   viewMessage(message: Message): void {