From 73cab2af2de7587d2f29a717fffa2f4804096090 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 20:59:09 -0800
Subject: [PATCH 01/14] Refactor uploads to service, working global dd

---
 src-ui/src/app/app.component.html             | 10 +++-
 src-ui/src/app/app.component.ts               | 48 +++++++++++++++-
 .../upload-file-widget.component.scss         |  4 ++
 .../upload-file-widget.component.ts           | 50 ++---------------
 .../services/upload-documents.service.spec.ts | 16 ++++++
 .../app/services/upload-documents.service.ts  | 56 +++++++++++++++++++
 src-ui/src/theme.scss                         | 33 ++++++++++-
 7 files changed, 166 insertions(+), 51 deletions(-)
 create mode 100644 src-ui/src/app/services/upload-documents.service.spec.ts
 create mode 100644 src-ui/src/app/services/upload-documents.service.ts

diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html
index d9b7dd09b..68c1692b3 100644
--- a/src-ui/src/app/app.component.html
+++ b/src-ui/src/app/app.component.html
@@ -1,3 +1,11 @@
 <app-toasts></app-toasts>
 
-<router-outlet></router-outlet>
+<ngx-file-drop dropZoneClassName="main-dropzone" contentClassName="main-content" [disabled]="!dragDropEnabled"
+(onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">
+    <ng-template ngx-file-drop-content-tmp>
+        <div class="global-dropzone-overlay">
+            <h1 class="display-6">Drop files to begin upload</h1>
+        </div>
+        <router-outlet></router-outlet>
+    </ng-template>
+</ngx-file-drop>
\ No newline at end of file
diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index b21c771ae..374467600 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,9 +1,17 @@
 import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  RendererFactory2,
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'
 import { ToastService } from './services/toast.service'
+import { NgxFileDropEntry } from 'ngx-file-drop'
+import { UploadDocumentsService } from './services/upload-documents.service'
 
 @Component({
   selector: 'app-root',
@@ -15,15 +23,22 @@ export class AppComponent implements OnInit, OnDestroy {
   successSubscription: Subscription
   failedSubscription: Subscription
 
+  private renderer: Renderer2
+  private fileLeaveTimeoutID: any
+
   constructor(
     private settings: SettingsService,
     private consumerStatusService: ConsumerStatusService,
     private toastService: ToastService,
-    private router: Router
+    private router: Router,
+    private uploadDocumentsService: UploadDocumentsService,
+    rendererFactory: RendererFactory2
   ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js'
     this.settings.updateAppearanceSettings()
+
+    this.renderer = rendererFactory.createRenderer(null, null)
   }
 
   ngOnDestroy(): void {
@@ -100,4 +115,33 @@ export class AppComponent implements OnInit, OnDestroy {
         }
       })
   }
+
+  public get dragDropEnabled(): boolean {
+    return !this.router.url.includes('dashboard')
+  }
+
+  public fileOver() {
+    this.renderer.addClass(
+      document.getElementsByClassName('main-content').item(0),
+      'inert'
+    )
+    clearTimeout(this.fileLeaveTimeoutID)
+  }
+
+  public fileLeave() {
+    this.fileLeaveTimeoutID = setTimeout(() => {
+      this.renderer.removeClass(
+        document.getElementsByClassName('main-content').item(0),
+        'inert'
+      )
+    }, 1000)
+  }
+
+  public dropped(files: NgxFileDropEntry[]) {
+    this.renderer.removeClass(
+      document.getElementsByClassName('main-content').item(0),
+      'inert'
+    )
+    this.uploadDocumentsService.uploadFiles(files)
+  }
 }
diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
index c13a7bd47..8f0640f0f 100644
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
@@ -33,3 +33,7 @@ form {
   mix-blend-mode: soft-light;
   pointer-events: none;
 }
+
+.ngx-file-drop__drop-zone--over {
+  background-color: var(--ngx-primary-faded) !important;
+}
\ No newline at end of file
diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
index 6ba6103d3..e2f59a0a4 100644
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
@@ -6,7 +6,7 @@ import {
   FileStatus,
   FileStatusPhase,
 } from 'src/app/services/consumer-status.service'
-import { DocumentService } from 'src/app/services/rest/document.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
 
 const MAX_ALERTS = 5
 
@@ -19,8 +19,8 @@ export class UploadFileWidgetComponent implements OnInit {
   alertsExpanded = false
 
   constructor(
-    private documentService: DocumentService,
-    private consumerStatusService: ConsumerStatusService
+    private consumerStatusService: ConsumerStatusService,
+    private uploadDocumentsService: UploadDocumentsService
   ) {}
 
   getStatus() {
@@ -116,48 +116,6 @@ export class UploadFileWidgetComponent implements OnInit {
   public fileLeave(event) {}
 
   public dropped(files: NgxFileDropEntry[]) {
-    for (const droppedFile of files) {
-      if (droppedFile.fileEntry.isFile) {
-        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry
-        fileEntry.file((file: File) => {
-          let formData = new FormData()
-          formData.append('document', file, file.name)
-          let status = this.consumerStatusService.newFileUpload(file.name)
-
-          status.message = $localize`Connecting...`
-
-          this.documentService.uploadDocument(formData).subscribe(
-            (event) => {
-              if (event.type == HttpEventType.UploadProgress) {
-                status.updateProgress(
-                  FileStatusPhase.UPLOADING,
-                  event.loaded,
-                  event.total
-                )
-                status.message = $localize`Uploading...`
-              } else if (event.type == HttpEventType.Response) {
-                status.taskId = event.body['task_id']
-                status.message = $localize`Upload complete, waiting...`
-              }
-            },
-            (error) => {
-              switch (error.status) {
-                case 400: {
-                  this.consumerStatusService.fail(status, error.error.document)
-                  break
-                }
-                default: {
-                  this.consumerStatusService.fail(
-                    status,
-                    $localize`HTTP error: ${error.status} ${error.statusText}`
-                  )
-                  break
-                }
-              }
-            }
-          )
-        })
-      }
-    }
+    this.uploadDocumentsService.uploadFiles(files)
   }
 }
diff --git a/src-ui/src/app/services/upload-documents.service.spec.ts b/src-ui/src/app/services/upload-documents.service.spec.ts
new file mode 100644
index 000000000..de4f6bb2e
--- /dev/null
+++ b/src-ui/src/app/services/upload-documents.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UploadDocumentsService } from './upload-documents.service';
+
+describe('UploadDocumentsService', () => {
+  let service: UploadDocumentsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UploadDocumentsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/services/upload-documents.service.ts b/src-ui/src/app/services/upload-documents.service.ts
new file mode 100644
index 000000000..84f09ff38
--- /dev/null
+++ b/src-ui/src/app/services/upload-documents.service.ts
@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { HttpEventType } from '@angular/common/http';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { ConsumerStatusService, FileStatusPhase } from './consumer-status.service';
+import { DocumentService } from './rest/document.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UploadDocumentsService {
+
+  constructor(
+    private documentService: DocumentService,
+    private consumerStatusService: ConsumerStatusService
+  ) {
+  }
+
+  uploadFiles(files: NgxFileDropEntry[]) {
+    for (const droppedFile of files) {
+      if (droppedFile.fileEntry.isFile) {
+
+      const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+        fileEntry.file((file: File) => {
+          let formData = new FormData()
+          formData.append('document', file, file.name)
+          let status = this.consumerStatusService.newFileUpload(file.name)
+
+          status.message = $localize`Connecting...`
+
+          this.documentService.uploadDocument(formData).subscribe(event => {
+            if (event.type == HttpEventType.UploadProgress) {
+              status.updateProgress(FileStatusPhase.UPLOADING, event.loaded, event.total)
+              status.message = $localize`Uploading...`
+            } else if (event.type == HttpEventType.Response) {
+              status.taskId = event.body["task_id"]
+              status.message = $localize`Upload complete, waiting...`
+            }
+
+          }, error => {
+            switch (error.status) {
+              case 400: {
+                this.consumerStatusService.fail(status, error.error.document)
+                break;
+              }
+              default: {
+                this.consumerStatusService.fail(status, $localize`HTTP error: ${error.status} ${error.statusText}`)
+                break;
+              }
+            }
+          })
+        });
+      }
+    }
+  }
+
+}
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index cb6ee859a..9e43ad662 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -244,8 +244,37 @@ table.table {
   color: var(--bs-body-color);
 }
 
-.ngx-file-drop__drop-zone--over {
-  background-color: var(--ngx-primary-faded) !important;
+.main-dropzone {
+  height: 100%;
+  width: 100%;
+}
+
+.global-dropzone-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(23, 84, 31, .7);
+  // z-index: $zindex-modal; // 1055
+  z-index: 1055;
+  opacity: 0;
+  pointer-events: none !important;
+  user-select: none !important;
+  text-align: center;
+  padding-top: 25%;
+  transition: opacity 0.2s ease;
+}
+
+.main-dropzone.ngx-file-drop__drop-zone--over {
+  .global-dropzone-overlay {
+    opacity: 1;
+  }
+}
+
+.main-content.inert {
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .alert-danger {

From fde0f4ca0acbdd8f977f6dba34d941c93e5cc025 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 22:35:18 -0800
Subject: [PATCH 02/14] Add initiating toast

---
 src-ui/src/app/app.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index 374467600..3c1be2072 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -143,5 +143,6 @@ export class AppComponent implements OnInit, OnDestroy {
       'inert'
     )
     this.uploadDocumentsService.uploadFiles(files)
+    this.toastService.showInfo($localize`Initiating upload...`, 3000)
   }
 }

From 3acc65ca0dde5c4650274517ec02ee4b3ce821a7 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 22:36:43 -0800
Subject: [PATCH 03/14] Fix broken toast animations & DOM removal

---
 src-ui/src/app/components/common/toasts/toasts.component.html | 2 +-
 src-ui/src/app/components/common/toasts/toasts.component.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html
index 9d4ae6bb6..b79208ebf 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -2,7 +2,7 @@
   *ngFor="let toast of toasts"
   [header]="toast.title" [autohide]="true" [delay]="toast.delay"
   [class]="toast.classname"
-  (hide)="toastService.closeToast(toast)">
+  (hidden)="toastService.closeToast(toast)">
   <p>{{toast.content}}</p>
   <p *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
 </ngb-toast>
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.scss b/src-ui/src/app/components/common/toasts/toasts.component.scss
index 4d1c95fce..d2aaf20b0 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.scss
+++ b/src-ui/src/app/components/common/toasts/toasts.component.scss
@@ -5,3 +5,7 @@
   margin: 0.5em;
   z-index: 1200;
 }
+
+.toast:not(.show) {
+  display: block; // this corrects an ng-bootstrap bug that prevented animations
+}
\ No newline at end of file

From 756263615113df0855a2279fa1e0f2d4350f1a1c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:21:18 -0800
Subject: [PATCH 04/14] Cleaner activation with Angular directives

---
 src-ui/src/app/app.component.html | 10 ++++---
 src-ui/src/app/app.component.ts   | 46 ++++++++++++++-----------------
 src-ui/src/theme.scss             | 23 +++++++++-------
 3 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html
index 68c1692b3..b02d80c40 100644
--- a/src-ui/src/app/app.component.html
+++ b/src-ui/src/app/app.component.html
@@ -3,9 +3,11 @@
 <ngx-file-drop dropZoneClassName="main-dropzone" contentClassName="main-content" [disabled]="!dragDropEnabled"
 (onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">
     <ng-template ngx-file-drop-content-tmp>
-        <div class="global-dropzone-overlay">
-            <h1 class="display-6">Drop files to begin upload</h1>
+        <div class="global-dropzone-overlay fade" [class.show]="fileIsOver" [class.hide]="hidden">
+            <h2>Drop files to begin upload</h2>
+        </div>
+        <div [class.inert]="fileIsOver">
+            <router-outlet></router-outlet>
         </div>
-        <router-outlet></router-outlet>
     </ng-template>
-</ngx-file-drop>
\ No newline at end of file
+</ngx-file-drop>
diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index 3c1be2072..f8c98fbc7 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,11 +1,5 @@
 import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  RendererFactory2,
-} from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'
@@ -23,22 +17,20 @@ export class AppComponent implements OnInit, OnDestroy {
   successSubscription: Subscription
   failedSubscription: Subscription
 
-  private renderer: Renderer2
   private fileLeaveTimeoutID: any
+  fileIsOver: boolean = false
+  hidden: boolean = true
 
   constructor(
     private settings: SettingsService,
     private consumerStatusService: ConsumerStatusService,
     private toastService: ToastService,
     private router: Router,
-    private uploadDocumentsService: UploadDocumentsService,
-    rendererFactory: RendererFactory2
+    private uploadDocumentsService: UploadDocumentsService
   ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js'
     this.settings.updateAppearanceSettings()
-
-    this.renderer = rendererFactory.createRenderer(null, null)
   }
 
   ngOnDestroy(): void {
@@ -121,27 +113,29 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   public fileOver() {
-    this.renderer.addClass(
-      document.getElementsByClassName('main-content').item(0),
-      'inert'
-    )
+    // allows transition
+    setTimeout(() => {
+      this.fileIsOver = true
+    }, 1)
+    this.hidden = false
+    // stop fileLeave timeout
     clearTimeout(this.fileLeaveTimeoutID)
   }
 
-  public fileLeave() {
+  public fileLeave(immediate: boolean = false) {
+    const ms = immediate ? 0 : 500
+
     this.fileLeaveTimeoutID = setTimeout(() => {
-      this.renderer.removeClass(
-        document.getElementsByClassName('main-content').item(0),
-        'inert'
-      )
-    }, 1000)
+      this.fileIsOver = false
+      // await transition completed
+      setTimeout(() => {
+        this.hidden = true
+      }, 150)
+    }, ms)
   }
 
   public dropped(files: NgxFileDropEntry[]) {
-    this.renderer.removeClass(
-      document.getElementsByClassName('main-content').item(0),
-      'inert'
-    )
+    this.fileLeave(true)
     this.uploadDocumentsService.uploadFiles(files)
     this.toastService.showInfo($localize`Initiating upload...`, 3000)
   }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 9e43ad662..e76b31b2b 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -255,24 +255,27 @@ table.table {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(23, 84, 31, .7);
-  // z-index: $zindex-modal; // 1055
-  z-index: 1055;
-  opacity: 0;
+  background-color: rgba(23, 84, 31, .8);
+  z-index: 1055; // $zindex-modal
   pointer-events: none !important;
   user-select: none !important;
   text-align: center;
   padding-top: 25%;
-  transition: opacity 0.2s ease;
-}
 
-.main-dropzone.ngx-file-drop__drop-zone--over {
-  .global-dropzone-overlay {
-    opacity: 1;
+  &.show {
+    opacity: 1 !important;
+  }
+
+  &.hide {
+    display: none;
   }
 }
 
-.main-content.inert {
+.ngx-file-drop__drop-zone--over .global-dropzone-overlay {
+  opacity: 0;
+}
+
+.inert {
   pointer-events: none !important;
   user-select: none !important;
 }

From b03a723c3e64f176d783ac86a041ed221cc3ea0d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:21:36 -0800
Subject: [PATCH 05/14] Fix dark mode alert close button

---
 src-ui/src/theme_dark.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 9e4d64175..c43747b78 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -141,11 +141,11 @@ $border-color-dark-mode: #47494f;
     color: $text-color-dark-mode-accent;
   }
 
-  .close, .modal .btn-close {
+  .close, .modal .btn-close, .alert .btn-close {
     text-shadow: 0 1px 0 #666;
   }
 
-  .modal .btn-close {
+  .modal .btn-close, .alert .btn-close {
     filter: invert(1) grayscale(100%) brightness(200%);
   }
 

From 459e026f1612443c82395876588bc882d724b1db Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 17 Mar 2022 14:06:27 -0700
Subject: [PATCH 06/14] Add translation directive for upload message

---
 src-ui/src/app/app.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html
index b02d80c40..2b050ed3f 100644
--- a/src-ui/src/app/app.component.html
+++ b/src-ui/src/app/app.component.html
@@ -4,7 +4,7 @@
 (onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">
     <ng-template ngx-file-drop-content-tmp>
         <div class="global-dropzone-overlay fade" [class.show]="fileIsOver" [class.hide]="hidden">
-            <h2>Drop files to begin upload</h2>
+            <h2 i18n>Drop files to begin upload</h2>
         </div>
         <div [class.inert]="fileIsOver">
             <router-outlet></router-outlet>

From 0136ba504b5ef2f067fcdf92d10e761553eadf57 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Mar 2022 22:27:56 -0700
Subject: [PATCH 07/14] Delete upload-documents.service.spec.ts

---
 .../services/upload-documents.service.spec.ts    | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src-ui/src/app/services/upload-documents.service.spec.ts

diff --git a/src-ui/src/app/services/upload-documents.service.spec.ts b/src-ui/src/app/services/upload-documents.service.spec.ts
deleted file mode 100644
index de4f6bb2e..000000000
--- a/src-ui/src/app/services/upload-documents.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { UploadDocumentsService } from './upload-documents.service';
-
-describe('UploadDocumentsService', () => {
-  let service: UploadDocumentsService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(UploadDocumentsService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

From db76e1d65f7f8374c554ec554d7f90a77f040f5e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Mar 2022 23:02:48 -0700
Subject: [PATCH 08/14] code formatting

---
 .../app/services/upload-documents.service.ts  | 70 +++++++++++--------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/src-ui/src/app/services/upload-documents.service.ts b/src-ui/src/app/services/upload-documents.service.ts
index 84f09ff38..ba97f0d9c 100644
--- a/src-ui/src/app/services/upload-documents.service.ts
+++ b/src-ui/src/app/services/upload-documents.service.ts
@@ -1,25 +1,25 @@
-import { Injectable } from '@angular/core';
-import { HttpEventType } from '@angular/common/http';
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
-import { ConsumerStatusService, FileStatusPhase } from './consumer-status.service';
-import { DocumentService } from './rest/document.service';
+import { Injectable } from '@angular/core'
+import { HttpEventType } from '@angular/common/http'
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'
+import {
+  ConsumerStatusService,
+  FileStatusPhase,
+} from './consumer-status.service'
+import { DocumentService } from './rest/document.service'
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class UploadDocumentsService {
-
   constructor(
     private documentService: DocumentService,
     private consumerStatusService: ConsumerStatusService
-  ) {
-  }
+  ) {}
 
   uploadFiles(files: NgxFileDropEntry[]) {
     for (const droppedFile of files) {
       if (droppedFile.fileEntry.isFile) {
-
-      const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry
         fileEntry.file((file: File) => {
           let formData = new FormData()
           formData.append('document', file, file.name)
@@ -27,30 +27,38 @@ export class UploadDocumentsService {
 
           status.message = $localize`Connecting...`
 
-          this.documentService.uploadDocument(formData).subscribe(event => {
-            if (event.type == HttpEventType.UploadProgress) {
-              status.updateProgress(FileStatusPhase.UPLOADING, event.loaded, event.total)
-              status.message = $localize`Uploading...`
-            } else if (event.type == HttpEventType.Response) {
-              status.taskId = event.body["task_id"]
-              status.message = $localize`Upload complete, waiting...`
-            }
-
-          }, error => {
-            switch (error.status) {
-              case 400: {
-                this.consumerStatusService.fail(status, error.error.document)
-                break;
+          this.documentService.uploadDocument(formData).subscribe({
+            next: (event) => {
+              if (event.type == HttpEventType.UploadProgress) {
+                status.updateProgress(
+                  FileStatusPhase.UPLOADING,
+                  event.loaded,
+                  event.total
+                )
+                status.message = $localize`Uploading...`
+              } else if (event.type == HttpEventType.Response) {
+                status.taskId = event.body['task_id']
+                status.message = $localize`Upload complete, waiting...`
               }
-              default: {
-                this.consumerStatusService.fail(status, $localize`HTTP error: ${error.status} ${error.statusText}`)
-                break;
+            },
+            error: (error) => {
+              switch (error.status) {
+                case 400: {
+                  this.consumerStatusService.fail(status, error.error.document)
+                  break
+                }
+                default: {
+                  this.consumerStatusService.fail(
+                    status,
+                    $localize`HTTP error: ${error.status} ${error.statusText}`
+                  )
+                  break
+                }
               }
-            }
+            },
           })
-        });
+        })
       }
     }
   }
-
 }

From 32f6932faf92c535fbd23df94b1d8b7c325ee3b2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Mar 2022 23:03:44 -0700
Subject: [PATCH 09/14] fix overlay background color in dark mode

---
 .../upload-file-widget/upload-file-widget.component.scss      | 4 ++--
 src-ui/src/theme.scss                                         | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
index 8f0640f0f..47dbff83e 100644
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
@@ -34,6 +34,6 @@ form {
   pointer-events: none;
 }
 
-.ngx-file-drop__drop-zone--over {
+::ng-deep .ngx-file-drop__drop-zone--over {
   background-color: var(--ngx-primary-faded) !important;
-}
\ No newline at end of file
+}
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index e76b31b2b..a6c3de95d 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -247,6 +247,10 @@ table.table {
 .main-dropzone {
   height: 100%;
   width: 100%;
+
+  &.ngx-file-drop__drop-zone--over {
+    background-color: transparent !important;
+  }
 }
 
 .global-dropzone-overlay {

From 3e49f938164623693ece3281ea84275d386dc924 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 5 Apr 2022 13:13:43 -0700
Subject: [PATCH 10/14] 100vh body height, fix filter editor horizontal
 overflow

---
 .../app/components/document-list/document-list.component.html | 4 ++--
 .../app/components/document-list/document-list.component.scss | 4 ++++
 .../document-list/filter-editor/filter-editor.component.html  | 2 +-
 src-ui/src/theme.scss                                         | 4 ++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index c7d53a848..1ce61f931 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -75,7 +75,7 @@
 
 </app-page-header>
 
-<div class="sticky-top py-2 mt-n2 mt-sm-n3 py-sm-4 bg-body mx-n3 px-3">
+<div class="row sticky-top pt-4 pb-2 pb-lg-4 bg-body">
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
@@ -185,7 +185,7 @@
     </tbody>
   </table>
 
-  <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
+  <div class="row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
     <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
   </div>
   <div *ngIf="list.documents?.length > 15" class="mt-3">
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 09bffc731..abac427da 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -1,5 +1,9 @@
 @import "/src/theme";
 
+::ng-deep app-document-list app-page-header > div.mb-3 {
+  margin-bottom: 0 !important;
+}
+
 tr {
   user-select: none;
 }
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 61214d085..6280cff10 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -50,7 +50,7 @@
      </div>
    </div>
    <div class="w-100 d-xl-none"></div>
-   <div class="col col-xl-auto mb-2 mb-xl-0">
+   <div class="col col-xl-auto">
      <button class="btn btn-link btn-sm px-0 mx-0 ms-xl-n3" [disabled]="!rulesModified" (click)="resetSelected()">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index a6c3de95d..667809059 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -15,6 +15,10 @@
   --ngx-focus-alpha: 0.3;
 }
 
+body {
+  height: 100vh;
+}
+
 svg.logo {
   .leaf {
     fill: var(--bs-primary) !important;

From 77b9988d0583eccb4f3b050f43dcac3361763dfe Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 20:59:09 -0800
Subject: [PATCH 11/14] Refactor uploads to service, working global dd

---
 src-ui/src/app/app.component.ts                  |  8 +++++++-
 .../services/upload-documents.service.spec.ts    | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src-ui/src/app/services/upload-documents.service.spec.ts

diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index f8c98fbc7..e0581ca32 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,5 +1,11 @@
 import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  RendererFactory2,
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'
diff --git a/src-ui/src/app/services/upload-documents.service.spec.ts b/src-ui/src/app/services/upload-documents.service.spec.ts
new file mode 100644
index 000000000..de4f6bb2e
--- /dev/null
+++ b/src-ui/src/app/services/upload-documents.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UploadDocumentsService } from './upload-documents.service';
+
+describe('UploadDocumentsService', () => {
+  let service: UploadDocumentsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UploadDocumentsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

From bec6c4511cd3b87d3cc506cb61c91db9d335c681 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:21:18 -0800
Subject: [PATCH 12/14] Cleaner activation with Angular directives

---
 src-ui/src/app/app.component.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index e0581ca32..f8c98fbc7 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -1,11 +1,5 @@
 import { SettingsService, SETTINGS_KEYS } from './services/settings.service'
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  RendererFactory2,
-} from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { ConsumerStatusService } from './services/consumer-status.service'

From fb76b72787c77face7bd0361f2a90084b0308a5c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Mar 2022 22:27:56 -0700
Subject: [PATCH 13/14] Delete upload-documents.service.spec.ts

---
 .../services/upload-documents.service.spec.ts    | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src-ui/src/app/services/upload-documents.service.spec.ts

diff --git a/src-ui/src/app/services/upload-documents.service.spec.ts b/src-ui/src/app/services/upload-documents.service.spec.ts
deleted file mode 100644
index de4f6bb2e..000000000
--- a/src-ui/src/app/services/upload-documents.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { UploadDocumentsService } from './upload-documents.service';
-
-describe('UploadDocumentsService', () => {
-  let service: UploadDocumentsService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(UploadDocumentsService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

From f2c83f51de0e9a50f6f1154037cf6dcc7cc05b39 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 5 Apr 2022 13:29:51 -0700
Subject: [PATCH 14/14] Cleanup file upload susbcriptions

---
 .../app/services/upload-documents.service.ts  | 66 +++++++++++--------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src-ui/src/app/services/upload-documents.service.ts b/src-ui/src/app/services/upload-documents.service.ts
index ba97f0d9c..5e7ef7fbe 100644
--- a/src-ui/src/app/services/upload-documents.service.ts
+++ b/src-ui/src/app/services/upload-documents.service.ts
@@ -6,11 +6,14 @@ import {
   FileStatusPhase,
 } from './consumer-status.service'
 import { DocumentService } from './rest/document.service'
+import { Subscription } from 'rxjs'
 
 @Injectable({
   providedIn: 'root',
 })
 export class UploadDocumentsService {
+  private uploadSubscriptions: Array<Subscription> = []
+
   constructor(
     private documentService: DocumentService,
     private consumerStatusService: ConsumerStatusService
@@ -27,36 +30,43 @@ export class UploadDocumentsService {
 
           status.message = $localize`Connecting...`
 
-          this.documentService.uploadDocument(formData).subscribe({
-            next: (event) => {
-              if (event.type == HttpEventType.UploadProgress) {
-                status.updateProgress(
-                  FileStatusPhase.UPLOADING,
-                  event.loaded,
-                  event.total
-                )
-                status.message = $localize`Uploading...`
-              } else if (event.type == HttpEventType.Response) {
-                status.taskId = event.body['task_id']
-                status.message = $localize`Upload complete, waiting...`
-              }
-            },
-            error: (error) => {
-              switch (error.status) {
-                case 400: {
-                  this.consumerStatusService.fail(status, error.error.document)
-                  break
-                }
-                default: {
-                  this.consumerStatusService.fail(
-                    status,
-                    $localize`HTTP error: ${error.status} ${error.statusText}`
+          this.uploadSubscriptions[file.name] = this.documentService
+            .uploadDocument(formData)
+            .subscribe({
+              next: (event) => {
+                if (event.type == HttpEventType.UploadProgress) {
+                  status.updateProgress(
+                    FileStatusPhase.UPLOADING,
+                    event.loaded,
+                    event.total
                   )
-                  break
+                  status.message = $localize`Uploading...`
+                } else if (event.type == HttpEventType.Response) {
+                  status.taskId = event.body['task_id']
+                  status.message = $localize`Upload complete, waiting...`
+                  this.uploadSubscriptions[file.name]?.complete()
                 }
-              }
-            },
-          })
+              },
+              error: (error) => {
+                switch (error.status) {
+                  case 400: {
+                    this.consumerStatusService.fail(
+                      status,
+                      error.error.document
+                    )
+                    break
+                  }
+                  default: {
+                    this.consumerStatusService.fail(
+                      status,
+                      $localize`HTTP error: ${error.status} ${error.statusText}`
+                    )
+                    break
+                  }
+                }
+                this.uploadSubscriptions[file.name]?.complete()
+              },
+            })
         })
       }
     }