Simple Managment webapp [LLM]

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

@@ -2,10 +2,9 @@ import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTableModule, NzTableFilterList } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
@@ -26,7 +25,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzTableModule,
     NzButtonModule,
     NzInputModule,
-    NzSelectModule,
     NzTagModule,
     NzIconModule,
     NzEmptyModule,
@@ -49,13 +47,39 @@ export class MessageListComponent implements OnInit {
 
   // Filters
   searchText = '';
-  priorityFilter: number | null = null;
-  channelFilter = '';
+  appliedSearchText = '';
+  priorityFilter: string[] = [];
+  channelFilter: string[] = [];
+
+  // Filter options
+  priorityFilters: NzTableFilterList = [
+    { text: 'Low', value: '0' },
+    { text: 'Normal', value: '1' },
+    { text: 'High', value: '2' },
+  ];
+  channelFilters = signal<NzTableFilterList>([]);
 
   ngOnInit(): void {
+    this.loadChannels();
     this.loadMessages();
   }
 
+  loadChannels(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.getChannels(userId, 'all_any').subscribe({
+      next: (response) => {
+        this.channelFilters.set(
+          response.channels.map(ch => ({
+            text: ch.display_name,
+            value: ch.internal_name,
+          }))
+        );
+      }
+    });
+  }
+
   loadMessages(append = false): void {
     this.loading.set(true);
 
@@ -64,14 +88,14 @@ export class MessageListComponent implements OnInit {
       trimmed: true,
     };
 
-    if (this.searchText) {
-      params.search = this.searchText;
+    if (this.appliedSearchText) {
+      params.search = this.appliedSearchText;
     }
-    if (this.priorityFilter !== null) {
-      params.priority = this.priorityFilter;
+    if (this.priorityFilter.length === 1) {
+      params.priority = parseInt(this.priorityFilter[0], 10);
     }
-    if (this.channelFilter) {
-      params.channel = this.channelFilter;
+    if (this.channelFilter.length > 0) {
+      params.channel = this.channelFilter.join(',');
     }
     if (append && this.nextPageToken()) {
       params.next_page_token = this.nextPageToken()!;
@@ -98,16 +122,59 @@ export class MessageListComponent implements OnInit {
   }
 
   applyFilters(): void {
+    this.appliedSearchText = this.searchText;
     this.loadMessages();
   }
 
-  clearFilters(): void {
-    this.searchText = '';
-    this.priorityFilter = null;
-    this.channelFilter = '';
+  onPriorityFilterChange(filters: string[] | null): void {
+    this.priorityFilter = filters ?? [];
     this.loadMessages();
   }
 
+  onChannelFilterChange(filters: string[] | null): void {
+    this.channelFilter = filters ?? [];
+    this.loadMessages();
+  }
+
+  clearSearch(): void {
+    this.searchText = '';
+    this.appliedSearchText = '';
+    this.loadMessages();
+  }
+
+  clearChannelFilter(): void {
+    this.channelFilter = [];
+    this.loadMessages();
+  }
+
+  removeChannelFilter(channel: string): void {
+    this.channelFilter = this.channelFilter.filter(c => c !== channel);
+    this.loadMessages();
+  }
+
+  clearPriorityFilter(): void {
+    this.priorityFilter = [];
+    this.loadMessages();
+  }
+
+  clearAllFilters(): void {
+    this.searchText = '';
+    this.appliedSearchText = '';
+    this.channelFilter = [];
+    this.priorityFilter = [];
+    this.loadMessages();
+  }
+
+  hasActiveFilters(): boolean {
+    return !!this.appliedSearchText || this.channelFilter.length > 0 || this.priorityFilter.length > 0;
+  }
+
+  getChannelDisplayName(internalName: string): string {
+    const filters = this.channelFilters();
+    const channel = filters.find(f => f.value === internalName);
+    return channel?.text?.toString() ?? internalName;
+  }
+
   loadMore(): void {
     if (this.nextPageToken()) {
       this.loadMessages(true);