Simple Managment webapp [LLM]

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

@@ -0,0 +1,138 @@
+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 { 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';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { Message, MessageListParams } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+
+@Component({
+  selector: 'app-message-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzTableModule,
+    NzButtonModule,
+    NzInputModule,
+    NzSelectModule,
+    NzTagModule,
+    NzIconModule,
+    NzEmptyModule,
+    NzSpinModule,
+    NzCardModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+  ],
+  templateUrl: './message-list.component.html',
+  styleUrl: './message-list.component.scss'
+})
+export class MessageListComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private router = inject(Router);
+
+  messages = signal<Message[]>([]);
+  loading = signal(false);
+  nextPageToken = signal<string | null>(null);
+
+  // Filters
+  searchText = '';
+  priorityFilter: number | null = null;
+  channelFilter = '';
+
+  ngOnInit(): void {
+    this.loadMessages();
+  }
+
+  loadMessages(append = false): void {
+    this.loading.set(true);
+
+    const params: MessageListParams = {
+      page_size: 50,
+      trimmed: true,
+    };
+
+    if (this.searchText) {
+      params.search = this.searchText;
+    }
+    if (this.priorityFilter !== null) {
+      params.priority = this.priorityFilter;
+    }
+    if (this.channelFilter) {
+      params.channel = this.channelFilter;
+    }
+    if (append && this.nextPageToken()) {
+      params.next_page_token = this.nextPageToken()!;
+    }
+
+    this.apiService.getMessages(params).subscribe({
+      next: (response) => {
+        if (append) {
+          this.messages.update(msgs => [...msgs, ...response.messages]);
+        } else {
+          this.messages.set(response.messages);
+        }
+        this.nextPageToken.set(
+          response.next_page_token && response.next_page_token !== '@end'
+            ? response.next_page_token
+            : null
+        );
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  applyFilters(): void {
+    this.loadMessages();
+  }
+
+  clearFilters(): void {
+    this.searchText = '';
+    this.priorityFilter = null;
+    this.channelFilter = '';
+    this.loadMessages();
+  }
+
+  loadMore(): void {
+    if (this.nextPageToken()) {
+      this.loadMessages(true);
+    }
+  }
+
+  viewMessage(message: Message): void {
+    this.router.navigate(['/messages', message.message_id]);
+  }
+
+  getPriorityLabel(priority: number): string {
+    switch (priority) {
+      case 0: return 'Low';
+      case 1: return 'Normal';
+      case 2: return 'High';
+      default: return 'Unknown';
+    }
+  }
+
+  getPriorityColor(priority: number): string {
+    switch (priority) {
+      case 0: return 'default';
+      case 1: return 'blue';
+      case 2: return 'red';
+      default: return 'default';
+    }
+  }
+}