Refactor uploads to service, working global dd

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)
+  }
 }