Implemented draggable notes with angular-gridster2 (closes #46)

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^8.2.14",
     "@angular/router": "^8.2.14",
     "@ng-bootstrap/ng-bootstrap": "^4.2.2",
+    "angular-gridster2": "^9.0.1",
     "bootstrap": "^4.4.1",
     "core-js": "^2.6.11",
     "firebase": "^5.11.1",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
 
 import { MatSnackBarModule, MatDialogModule } from '@angular/material';
+import { GridsterModule } from 'angular-gridster2';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -48,6 +49,7 @@ import { MenuDialogComponent } from './dialogs/menu-dialog/menu-dialog.component
     AngularFireAuthModule,
     AngularFirestoreModule,
     BrowserAnimationsModule,
+    GridsterModule,
     MatSnackBarModule,
     MatDialogModule
   ],

src/app/home/notes/note/note.component.html

@@ -1,6 +1,7 @@
 <div class="note-wrap position-relative" (mouseleave)="optionsDropdown.close()">
   <div class="options-container animated" ngClass={{note.color}}></div>
   <div class="options-container-left"></div>
+  <div class="dragging-enabled"></div>
   <div class="options position-absolute animated d-flex justify-content-around align-items-center">
     <div class="color-option col p-0 d-flex justify-content-around align-items-center">
       <div class="color pointer color-1" (click)="setColor('color-1')"></div>

src/app/home/notes/notes.component.html

@@ -1,32 +1,25 @@
-<div id="notes"
-     class="main-content h-100">
+<div id="notes" class="main-content h-100">
   <div class="note-wrap">
-    <div class="note-box create-box"
-         [ngClass]="{'focused': focused}">
+    <div class="note-box create-box" [ngClass]="{'focused': focused}">
       <div class="edit-box h-100">
-        <div class="editable h-100 no-outline text-left"
-             contenteditable="true"
-             placeholder="New note..."
-             (focus)="focused = true"
-             (focusout)="focusOut($event.target);">
+        <div class="editable h-100 no-outline text-left" contenteditable="true" placeholder="New note..."
+          (focus)="focused = true" (focusout)="focusOut($event.target);">
         </div>
       </div>
     </div>
   </div>
 
-  <div class="container-fluid content"
-       *ngIf="notes; else loading">
-    <div class="row"
-         *ngIf="notes.length; else emptyList">
-      <div class="col-12 col-sm-6 col-lg-4 col-xl-3"
-           *ngFor="let note of notes">
-        <app-note [note]=note></app-note>
-      </div>
+  <div class="container-fluid content" *ngIf="notes; else loading">
+    <div class="row" style="min-height: 50vh; height: 70vh;" *ngIf="notes.length; else emptyList">
+      <gridster class="grid" [options]="options">
+        <gridster-item [item]="item" *ngFor="let item of dashboard">
+          <app-note [note]=item.note></app-note>
+        </gridster-item>
+      </gridster>
     </div>
 
     <ng-template #emptyList>
-      <div *ngIf="!allNotesLength; else notfound"
-           class="position-absolute absolute-center">
+      <div *ngIf="!allNotesLength; else notfound" class="position-absolute absolute-center">
         <div class="boxed no-one-box">
           <div class="loader no-select text-center">Start by creating first one!</div>
         </div>

src/app/home/notes/notes.component.ts

@@ -1,7 +1,16 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription, combineLatest } from 'rxjs';
+import { Draggable, GridsterConfig, GridsterItem, PushDirections, Resizable } from 'angular-gridster2';
+
 import { Note } from 'src/app/models/note';
 import { NoteService } from 'src/app/services/note.service';
-import { Subscription, combineLatest } from 'rxjs';
+import { UtilsService } from 'src/app/services/utils.service';
+
+interface Safe extends GridsterConfig {
+  draggable: Draggable;
+  resizable: Resizable;
+  pushDirections: PushDirections;
+}
 
 @Component({
   selector: 'app-notes',
@@ -12,8 +21,10 @@ export class NotesComponent implements OnInit, OnDestroy {
   allNotesLength = 0;
   subscription = new Subscription();
   focused = false;
+  options: Safe;
+  dashboard: Array<GridsterItem> = [];
 
-  constructor(private noteService: NoteService) { }
+  constructor(private noteService: NoteService, private utils: UtilsService) { }
 
   ngOnInit() {
     this.subscription.add(
@@ -23,11 +34,18 @@ export class NotesComponent implements OnInit, OnDestroy {
         this.noteService.color$])
         .subscribe(([notes, search, color]) => {
           this.allNotesLength = notes.length;
-          this.notes = notes
-            .filter((note: Note) =>
-              note.note.toLowerCase().includes(search.toLowerCase()) &&
-              note.color.includes(color));
+          this.notes = notes.filter((note: Note) =>
+            note.note.toLowerCase().includes(search.toLowerCase()) &&
+            note.color.includes(color));
+          this.dashboard = [];
+          this.notes.forEach((note: Note) => {
+            this.dashboard.push(
+              { cols: 3, rows: 2, y: 0, x: 0, hasContent: true, note: note },
+            );
+          });
         }));
+
+    this.options = this.utils.gridsterOptions;
   }
 
   focusOut(editElement: any) {

src/app/services/utils.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
+import { CompactType, DisplayGrid, GridType } from 'angular-gridster2';
+
 @Injectable({ providedIn: 'root' })
 export class UtilsService {
   appId = 'notes';
@@ -74,6 +76,65 @@ export class UtilsService {
 
   userSignUpMessage = '[Notes] - User sing in/up';
 
+  gridsterOptions = {
+    gridType: GridType.ScrollVertical,
+    compactType: CompactType.CompactLeftAndUp,
+    margin: 10,
+    outerMargin: true,
+    outerMarginTop: null,
+    outerMarginRight: null,
+    outerMarginBottom: null,
+    outerMarginLeft: null,
+    useTransformPositioning: true,
+    mobileBreakpoint: 640,
+    minCols: 12,
+    maxCols: 12,
+    minRows: 2,
+    maxRows: 100,
+    maxItemCols: 12,
+    minItemCols: 3,
+    maxItemRows: 12,
+    minItemRows: 2,
+    maxItemArea: 2500,
+    minItemArea: 1,
+    defaultItemCols: 1,
+    defaultItemRows: 1,
+    fixedColWidth: 50,
+    fixedRowHeight: 50,
+    keepFixedHeightInMobile: false,
+    keepFixedWidthInMobile: false,
+    scrollSensitivity: 10,
+    scrollSpeed: 20,
+    enableEmptyCellClick: false,
+    enableEmptyCellContextMenu: false,
+    enableEmptyCellDrop: false,
+    enableEmptyCellDrag: false,
+    enableOccupiedCellDrop: false,
+    emptyCellDragMaxCols: 50,
+    emptyCellDragMaxRows: 50,
+    ignoreMarginInRow: false,
+    draggable: {
+      enabled: true,
+      ignoreContent: true,
+      dragHandleClass: 'dragging-enabled',
+      dropOverItems: false
+    },
+    resizable: {
+      enabled: true,
+    },
+    disableScrollHorizontal: true,
+    swap: false,
+    pushItems: true,
+    disablePushOnDrag: false,
+    disablePushOnResize: false,
+    pushDirections: { north: true, east: true, south: true, west: true },
+    pushResizeItems: false,
+    displayGrid: DisplayGrid.None,
+    disableWindowResize: false,
+    disableWarnings: false,
+    scrollToNewItems: false
+  };
+
   constructor(private http: HttpClient) { }
 
   getAppInfo() {

src/styles.sass

@@ -350,6 +350,16 @@ header,
   //   border-left: none
   //   border-top-left-radius: 0
 
+  .dragging-enabled
+    position: absolute
+    width: 17px
+    height: 17px
+    top: 19px
+    right: calc((55% / 2) / 2 - 13px);
+    background: url(/assets/img/dragging.svg) no-repeat
+    z-index: 100
+    background-size: contain
+
   .note-box
     height: 135px
     margin-bottom: 10px
@@ -379,6 +389,18 @@ header,
       height: 70px
       margin: 10px auto 20px auto
 
+.grid
+  .note-wrap
+    height: calc(100% - 15px)
+    overflow: initial
+
+    .note-box
+      height: 100%
+      padding-top: 30px
+
+      .editable
+        padding: 0 10px 10px 10px
+
 #footer
   position: fixed
   bottom: 20px
@@ -422,6 +444,20 @@ header,
   button:not(:first-child)
     margin-left: 10px
 
+.dragging-enabled
+  cursor: move
+
+gridster.grid
+  background: none
+
+  gridster-item
+    &.gridster-item-moving,
+    &.gridster-item-resizing
+      box-shadow: none
+
+  .gridster-preview
+    background: none
+
 // media
 
 // Extra small devices (portrait phones, less than 576px)