Simple Managment webapp [LLM]

webapp/src/app/core/models/subscription.model.ts

@@ -31,5 +31,6 @@ export interface ConfirmSubscriptionRequest {
 export interface SubscriptionListResponse {
   subscriptions: Subscription[];
   next_page_token?: string;
-  page_size?: number;
+  page_size: number;
+  total_count: number;
 }

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

@@ -45,15 +45,15 @@
     </div>
   }
 
-  <nz-card>
-    <nz-table
-      #messageTable
-      [nzData]="messages()"
-      [nzLoading]="loading()"
-      [nzShowPagination]="false"
-      [nzNoResult]="noResultTpl"
-      nzSize="middle"
-    >
+  <nz-table
+    #messageTable
+    nzBordered
+    [nzData]="messages()"
+    [nzLoading]="loading()"
+    [nzShowPagination]="false"
+    [nzNoResult]="noResultTpl"
+    nzSize="middle"
+  >
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
@@ -108,16 +108,15 @@
           </tr>
         }
       </tbody>
-    </nz-table>
+  </nz-table>
 
-    <div class="pagination-controls">
-      <nz-pagination
-        [nzPageIndex]="currentPage()"
-        [nzPageSize]="pageSize"
-        [nzTotal]="totalCount()"
-        [nzDisabled]="loading()"
-        (nzPageIndexChange)="goToPage($event)"
-      ></nz-pagination>
-    </div>
-  </nz-card>
+  <div class="pagination-controls">
+    <nz-pagination
+      [nzPageIndex]="currentPage()"
+      [nzPageSize]="pageSize"
+      [nzTotal]="totalCount()"
+      [nzDisabled]="loading()"
+      (nzPageIndexChange)="goToPage($event)"
+    ></nz-pagination>
+  </div>
 </div>

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

@@ -9,7 +9,6 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 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';
@@ -30,7 +29,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzIconModule,
     NzEmptyModule,
     NzSpinModule,
-    NzCardModule,
     NzToolTipModule,
     NzPaginationModule,
     RelativeTimePipe,

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -13,32 +13,32 @@
     </div>
   </div>
 
-  <nz-card>
-    <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
-      <nz-tab nzTitle="All"></nz-tab>
-      <nz-tab nzTitle="Own"></nz-tab>
-      <nz-tab nzTitle="Deactivated"></nz-tab>
-      <nz-tab nzTitle="External"></nz-tab>
-      <nz-tab nzTitle="Incoming"></nz-tab>
-    </nz-tabset>
+  <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
+    <nz-tab nzTitle="All"></nz-tab>
+    <nz-tab nzTitle="Own"></nz-tab>
+    <nz-tab nzTitle="Deactivated"></nz-tab>
+    <nz-tab nzTitle="External"></nz-tab>
+    <nz-tab nzTitle="Incoming"></nz-tab>
+  </nz-tabset>
 
-    @if (getTabDescription()) {
-      <nz-alert
-        nzType="info"
-        [nzMessage]="getTabDescription()!"
-        nzShowIcon
-        style="margin-bottom: 16px;"
-      ></nz-alert>
-    }
+  @if (getTabDescription()) {
+    <nz-alert
+      nzType="info"
+      [nzMessage]="getTabDescription()!"
+      nzShowIcon
+      style="margin-bottom: 16px;"
+    ></nz-alert>
+  }
 
-    <nz-table
-      #subscriptionTable
-      [nzData]="subscriptions()"
-      [nzLoading]="loading()"
-      [nzShowPagination]="false"
-      [nzNoResult]="noResultTpl"
-      nzSize="middle"
-    >
+  <nz-table
+    #subscriptionTable
+    nzBordered
+    [nzData]="subscriptions()"
+    [nzLoading]="loading()"
+    [nzShowPagination]="false"
+    [nzNoResult]="noResultTpl"
+    nzSize="middle"
+  >
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
@@ -126,8 +126,17 @@
           </tr>
         }
       </tbody>
-    </nz-table>
-  </nz-card>
+  </nz-table>
+
+  <div class="pagination-controls">
+    <nz-pagination
+      [nzPageIndex]="currentPage()"
+      [nzPageSize]="pageSize"
+      [nzTotal]="totalCount()"
+      [nzDisabled]="loading()"
+      (nzPageIndexChange)="goToPage($event)"
+    ></nz-pagination>
+  </div>
 </div>
 
 <!-- Create Subscription Modal -->

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.scss

@@ -30,3 +30,9 @@
   font-size: 13px;
   margin-bottom: 16px;
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -6,7 +6,6 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
-import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -14,6 +13,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
@@ -46,7 +46,6 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
     NzIconModule,
     NzTagModule,
     NzEmptyModule,
-    NzCardModule,
     NzTabsModule,
     NzPopconfirmModule,
     NzModalModule,
@@ -54,6 +53,7 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
     NzInputModule,
     NzToolTipModule,
     NzAlertModule,
+    NzPaginationModule,
     RelativeTimePipe,
   ],
   templateUrl: './subscription-list.component.html',
@@ -70,6 +70,11 @@ export class SubscriptionListComponent implements OnInit {
   loading = signal(false);
   activeTab: SubscriptionTab = 'all';
 
+  // Pagination
+  currentPage = signal(1);
+  pageSize = 50;
+  totalCount = signal(0);
+
   // Create subscription modal
   showCreateModal = signal(false);
   newChannelOwner = '';
@@ -86,11 +91,21 @@ export class SubscriptionListComponent implements OnInit {
 
     this.loading.set(true);
 
-    const filter = TAB_CONFIGS[this.activeTab].filter;
+    const filter: SubscriptionFilter = {
+      ...TAB_CONFIGS[this.activeTab].filter,
+      page_size: this.pageSize,
+    };
+
+    // Use page-index based pagination: $1 = page 1, $2 = page 2, etc.
+    const page = this.currentPage();
+    if (page > 1) {
+      filter.next_page_token = `$${page}`;
+    }
 
     this.apiService.getSubscriptions(userId, filter).subscribe({
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
+        this.totalCount.set(response.total_count);
         this.loading.set(false);
         this.resolveUserNames(response.subscriptions);
       },
@@ -121,6 +136,12 @@ export class SubscriptionListComponent implements OnInit {
   onTabChange(index: number): void {
     const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
     this.activeTab = tabs[index];
+    this.currentPage.set(1);
+    this.loadSubscriptions();
+  }
+
+  goToPage(page: number): void {
+    this.currentPage.set(page);
     this.loadSubscriptions();
   }