Simple Managment webapp [LLM]

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

@@ -11,6 +11,8 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { Message, MessageListParams } from '../../../core/models';
@@ -31,6 +33,8 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzSpinModule,
     NzToolTipModule,
     NzPaginationModule,
+    NzDatePickerModule,
+    NzDropDownModule,
     RelativeTimePipe,
   ],
   templateUrl: './message-list.component.html',
@@ -54,6 +58,9 @@ export class MessageListComponent implements OnInit {
   appliedSearchText = '';
   priorityFilter: string[] = [];
   channelFilter: string[] = [];
+  senderFilter: string[] = [];
+  dateRange: [Date, Date] | null = null;
+  dateFilterVisible = false;
 
   // Filter options
   priorityFilters: NzTableFilterList = [
@@ -62,9 +69,11 @@ export class MessageListComponent implements OnInit {
     { text: 'High', value: '2' },
   ];
   channelFilters = signal<NzTableFilterList>([]);
+  senderFilters = signal<NzTableFilterList>([]);
 
   ngOnInit(): void {
     this.loadChannels();
+    this.loadSenders();
     this.loadMessages();
   }
 
@@ -77,7 +86,20 @@ export class MessageListComponent implements OnInit {
         this.channelFilters.set(
           response.channels.map(ch => ({
             text: ch.display_name,
-            value: ch.internal_name,
+            value: ch.channel_id,
+          }))
+        );
+      }
+    });
+  }
+
+  loadSenders(): void {
+    this.apiService.getSenderNames().subscribe({
+      next: (response) => {
+        this.senderFilters.set(
+          response.sender_names.map(s => ({
+            text: s.name,
+            value: s.name,
           }))
         );
       }
@@ -95,11 +117,18 @@ export class MessageListComponent implements OnInit {
     if (this.appliedSearchText) {
       params.search = this.appliedSearchText;
     }
-    if (this.priorityFilter.length === 1) {
-      params.priority = parseInt(this.priorityFilter[0], 10);
+    if (this.priorityFilter.length > 0) {
+      params.priority = this.priorityFilter.map(p => parseInt(p, 10));
     }
     if (this.channelFilter.length > 0) {
-      params.channel = this.channelFilter.join(',');
+      params.channel_id = this.channelFilter;
+    }
+    if (this.senderFilter.length > 0) {
+      params.sender = this.senderFilter;
+    }
+    if (this.dateRange) {
+      params.after = this.dateRange[0].toISOString();
+      params.before = this.dateRange[1].toISOString();
     }
 
     // Use page-index based pagination: $1 = page 1, $2 = page 2, etc.
@@ -138,6 +167,12 @@ export class MessageListComponent implements OnInit {
     this.loadMessages();
   }
 
+  onSenderFilterChange(filters: string[] | null): void {
+    this.senderFilter = filters ?? [];
+    this.currentPage.set(1);
+    this.loadMessages();
+  }
+
   clearSearch(): void {
     this.searchText = '';
     this.appliedSearchText = '';
@@ -157,29 +192,64 @@ export class MessageListComponent implements OnInit {
     this.loadMessages();
   }
 
+  clearSenderFilter(): void {
+    this.senderFilter = [];
+    this.currentPage.set(1);
+    this.loadMessages();
+  }
+
+  removeSenderFilter(sender: string): void {
+    this.senderFilter = this.senderFilter.filter(s => s !== sender);
+    this.currentPage.set(1);
+    this.loadMessages();
+  }
+
   clearPriorityFilter(): void {
     this.priorityFilter = [];
     this.currentPage.set(1);
     this.loadMessages();
   }
 
+  onDateRangeChange(dates: [Date, Date] | null): void {
+    this.dateRange = dates;
+    if (dates) {
+      this.dateFilterVisible = false;
+    }
+    this.currentPage.set(1);
+    this.loadMessages();
+  }
+
+  clearDateRange(): void {
+    this.dateRange = null;
+    this.currentPage.set(1);
+    this.loadMessages();
+  }
+
   clearAllFilters(): void {
     this.searchText = '';
     this.appliedSearchText = '';
     this.channelFilter = [];
+    this.senderFilter = [];
     this.priorityFilter = [];
+    this.dateRange = null;
     this.currentPage.set(1);
     this.loadMessages();
   }
 
   hasActiveFilters(): boolean {
-    return !!this.appliedSearchText || this.channelFilter.length > 0 || this.priorityFilter.length > 0;
+    return !!this.appliedSearchText || this.channelFilter.length > 0 || this.senderFilter.length > 0 || this.priorityFilter.length > 0 || !!this.dateRange;
   }
 
-  getChannelDisplayName(internalName: string): string {
+  getChannelDisplayName(channelId: string): string {
     const filters = this.channelFilters();
-    const channel = filters.find(f => f.value === internalName);
-    return channel?.text?.toString() ?? internalName;
+    const channel = filters.find(f => f.value === channelId);
+    return channel?.text?.toString() ?? channelId;
+  }
+
+  getDateRangeDisplay(): string {
+    if (!this.dateRange) return '';
+    const format = (d: Date) => d.toLocaleDateString();
+    return `${format(this.dateRange[0])} - ${format(this.dateRange[1])}`;
   }
 
   goToPage(page: number): void {