Simple Managment webapp [LLM]

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

@@ -7,52 +7,43 @@
     </button>
   </div>
 
-  <nz-card class="filter-card">
-    <div class="filter-bar">
-      <nz-input-group nzSearch [nzAddOnAfter]="searchButton" style="width: 300px;">
-        <input
-          type="text"
-          nz-input
-          placeholder="Search messages..."
-          [(ngModel)]="searchText"
-          (keyup.enter)="applyFilters()"
-        />
-      </nz-input-group>
-      <ng-template #searchButton>
-        <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
-          <span nz-icon nzType="search"></span>
-        </button>
-      </ng-template>
-
-      <nz-select
-        [(ngModel)]="priorityFilter"
-        nzPlaceHolder="Priority"
-        nzAllowClear
-        style="width: 150px;"
-        (ngModelChange)="applyFilters()"
-      >
-        <nz-option [nzValue]="0" nzLabel="Low"></nz-option>
-        <nz-option [nzValue]="1" nzLabel="Normal"></nz-option>
-        <nz-option [nzValue]="2" nzLabel="High"></nz-option>
-      </nz-select>
-
+  <div class="search-bar">
+    <nz-input-group nzSearch [nzAddOnAfter]="searchButton">
       <input
         type="text"
         nz-input
-        placeholder="Channel name"
-        [(ngModel)]="channelFilter"
-        style="width: 200px;"
+        placeholder="Search messages..."
+        [(ngModel)]="searchText"
         (keyup.enter)="applyFilters()"
       />
+    </nz-input-group>
+    <ng-template #searchButton>
+      <button nz-button nzType="primary" nzSearch (click)="applyFilters()">
+        <span nz-icon nzType="search"></span>
+      </button>
+    </ng-template>
+  </div>
 
-      @if (searchText || priorityFilter !== null || channelFilter) {
-        <button nz-button (click)="clearFilters()">
-          <span nz-icon nzType="close"></span>
-          Clear
-        </button>
+  @if (hasActiveFilters()) {
+    <div class="active-filters">
+      @if (appliedSearchText) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearSearch()">
+          "{{ appliedSearchText }}"
+        </nz-tag>
       }
+      @for (channel of channelFilter; track channel) {
+        <nz-tag nzMode="closeable" (nzOnClose)="removeChannelFilter(channel)">
+          {{ getChannelDisplayName(channel) }}
+        </nz-tag>
+      }
+      @if (priorityFilter.length > 0) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
+          {{ getPriorityLabel(+priorityFilter[0]) }}
+        </nz-tag>
+      }
+      <a class="clear-all" (click)="clearAllFilters()">Clear all</a>
     </div>
-  </nz-card>
+  }
 
   <nz-card>
     <nz-table
@@ -67,9 +58,19 @@
       <thead>
         <tr>
           <th nzWidth="40%">Title</th>
-          <th nzWidth="15%">Channel</th>
+          <th
+            nzWidth="15%"
+            [nzFilters]="channelFilters()"
+            [nzFilterMultiple]="true"
+            (nzFilterChange)="onChannelFilterChange($event)"
+          >Channel</th>
           <th nzWidth="15%">Sender</th>
-          <th nzWidth="10%">Priority</th>
+          <th
+            nzWidth="10%"
+            [nzFilters]="priorityFilters"
+            [nzFilterMultiple]="false"
+            (nzFilterChange)="onPriorityFilterChange($event)"
+          >Priority</th>
           <th nzWidth="20%">Time</th>
         </tr>
       </thead>

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

@@ -9,10 +9,28 @@
   }
 }
 
-.filter-card {
+.search-bar {
   margin-bottom: 16px;
 }
 
+.active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+
+  nz-tag {
+    max-width: none;
+  }
+
+  .clear-all {
+    margin-left: 8px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+}
+
 .message-title {
   font-weight: 500;
   color: #333;

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);