Enhancement: dashboard improvements, drag-n-drop reorder dashboard views (#4252)

* Updated dashboard * Make entire screen dropzone on dashboard too * Floating upload widget status alerts * Visual tweaks: spacing, borders * Better empty view widget * Support drag + drop reorder of dashboard saved views * Update messages.xlf * Disable dashbaord dnd if global dnd active * Remove ngx-file-drop dep, rebuild file-drop & upload files widget * Revert custom file drop implementation * Try patch-package fix * Simplify dropzone transitions to make more reliable * Update messages.xlf * Update dashboard.spec.ts * Fix coverage
2025-08-10 00:18:57 +00:00 · 2023-09-28 10:18:12 -07:00
parent 96176589ca
commit 6973691cce
45 changed files with 1715 additions and 534 deletions
--- a/src-ui/src/app/components/file-drop/file-drop.component.ts
+++ b/src-ui/src/app/components/file-drop/file-drop.component.ts
@@ -0,0 +1,98 @@
+import { Component, HostListener, ViewChild } from '@angular/core'
+import { NgxFileDropComponent, NgxFileDropEntry } from 'ngx-file-drop'
+import {
+  PermissionsService,
+  PermissionAction,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+
+@Component({
+  selector: 'pngx-file-drop',
+  templateUrl: './file-drop.component.html',
+  styleUrls: ['./file-drop.component.scss'],
+})
+export class FileDropComponent {
+  private fileLeaveTimeoutID: any
+  fileIsOver: boolean = false
+  hidden: boolean = true
+
+  constructor(
+    private settings: SettingsService,
+    private toastService: ToastService,
+    private uploadDocumentsService: UploadDocumentsService,
+    private permissionsService: PermissionsService
+  ) {}
+
+  public get dragDropEnabled(): boolean {
+    return (
+      this.settings.globalDropzoneEnabled &&
+      this.permissionsService.currentUserCan(
+        PermissionAction.Add,
+        PermissionType.Document
+      )
+    )
+  }
+
+  @ViewChild('ngxFileDrop') ngxFileDrop: NgxFileDropComponent
+
+  @HostListener('dragover', ['$event ']) onDragOver(event: DragEvent) {
+    if (!this.dragDropEnabled) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    this.settings.globalDropzoneActive = true
+    // allows transition
+    setTimeout(() => {
+      this.fileIsOver = true
+    }, 1)
+    this.hidden = false
+    // stop fileLeave timeout
+    clearTimeout(this.fileLeaveTimeoutID)
+  }
+
+  @HostListener('dragleave', ['$event']) public onDragLeave(
+    event: DragEvent,
+    immediate: boolean = false
+  ) {
+    if (!this.dragDropEnabled) return
+    event?.preventDefault()
+    event?.stopImmediatePropagation()
+    this.settings.globalDropzoneActive = false
+
+    const ms = immediate ? 0 : 500
+
+    this.fileLeaveTimeoutID = setTimeout(() => {
+      this.fileIsOver = false
+      // await transition completed
+      setTimeout(() => {
+        this.hidden = true
+      }, 150)
+    }, ms)
+  }
+
+  @HostListener('drop', ['$event']) public onDrop(event: DragEvent) {
+    if (!this.dragDropEnabled) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    // pass event onto ngx-file-drop to handle files
+    this.ngxFileDrop.dropFiles(event)
+    this.onDragLeave(event, true)
+  }
+
+  public dropped(files: NgxFileDropEntry[]) {
+    this.uploadDocumentsService.onNgxFileDrop(files)
+    if (files.length > 0)
+      this.toastService.showInfo($localize`Initiating upload...`, 3000)
+  }
+
+  @HostListener('window:blur', ['$event']) public onWindowBlur() {
+    if (this.fileIsOver) this.onDragLeave(null)
+  }
+
+  @HostListener('document:visibilitychange', ['$event'])
+  public onVisibilityChange() {
+    if (document.hidden && this.fileIsOver) this.onDragLeave(null)
+  }
+}