feat(bookmarks): make sorting via drag and drop work #54

src/app/features/bookmark/bookmark-bar/bookmark-bar.component.ts

@@ -6,7 +6,6 @@ import { Bookmark } from '../bookmark.model';
 import { fadeAnimation } from '../../../ui/animations/fade.ani';
 import { DragulaService } from 'ng2-dragula';
 import { Subscription } from 'rxjs';
-import { Task } from '../../tasks/task.model';
 
 @Component({
   selector: 'bookmark-bar',
@@ -17,7 +16,7 @@ import { Task } from '../../tasks/task.model';
 })
 export class BookmarkBarComponent implements OnDestroy {
   isDragOver = false;
-  isEditMode = true;
+  isEditMode = false;
   dragEnterTarget: HTMLElement;
   LIST_ID = 'BOOKMARKS';
 
@@ -28,19 +27,18 @@ export class BookmarkBarComponent implements OnDestroy {
     private readonly _matDialog: MatDialog,
     private _dragulaService: DragulaService,
   ) {
+    // NOTE: not working because we have an svg
+    // this._dragulaService.createGroup(this.LIST_ID, {
+    // moves: function (el, container, handle) {
+    //   return handle.className.indexOf && handle.className.indexOf('drag-handle') > -1;
+    // }
+    // });
+
     this._subs.add(this._dragulaService.dropModel(this.LIST_ID)
       .subscribe((params: any) => {
         const {target, source, targetModel, item} = params;
-        console.log(target, source, targetModel, item);
-        // if (this.listEl.nativeElement === target) {
-        //   this._blockAnimation();
-        //
-        //   const sourceModelId = source.dataset.id;
-        //   const targetModelId = target.dataset.id;
-        //   const targetNewIds = targetModel.map((task) => task.id);
-        //   const movedTaskId = item.id;
-        //   this._taskService.move(movedTaskId, sourceModelId, targetModelId, targetNewIds);
-        // }
+        const newIds = targetModel.map(m => m.id);
+        this.bookmarkService.reorderBookmarks(newIds);
       })
     );
   }

src/app/features/bookmark/bookmark.service.ts

@@ -1,11 +1,17 @@
 import { Injectable } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { BookmarkState, initialBookmarkState, selectAllBookmarks, selectIsShowBookmarkBar } from './store/bookmark.reducer';
+import {
+  BookmarkState,
+  initialBookmarkState,
+  selectAllBookmarks,
+  selectIsShowBookmarkBar
+} from './store/bookmark.reducer';
 import {
   AddBookmark,
   DeleteBookmark,
   HideBookmarks,
   LoadBookmarkState,
+  ReorderBookmarks,
   ShowBookmarks,
   ToggleBookmarks,
   UpdateBookmark
@@ -70,6 +76,10 @@ export class BookmarkService {
     this._store$.dispatch(new ToggleBookmarks());
   }
 
+  reorderBookmarks(ids: string[]) {
+    this._store$.dispatch(new ReorderBookmarks({ids}));
+  }
+
 
   // HANDLE INPUT
   // ------------

src/app/features/bookmark/store/bookmark.actions.ts

@@ -12,6 +12,7 @@ export enum BookmarkActionTypes {
   ShowBookmarks = '[Bookmark] Show Bookmarks',
   HideBookmarks = '[Bookmark] Hide Bookmarks',
   ToggleBookmarks = '[Bookmark] Toggle Bookmarks',
+  ReorderBookmarks = '[Bookmark] Reorder Bookmarks',
 }
 
 export class LoadBookmarkState implements Action {
@@ -54,6 +55,13 @@ export class ToggleBookmarks implements Action {
   readonly type = BookmarkActionTypes.ToggleBookmarks;
 }
 
+export class ReorderBookmarks implements Action {
+  readonly type = BookmarkActionTypes.ReorderBookmarks;
+
+  constructor(public payload: { ids: string[] }) {
+  }
+}
+
 
 export type BookmarkActions =
   LoadBookmarkState
@@ -63,4 +71,5 @@ export type BookmarkActions =
   | ShowBookmarks
   | HideBookmarks
   | ToggleBookmarks
+  | ReorderBookmarks
   ;

src/app/features/bookmark/store/bookmark.reducer.ts

@@ -51,6 +51,22 @@ export function bookmarkReducer(
       return {...state, isShowBookmarks: !state.isShowBookmarks};
 
 
+    case BookmarkActionTypes.ReorderBookmarks: {
+      const oldIds = state.ids as string[];
+      const newIds = action.payload.ids as string[];
+      if (!oldIds || !newIds) {
+        return state;
+      }
+
+      // check if we have the same values inside the arrays
+      if (oldIds.slice(0).sort().join(',') === newIds.slice(0).sort().join(',')) {
+        return {...state, ids: newIds};
+      } else {
+        console.error('Bookmark lost while reordering. Not executing reorder');
+        return state;
+      }
+    }
+
     default: {
       return state;
     }