Drag and drop is working

fairhopeweb · Apr 7, 2019 · 6bcdb88 · 6bcdb88
1 parent 4751876
commit 6bcdb88
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 26 deletions.
diff --git a/src/app/components/collection/collection.component.html b/src/app/components/collection/collection.component.html
@@ -77,7 +77,8 @@ <h3>{{ 'MainPage.Notebooks' | translate }}</h3>
                     </ng-template>
                     <notes-component [selectedNotebook]="selectedNotebook" [componentCategory]="allCategory"
                         [categoryChangedSubject]="tabChangedSubject" (notesCount)="onNotesCountChanged($event)"
-                        (selectedNoteOutput)="onSelectedNoteChanged($event)"></notes-component>
+                        (selectedNoteOutput)="onSelectedNoteChanged($event)" (drop)="notesDrop($event)"
+                        (dragover)="notesDragOver($event)"></notes-component>
                 </mat-tab>
                 <mat-tab>
                     <ng-template mat-tab-label>
@@ -86,7 +87,8 @@ <h3>{{ 'MainPage.Notebooks' | translate }}</h3>
                     </ng-template>
                     <notes-component [selectedNotebook]="selectedNotebook" [componentCategory]="todayCategory"
                         [categoryChangedSubject]="tabChangedSubject" (notesCount)="onNotesCountChanged($event)"
-                        (selectedNoteOutput)="onSelectedNoteChanged($event)"></notes-component>
+                        (selectedNoteOutput)="onSelectedNoteChanged($event)" (drop)="notesDrop($event)"
+                        (dragover)="notesDragOver($event)"></notes-component>
                 </mat-tab>
                 <mat-tab>
                     <ng-template mat-tab-label>
@@ -95,7 +97,8 @@ <h3>{{ 'MainPage.Notebooks' | translate }}</h3>
                     </ng-template>
                     <notes-component [selectedNotebook]="selectedNotebook" [componentCategory]="yesterdayCategory"
                         [categoryChangedSubject]="tabChangedSubject" (notesCount)="onNotesCountChanged($event)"
-                        (selectedNoteOutput)="onSelectedNoteChanged($event)"></notes-component>
+                        (selectedNoteOutput)="onSelectedNoteChanged($event)" (drop)="notesDrop($event)"
+                        (dragover)="notesDragOver($event)"></notes-component>
                 </mat-tab>
                 <mat-tab>
                     <ng-template mat-tab-label>
@@ -104,7 +107,8 @@ <h3>{{ 'MainPage.Notebooks' | translate }}</h3>
                     </ng-template>
                     <notes-component [selectedNotebook]="selectedNotebook" [componentCategory]="thisWeekCategory"
                         [categoryChangedSubject]="tabChangedSubject" (notesCount)="onNotesCountChanged($event)"
-                        (selectedNoteOutput)="onSelectedNoteChanged($event)"></notes-component>
+                        (selectedNoteOutput)="onSelectedNoteChanged($event)" (drop)="notesDrop($event)"
+                        (dragover)="notesDragOver($event)"></notes-component>
                 </mat-tab>
                 <mat-tab>
                     <ng-template mat-tab-label>
@@ -113,7 +117,8 @@ <h3>{{ 'MainPage.Notebooks' | translate }}</h3>
                     </ng-template>
                     <notes-component [selectedNotebook]="selectedNotebook" [componentCategory]="markedCategory"
                         [categoryChangedSubject]="tabChangedSubject" (notesCount)="onNotesCountChanged($event)"
-                        (selectedNoteOutput)="onSelectedNoteChanged($event)"></notes-component>
+                        (selectedNoteOutput)="onSelectedNoteChanged($event)" (drop)="notesDrop($event)"
+                        (dragover)="notesDragOver($event)"></notes-component>
                 </mat-tab>
             </mat-tab-group>
         </div>

diff --git a/src/app/components/collection/collection.component.ts b/src/app/components/collection/collection.component.ts
@@ -341,6 +341,21 @@ export class CollectionComponent implements OnInit, OnDestroy {
     }
   }
 
+  public async notesDrop(event: any): Promise<void> {
+    event.preventDefault();
+    let droppedFilesPaths: string[] = this.fileService.getDroppedFilesPaths(event);
+
+    if (this.fileService.isDroppingFiles(event)) {
+      // Dropping files
+      let pathsOfDroppedFiles: string[] = this.fileService.getDroppedFilesPaths(event);
+      await this.importNoteFilesAsync(pathsOfDroppedFiles, this.selectedNotebook);
+    }
+  }
+
+  public notesDragOver(event: any): void {
+    event.preventDefault();
+  }
+
   private async importNoteFilesAsync(filePaths: string[], notebook: Notebook): Promise<void> {
     let noteFilePaths: string[] = this.fileService.getNoteFilePaths(filePaths);
 

diff --git a/src/app/components/notes/notes.component.html b/src/app/components/notes/notes.component.html
@@ -7,12 +7,12 @@
         <div class="drag-image-text mx-1">{{ draggedNote?.title | truncate: 30 : true }}</div>
     </div>
     <!-- Notes list -->
-    <mat-selection-list class="notes-list" *ngIf="canShowList" (drop)="drop($event)" (dragover)="dragOver($event)">
+    <mat-selection-list class="notes-list" *ngIf="canShowList">
         <cdk-virtual-scroll-viewport itemSize="48">
             <mat-list-option [ngClass]="{'selected-note':note === selectedNote }" *cdkVirtualFor="let note of notes"
                 role="option">
                 <div class="note-item no-select px-2" (dblclick)="openNote()" (click)="setSelectedNote(note)"
-                    draggable="true" (dragstart)="drag($event, note)">
+                    draggable="true" (dragstart)="dragStart($event, note)">
                     <div class="note-item-icon">
                         <img class="note-item-icon-pen" src="./assets/images/pencil_256x256.svg">
                     </div>

diff --git a/src/app/components/notes/notes.component.ts b/src/app/components/notes/notes.component.ts
@@ -70,10 +70,6 @@ export class NotesComponent implements OnInit, OnDestroy {
     }
 
     public async ngOnInit(): Promise<void> {
-        // Drag image
-        // this.dragImage = document.createElement("img");
-        // this.dragImage.src = "assets/icons/png/64x64.png";
-
         // Workaround for auto reload
         await this.collectionService.initializeAsync();
 
@@ -172,23 +168,9 @@ export class NotesComponent implements OnInit, OnDestroy {
         }
     }
 
-    public drag(event: any, note: Note): void {
-        //event.dataTransfer.setDragImage(this.dragImage, 0, 0);
+    public dragStart(event: any, note: Note): void {
         this.draggedNote = note;
         event.dataTransfer.setDragImage(document.getElementById('drag-image'), -10, -10);
         event.dataTransfer.setData('text', note.id);
     }
-
-    public drop(event: any): void {
-        event.preventDefault();
-
-        let pathsOfDroppedFiles: string[] = this.fileService.getDroppedFilesPaths(event);
-
-        // TODO
-    }
-
-    public dragOver(event: any): void {
-        // Prevent default behavior (Prevent file from being opened)
-        event.preventDefault();
-    }
 }