Add drop file functionality on import (#2323)

* Add drop file functionality on import

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support to drop a file in the import activities dialog
+
 ### Changed
 
 - Harmonized the logger output: <symbol> (<dataSource>)

apps/client/src/app/directives/file-drop/file-drop.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[gfFileDrop]'
+})
+export class FileDropDirective {
+  @Output() filesDropped = new EventEmitter<FileList>();
+
+  @HostListener('dragenter', ['$event']) onDragEnter(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  @HostListener('drop', ['$event']) onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Prevent the browser's default behavior for handling the file drop
+    event.dataTransfer.dropEffect = 'copy';
+
+    this.filesDropped.emit(event.dataTransfer.files);
+  }
+}

apps/client/src/app/directives/file-drop/file-drop.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { FileDropDirective } from './file-drop.directive';
+
+@NgModule({
+  declarations: [FileDropDirective],
+  exports: [FileDropDirective]
+})
+export class GfFileDropModule {}

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -137,6 +137,20 @@ export class ImportActivitiesDialog implements OnDestroy {
     }
   }
 
+  public onFilesDropped({
+    files,
+    stepper
+  }: {
+    files: FileList;
+    stepper: MatStepper;
+  }): void {
+    if (files.length === 0) {
+      return;
+    }
+
+    this.handleFile({ stepper, file: files[0] });
+  }
+
   public onImportStepChange(event: StepperSelectionEvent) {
     if (event.selectedIndex === ImportStep.UPLOAD_FILE) {
       this.importStep = ImportStep.UPLOAD_FILE;
@@ -175,16 +189,39 @@ export class ImportActivitiesDialog implements OnDestroy {
     aStepper.reset();
   }
 
-  public onSelectFile(aStepper: MatStepper) {
+  public onSelectFile(stepper: MatStepper) {
     const input = document.createElement('input');
     input.accept = 'application/JSON, .csv';
     input.type = 'file';
 
     input.onchange = (event) => {
-      this.snackBar.open('⏳ ' + $localize`Validating data...`);
-
       // Getting the file reference
       const file = (event.target as HTMLInputElement).files[0];
+      this.handleFile({ file, stepper });
+    };
+
+    input.click();
+  }
+
+  public updateSelection(activities: Activity[]) {
+    this.selectedActivities = activities.filter(({ error }) => {
+      return !error;
+    });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private async handleFile({
+    file,
+    stepper
+  }: {
+    file: File;
+    stepper: MatStepper;
+  }): Promise<void> {
+    this.snackBar.open('⏳ ' + $localize`Validating data...`);
 
     // Setting up the reader
     const reader = new FileReader();
@@ -261,25 +298,11 @@ export class ImportActivitiesDialog implements OnDestroy {
         this.importStep = ImportStep.SELECT_ACTIVITIES;
         this.snackBar.dismiss();
 
-          aStepper.next();
+        stepper.next();
 
         this.changeDetectorRef.markForCheck();
       }
     };
-    };
-
-    input.click();
-  }
-
-  public updateSelection(activities: Activity[]) {
-    this.selectedActivities = activities.filter(({ error }) => {
-      return !error;
-    });
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
   }
 
   private handleImportError({

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -70,15 +70,23 @@
         <ng-template #selectFile>
           <div class="d-flex flex-column justify-content-center">
             <button
-              class="py-4"
+              class="drop-area p-4 text-center text-muted"
-              color="primary"
+              gfFileDrop
-              mat-stroked-button
               (click)="onSelectFile(stepper)"
+              (filesDropped)="onFilesDropped({stepper, files: $event})"
+            >
+              <div
+                class="align-items-center d-flex flex-column justify-content-center"
               >
-              <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+                <ion-icon
-              <span i18n>Choose File</span>
+                  class="cloud-icon"
+                  name="cloud-upload-outline"
+                ></ion-icon>
+                <span i18n>Choose or drop a file here</span>
+              </div>
             </button>
-            <p class="mb-0 mt-4 text-center">
+            <p class="mb-0 mt-3 text-center">
+              <small>
                 <span class="mr-1" i18n
                   >The following file formats are supported:</span
                 >
@@ -93,6 +101,7 @@
                   target="_blank"
                   >JSON</a
                 >
+              </small>
             </p>
           </div>
         </ng-template>
@@ -109,7 +118,7 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
+        <ng-container *ngIf="errorMessages?.length === 0; else errorMessage">
           <gf-activities-table
             *ngIf="importStep === 1"
             [activities]="activities"

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts

@@ -10,6 +10,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 
@@ -23,6 +24,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
+    GfFileDropModule,
     GfSymbolModule,
     MatButtonModule,
     MatDialogModule,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -32,4 +32,32 @@
     right: 1.5rem;
     top: calc(50% - 10px);
   }
+
+  .drop-area {
+    background-color: rgba(var(--palette-foreground-base), 0.02);
+    border: 1px dashed
+      rgba(
+        var(--palette-foreground-divider),
+        var(--palette-foreground-divider-alpha)
+      );
+    border-radius: 0.25rem;
+
+    &:hover {
+      border-color: rgba(var(--palette-primary-500), 1) !important;
+      color: rgba(var(--palette-primary-500), 1);
+    }
+
+    .cloud-icon {
+      font-size: 2.5rem;
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  .drop-area {
+    border-color: rgba(
+      var(--palette-foreground-divider-dark),
+      var(--palette-foreground-divider-alpha-dark)
+    );
+  }
 }

apps/client/src/styles.scss

@@ -430,6 +430,11 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-stepper-vertical,
+.mat-stepper-horizontal {
+  background: transparent !important;
+}
+
 .mdc-button {
   &.mat-accent,
   &.mat-primary {