Merge pull request #283 from paperless-ngx/feature-global-dragdrop

Feature: global drag'n'drop

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>

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

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;
 }
+
+::ng-deep .ngx-file-drop__drop-zone--over {
+  background-color: var(--ngx-primary-faded) !important;
+}

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

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">

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;
 }

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"/>