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

<app-page-header title="File Tasks" i18n-title>
  <div class="btn-toolbar col col-md-auto">
    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size == 0">
      <svg class="sidebaricon" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#x"/>
      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
    </button>
    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" [disabled]="tasksService.total == 0">
      <svg class="sidebaricon" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
    </button>
    <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>
  </div>
</app-page-header>

<ng-container *ngIf="!tasksService.completedFileTasks && 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>
        <th scope="col">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
            <label class="form-check-label" for="all-tasks"></label>
          </div>
        </th>
        <th scope="col" i18n>Name</th>
        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'" i18n>Results</th>
        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
        <th scope="col" i18n>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let task of tasks">
        <th>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
            <label class="form-check-label" for="task{{task.id}}"></label>
          </div>
        </th>
        <td class="overflow-auto">{{ task.name }}</td>
        <td class="d-none d-lg-table-cell">{{ task.created | customDate:'short' }}</td>
        <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'">
          <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>
            <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
          </div>
          <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
        </td>
        <td class="d-lg-none">
          <span [ngbPopover]="resultPopoverMobile" popoverClass="shadow small mobile" container="body">
            <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>
          <ng-template #resultPopoverMobile><div class="small">{{ task.created | customDate:'short' }}<div class="font-monospace">{{ task.result }}</div></div></ng-template>
        </td>
        <td scope="row">
          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(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" [(activeId)]="activeTab" class="nav-tabs">
  <li ngbNavItem="incomplete">
    <a ngbNavLink i18n>Incomplete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.incompleteFileTasks.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.incompleteFileTasks}"></ng-container>
    </ng-template>
  </li>
  <li ngbNavItem="completed">
    <a ngbNavLink i18n>Complete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
    </ng-template>
  </li>
  <li ngbNavItem="failed">
    <a ngbNavLink i18n>Failed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.failedFileTasks.length}}</span></a>
    <ng-template ngbNavContent>
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
    </ng-template>
  </li>
</ul>
<div [ngbNavOutlet]="nav"></div>