(Scrumboard) Drag-drop support

src/app/main/content/apps/scrumboard/board/board.component.html

@@ -49,12 +49,15 @@
         <div fxFlex class="board-content-wrapper p-24">
 
             <!-- BOARD -->
-            <div class="board-content" [class]="board.settings.color+'-100-bg'" fxLayout="row">
+            <div class="board-content ngx-dnd-container" [class]="board.settings.color+'-100-bg'" fxLayout="row"
+                 ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
 
                 <!-- LIST -->
                 <fuse-scrumboard-board-list
-                    class="list-wrapper"
+                    class="scrumboard-board-list list-wrapper ngx-dnd-item"
+                    ngxDraggable
                     *ngFor="let list of board.lists"
+                    [model]="list"
                     [list]="list">
                 </fuse-scrumboard-board-list>
                 <!-- / LIST -->

src/app/main/content/apps/scrumboard/board/board.component.ts

@@ -53,6 +53,11 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
         this.location.go('/apps/scrumboard/boards/' + this.board.id + '/' + this.board.uri);
     }
 
+    onDrop(ev)
+    {
+        this.scrumboardService.updateBoard();
+    }
+
     ngOnDestroy()
     {
         this.onBoardChanged.unsubscribe();

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts

@@ -1,9 +1,10 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MD_DIALOG_DATA, MdDialogRef, MdMenuTrigger } from '@angular/material';
+import { MD_DIALOG_DATA, MdDialog, MdDialogRef, MdMenuTrigger } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../scrumboard.service';
 import { NgForm } from '@angular/forms/src/forms';
 import { FuseUtils } from '../../../../../../../core/fuseUtils';
+import { FuseConfirmDialogComponent } from '../../../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector     : 'fuse-scrumboard-board-card-dialog',
@@ -23,9 +24,12 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
     @ViewChild('checklistMenuTrigger') checklistMenu: MdMenuTrigger;
     @ViewChild('newCheckListTitleField') newCheckListTitleField;
 
+    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+
     constructor(
         public dialogRef: MdDialogRef<FuseScrumboardCardDialogComponent>,
         @Inject(MD_DIALOG_DATA) private data: any,
+        public dialog: MdDialog,
         private scrumboardService: ScrumboardService
     )
     {
@@ -243,8 +247,19 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
      */
     removeCard()
     {
-        this.dialogRef.close();
+        this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
-        this.scrumboardService.removeCard(this.card.id, this.list.id);
+            disableClose: false
+        });
+
+        this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete the card?';
+
+        this.confirmDialogRef.afterClosed().subscribe(result => {
+            if ( result )
+            {
+                this.dialogRef.close();
+                this.scrumboardService.removeCard(this.card.id, this.list.id);
+            }
+        });
     }
 
     /**

src/app/main/content/apps/scrumboard/board/list/card/card.component.scss

@@ -1,6 +1,6 @@
 @import "src/app/core/scss/fuse";
 
-:host {
+.scrumboard-board-card {
     position: relative;
     display: block;
     width: 100%;
@@ -111,4 +111,41 @@
             }
         }
     }
+
+    &:not(.has-handle):not(.move-disabled),
+    &.has-handle [ngxdraghandle],
+    &.has-handle [ngxDragHandle] {
+        //cursor: move;
+    }
+
+    .ngx-dnd-content {
+        user-select: none;
+    }
+
+    &.gu-mirror {
+        position: fixed !important;
+        margin: 0 !important;
+        z-index: 9999 !important;
+        opacity: 0.8;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+        filter: alpha(opacity=80);
+        @include mat-elevation(7);
+    }
+
+    &.gu-hide {
+        display: none !important;
+    }
+
+    &.gu-unselectable {
+        -webkit-user-select: none !important;
+        -moz-user-select: none !important;
+        -ms-user-select: none !important;
+        user-select: none !important;
+    }
+
+    &.gu-transit {
+        opacity: 0.2;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+        filter: alpha(opacity=20);
+    }
 }

src/app/main/content/apps/scrumboard/board/list/card/card.component.ts

@@ -1,12 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ScrumboardService } from '../../../scrumboard.service';
 import * as moment from 'moment';
 
 @Component({
-    selector   : 'fuse-scrumboard-board-card',
+    selector     : 'fuse-scrumboard-board-card',
-    templateUrl: './card.component.html',
+    templateUrl  : './card.component.html',
-    styleUrls  : ['./card.component.scss']
+    styleUrls    : ['./card.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseScrumboardBoardCardComponent implements OnInit
 {

src/app/main/content/apps/scrumboard/board/list/list.component.html

@@ -24,13 +24,15 @@
     <!-- LIST CONTENT -->
     <div class="list-content" fxLayout="column">
 
-        <div class="list-cards" ui-sortable="sortableCardOptions" ng-model="list.idCards" perfect-scrollbar #listScroll>
+        <div class="list-cards ngx-dnd-container"
-
+             [model]="list.idCards" ngxDroppable="card" (out)="onDrop($event)"
-            <fuse-scrumboard-board-card
+             perfect-scrollbar #listScroll>
-                (click)="openCardDialog(cardId)"
+            <fuse-scrumboard-board-card ngxDraggable
-                class="list-card mat-elevation-z2"
+                                        (click)="openCardDialog(cardId)"
-                *ngFor="let cardId of list.idCards"
+                                        class="scrumboard-board-card mat-elevation-z2 ngx-dnd-item"
-                [cardId]="cardId">
+                                        *ngFor="let cardId of list.idCards"
+                                        [model]="cardId"
+                                        [cardId]="cardId">
             </fuse-scrumboard-board-card>
         </div>
     </div>

src/app/main/content/apps/scrumboard/board/list/list.component.scss

@@ -1,4 +1,6 @@
-:host {
+@import "src/app/core/scss/fuse";
+
+.scrumboard-board-list {
     width: 344px;
     min-width: 344px;
     max-width: 344px;
@@ -19,10 +21,9 @@
         .list-header {
             height: 64px;
             min-height: 64px;
-            padding: 0 0 0 16px;
+            padding: 0 8px 0 16px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
-
         }
 
         .list-content {
@@ -54,4 +55,44 @@
         }
 
     }
+
+    &:not(.has-handle):not(.move-disabled),
+    &.has-handle [ngxdraghandle],
+    &.has-handle [ngxDragHandle] {
+        //cursor: move;
+    }
+
+    .ngx-dnd-content {
+        user-select: none;
+    }
+
+    &.gu-mirror {
+        position: fixed !important;
+        margin: 0 !important;
+        z-index: 9999 !important;
+        opacity: 0.8;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+        filter: alpha(opacity=80);
+
+        > .list {
+            @include mat-elevation(7);
+        }
+    }
+
+    &.gu-hide {
+        display: none !important;
+    }
+
+    &.gu-unselectable {
+        -webkit-user-select: none !important;
+        -moz-user-select: none !important;
+        -ms-user-select: none !important;
+        user-select: none !important;
+    }
+
+    &.gu-transit {
+        opacity: 0.2;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+        filter: alpha(opacity=20);
+    }
 }

src/app/main/content/apps/scrumboard/board/list/list.component.ts

@@ -1,16 +1,18 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FuseUtils } from '../../../../../../core/fuseUtils';
 import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { MdDialog } from '@angular/material';
+import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
+import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
-    selector   : 'fuse-scrumboard-board-list',
+    selector     : 'fuse-scrumboard-board-list',
-    templateUrl: './list.component.html',
+    templateUrl  : './list.component.html',
-    styleUrls  : ['./list.component.scss']
+    styleUrls    : ['./list.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
 {
@@ -22,6 +24,8 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
 
     onBoardChanged: Subscription;
 
+    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+
     constructor(
         private route: ActivatedRoute,
         private scrumboardService: ScrumboardService,
@@ -79,7 +83,18 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
 
     removeList(listId)
     {
-        this.scrumboardService.removeList(listId);
+        this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
+            disableClose: false
+        });
+
+        this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete the list and it\'s all cards?';
+
+        this.confirmDialogRef.afterClosed().subscribe(result => {
+            if ( result )
+            {
+                this.scrumboardService.removeList(listId);
+            }
+        });
     }
 
     openCardDialog(cardId)
@@ -97,6 +112,11 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
             });
     }
 
+    onDrop(ev)
+    {
+        this.scrumboardService.updateBoard();
+    }
+
     ngOnDestroy()
     {
         this.onBoardChanged.unsubscribe();

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html

@@ -3,7 +3,7 @@
     <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
 
         <!-- SIDENAV HEADER -->
-        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
+        <div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
             <div>Settings</div>
         </div>
         <!-- / SIDENAV HEADER -->
@@ -58,7 +58,7 @@
     <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
 
         <!-- SIDENAV HEADER -->
-        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
             <div>Background Color</div>
             <button md-icon-button (click)="view ='main'">
                 <md-icon class="s-16">arrow_back</md-icon>

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss

@@ -24,6 +24,8 @@
 
             > .header {
                 flex: 0 1 auto;
+                height: 64px;
+                min-height: 64px;
                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             }