Simple Managment webapp [LLM]

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

@@ -0,0 +1,118 @@
+<div class="page-content">
+  <div class="page-header">
+    <h2>Messages</h2>
+    <button nz-button nzType="default" (click)="loadMessages()">
+      <span nz-icon nzType="reload"></span>
+      Refresh
+    </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>
+
+      <input
+        type="text"
+        nz-input
+        placeholder="Channel name"
+        [(ngModel)]="channelFilter"
+        style="width: 200px;"
+        (keyup.enter)="applyFilters()"
+      />
+
+      @if (searchText || priorityFilter !== null || channelFilter) {
+        <button nz-button (click)="clearFilters()">
+          <span nz-icon nzType="close"></span>
+          Clear
+        </button>
+      }
+    </div>
+  </nz-card>
+
+  <nz-card>
+    <nz-table
+      #messageTable
+      [nzData]="messages()"
+      [nzLoading]="loading()"
+      [nzShowPagination]="false"
+      nzSize="middle"
+    >
+      <thead>
+        <tr>
+          <th nzWidth="40%">Title</th>
+          <th nzWidth="15%">Channel</th>
+          <th nzWidth="15%">Sender</th>
+          <th nzWidth="10%">Priority</th>
+          <th nzWidth="20%">Time</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (message of messages(); track message.message_id) {
+          <tr class="clickable-row" (click)="viewMessage(message)">
+            <td>
+              <div class="message-title">{{ message.title }}</div>
+              @if (message.content && !message.trimmed) {
+                <div class="message-preview">{{ message.content | slice:0:100 }}{{ message.content.length > 100 ? '...' : '' }}</div>
+              }
+            </td>
+            <td>
+              <span class="mono">{{ message.channel_internal_name }}</span>
+            </td>
+            <td>
+              {{ message.sender_name || '-' }}
+            </td>
+            <td>
+              <nz-tag [nzColor]="getPriorityColor(message.priority)">
+                {{ getPriorityLabel(message.priority) }}
+              </nz-tag>
+            </td>
+            <td>
+              <span nz-tooltip [nzTooltipTitle]="message.timestamp">
+                {{ message.timestamp | relativeTime }}
+              </span>
+            </td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="5">
+              <nz-empty nzNotFoundContent="No messages found"></nz-empty>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>
+
+    @if (nextPageToken()) {
+      <div class="load-more">
+        <button nz-button nzType="default" (click)="loadMore()" [nzLoading]="loading()">
+          Load More
+        </button>
+      </div>
+    }
+  </nz-card>
+</div>