Fix frontend tasks display

src-ui/cypress/e2e/tasks/tasks.cy.ts

@@ -44,6 +44,39 @@ describe('tasks', () => {
       })
   })
 
+  it('should correctly switch between task tabs', () => {
+    cy.get('tbody').find('tr:visible').its('length').should('eq', 10) // double because collapsible result tr
+    cy.wait(500) // stabilizes the test, for some reason...
+    cy.get('app-tasks')
+      .find('a:visible')
+      .contains('Queued')
+      .first()
+      .click()
+      .wait(2000)
+      .then(() => {
+        cy.get('tbody').find('tr:visible').should('not.exist')
+      })
+    cy.get('app-tasks')
+      .find('a:visible')
+      .contains('Started')
+      .first()
+      .click()
+      .wait(2000)
+      .then(() => {
+        cy.get('tbody').find('tr:visible').its('length').should('eq', 2) // double because collapsible result tr
+      })
+    cy.get('app-tasks')
+      .find('a:visible')
+      .contains('Complete')
+      .first()
+      .click()
+      .wait('@tasks')
+      .wait(2000)
+      .then(() => {
+        cy.get('tbody').find('tr:visible').its('length').should('eq', 12) // double because collapsible result tr
+      })
+  })
+
   it('should allow toggling all tasks in list and warn on dismiss', () => {
     cy.get('thead').find('input[type="checkbox"]').first().click()
     cy.get('body').find('button').contains('Dismiss selected').first().click()

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

@@ -56,14 +56,14 @@
         <td class="overflow-auto">{{ task.task_file_name }}</td>
         <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
         <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'started' && activeTab != 'queued'">
-          <div *ngIf="task.result.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
+          <div *ngIf="task.result?.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
             [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
             <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 text-muted">{{ task.result }}</span>
+          <span *ngIf="task.result?.length <= 50" class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
           <ng-template #resultPopover>
             <pre class="small mb-0">{{ task.result | slice:0:300 }}<ng-container *ngIf="task.result.length > 300">&hellip;</ng-container></pre>
-            <ng-container *ngIf="task.result.length > 300"><br/><em>(<ng-container i18n>click for full output</ng-container>)</em></ng-container>
+            <ng-container *ngIf="task.result?.length > 300"><br/><em>(<ng-container i18n>click for full output</ng-container>)</em></ng-container>
           </ng-template>
         </td>
         <td class="d-lg-none">

src-ui/src/app/data/paperless-task.ts

@@ -25,9 +25,9 @@ export interface PaperlessTask extends ObjectWithId {
 
   date_created: Date
 
-  done?: Date
+  date_done?: Date
 
-  result: string
+  result?: string
 
   related_document?: number
 }