well done

package.json

@@ -21,10 +21,11 @@
     "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/router": "3.4.7",
     "angularfire2": "^2.0.0-beta.7",
-    "firebase": "3.6.9",
     "bootstrap": "3.3.7",
     "core-js": "2.4.1",
+    "firebase": "3.6.9",
     "ng2-bootstrap": "^1.3.3",
+    "ng2-dnd": "^2.2.2",
     "rxjs": "5.0.3",
     "ts-helpers": "1.1.2",
     "zone.js": "0.7.6"

src/app/app.component.html

@@ -1,16 +1,12 @@
 <div class="container">
-    <h1>
+    <h1 class="page-header">
         {{title}}
     </h1>
-    <div class="row" *ngIf="isLoggedIn()|async">
-        <app-display-user></app-display-user>
-    </div>
     <div class="row">
-        <div *ngIf="!(isLoggedIn()|async)" class="col-md-4 col-md-offset-1">
+
-            <app-login-user></app-login-user>
+        <div *ngFor="let cardlist of cardlists" class="col-sm-4">
-        </div>
+            <cardlist [item]="cardlist">
-        <div *ngIf="!(isLoggedIn()|async)" class="col-md-4 col-md-offset-1">
+            </cardlist>
-            <app-register-user></app-register-user>
         </div>
     </div>
 </div>

src/app/app.component.spec.ts

@@ -1,41 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {TestBed, async} from "@angular/core/testing";
-import {AppComponent} from "./app.component";
-import {AuthService} from "app/shared/auth.service";
-import {AuthServiceStub} from "app/shared/auth.service.stub";
-
-describe('AppComponent', () => {
-    beforeEach(() => {
-        let authServiceStub = new AuthServiceStub(true);
-
-        TestBed.configureTestingModule({
-            declarations: [
-                AppComponent
-            ],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA],
-            providers: [
-                {provide: AuthService, useValue: authServiceStub}
-            ]
-        });;
-    });
-
-    it('should create the app', async(() => {
-        let fixture = TestBed.createComponent(AppComponent);
-        let app = fixture.debugElement.componentInstance;
-        expect(app).toBeTruthy();
-    }));
-
-    it(`should have as title 'app works!'`, async(() => {
-        let fixture = TestBed.createComponent(AppComponent);
-        let app = fixture.debugElement.componentInstance;
-        expect(app.title).toEqual('app works! - kanban2');
-    }));
-
-    it('should render title in a h1 tag', async(() => {
-        let fixture = TestBed.createComponent(AppComponent);
-        fixture.detectChanges();
-        let compiled = fixture.debugElement.nativeElement;
-        expect(compiled.querySelector('h1').textContent).toContain('app works! - kanban2');
-    }));
-});

src/app/app.component.ts

@@ -1,19 +1,67 @@
-import {Component} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
-import {AuthService} from "app/shared/auth.service";
+import {DataService} from "app/shared/data.service";
 import {Observable} from "rxjs";
 
+import {Project} from "app/models/project-info";
+import {CardList} from "app/models/cardlist-info";
+import {Card} from "app/models/card-info";
+
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit  {
-    title = 'app works! - kanban2';
+    title = 'The Kanban Board';
+    projects: Project[];
+    cardlists: CardList[];
 
-    constructor(private authService: AuthService) {
+    constructor(private dataService: DataService) {
     }
 
-    isLoggedIn(): Observable<boolean> {
+    ngOnInit(){
-        return this.authService.isLoggedIn();
+        this.dataService.getProjects()
+            .subscribe(data => {
+                this.projects = data;
+                let firstProject = this.projects[0];
+                //console.log(firstProject);
+                // this.addAddCardList(
+                //     'Done', 
+                //     firstProject.$key,
+                //     'green'
+                // );
+            });
+        this.dataService.getCardLists()
+            .subscribe(c => this.cardlists = c)
+        ;
+        this.dataService.getCards();
+        this.dataService.getTasks();
+        //this.addProject("TestProject1");
     }
+
+    addProject(name: string)
+    {
+        let created_at = new Date().toString();
+        let newProject:Project = new Project();
+        newProject.name = name;
+        newProject.created_at= created_at;
+        this.dataService.addProject(newProject);
+    }
+
+    addCardList(
+        name: string,
+        projectId: string,
+        color: string,
+        order: number)
+    {
+        let created_at = new Date().toString();
+        let newCardList:CardList = new CardList();
+        newCardList.name = name;
+        newCardList.projectId = projectId;
+        newCardList.color = color;
+        newCardList.order = order;
+        newCardList.created_at = created_at;
+        this.dataService.addCardList(newCardList);
+    }
+
 }

src/app/app.module.ts

@@ -5,18 +5,19 @@ import {HttpModule} from "@angular/http";
 import {AppComponent} from "./app.component";
 import {authConfig, firebaseConfig} from "environments/firebaseConfig";
 import {AngularFireModule} from "angularfire2";
-import {AuthService} from "app/shared/auth.service";
-import {LoginUserComponent} from "app/login-user/login-user.component";
-import {DisplayUserComponent} from "app/display-user/display-user.component";
-import {RegisterUserComponent} from "app/register-user/register-user.component";
 import {AlertModule} from "ng2-bootstrap";
+import {ModalModule} from 'ng2-bootstrap';
+
+import {DataService} from "app/shared/data.service";
+import {CardListComponent} from "app/cardlist/cardlist.component";
+import {CardComponent} from "app/card/card.component";
+import {DndModule} from 'ng2-dnd';
 
 @NgModule({
     declarations: [
         AppComponent,
-        DisplayUserComponent,
+        CardListComponent,
-        LoginUserComponent,
+        CardComponent
-        RegisterUserComponent
     ],
     imports: [
         BrowserModule,
@@ -24,9 +25,11 @@ import {AlertModule} from "ng2-bootstrap";
         ReactiveFormsModule,
         HttpModule,
         AlertModule.forRoot(),
+        ModalModule.forRoot(),
+        DndModule.forRoot(),
         AngularFireModule.initializeApp(firebaseConfig, authConfig)
     ],
-    providers: [AuthService],
+    providers: [DataService],
     bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/card/card.component.css

@@ -0,0 +1,38 @@
+.cardTitle{
+    margin-left: 10px; 
+    font-size: 1em;
+    font-weight: bold;
+}
+.cardDesc{
+    margin-left: 10px; 
+}
+.tasklist{
+    margin: 10px;
+}
+.newtask
+{
+    font-size: 0.8em;
+}
+.link{
+    cursor: pointer;
+}
+.carret{
+    display: inline-block;
+    cursor: pointer;
+}
+.titleText{
+    display: inline-block;
+}
+.modal-header {
+    padding:9px 15px;
+    border-bottom:1px solid #eee;
+    background-color: #ff4040;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+     border-top-left-radius: 5px;
+     border-top-right-radius: 5px;
+    color: white;
+    font-weight: bold;
+ }

src/app/card/card.component.html

@@ -0,0 +1,48 @@
+<div class="cardTitle inline">
+    <div class="carret" (click)="clickCarret()">
+    <i class="fa fa-caret-right" *ngIf="!item.isExpanded"></i>
+    <i class="fa fa-caret-down" *ngIf="item.isExpanded"></i>
+    </div>
+    <div class="titleText">
+    {{item.name}}
+    </div>
+</div>
+<div *ngIf="item.isExpanded">
+    <div class="cardDesc">
+        {{item.description}}
+    </div>
+    <div class="tasklist">
+        <div *ngFor="let task of tasks" class="newtask">
+            <input type="checkbox" [(ngModel)]="task.isCompleted" (ngModelChange)="changeTaskCompleted(task)"  class="inline-block">
+            <span class="inline-block">
+            {{task.description}}
+            </span>
+            <span class="inline-block glyphicon glyphicon-trash link" (click)="deleteTask(task)"></span>
+        </div>
+    </div>
+    <div class="newtask">
+        <form (submit)="addNewTask()">
+            <input type="text" class="form-control newtask" id="newtask" placeholder="Add subtask and hit enter" [(ngModel)]="newtaskdesc" name="newtask">
+        </form>
+    </div>
+</div>
+
+
+
+<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Delete task</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        Not implement!<br>
+        Works as per specs!<br>
+        Carret is not carrot :)
+      </div>
+    </div>
+  </div>
+</div>

src/app/card/card.component.ts

@@ -0,0 +1,65 @@
+import {Component, OnInit, Input, ViewChild} from "@angular/core";
+import {DataService} from "app/shared/data.service";
+import {Observable} from "rxjs";
+import {CardList} from "app/models/cardlist-info";
+import {Card} from "app/models/card-info";
+import {Task} from "app/models/task-info";
+import { ModalDirective } from 'ng2-bootstrap/modal';
+
+@Component({
+    selector: 'card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.css']
+})
+export class CardComponent implements OnInit {
+    @ViewChild('childModal') public childModal:ModalDirective;
+    @Input() item: Card;
+    tasks : Task[]
+
+    newtaskdesc;
+
+
+    constructor(private dataService: DataService) {
+        //console.log(this.item);
+    }
+
+    ngOnInit() {
+        //console.log(this.item);
+        this.dataService.getTasksByCardId(this.item.$key)
+            .subscribe(data => {
+                this.tasks = data;
+            })
+    }
+
+    addNewTask(){
+        //console.log('Add new subtask!');
+        let newTask = new Task();
+        newTask.cardId = this.item.$key;
+        newTask.description = this.newtaskdesc;
+        newTask.isCompleted = false;
+        newTask.order = 0;
+        newTask.created_at = new Date().toString();
+        this.dataService.addTask(newTask)
+            .then(() => {
+                this.newtaskdesc = '';
+            });
+    }
+
+    deleteTask(task){
+        //console.log(task);
+        this.childModal.show();
+    }
+    public hideChildModal():void {
+        this.childModal.hide();
+    }
+
+    changeTaskCompleted(task){
+        //console.log(task);
+        this.dataService.updateTask(task.$key, task);
+    }
+
+    clickCarret(){
+        this.item.isExpanded = !this.item.isExpanded;
+        this.dataService.updateCard(this.item.$key,this.item);
+    }
+}

src/app/cardlist/cardlist.component.css

@@ -0,0 +1,79 @@
+.card{
+    background-color: lightblue;
+    border: solid 1px;
+    border-left-width: 5px;
+    margin: 15px;
+}
+.cardTitle{
+    margin-left: 10px; 
+    font-size: 1em;
+}
+.cardDesc{
+    margin-left: 10px; 
+}
+.createCard{
+    padding: 10px;
+    /*background-color: lightcyan;*/
+}
+.fullScreen{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    clear: both;
+    background: black;
+    opacity: 0.3;
+    padding-left: 35%;
+    padding-right: 35%;
+    padding-top: 35%;
+    padding-bottom: 15%;
+    z-index: 100;
+}
+.fullScreentransparent{
+    position: absolute;
+    clear: both;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: transparent;
+    z-index: 101;
+}
+.link{
+    cursor: pointer;
+}
+.createTitle{
+    font-weight: bold;
+    color: white;
+}
+.formfields{
+    margin-top: 10px;
+}
+
+
+
+.dnd-drag-start {
+    -moz-transform:scale(0.8);
+    -webkit-transform:scale(0.8);
+    transform:scale(0.8);
+    opacity:0.7;
+    border: 2px dashed #000;
+}
+
+.dnd-drag-enter {
+    opacity:0.7;
+    border: 2px dashed #000;
+}
+
+.dnd-drag-over {
+    border: 2px dashed #000;
+}
+
+.dnd-sortable-drag {
+  -moz-transform:scale(0.9);
+  -webkit-transform:scale(0.9);
+  transform:scale(0.9);
+  opacity:0.7;
+  border: 1px dashed #000;
+}

src/app/cardlist/cardlist.component.html

@@ -0,0 +1,50 @@
+<div class="panel panel-info" 
+    dnd-droppable 
+    [allowDrop]="allowDropFunction()"
+    (onDropSuccess)="cardDropped($event)"
+    >
+    <div class="panel-heading">
+        <h4>
+        {{item.name}}
+        &nbsp;
+        <button type="button" class="btn btn-default btn-xs" (click)="showAddCard()">
+            <i class="fa fa-plus"></i>
+        </button>
+        </h4>
+    </div>
+    <div class="">
+        <ul class="list-group">
+        <li *ngFor="let card of cards" class="list-group-item panel card" [style.border-left-color]="item.color" 
+            dnd-draggable 
+            [dragData]="card" 
+            [dragEnabled]="allowDragFunction(card)" 
+            >
+            <card [item]="card">
+            </card>
+        </li>
+        </ul>
+    </div>
+</div>
+
+<div class="fullScreen" *ngIf="toShowAddCard" (click)="cancelAddCard()">
+</div>
+<div class="fullScreentransparent" *ngIf="toShowAddCard">
+    <div class="panel panel-default createCard well">
+        <div class="panel-heading" [style.background-color]="item.color">
+            <h4 class="createTitle">New task - {{ item.name }}
+                <div class="pull-right link" (click)="cancelAddCard()">
+                <i class="fa fa-window-close"></i>
+            </div>
+            </h4>
+        </div>
+        <div class="form-group formfields">
+            <label for="taskname">Name</label>
+            <input type="text" class="form-control" id="taskname" placeholder="task name" [(ngModel)]="cardname">
+            <label for="taskdescription">Description</label>
+            <input type="text" class="form-control" id="taskdescription" placeholder="description" [(ngModel)]="carddescription">
+        </div>
+        <div class="text-center">
+            <button type="button" class="btn btn-primary" (click)="saveAddCard()">CREATE</button>
+        </div>
+    </div>
+</div>

src/app/cardlist/cardlist.component.ts

@@ -0,0 +1,107 @@
+import {Component, OnInit, Input} from "@angular/core";
+import {DataService} from "app/shared/data.service";
+import {Observable} from "rxjs";
+import {CardList} from "app/models/cardlist-info";
+import {Card} from "app/models/card-info";
+import {Task} from "app/models/task-info";
+
+@Component({
+    selector: 'cardlist',
+    templateUrl: './cardlist.component.html',
+    styleUrls: ['./cardlist.component.css']
+})
+export class CardListComponent implements OnInit {
+    @Input() item: CardList;
+    cards : Card[]
+
+    toShowAddCard:boolean;
+    editCard: Card;
+    cardname;
+    carddescription;
+    allowedDropFrom = [];
+    allowedDragTo = false;
+
+
+    constructor(private dataService: DataService) {
+    }
+
+    ngOnInit() {
+        this.dataService.getCardsByListId(this.item.$key)
+            .subscribe(data => {
+                this.cards = data;
+            });
+        //fill allowed drop-from containers
+        this.dataService.getCardListsByOrder(this.item.order-1)
+            .subscribe(d => {
+                    if(d.length>0)
+                        this.allowedDropFrom.push(d[0].$key);
+                }
+            );
+        //fill if it has next containers
+        this.dataService.getCardListsByOrder(this.item.order+1)
+            .subscribe(d => {
+                    if(d.length>0)
+                        this.allowedDragTo = true;
+                }
+            );
+    }
+
+    showAddCard(){
+        this.cardname = '';
+        this.carddescription = '';
+        this.toShowAddCard = true;
+    }
+
+    cancelAddCard(){
+        this.toShowAddCard = false;
+    }
+    saveAddCard(){
+        //console.log('save card');
+        this.addCard(
+            this.cardname, 
+            this.carddescription, 
+            true, 
+            this.item.$key,
+        0);
+        this.toShowAddCard = false;
+    }
+
+
+    addCard(
+        name: string,
+        description: string,
+        isExpanded: boolean,
+        cardListId: string,
+        order: number
+        )
+    {
+        let created_at = new Date().toString();
+        let newCard:Card = new Card();
+        newCard.name = name;
+        newCard.description = description;
+        newCard.cardListId = cardListId;
+        newCard.isExpanded = isExpanded;
+        newCard.order =  order;
+        newCard.created_at = created_at;
+        this.dataService.addCard(newCard);
+    }
+
+    cardDropped(ev){
+        let card:Card = ev.dragData;
+        if(card.cardListId !== this.item.$key){
+            card.cardListId = this.item.$key;
+            this.dataService.updateCard(card.$key, card);
+        }
+    }
+
+    allowDragFunction(card: Card){
+        return this.allowedDragTo;
+    }
+
+    allowDropFunction(): any {
+        return (dragData: Card) => {
+            return this.allowedDropFrom.indexOf(dragData.cardListId) > -1;
+        };
+    }
+
+}

src/app/display-user/display-user.component.html

@@ -1,20 +0,0 @@
-<div class="row">
-    <div class="col-md-6 col-md-offset-3">
-        <div class="panel panel-default">
-            <div class="panel-heading">User Information</div>
-            <ul class="list-group">
-                <li class="list-group-item">Email: {{(currentUser()|async).email}}</li>
-                <li class="list-group-item">Display Name: {{(currentUser()|async).displayName}}</li>
-                <li class="list-group-item">Uid: {{(currentUser()|async).uid}}</li>
-                <li class="list-group-item">Provider Id: {{(currentUser()|async).providerId}}</li>
-                <li class="list-group-item" *ngIf="(currentUser()|async).photoURL"><img
-                        [src]="(currentUser()|async).photoURL"/></li>
-            </ul>
-        </div>
-    </div>
-</div>
-<div class="row">
-    <div class="col-md-3 col-md-offset-5">
-        <a href="#" class="btn btn-lg btn-primary btn-block" (click)="logout()">Log out</a>
-    </div>
-</div>

src/app/display-user/display-user.component.spec.ts

@@ -1,42 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {DisplayUserComponent} from "./display-user.component";
-import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
-import {FormsModule} from "@angular/forms";
-import {AuthService} from "app/shared/auth.service";
-import {UserInfo} from "app/shared/user-info";
-import {By} from "@angular/platform-browser";
-import {AuthServiceStub} from "app/shared/auth.service.stub";
-
-describe('DisplayUserComponent', () => {
-
-    let component: DisplayUserComponent;
-    let fixture: ComponentFixture<DisplayUserComponent>;
-
-    beforeEach(async(() => {
-        let authServiceStub = new AuthServiceStub(true);
-
-        TestBed.configureTestingModule({
-            imports: [FormsModule],
-            declarations: [DisplayUserComponent],
-            providers: [
-                {provide: AuthService, useValue: authServiceStub}
-            ]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DisplayUserComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should display userinfo when logged in', () => {
-        expect(component).toBeTruthy();
-        let elements = fixture.debugElement.queryAll(By.css(".list-group-item"));
-        expect(elements[0].nativeElement.textContent).toContain("Email: my-email");
-        expect(elements[1].nativeElement.textContent).toContain("Display Name: my-display-name");
-        expect(elements[2].nativeElement.textContent).toContain("Uid: my-uid");
-        expect(elements[3].nativeElement.textContent).toContain("Provider Id: my-provider-id");
-    });
-});

src/app/display-user/display-user.component.ts

@@ -1,22 +0,0 @@
-import {Component, OnInit} from "@angular/core";
-import {AuthService} from "app/shared/auth.service";
-import {UserInfo} from "app/shared/user-info";
-import {Observable} from "rxjs";
-
-@Component({
-    selector: 'app-display-user',
-    templateUrl: './display-user.component.html',
-    styleUrls: ['./display-user.component.css']
-})
-export class DisplayUserComponent {
-
-    constructor(private authService: AuthService) {}
-
-    currentUser(): Observable<UserInfo> {
-        return this.authService.currentUser();
-    }
-
-    logout() {
-        this.authService.logout();
-    }
-}

src/app/login-user/login-user.component.css

@@ -1,33 +0,0 @@
-
-.login-or {
-    position: relative;
-    font-size: 18px;
-    color: #aaa;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.span-or {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: -2px;
-    margin-left: -25px;
-    background-color: #fff;
-    width: 50px;
-    text-align: center;
-}
-
-.hr-or {
-    background-color: #cdcdcd;
-    height: 1px;
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-}
-
-h3 {
-    text-align: center;
-    line-height: 300%;
-}

src/app/login-user/login-user.component.html

@@ -1,39 +0,0 @@
-<h3>Please Log In</h3>
-<div class="row">
-    <div class="col-xs-6 col-sm-6 col-md-6">
-        <a href="#" class="btn btn-lg btn-primary btn-block" (click)="loginVia('twitter')">Twitter</a>
-    </div>
-    <div class="col-xs-6 col-sm-6 col-md-6">
-        <a href="#" class="btn btn-lg btn-info btn-block" (click)="loginVia('google')">Google</a>
-    </div>
-</div>
-<div class="login-or">
-    <hr class="hr-or">
-    <span class="span-or">or</span>
-</div>
-
-<form [formGroup]="form" role="form" (ngSubmit)="login(form.value)" novalidate>
-    <div class="form-group" [class.has-error]="email.invalid && email.touched">
-        <label for="email">Email</label>
-        <input [formControl]="email" required type="text" class="form-control" id="email" name="email">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="email.valid || email.pristine">Enter your email address</li>
-                <li *ngIf="email.dirty && email.hasError('required')">An email address is required</li>
-            </ul>
-        </div>
-    </div>
-    <div class="form-group" [class.has-error]="password.invalid && password.touched">
-        <label for="password">Password</label>
-        <input [formControl]="password" type="password" class="form-control" id="password" name="password">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="password.valid || password.pristine">Enter your password</li>
-                <li *ngIf="password.dirty && password.hasError('required')">A password is required</li>
-            </ul>
-        </div>
-    </div>
-    <button type="submit" class="btn btn btn-primary">
-        Log In
-    </button>
-</form>

src/app/login-user/login-user.component.spec.ts

@@ -1,39 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {LoginUserComponent} from "./login-user.component";
-import {AuthService} from "app/shared/auth.service";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
-import {UserInfo} from "app/shared/user-info";
-import {AuthServiceStub} from "app/shared/auth.service.stub";
-
-describe('LoginUserComponent', () => {
-    let component: LoginUserComponent;
-    let fixture: ComponentFixture<LoginUserComponent>;
-
-    beforeEach(async(() => {
-        let authServiceStub = new AuthServiceStub(true);
-
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule,
-                ReactiveFormsModule
-            ],
-            declarations: [LoginUserComponent],
-            providers: [
-                {provide: AuthService, useValue: authServiceStub}
-            ]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LoginUserComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

src/app/login-user/login-user.component.ts

@@ -1,35 +0,0 @@
-import {Component} from "@angular/core";
-import {Observable} from "rxjs";
-import {AuthService} from "app/shared/auth.service";
-import {FormBuilder, Validators, AbstractControl, FormGroup} from "@angular/forms";
-
-@Component({
-    selector: 'app-login-user',
-    templateUrl: './login-user.component.html',
-    styleUrls: ['./login-user.component.css']
-})
-export class LoginUserComponent {
-    form: FormGroup;
-    email: AbstractControl;
-    password: AbstractControl;
-
-    constructor(private authService: AuthService, private fb: FormBuilder) {
-        this.form = fb.group({
-            'email': ['', Validators.required],
-            'password': ['', Validators.required]
-        });
-        this.email = this.form.controls['email'];
-        this.password = this.form.controls['password'];
-    }
-
-    login(value: any) {
-        if (this.form.valid) {
-            this.authService.login(this.email.value, this.password.value);
-            this.form.reset();
-        }
-    }
-
-    loginVia(provider: string) {
-        this.authService.loginViaProvider(provider);
-    }
-}

src/app/models/card-info.ts

@@ -0,0 +1,9 @@
+export class Card {
+    $key?: string;
+    name?: string;
+    description?: string;
+    cardListId?: string;
+    isExpanded?: boolean;
+    order?: number;
+    created_at?: string;
+}

src/app/models/cardlist-info.ts

@@ -0,0 +1,8 @@
+export class CardList {
+    $key?: string;
+    name?: string;
+    projectId?: string;
+    color?: string;
+    order?: number;
+    created_at?: string;
+}

src/app/models/project-info.ts

@@ -0,0 +1,5 @@
+export class Project {
+    $key?: string;
+    name?: string;
+    created_at?: string;
+}

src/app/models/task-info.ts

@@ -0,0 +1,8 @@
+export class Task {
+    $key?: string;
+    description?: string;
+    isCompleted: boolean;
+    cardId?: string;
+    order?: number;
+    created_at?: string;
+}

src/app/register-user/register-user.component.css

@@ -1,37 +0,0 @@
-.main {
-    max-width: 320px;
-    margin: 0 auto;
-}
-
-.login-or {
-    position: relative;
-    font-size: 18px;
-    color: #aaa;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.span-or {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: -2px;
-    margin-left: -25px;
-    background-color: #fff;
-    width: 50px;
-    text-align: center;
-}
-
-.hr-or {
-    background-color: #cdcdcd;
-    height: 1px;
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-}
-
-h3 {
-    text-align: center;
-    line-height: 300%;
-}

src/app/register-user/register-user.component.html

@@ -1,56 +0,0 @@
-<h3>Register</h3>
-<form [formGroup]="form" role="form" (ngSubmit)="onSubmit(form.value)" novalidate>
-    <div class="form-group" [class.has-error]="name.invalid && name.touched">
-        <label for="name" class="control-label">Name</label>
-        <input [formControl]="name" required type="text" class="form-control" id="name" name="name">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="name.valid || name.pristine">Enter your name</li>
-                <li *ngIf="name.dirty && name.hasError('required')">A name is required</li>
-            </ul>
-        </div>
-    </div>
-    <div class="form-group" [class.has-error]="email.invalid && email.touched">
-        <label for="email" class="control-label">Email</label>
-        <input [formControl]="email" required type="email" class="form-control" id="email" name="email">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="email.valid || email.pristine">Enter your email address</li>
-                <li *ngIf="email.dirty && email.hasError('required')">An email address is required</li>
-                <li *ngIf="email.dirty && email.hasError('pattern')">Please enter a valid email address</li>
-            </ul>
-        </div>
-    </div>
-    <div class="form-group" [class.has-error]="password.invalid && password.touched">
-        <label for="password">Password</label>
-        <input [formControl]="password" type="password" required class="form-control" id="password" name="password">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="password.dirty && password.valid || password.pristine">Enter your password</li>
-                <li *ngIf="password.dirty && password.hasError('required')">A password is required</li>
-            </ul>
-        </div>
-    </div>
-    <div class="form-group"
-         [class.has-error]="(password2.invalid || form.hasError('mismatchedPasswords')) && password2.touched">
-        <label for="password2">Repeat Password</label>
-        <input [formControl]="password2" type="password" required class="form-control" id="password2"
-               name="password2">
-        <div class="help-block">
-            <ul class="list-unstyled">
-                <li *ngIf="(password2.valid && !form.hasError('mismatchedPasswords')) || password2.pristine">Repeat
-                    your
-                    password
-                </li>
-                <li *ngIf="password2.dirty && password2.hasError('required')">A password is required</li>
-                <li *ngIf="password2.dirty && password2.valid && form.hasError('mismatchedPasswords')">Passwords
-                    don't
-                    match
-                </li>
-            </ul>
-        </div>
-    </div>
-    <button type="submit" class="btn btn btn-primary">
-        Register
-    </button>
-</form>

src/app/register-user/register-user.component.spec.ts

@@ -1,37 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import {async, ComponentFixture, TestBed} from "@angular/core/testing";
-import {RegisterUserComponent} from "./register-user.component";
-import {ReactiveFormsModule, FormsModule} from "@angular/forms";
-import {AuthService} from "app/shared/auth.service";
-import {AuthServiceStub} from "app/shared/auth.service.stub";
-
-describe('RegisterUserComponent', () => {
-    let component: RegisterUserComponent;
-    let fixture: ComponentFixture<RegisterUserComponent>;
-
-    beforeEach(async(() => {
-        let authServiceStub = new AuthServiceStub(true);
-
-        TestBed.configureTestingModule({
-            declarations: [RegisterUserComponent],
-            imports: [
-                FormsModule,
-                ReactiveFormsModule
-            ],
-            providers: [
-                {provide: AuthService, useValue: authServiceStub}
-            ]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(RegisterUserComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

src/app/register-user/register-user.component.ts

@@ -1,61 +0,0 @@
-import {Component, OnInit} from "@angular/core";
-import {AuthService} from "app/shared/auth.service";
-import {Observable} from "rxjs";
-import {FormGroup, AbstractControl, FormBuilder, Validators} from "@angular/forms";
-
-@Component({
-    selector: 'app-register-user',
-    templateUrl: './register-user.component.html',
-    styleUrls: ['./register-user.component.css']
-})
-export class RegisterUserComponent implements OnInit {
-    form: FormGroup;
-    email: AbstractControl;
-    name: AbstractControl;
-    password: AbstractControl;
-    password2: AbstractControl;
-
-    constructor(private authService: AuthService,
-                private fb: FormBuilder) {
-        this.form = fb.group({
-            'name': ['', Validators.required],
-            'email': ['', Validators.compose([
-                Validators.required,
-                Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]
-            )],
-            'password': ['', Validators.required],
-            'password2': ['', Validators.required]
-        }, {validator: this.matchingPasswords('password', 'password2')});
-        this.name = this.form.controls['name'];
-        this.email = this.form.controls['email'];
-        this.password = this.form.controls['password'];
-        this.password2 = this.form.controls['password2'];
-    }
-
-    ngOnInit(): void {
-    }
-
-    isLoggedIn(): Observable<boolean> {
-        return this.authService.isLoggedIn();
-    }
-
-    onSubmit(value: any) {
-        if (this.form.valid) {
-            this.authService.createUser(this.email.value, this.password.value, this.name.value);
-            this.form.reset();
-        }
-    }
-
-    matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
-        return (group: FormGroup): {[key: string]: any} => {
-            let password = group.controls[passwordKey];
-            let confirmPassword = group.controls[confirmPasswordKey];
-
-            if (password.value !== confirmPassword.value) {
-                return {
-                    mismatchedPasswords: true
-                };
-            }
-        }
-    }
-}

src/app/shared/auth.service.stub.ts

@@ -1,34 +0,0 @@
-import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
-import {UserInfo} from "app/shared/user-info";
-
-export class AuthServiceStub {
-
-    constructor(private loggedin: boolean) {
-    }
-
-    login(email: string, password: string) {
-    }
-
-    currentUser(): Observable<UserInfo> {
-        let userInfo = new UserInfo();
-        userInfo.displayName = "my-display-name";
-        userInfo.email = "my-email";
-        userInfo.uid = "my-uid";
-        userInfo.isAnonymous = false;
-        userInfo.photoURL = "my-photo-url";
-        userInfo.providerId = "my-provider-id";
-
-        let replaySubject = new ReplaySubject();
-        if (this.loggedin) {
-            replaySubject.next(userInfo);
-        }
-        return replaySubject;
-    }
-
-    isLoggedIn(): Observable<boolean> {
-        let isLoggedInBS = new AsyncSubject<boolean>();
-        isLoggedInBS.next(true);
-        isLoggedInBS.complete();
-        return isLoggedInBS;
-    }
-}

src/app/shared/auth.service.ts

@@ -1,124 +0,0 @@
-import {Injectable, EventEmitter, Output} from "@angular/core";
-import {User} from "firebase";
-import {AngularFireAuth, AuthProviders, AuthMethods} from "angularfire2";
-import {BehaviorSubject} from "rxjs/BehaviorSubject";
-import {UserInfo} from "./user-info";
-import {Observable, Subject, ReplaySubject, AsyncSubject} from "rxjs";
-
-@Injectable()
-export class AuthService {
-    private userInfoSubject: ReplaySubject<UserInfo>;
-    private auth: User;
-
-    constructor(private angularFireAuth: AngularFireAuth) {
-        this.initUserInfoSubject();
-        // console.log("AuthService");
-        angularFireAuth.subscribe(auth => {
-            // console.log("auth: ", JSON.stringify(auth));
-            let userInfo = new UserInfo();
-            if (auth != null) {
-                this.auth = auth.auth;
-                userInfo.isAnonymous = auth.auth.isAnonymous;
-                userInfo.email = auth.auth.email;
-                userInfo.displayName = auth.auth.displayName;
-                userInfo.providerId = auth.auth.providerId;
-                userInfo.photoURL = auth.auth.photoURL;
-                userInfo.uid = auth.auth.uid;
-            } else {
-                this.auth = null;
-                userInfo.isAnonymous = true;
-            }
-            this.userInfoSubject.next(userInfo);
-        });
-    }
-
-    login(email: string, password: string) {
-        // console.log("login: ", email);
-        this.initUserInfoSubject();
-        this.angularFireAuth.login({email: email, password: password});
-    }
-
-    private initUserInfoSubject() {
-        this.userInfoSubject = new ReplaySubject<UserInfo>(1);
-    }
-
-    currentUser(): Observable<UserInfo> {
-        return this.userInfoSubject.asObservable();
-    }
-
-    logout() {
-        this.initUserInfoSubject();
-        this.angularFireAuth.logout();
-    }
-
-    isLoggedIn(): Observable<boolean> {
-        let isLoggedInBS = new AsyncSubject<boolean>();
-        this.userInfoSubject.subscribe(ui => {
-            // console.log("isLoggedIn: anonymous=" + ui.isAnonymous);
-                isLoggedInBS.next(!ui.isAnonymous);
-                isLoggedInBS.complete();
-            // setTimeout(() => {
-            // }, 0);
-        });
-        return isLoggedInBS;
-    }
-
-    updateDisplayName(displayName: string): Observable<string> {
-        let result = new Subject<string>();
-        //noinspection TypeScriptUnresolvedFunction
-        this.auth.updateProfile({displayName: displayName, photoURL: null}).then(a => {
-            result.next("success");
-        }).catch(err => result.error(err));
-        return result;
-    }
-
-    createUser(email: string, password: string, displayName: string) {
-        //noinspection TypeScriptUnresolvedFunction
-        this.angularFireAuth.createUser({email: email, password: password})
-            .then(auth => auth.auth.updateProfile({displayName: displayName, photoURL: null}));
-    }
-
-    updateEmail(email: string): Observable<string> {
-        let result = new Subject<string>();
-        //noinspection TypeScriptUnresolvedFunction
-        this.auth.updateEmail(email).then(a => {
-            result.next("success");
-        }).catch(err => result.error(err));
-        return result.asObservable();
-    }
-
-    updatePassword(password: string): Observable<string> {
-        let result = new Subject<string>();
-        //noinspection TypeScriptUnresolvedFunction
-        this.auth.updatePassword(password).then(a => {
-            result.next("success");
-        }).catch(err => result.error(err));
-        return result.asObservable();
-    }
-
-    loginViaProvider(provider: string): Observable<String> {
-        let result = new Subject<string>();
-        if (provider === "google") {
-            //noinspection TypeScriptUnresolvedFunction
-            this.angularFireAuth
-                .login({provider: AuthProviders.Google, method: AuthMethods.Popup})
-                //noinspection TypeScriptUnresolvedFunction
-                .  //noinspection TypeScriptUnresolvedFunction
-                then(auth => result.next("success"))
-                        .catch(err => result.error(err));
-            return result.asObservable();
-        }
-        else if (provider === "twitter") {
-            //noinspection TypeScriptUnresolvedFunction
-            this.angularFireAuth
-                .login({provider: AuthProviders.Twitter, method: AuthMethods.Popup})
-                //noinspection TypeScriptUnresolvedFunction
-                .  //noinspection TypeScriptUnresolvedFunction
-                then(auth => result.next("success"))
-                        .catch(err => result.error(err));
-            return result.asObservable();
-        }
-        result.error("Not a supported authentication method: " + provider)
-        return result.asObservable();
-    }
-}

src/app/shared/data.service.ts

@@ -0,0 +1,118 @@
+import {Injectable, EventEmitter, Output} from "@angular/core";
+import {AngularFire, FirebaseObjectObservable, FirebaseListObservable} from "angularfire2";
+import {BehaviorSubject} from "rxjs/BehaviorSubject";
+import {Observable, Subject, ReplaySubject, AsyncSubject} from "rxjs";
+import {Project} from "../models/project-info";
+import {CardList} from "../models/cardlist-info";
+import {Card} from "../models/card-info";
+import {Task} from "../models/task-info";
+
+@Injectable()
+export class DataService {
+    
+    projects: FirebaseListObservable<Project[]>;
+    cardlists: FirebaseListObservable<CardList[]>;
+    cards: FirebaseListObservable<Card[]>;
+    tasks: FirebaseListObservable<Task[]>;
+    
+    constructor(private af: AngularFire) {
+        //console.log("DataService");
+    }
+
+    getProjects(){
+        this.projects = this.af.database.list('/projects') as
+            FirebaseListObservable<Project[]>;
+        return this.projects;
+    }
+
+    addProject(project) {
+        return this.projects.push(project);
+    }
+
+
+
+    getCardLists(){
+        this.cardlists = this.af.database.list('/cardlist') as
+            FirebaseListObservable<CardList[]>;
+        return this.cardlists;
+    }
+    getCardListsById(cardListId:string): FirebaseObjectObservable<CardList> {
+        return this.af.database.object(`/cardlist/${cardListId}`) as FirebaseObjectObservable<CardList>;
+    }
+    getCardListsByOrder(order:number): FirebaseListObservable<CardList[]> {
+        let _cardlist = this.af.database.list('/cardlist',{
+            query: {
+                orderByChild: 'order',
+                equalTo: order,
+            }}
+        ) as FirebaseListObservable<CardList[]>;
+        return _cardlist;
+    }
+    getCachedCardListsById(cardListId:string):CardList {
+        return this.cardlists
+            .filter(d => d.$key == cardListId)
+            .map(d=> d.$key)
+            ;
+            //.first();
+    }
+    getCardListsByProject(projectId: string){
+        let _cardlist = this.af.database.list('/cardlist',{
+            query: {
+                orderByChild: 'projectId',
+                equalTo: projectId,
+            }}
+        ) as FirebaseListObservable<CardList[]>;
+        return _cardlist
+    }
+    addCardList(cardlist){
+        return this.cardlists.push(cardlist);
+    }
+
+
+
+
+    getCards(){
+        this.cards = this.af.database.list('/cards') as
+            FirebaseListObservable<Card[]>;
+        return this.cards;
+    }
+    getCardsByListId(listId:string){
+        this.cards = this.af.database.list('/cards',{
+            query: {
+                orderByChild: 'cardListId',
+                equalTo: listId,
+            }}
+        ) as
+            FirebaseListObservable<Card[]>;
+        return this.cards;
+    }
+    addCard(card){
+        return this.cards.push(card);
+    }
+    updateCard(key, updCard){
+        return this.cards.update(key, updCard);
+    }
+
+
+
+    getTasks(){
+        this.tasks = this.af.database.list('/tasks') as
+            FirebaseListObservable<Task[]>;
+        return this.cards;
+    }
+    getTasksByCardId(cardId:string){
+        let _tasks = this.af.database.list('/tasks',{
+            query: {
+                orderByChild: 'cardId',
+                equalTo: cardId,
+            }}
+        ) as FirebaseListObservable<Task[]>;
+        return _tasks;
+    }
+    addTask(task){
+        return this.tasks.push(task);
+    }
+    updateTask(key, updTask){
+        return this.tasks.update(key, updTask);
+    }
+}

src/app/shared/user-info.ts

@@ -1,8 +0,0 @@
-export class UserInfo {
-    isAnonymous: boolean;
-    email: string;
-    displayName: string;
-    photoURL?: string;
-    providerId: string;
-    uid: string;
-}

src/index.html

@@ -2,11 +2,12 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>kanban2</title>
+  <title>The Kanban Board</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
   <app-root>Loading...</app-root>