Simple Managment webapp [LLM]

webapp/src/app/features/senders/sender-list/sender-list.component.html

@@ -1,50 +1,95 @@
 <div class="page-content">
   <div class="page-header">
     <h2>Senders</h2>
-    <button nz-button (click)="loadSenders()">
+    <button nz-button (click)="refresh()">
       <span nz-icon nzType="reload"></span>
       Refresh
     </button>
   </div>
 
   <nz-card>
-    <nz-table
-      #senderTable
-      [nzData]="senders()"
-      [nzLoading]="loading()"
-      [nzShowPagination]="false"
-      [nzNoResult]="noResultTpl"
-      nzSize="middle"
-    >
-    <ng-template #noResultTpl></ng-template>
-      <thead>
-        <tr>
-          <th nzWidth="40%">Sender Name</th>
-          <th nzWidth="20%">Message Count</th>
-          <th nzWidth="40%">Last Used</th>
-        </tr>
-      </thead>
-      <tbody>
-        @for (sender of senders(); track sender.name) {
-          <tr>
-            <td>
-              <span class="sender-name">{{ sender.name || '(No name)' }}</span>
-            </td>
-            <td>{{ sender.count }}</td>
-            <td>
-              <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
-                {{ sender.last_timestamp | relativeTime }}
-              </span>
-            </td>
-          </tr>
-        } @empty {
-          <tr>
-            <td colspan="3">
-              <nz-empty nzNotFoundContent="No senders found"></nz-empty>
-            </td>
-          </tr>
-        }
-      </tbody>
-    </nz-table>
+    <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
+      <nz-tab nzTitle="My Senders">
+        <nz-table
+          #mySenderTable
+          [nzData]="mySenders()"
+          [nzLoading]="loadingMy()"
+          [nzShowPagination]="false"
+          [nzNoResult]="noResultTpl"
+          nzSize="middle"
+        >
+          <ng-template #noResultTpl></ng-template>
+          <thead>
+            <tr>
+              <th nzWidth="40%">Sender Name</th>
+              <th nzWidth="20%">Message Count</th>
+              <th nzWidth="40%">Last Used</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (sender of mySenders(); track sender.name) {
+              <tr>
+                <td>
+                  <span class="sender-name">{{ sender.name || '(No name)' }}</span>
+                </td>
+                <td>{{ sender.count }}</td>
+                <td>
+                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
+                    {{ sender.last_timestamp | relativeTime }}
+                  </span>
+                </td>
+              </tr>
+            } @empty {
+              <tr>
+                <td colspan="3">
+                  <nz-empty nzNotFoundContent="No senders found"></nz-empty>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </nz-table>
+      </nz-tab>
+
+      <nz-tab nzTitle="All Senders">
+        <nz-table
+          #allSenderTable
+          [nzData]="allSenders()"
+          [nzLoading]="loadingAll()"
+          [nzShowPagination]="false"
+          [nzNoResult]="noResultTpl2"
+          nzSize="middle"
+        >
+          <ng-template #noResultTpl2></ng-template>
+          <thead>
+            <tr>
+              <th nzWidth="40%">Sender Name</th>
+              <th nzWidth="20%">Message Count</th>
+              <th nzWidth="40%">Last Used</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (sender of allSenders(); track sender.name) {
+              <tr>
+                <td>
+                  <span class="sender-name">{{ sender.name || '(No name)' }}</span>
+                </td>
+                <td>{{ sender.count }}</td>
+                <td>
+                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
+                    {{ sender.last_timestamp | relativeTime }}
+                  </span>
+                </td>
+              </tr>
+            } @empty {
+              <tr>
+                <td colspan="3">
+                  <nz-empty nzNotFoundContent="No senders found"></nz-empty>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </nz-table>
+      </nz-tab>
+    </nz-tabset>
   </nz-card>
 </div>

webapp/src/app/features/senders/sender-list/sender-list.component.ts

@@ -6,7 +6,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
 import { SenderNameStatistics } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 
@@ -21,6 +23,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzEmptyModule,
     NzCardModule,
     NzToolTipModule,
+    NzTabsModule,
     RelativeTimePipe,
   ],
   templateUrl: './sender-list.component.html',
@@ -28,24 +31,61 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 })
 export class SenderListComponent implements OnInit {
   private apiService = inject(ApiService);
+  private authService = inject(AuthService);
 
-  senders = signal<SenderNameStatistics[]>([]);
-  loading = signal(false);
+  mySenders = signal<SenderNameStatistics[]>([]);
+  allSenders = signal<SenderNameStatistics[]>([]);
+  loadingMy = signal(false);
+  loadingAll = signal(false);
+  activeTab = signal(0);
 
   ngOnInit(): void {
-    this.loadSenders();
+    this.loadMySenders();
   }
 
-  loadSenders(): void {
-    this.loading.set(true);
-    this.apiService.getSenderNames().subscribe({
+  onTabChange(index: number): void {
+    this.activeTab.set(index);
+    if (index === 0 && this.mySenders().length === 0) {
+      this.loadMySenders();
+    } else if (index === 1 && this.allSenders().length === 0) {
+      this.loadAllSenders();
+    }
+  }
+
+  loadMySenders(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loadingMy.set(true);
+    this.apiService.getUserSenderNames(userId).subscribe({
       next: (response) => {
-        this.senders.set(response.senders);
-        this.loading.set(false);
+        this.mySenders.set(response.sender_names);
+        this.loadingMy.set(false);
       },
       error: () => {
-        this.loading.set(false);
+        this.loadingMy.set(false);
       }
     });
   }
+
+  loadAllSenders(): void {
+    this.loadingAll.set(true);
+    this.apiService.getSenderNames().subscribe({
+      next: (response) => {
+        this.allSenders.set(response.sender_names);
+        this.loadingAll.set(false);
+      },
+      error: () => {
+        this.loadingAll.set(false);
+      }
+    });
+  }
+
+  refresh(): void {
+    if (this.activeTab() === 0) {
+      this.loadMySenders();
+    } else {
+      this.loadAllSenders();
+    }
+  }
 }