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

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -1,29 +1,46 @@
 <pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
-  <pngx-logo extra_classes="d-none d-md-block"></pngx-logo>
+  <pngx-logo extra_classes="d-none d-md-block mt-n2 me-1" height="3.5rem"></pngx-logo>
 </pngx-page-header>
 
 <div class="row">
-  <div class="col-lg-8">
-    <div tourAnchor="tour.dashboard">
-      <ng-container *ngIf="savedViewService.loading">
+  <div class="col-auto col-lg-8 col-xl-9 mb-4">
+    <div class="row row-cols-1 g-4" tourAnchor="tour.dashboard"
+      dndDropzone
+      [dndDisableIf]="settingsService.globalDropzoneActive"
+      dndEffectAllowed="move"
+      (dndDrop)="onDrop($event)"
+    >
+      <div *ngIf="savedViewService.loading" class="col">
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
         <ng-container i18n>Loading...</ng-container>
+      </div>
+
+      <div *ngIf="settingsService.offerTour()" class="col">
+        <pngx-welcome-widget (dismiss)="completeTour()"></pngx-welcome-widget>
+      </div>
+
+      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+        <div *ngFor="let v of dashboardViews" class="col">
+          <pngx-saved-view-widget
+            [savedView]="v"
+            (dndStart)="onDragStart($event)"
+            (dndMoved)="onDragged(v)"
+            (dndEnd)="onDragEnd($event)"
+            >
+          </pngx-saved-view-widget>
+        </div>
       </ng-container>
-
-      <pngx-welcome-widget *ngIf="settingsService.offerTour()" (dismiss)="completeTour()"></pngx-welcome-widget>
-
-      <div *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-        <ng-container *ngFor="let v of savedViewService.dashboardViews; first as isFirst">
-          <pngx-saved-view-widget [savedView]="v"></pngx-saved-view-widget>
-        </ng-container>
+      <div class="p-1" dndPlaceholderRef></div>
+    </div>
+  </div>
+  <div class="col-auto col-lg-4 col-xl-3">
+    <div class="row row-cols-1 g-4">
+      <div class="col">
+        <pngx-statistics-widget></pngx-statistics-widget>
+      </div>
+      <div class="col">
+        <pngx-upload-file-widget></pngx-upload-file-widget>
       </div>
     </div>
   </div>
-  <div class="col-lg-4">
-
-    <pngx-statistics-widget></pngx-statistics-widget>
-
-    <pngx-upload-file-widget></pngx-upload-file-widget>
-
-  </div>
 </div>