From b350b2a9337081b25eb50e556c9a4b6b6acafc08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 28 Jul 2021 10:40:46 +0300
Subject: [PATCH] Downloads listing extends base listing

---
 .../downloads-list-screen.component.html      | 36 ++++----------
 .../downloads-list-screen.component.ts        | 49 +++++++++++++------
 .../table-header/table-header.component.html  |  2 +
 .../table-header/table-header.component.ts    |  1 +
 apps/red-ui/src/assets/i18n/en.json           | 18 +++----
 5 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 4e159a38e..fbb0253be 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -1,41 +1,23 @@
 <section>
-    <div class="page-header">
-        <div class="actions flex-1">
-            <redaction-circle-button
-                [tooltip]="'common.close' | translate"
-                icon="red:close"
-                redactionNavigateLastDossiersScreen
-                tooltipPosition="below"
-            ></redaction-circle-button>
-        </div>
-    </div>
+    <redaction-page-header [showCloseButton]="true"></redaction-page-header>
 
     <div class="red-content-inner">
         <div class="content-container">
-            <div class="header-item">
-                <span class="all-caps-label">
-                    {{ 'downloads-list.table-header.title' | translate: { length: fileDownloadService.downloads.length } }}
-                </span>
-            </div>
-
-            <div [class.no-data]="noData" class="table-header" redactionSyncWidth="table-item">
-                <redaction-table-col-name [label]="'downloads-list.table-col-names.name' | translate"></redaction-table-col-name>
-                <redaction-table-col-name [label]="'downloads-list.table-col-names.size' | translate"></redaction-table-col-name>
-                <redaction-table-col-name [label]="'downloads-list.table-col-names.date' | translate"></redaction-table-col-name>
-                <redaction-table-col-name [label]="'downloads-list.table-col-names.status' | translate"></redaction-table-col-name>
-                <div></div>
-                <div class="scrollbar-placeholder"></div>
-            </div>
+            <redaction-table-header
+                [hasEmptyColumn]="true"
+                [tableColConfigs]="tableColConfigs"
+                [tableHeaderLabel]="tableHeaderLabel"
+            ></redaction-table-header>
 
             <redaction-empty-state
-                *ngIf="noData"
+                *ngIf="screenStateService.noData$ | async"
                 [text]="'downloads-list.no-data.title' | translate"
                 icon="red:download"
             ></redaction-empty-state>
 
-            <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
+            <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <!--      Table lines -->
-                <div *cdkVirtualFor="let download of fileDownloadService.downloads" class="table-item">
+                <div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                     <div>
                         <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
                             {{ download.filename }}
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
index fad82258c..ae5c52ae5 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
@@ -1,34 +1,55 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper';
 import { DownloadControllerService } from '@redaction/red-ui-http';
+import { BaseListingComponent } from '@shared/base/base-listing.component';
+import { FilterService } from '@shared/services/filter.service';
+import { SearchService } from '@shared/services/search.service';
+import { ScreenStateService } from '@shared/services/screen-state.service';
+import { SortingService } from '@services/sorting.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
 
 @Component({
     selector: 'redaction-downloads-list-screen',
     templateUrl: './downloads-list-screen.component.html',
-    styleUrls: ['./downloads-list-screen.component.scss']
+    styleUrls: ['./downloads-list-screen.component.scss'],
+    providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
-export class DownloadsListScreenComponent implements OnInit {
+export class DownloadsListScreenComponent extends BaseListingComponent<DownloadStatusWrapper> implements OnInit {
+    itemSize = 80;
+    tableColConfigs: TableColConfig[] = [
+        { label: _('downloads-list.table-col-names.name') },
+        { label: _('downloads-list.table-col-names.size') },
+        { label: _('downloads-list.table-col-names.date') },
+        { label: _('downloads-list.table-col-names.status') }
+    ];
+    protected readonly _primaryKey = 'storageId';
+    protected _tableHeaderLabel = _('downloads-list.table-header.title');
+
     constructor(
         readonly fileDownloadService: FileDownloadService,
-        private readonly _downloadControllerService: DownloadControllerService
-    ) {}
-
-    get noData(): boolean {
-        return this.fileDownloadService.downloads.length === 0;
+        private readonly _downloadControllerService: DownloadControllerService,
+        protected readonly _injector: Injector
+    ) {
+        super(_injector);
     }
 
-    ngOnInit(): void {
-        this.fileDownloadService.getDownloadStatus().subscribe();
+    async ngOnInit() {
+        await this._loadData();
     }
 
     async downloadItem(download: DownloadStatusWrapper) {
         await this.fileDownloadService.performDownload(download);
     }
 
-    deleteItem(download: DownloadStatusWrapper) {
-        this._downloadControllerService
-            .deleteDownload({ storageIds: [download.storageId] })
-            .subscribe(() => this.fileDownloadService.getDownloadStatus().subscribe());
+    async deleteItem(download: DownloadStatusWrapper) {
+        await this._downloadControllerService.deleteDownload({ storageIds: [download.storageId] }).toPromise();
+        await this._loadData();
+    }
+
+    private async _loadData() {
+        await this.fileDownloadService.getDownloadStatus().toPromise();
+        this.screenStateService.setEntities(this.fileDownloadService.downloads);
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
index cb09ccf3e..227f37394 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
@@ -18,5 +18,7 @@
         [withSort]="config.withSort"
     ></redaction-table-col-name>
 
+    <div *ngIf="hasEmptyColumn"></div>
+
     <div class="scrollbar-placeholder"></div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
index e1b8b7b32..7ee399ed3 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
@@ -11,6 +11,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 export class TableHeaderComponent<T> {
     @Input() tableHeaderLabel: string;
     @Input() tableColConfigs: TableColConfig[];
+    @Input() hasEmptyColumn = false;
 
     constructor(readonly screenStateService: ScreenStateService<T>) {}
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 1f92dd1a5..af1f33ec9 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -181,6 +181,10 @@
           "error": "Failed to recategorize image: {error}",
           "success": "Image recategorized."
         },
+        "remove": {
+          "error": "Failed to remove redaction: {error}",
+          "success": "Redaction removed!"
+        },
         "request-change-legal-basis": {
           "error": "Failed to request annotation reason change: {error}",
           "success": "Annotation reason change requested."
@@ -193,6 +197,10 @@
           "error": "Failed to request image recategorization: {error}",
           "success": "Image recategorization requested."
         },
+        "request-remove": {
+          "error": "Failed to request removal of redaction: {error}",
+          "success": "Requested to remove redaction!"
+        },
         "suggest": {
           "error": "Failed to save redaction suggestion: {error}",
           "success": "Redaction suggestion saved"
@@ -200,14 +208,6 @@
         "undo": {
           "error": "Failed to undo: {error}",
           "success": "Undo successful"
-        },
-        "remove": {
-          "error": "Failed to remove redaction: {error}",
-          "success": "Redaction removed!"
-        },
-        "request-remove": {
-          "error": "Failed to request removal of redaction: {error}",
-          "success": "Requested to remove redaction!"
         }
       }
     },
@@ -957,10 +957,10 @@
     "error": "Re-processing required",
     "excluded": "Excluded",
     "full-reprocess": "Processing",
+    "indexing": "Processing",
     "ocr-processing": "OCR Processing",
     "processing": "Processing",
     "reprocess": "Processing",
-    "indexing": "Processing",
     "unassigned": "Unassigned",
     "under-approval": "Under Approval",
     "under-review": "Under Review",