From a1faf5b8156cf57b318578c1ea8bca0caa557c58 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Mon, 1 Feb 2021 23:35:31 +0200
Subject: [PATCH] Improved dld screen

---
 .../app/screens/base-screen/base-screen.component.html |  6 +-----
 .../app/screens/base-screen/base-screen.component.ts   |  6 ++++++
 .../downloads-list-screen.component.html               | 10 +++++-----
 .../src/app/upload-download/file-download.service.ts   |  1 +
 .../src/app/upload-download/status-overlay.service.ts  |  4 ++++
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
index 9c4f1885d..7d44af788 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@@ -69,11 +69,7 @@
         </div>
         <div class="menu right flex-2">
             <redaction-notifications class="mr-8" *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
-            <redaction-user-button
-                [user]="user"
-                [matMenuTriggerFor]="userMenu"
-                [showDot]="fileDownloadService.pendingDownloads.length > 0"
-            ></redaction-user-button>
+            <redaction-user-button [user]="user" [matMenuTriggerFor]="userMenu" [showDot]="showPendingDownloadsDot"></redaction-user-button>
             <mat-menu #userMenu="matMenu">
                 <button
                     *ngIf="permissionsService.isManager()"
diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
index 6449be038..4d40a3b1b 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 import { AppConfigKey, AppConfigService } from '../../app-config/app-config.service';
 import { Title } from '@angular/platform-browser';
 import { FileDownloadService } from '../../upload-download/file-download.service';
+import { StatusOverlayService } from '../../upload-download/status-overlay.service';
 
 @Component({
     selector: 'redaction-base-screen',
@@ -27,6 +28,7 @@ export class BaseScreenComponent {
         public readonly userPreferenceService: UserPreferenceService,
         public readonly titleService: Title,
         public readonly fileDownloadService: FileDownloadService,
+        private readonly _statusOverlayService: StatusOverlayService,
         private readonly _appConfigService: AppConfigService,
         private readonly _router: Router,
         private readonly _languageService: LanguageService,
@@ -45,6 +47,10 @@ export class BaseScreenComponent {
         return !this._projectsView;
     }
 
+    get showPendingDownloadsDot() {
+        return this.fileDownloadService.pendingDownloads.length > 0 && !this._statusOverlayService.isDownloadOverlayOpen;
+    }
+
     logout() {
         this._userService.logout();
     }
diff --git a/apps/red-ui/src/app/screens/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/screens/downloads-list-screen/downloads-list-screen.component.html
index 81cf1a500..7d3d35e1d 100644
--- a/apps/red-ui/src/app/screens/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/screens/downloads-list-screen/downloads-list-screen.component.html
@@ -15,7 +15,6 @@
 
             <div [class.no-data]="noData" class="table-header" redactionSyncWidth="table-item">
                 <redaction-table-col-name label="downloads-list.table-col-names.name"></redaction-table-col-name>
-                <redaction-table-col-name label="downloads-list.table-col-names.type"></redaction-table-col-name>
                 <redaction-table-col-name label="downloads-list.table-col-names.date"></redaction-table-col-name>
                 <redaction-table-col-name label="downloads-list.table-col-names.status"></redaction-table-col-name>
                 <div></div>
@@ -30,9 +29,6 @@
                     <div>
                         <div class="table-item-title heading">{{ download.filename }}</div>
                     </div>
-                    <div>
-                        {{ download.downloadDetails | json }}
-                    </div>
                     <div>
                         <div class="small-label">
                             {{ download.creationDate | date: 'd MMM. yyyy, hh:mm a' }}
@@ -46,7 +42,7 @@
                     <div class="actions-container">
                         <div class="action-buttons">
                             <redaction-circle-button
-                                *ngIf="download.status === 'READY'"
+                                *ngIf="download.status === 'READY' && !download.inProgress"
                                 (action)="downloadItem(download)"
                                 tooltip="downloads-list.actions.download"
                                 tooltipPosition="before"
@@ -54,6 +50,10 @@
                                 icon="red:download"
                             >
                             </redaction-circle-button>
+
+                            <ng-container *ngIf="download.inProgress">
+                                <mat-spinner diameter="15"></mat-spinner>
+                            </ng-container>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/upload-download/file-download.service.ts b/apps/red-ui/src/app/upload-download/file-download.service.ts
index d21882ae1..8bb28a262 100644
--- a/apps/red-ui/src/app/upload-download/file-download.service.ts
+++ b/apps/red-ui/src/app/upload-download/file-download.service.ts
@@ -77,6 +77,7 @@ export class FileDownloadService {
             .subscribe(
                 (response) => {
                     download(response, status.filename);
+                    status.inProgress = false;
                     setTimeout(() => {
                         this.inProgressDownloads.delete(status.storageId);
                     }, 1000);
diff --git a/apps/red-ui/src/app/upload-download/status-overlay.service.ts b/apps/red-ui/src/app/upload-download/status-overlay.service.ts
index 62614d679..274ae612e 100644
--- a/apps/red-ui/src/app/upload-download/status-overlay.service.ts
+++ b/apps/red-ui/src/app/upload-download/status-overlay.service.ts
@@ -43,4 +43,8 @@ export class StatusOverlayService {
             this._downloadStatusOverlayRef.attach(component);
         }
     }
+
+    get isDownloadOverlayOpen() {
+        return this._downloadStatusOverlayRef && this._downloadStatusOverlayRef.hasAttached();
+    }
 }