paperless-ngx/src-ui/src/app/components/manage/tasks/tasks.component.html

<app-page-header title="File Tasks" i18n-title>
  <button class="btn btn-sm btn-outline-primary" (click)="tasksService.reload()">
    <svg class="sidebaricon" fill="currentColor">
      <use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
    </svg>&nbsp;<ng-container i18n>Refresh</ng-container>
  </button>
</app-page-header>

<ng-container *ngIf="!tasksService.completed && tasksService.loading">
  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
  <div class="visually-hidden" i18n>Loading...</div>
</ng-container>

<ng-template let-tasks="tasks" #tasksTemplate>
  <table class="table table-striped align-middle border shadow-sm">
    <thead>
      <tr>
        <!--  [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" -->
        <th>
          <div class="form-check">
            <!--  [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();" -->
            <input type="checkbox" class="form-check-input" id="all-tasks">
            <label class="form-check-label" for="all-tasks"></label>
          </div>
        </th>
        <th scope="col" sortable="name" i18n>Name</th>
        <th scope="col" sortable="name" i18n>Started</th>
        <th scope="col" i18n>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let task of tasks">
        <th>
          <div class="form-check">
            <!--  [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();" -->
            <input type="checkbox" class="form-check-input" id="task{{task.id}}">
            <label class="form-check-label" for="task{{task.id}}"></label>
          </div>
        </th>
        <td>{{ task.name }}</td>
        <td>{{ task.created | customDate:'short' }}</td>
        <td>
          <div class="text-primary" *ngIf="task.result.length > 50" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click">
            <svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
            </svg>
            <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
          </div>
          <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
          <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
        </td>
        <td scope="row">
          <button class="btn btn-sm btn-outline-secondary" (click)="acknowledgeTask(task)">
            <svg class="sidebaricon" fill="currentColor">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</ng-template>

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li ngbNavItem>
    <a ngbNavLink i18n>Incomplete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.incomplete.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.incomplete}"></ng-container>
    </ng-template>
  </li>
  <li ngbNavItem>
    <a ngbNavLink i18n>Completed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completed.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completed}"></ng-container>
    </ng-template>
  </li>
  <li ngbNavItem>
    <a ngbNavLink i18n>Failed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.failed.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failed}"></ng-container>
    </ng-template>
  </li>
</ul>
<div [ngbNavOutlet]="nav"></div>