From 5ac10ed63537ad8e5f174165f88bdbf3dbd4374f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 28 Jul 2021 15:37:42 +0300
Subject: [PATCH] Selection & bulk delete downloads

---
 .../downloads-list-screen.component.html      | 21 +++++++++++++++++--
 .../downloads-list-screen.component.scss      |  6 +++---
 .../downloads-list-screen.component.ts        |  5 +++--
 .../active-fields-listing.component.html      | 12 +++++------
 .../dictionary-listing-screen.component.html  | 12 +++++------
 ...r-attributes-listing-screen.component.html | 12 +++++------
 ...er-templates-listing-screen.component.html | 12 +++++------
 ...e-attributes-listing-screen.component.html | 12 +++++------
 .../screens/trash/trash-screen.component.html | 12 +++++------
 .../screens/trash/trash-screen.component.ts   |  2 +-
 .../user-listing-screen.component.html        | 12 +++++------
 .../dossier-overview-screen.component.html    | 12 +++++------
 .../table-header/table-header.component.html  | 15 +++++++++++--
 .../table-header/table-header.component.ts    |  4 +++-
 apps/red-ui/src/assets/i18n/en.json           |  3 +++
 apps/red-ui/src/assets/styles/red-grid.scss   |  4 ++++
 .../src/assets/styles/red-page-layout.scss    |  5 -----
 apps/red-ui/src/assets/styles/red-tables.scss |  4 ++++
 18 files changed, 93 insertions(+), 72 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 fbb0253be..4ccc08dcc 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
@@ -4,10 +4,13 @@
     <div class="red-content-inner">
         <div class="content-container">
             <redaction-table-header
+                [bulkActions]="bulkActions"
                 [hasEmptyColumn]="true"
+                [selectionEnabled]="true"
                 [tableColConfigs]="tableColConfigs"
                 [tableHeaderLabel]="tableHeaderLabel"
-            ></redaction-table-header>
+            >
+            </redaction-table-header>
 
             <redaction-empty-state
                 *ngIf="screenStateService.noData$ | async"
@@ -18,6 +21,10 @@
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
+                    <div (click)="toggleEntitySelected($event, download)" class="selection-column">
+                        <redaction-round-checkbox [active]="isSelected(download)"></redaction-round-checkbox>
+                    </div>
+
                     <div>
                         <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
                             {{ download.filename }}
@@ -50,7 +57,7 @@
                             </redaction-circle-button>
 
                             <redaction-circle-button
-                                (action)="deleteItem(download)"
+                                (action)="deleteItems([download])"
                                 [tooltip]="'downloads-list.actions.delete' | translate"
                                 icon="red:trash"
                                 type="dark-bg"
@@ -66,3 +73,13 @@
         </div>
     </div>
 </section>
+
+<ng-template #bulkActions>
+    <redaction-circle-button
+        (action)="deleteItems()"
+        *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
+        [tooltip]="'downloads-list.bulk.delete' | translate"
+        icon="red:trash"
+        type="dark-bg"
+    ></redaction-circle-button>
+</ng-template>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
index 23bddbc23..ce9b00a52 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
@@ -1,18 +1,18 @@
 .content-container {
     cdk-virtual-scroll-viewport {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: 2fr 1fr 1fr 1fr auto 11px;
+            grid-template-columns: auto 2fr 1fr 1fr 1fr auto 11px;
 
             .table-item {
                 > div:not(.scrollbar-placeholder) {
-                    padding-left: 24px;
+                    padding-left: 10px;
                 }
             }
         }
 
         &.has-scrollbar:hover {
             ::ng-deep.cdk-virtual-scroll-content-wrapper {
-                grid-template-columns: 2fr 1fr 1fr 1fr auto;
+                grid-template-columns: auto 2fr 1fr 1fr 1fr auto;
             }
         }
     }
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 ae5c52ae5..2d998ecb0 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
@@ -43,8 +43,9 @@ export class DownloadsListScreenComponent extends BaseListingComponent<DownloadS
         await this.fileDownloadService.performDownload(download);
     }
 
-    async deleteItem(download: DownloadStatusWrapper) {
-        await this._downloadControllerService.deleteDownload({ storageIds: [download.storageId] }).toPromise();
+    async deleteItems(downloads?: DownloadStatusWrapper[]) {
+        const storageIds = (downloads || this.screenStateService.selectedEntities).map(d => d.storageId);
+        await this._downloadControllerService.deleteDownload({ storageIds }).toPromise();
         await this._loadData();
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index 089ebd3e7..7931d54a7 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -1,11 +1,9 @@
 <div class="header-item">
-    <div class="select-all-container">
-        <redaction-round-checkbox
-            (click)="toggleSelectAll()"
-            [active]="screenStateService.areAllEntitiesSelected$ | async"
-            [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-        ></redaction-round-checkbox>
-    </div>
+    <redaction-round-checkbox
+        (click)="toggleSelectAll()"
+        [active]="screenStateService.areAllEntitiesSelected$ | async"
+        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+    ></redaction-round-checkbox>
     <span class="all-caps-label">
         {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
     </span>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index b6cac2fd1..7cbbd7459 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -21,13 +21,11 @@
 
         <div class="content-container">
             <div class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="screenStateService.areAllEntitiesSelected$ | async"
-                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
-                </div>
+                <redaction-round-checkbox
+                    (click)="toggleSelectAll()"
+                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                ></redaction-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index fd8b8381d..ea9deed98 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -21,13 +21,11 @@
 
         <div class="content-container">
             <div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="screenStateService.areAllEntitiesSelected$ | async"
-                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
-                </div>
+                <redaction-round-checkbox
+                    (click)="toggleSelectAll()"
+                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                ></redaction-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index f5394e270..c2bf9a694 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -12,13 +12,11 @@
         <div class="red-content-inner">
             <div class="content-container">
                 <div class="header-item">
-                    <div class="select-all-container">
-                        <redaction-round-checkbox
-                            (click)="toggleSelectAll()"
-                            [active]="screenStateService.areAllEntitiesSelected$ | async"
-                            [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                        ></redaction-round-checkbox>
-                    </div>
+                    <redaction-round-checkbox
+                        (click)="toggleSelectAll()"
+                        [active]="screenStateService.areAllEntitiesSelected$ | async"
+                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                    ></redaction-round-checkbox>
 
                     <span class="all-caps-label">
                         {{
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 6b4280c2d..8391272b9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -21,13 +21,11 @@
 
         <div class="content-container">
             <div class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="screenStateService.areAllEntitiesSelected$ | async"
-                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
-                </div>
+                <redaction-round-checkbox
+                    (click)="toggleSelectAll()"
+                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                ></redaction-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index e82bc8d48..64ac343e5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -6,13 +6,11 @@
     <div class="red-content-inner">
         <div class="content-container">
             <div class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="screenStateService.areAllEntitiesSelected$ | async"
-                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
-                </div>
+                <redaction-round-checkbox
+                    (click)="toggleSelectAll()"
+                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                ></redaction-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index 562efdc83..d58b7a614 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -19,7 +19,7 @@ import { DossiersService } from '../../../dossier/services/dossiers.service';
     providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService]
 })
 export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit {
-    readonly itemSize = 85;
+    readonly itemSize = 80;
     protected readonly _primaryKey = 'dossierName';
     private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 66eefc267..eafd86902 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -34,13 +34,11 @@
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <div class="header-item">
-                    <div class="select-all-container">
-                        <redaction-round-checkbox
-                            (click)="toggleSelectAll()"
-                            [active]="screenStateService.areAllEntitiesSelected$ | async"
-                            [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                        ></redaction-round-checkbox>
-                    </div>
+                    <redaction-round-checkbox
+                        (click)="toggleSelectAll()"
+                        [active]="screenStateService.areAllEntitiesSelected$ | async"
+                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                    ></redaction-round-checkbox>
 
                     <span class="all-caps-label">
                         {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index 8d62c4de0..cee6e3f62 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -37,13 +37,11 @@
     <div class="red-content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
             <div class="header-item">
-                <div class="select-all-container">
-                    <redaction-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="screenStateService.areAllEntitiesSelected$ | async"
-                        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
-                </div>
+                <redaction-round-checkbox
+                    (click)="toggleSelectAll()"
+                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                ></redaction-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
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 227f37394..3b0b92d8f 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
@@ -1,12 +1,23 @@
-<div class="header-item">
+<div [class.selection-enabled]="selectionEnabled" class="header-item">
+    <redaction-round-checkbox
+        (click)="screenStateService.selectEntities()"
+        *ngIf="selectionEnabled"
+        [active]="screenStateService.areAllEntitiesSelected$ | async"
+        [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+    ></redaction-round-checkbox>
+
     <span class="all-caps-label">
         {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
     </span>
 
+    <ng-container *ngIf="bulkActions" [ngTemplateOutlet]="bulkActions"></ng-container>
+
     <redaction-quick-filters></redaction-quick-filters>
 </div>
 
-<div class="table-header" redactionSyncWidth="table-item">
+<div [class.selection-enabled]="selectionEnabled" class="table-header" redactionSyncWidth="table-item">
+    <div *ngIf="selectionEnabled" class="select-oval-placeholder"></div>
+
     <redaction-table-col-name
         *ngFor="let config of tableColConfigs"
         [class]="config.class"
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 7ee399ed3..671e9ad91 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
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
 import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
 import { ScreenStateService } from '@shared/services/screen-state.service';
 
@@ -12,6 +12,8 @@ export class TableHeaderComponent<T> {
     @Input() tableHeaderLabel: string;
     @Input() tableColConfigs: TableColConfig[];
     @Input() hasEmptyColumn = false;
+    @Input() selectionEnabled = false;
+    @Input() bulkActions: TemplateRef<any>;
 
     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 af1f33ec9..2af385c72 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -727,6 +727,9 @@
       "delete": "Delete",
       "download": "Download"
     },
+    "bulk": {
+      "delete": "Delete Selected Downloads"
+    },
     "no-data": {
       "title": "No active downloads."
     },
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
index 41380d7de..8f11626e9 100644
--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -24,4 +24,8 @@
             margin-right: 16px;
         }
     }
+
+    &.selection-enabled {
+        padding-left: 10px;
+    }
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 379d333e6..f3cd96c22 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -349,11 +349,6 @@ section.settings {
     cursor: pointer;
 }
 
-.select-all-container {
-    display: flex;
-    align-items: center;
-}
-
 .mr-8 {
     margin-right: 8px !important;
 }
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 5c6a6c628..ba093c1d9 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -25,6 +25,10 @@
             padding-right: 13px;
         }
     }
+
+    &.selection-enabled redaction-table-col-name > div {
+        padding-left: 10px;
+    }
 }
 
 cdk-virtual-scroll-viewport {