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

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

  <div class="search-bar">
    <nz-input-group nzSearch [nzAddOnAfter]="searchButton">
      <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>
  </div>

  @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>
      }
      @for (sender of senderFilter; track sender) {
        <nz-tag nzMode="closeable" (nzOnClose)="removeSenderFilter(sender)">
          {{ sender }}
        </nz-tag>
      }
      @if (priorityFilter.length > 0) {
        <nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
          {{ getPriorityLabel(+priorityFilter[0]) }}
        </nz-tag>
      }
      @if (dateRange) {
        <nz-tag nzMode="closeable" (nzOnClose)="clearDateRange()">
          {{ getDateRangeDisplay() }}
        </nz-tag>
      }
      <a class="clear-all" (click)="clearAllFilters()">Clear all</a>
    </div>
  }

  <nz-table
    #messageTable
    nzBordered
    [nzData]="messages()"
    [nzLoading]="loading()"
    [nzShowPagination]="false"
    [nzNoResult]="noResultTpl"
    nzSize="middle"
  >
    <ng-template #noResultTpl></ng-template>
      <thead>
        <tr>
          <th>Title</th>
          <th>Content</th>
          <th
            [nzFilters]="channelFilters()"
            [nzFilterMultiple]="true"
            (nzFilterChange)="onChannelFilterChange($event)"
          >Channel</th>
          <th
            nzWidth="0"
            [nzFilters]="senderFilters()"
            [nzFilterMultiple]="true"
            (nzFilterChange)="onSenderFilterChange($event)"
          >Sender</th>
          <th
            nzWidth="0"
            [nzFilters]="priorityFilters"
            [nzFilterMultiple]="false"
            (nzFilterChange)="onPriorityFilterChange($event)"
          >Priority</th>
          <th nzWidth="0" nzCustomFilter>
            Time
            <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
              <span nz-icon nzType="filter" nzTheme="fill"></span>
            </nz-filter-trigger>
            <nz-dropdown-menu #dateMenu="nzDropdownMenu">
              <div class="date-filter-dropdown" (click)="$event.stopPropagation()">
                <nz-range-picker
                  [ngModel]="dateRange"
                  (ngModelChange)="onDateRangeChange($event)"
                  [nzAllowClear]="true"
                  nzFormat="yyyy-MM-dd"
                  [nzInline]="true"
                ></nz-range-picker>
              </div>
            </nz-dropdown-menu>
          </th>
        </tr>
      </thead>
      <tbody>
        @for (message of messages(); track message.message_id) {
          <tr class="clickable-row">
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                <div class="message-title">{{ message.title }}</div>
                <div class="message-id mono">{{ message.message_id }}</div>
              </a>
            </td>
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                @if (message.content) {
                  <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
                } @else {
                  <span class="text-muted"></span>
                }
              </a>
            </td>
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                <div class="cell-name">{{ message.channel_internal_name }}</div>
                <div class="cell-id">{{ message.channel_id }}</div>
              </a>
            </td>
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                <span style="white-space: pre">{{ message.sender_name || '-' }}</span>
              </a>
            </td>
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                <nz-tag [nzColor]="getPriorityColor(message.priority)">
                  {{ getPriorityLabel(message.priority) }}
                </nz-tag>
              </a>
            </td>
            <td>
              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
                <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
                <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
              </a>
            </td>
          </tr>
        } @empty {
          <tr>
            <td colspan="6">
              <nz-empty nzNotFoundContent="No messages found"></nz-empty>
            </td>
          </tr>
        }
      </tbody>
  </nz-table>

  <div class="pagination-controls">
    <nz-pagination
      [nzPageIndex]="currentPage()"
      [nzPageSize]="pageSize"
      [nzTotal]="totalCount()"
      [nzDisabled]="loading()"
      (nzPageIndexChange)="goToPage($event)"
    ></nz-pagination>
  </div>
</div>