Dragdrop

angular-cli-build.js

@@ -17,7 +17,8 @@ module.exports = function(defaults) {
       'rxjs/**/*.+(js|js.map)',
       '@angular/**/*.+(js|js.map)',
       'angularfire2/**/*.js',
-      'firebase/*.js'
+      'firebase/*.js',
+      'ng2-dnd/**/*.js'
     ]
   });
 };

package.json

@@ -24,6 +24,7 @@
     "angularfire2": "^2.0.0-beta.2",
     "es6-shim": "0.35.1",
     "firebase": "^3.2.0",
+    "ng2-dnd": "^1.12.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",

src/app/add-item/add-item.component.ts

@@ -23,7 +23,11 @@ export class AddItemComponent implements OnInit {
 
   addItem($event) {
     if($event.keyCode === 13){
-      this.items.push({ desc: this.itemWrapper.desc, created_at: new Date().getTime() });
+      this.items.push({
+        desc: this.itemWrapper.desc,
+        status: 'pending',
+        created_at: new Date().getTime()
+      });
       this.itemWrapper.desc = undefined;
     }
   }

src/app/app.component.html

@@ -1,10 +1,9 @@
 <h1>
   {{title}}
 </h1>
-
 <nav>
-  <a routerLink="/login" routerLinkActive="active" *ngIf="!(af.auth | async)?.uid">Login</a>
-  <a routerLink="/items" routerLinkActive="active" *ngIf="(af.auth | async)?.uid">Items</a>
+  <conditional-router-link routerLink="/login" label="Login" requiresLogin="false"></conditional-router-link>
+  <conditional-router-link routerLink="/items" label="Items" requiresLogin="true"></conditional-router-link>
   <app-logout></app-logout>
 </nav>
 

src/app/app.component.ts

@@ -1,20 +1,20 @@
 import { Component } from '@angular/core';
 import { ROUTER_DIRECTIVES } from '@angular/router';
-import { AngularFire } from 'angularfire2';
 import { LoginComponent } from './login/login.component'
 import { ItemsComponent } from "./items/items.component";
 import { LogoutComponent } from "./logout/logout.component";
 import {AddItemComponent} from "./add-item/add-item.component";
+import { ConditionalRouterLinkComponent } from "./conditional-router-link/conditional-router-link.component";
 
 @Component({
   moduleId: module.id,
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css'],
-  directives: [ROUTER_DIRECTIVES, LoginComponent, ItemsComponent, LogoutComponent]
+  directives: [ROUTER_DIRECTIVES, LoginComponent, ItemsComponent, LogoutComponent, ConditionalRouterLinkComponent]
 })
 export class AppComponent {
   title = 'FirebaseAngular2Cli';
 
-  constructor(public af: AngularFire) { }
+  constructor() { }
 }

src/app/conditional-router-link/conditional-router-link.component.html

@@ -0,0 +1 @@
+<a href="javascript:void(0)" *ngIf="(requiresLogin == 'true' && ((af.auth | async)?.uid)) || (requiresLogin == 'false' && !((af.auth | async)?.uid))">{{label}}</a>

src/app/conditional-router-link/conditional-router-link.component.spec.ts

@@ -0,0 +1,13 @@
+// /* tslint:disable:no-unused-variable */
+//
+// import { By }           from '@angular/platform-browser';
+// import { DebugElement } from '@angular/core';
+// import { addProviders, async, inject } from '@angular/core/testing';
+// import { ConditionalRouterLinkComponent } from './conditional-router-link.component';
+//
+// describe('Component: ConditionalRouterLink', () => {
+//   it('should create an instance', () => {
+//     let component = new ConditionalRouterLinkComponent();
+//     expect(component).toBeTruthy();
+//   });
+// });

src/app/conditional-router-link/conditional-router-link.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AngularFire } from 'angularfire2';
+
+@Component({
+  moduleId: module.id,
+  selector: 'conditional-router-link',
+  templateUrl: 'conditional-router-link.component.html',
+  styleUrls: ['conditional-router-link.component.css']
+})
+export class ConditionalRouterLinkComponent implements OnInit {
+  @Input() routerLink: string;
+  @Input() label: string;
+  @Input() requiresLogin: boolean;
+
+  constructor(public af: AngularFire) { }
+
+  ngOnInit() {
+    if(!this.label) {
+      this.label = 'Some link'
+    }
+    if(this.requiresLogin == undefined) {
+      this.requiresLogin = true
+    }
+  }
+
+}

src/app/conditional-router-link/index.ts

@@ -0,0 +1 @@
+export * from './conditional-router-link.component';

src/app/item/item.component.html

@@ -1,2 +1,3 @@
 {{item.desc}}
-<a href="javascript:void(0)" (click)="destroy()">XXXX</a>
+{{item.status}}
+<a href="javascript:void(0)" (click)="destroy()">DELETE</a>

src/app/items/items.component.css

@@ -0,0 +1,3 @@
+.panel {
+  border: 1px solid #bbb;
+}

src/app/items/items.component.html

@@ -2,8 +2,27 @@ <h1>Items</h1>
 
 <add-item></add-item>
 
-<ul>
-  <li class="text" *ngFor="let item of items | async">
-    <item [item]="item"></item>
-  </li>
-</ul>
+<div>
+  <div *ngFor="let item of pendingItems | async" class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragData]="item">
+    <div class="panel-body">
+      <item [item]="item"></item>
+    </div>
+  </div>
+</div>
+
+<br>
+
+<h1>Items done</h1>
+<div dnd-droppable class="panel panel-info" (onDropSuccess)="markAsDone($event)">
+  <div class="panel-heading">Place to drop</div>
+  <div class="panel-body">
+  </div>
+</div>
+
+<div>
+  <div *ngFor="let item of doneItems | async" class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragData]="item">
+    <div class="panel-body">
+      <item [item]="item"></item>
+    </div>
+  </div>
+</div>

src/app/items/items.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { AngularFire, FirebaseListObservable } from 'angularfire2';
+import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
+import { DND_DIRECTIVES } from 'ng2-dnd/ng2-dnd';
 import {AddItemComponent} from "../add-item/add-item.component";
 import {ItemComponent} from "../item/item.component";
 
@@ -8,16 +9,36 @@ import {ItemComponent} from "../item/item.component";
   selector: 'items',
   templateUrl: 'items.component.html',
   styleUrls: ['items.component.css'],
-  directives: [AddItemComponent, ItemComponent]
+  directives: [DND_DIRECTIVES, AddItemComponent, ItemComponent]
 })
 export class ItemsComponent implements OnInit {
 
   items: FirebaseListObservable<any[]>;
+  pendingItems: FirebaseListObservable<any[]>;
+  doneItems: FirebaseListObservable<any[]>;
+  item: FirebaseObjectObservable<any[]>;
 
   constructor(af: AngularFire) {
     this.items = af.database.list('items');
+    this.pendingItems = af.database.list('items', {
+      query: {
+        orderByChild: 'status',
+        equalTo: 'pending'
+      }
+    });
+    this.doneItems = af.database.list('items', {
+      query: {
+        orderByChild: 'status',
+        equalTo: 'done'
+      }
+    });
   }
 
   ngOnInit() {
   }
+
+  markAsDone($event){
+    this.items.update($event.dragData.$key, { status: 'done' });
+  }
+
 }

src/main.ts

@@ -4,7 +4,7 @@ import { AppComponent, environment } from './app/';
 import { FIREBASE_PROVIDERS, defaultFirebase, AngularFire, AuthMethods, AuthProviders, firebaseAuthConfig } from 'angularfire2';
 import { disableDeprecatedForms, provideForms } from '@angular/forms';
 import { appRouterProviders } from './app/app.routes';
-
+import { DND_PROVIDERS } from 'ng2-dnd/ng2-dnd';
 
 if (environment.production) {
   enableProdMode();
@@ -25,5 +25,6 @@ bootstrap(AppComponent, [
   }),
   disableDeprecatedForms(),
   provideForms(),
-  appRouterProviders
+  appRouterProviders,
+  DND_PROVIDERS
 ]);

src/system-config.ts

@@ -10,15 +10,17 @@
 /** Map relative paths to URLs. */
 const map: any = {
   'firebase': 'vendor/firebase/firebase.js',
-  'angularfire2': 'vendor/angularfire2'
+  'angularfire2': 'vendor/angularfire2',
+  'ng2-dnd': 'vendor/ng2-dnd'
 };
 
 /** User packages configuration. */
 const packages: any = {
   angularfire2: {
     defaultExtension: 'js',
     main: 'angularfire2.js'
-  }
+  },
+  'ng2-dnd': { defaultExtension: 'js', main: 'ng2-dnd.js' }
 };
 
 ////////////////////////////////////////////////////////////////////////////////////////////////
@@ -47,6 +49,7 @@ const barrels: string[] = [
   'app/logout',
   'app/add-item',
   'app/item',
+  'app/conditional-router-link'
   /** @cli-barrel */
 ];