update docs

README.md

@@ -1,8 +1,8 @@
 # kanban2
 
-## Purpose
+## Project description
 
-This project is a generator for creating new projects with the following features:
+This project is a playground for a Kanban board made with following libraries:
 
 * Angular 2 (based on angular-cli)
 * Firebase via AngualarFire2
@@ -21,6 +21,22 @@ almost directly from the proposed configuration from the Firebase console.
     messagingSenderId: "???"
 ```
 
+Initial data:
+
+In "data" folder there is "kanban2-d5e2a-export.json" file with some initial data
+It can be imported in firebase console in a new fresh firebase database.
+
+![alt text](data/importdata.png "Import initial data")
+
+
+
+## Screenshots
+
+![alt text](data/screenshot01.png "Import initial data")
+
+
+
+
 #Angular 2 Specifics
 
 This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.

data/kanban2-d5e2a-export.json

@@ -0,0 +1,146 @@
+{
+  "cardlist" : {
+    "-KdRl7OguO3iT-Uapu1B" : {
+      "color" : "orange",
+      "created_at" : "Mon Feb 20 2017 20:24:25 GMT+0200 (GTB Standard Time)",
+      "name" : "IN PPROGRESS",
+      "order" : 1,
+      "projectId" : "-KdRh_nFQT3Im1KfUPMW"
+    },
+    "-KdRmdEq-T-AmCqRvPQq" : {
+      "color" : "green",
+      "created_at" : "Mon Feb 20 2017 20:31:02 GMT+0200 (GTB Standard Time)",
+      "name" : "DONE",
+      "order" : 2,
+      "projectId" : "-KdRh_nFQT3Im1KfUPMW"
+    },
+    "ToDo" : {
+      "color" : "gray",
+      "created_at" : "Mon Feb 20 2017 20:31:02 GMT+0200 (GTB Standard Time)",
+      "name" : "TO DO",
+      "order" : 0,
+      "projectId" : "-KdRh_nFQT3Im1KfUPMW"
+    }
+  },
+  "cards" : {
+    "-KdTXIRPx0OAe8V9tfba" : {
+      "cardListId" : "ToDo",
+      "created_at" : "Tue Feb 21 2017 04:38:52 GMT+0200 (GTB Standard Time)",
+      "description" : "Read it before the  Friday presentation, discuss ideas with the team.",
+      "isExpanded" : true,
+      "name" : "Read \"Don't make me think\"",
+      "order" : 0
+    },
+    "-KdTYCqtrRKoZejMUQaA" : {
+      "cardListId" : "ToDo",
+      "created_at" : "Tue Feb 21 2017 04:42:52 GMT+0200 (GTB Standard Time)",
+      "description" : "Test driven development desc",
+      "isExpanded" : false,
+      "name" : "Test driven development",
+      "order" : 0
+    },
+    "-KdT_XMJHSc5EEdMbZPL" : {
+      "cardListId" : "-KdRl7OguO3iT-Uapu1B",
+      "created_at" : "Tue Feb 21 2017 04:53:00 GMT+0200 (GTB Standard Time)",
+      "description" : "Read tech articles on medium desc",
+      "isExpanded" : false,
+      "name" : "Read tech articles on medium",
+      "order" : 0
+    },
+    "-KdT_hWu_JChDp22_yYe" : {
+      "cardListId" : "-KdRl7OguO3iT-Uapu1B",
+      "created_at" : "Tue Feb 21 2017 04:53:46 GMT+0200 (GTB Standard Time)",
+      "description" : "Write code with the supervision of  another colleague.",
+      "isExpanded" : true,
+      "name" : "Pair programming",
+      "order" : 0
+    },
+    "-KdT_vWZ6zbKoG4ubmgF" : {
+      "cardListId" : "-KdRl7OguO3iT-Uapu1B",
+      "created_at" : "Tue Feb 21 2017 04:54:43 GMT+0200 (GTB Standard Time)",
+      "description" : "Read on time management desc",
+      "isExpanded" : false,
+      "name" : "Read on time management",
+      "order" : 0
+    },
+    "-KdTaA4uy_7iFCw0Bzr5" : {
+      "cardListId" : "-KdRmdEq-T-AmCqRvPQq",
+      "created_at" : "Tue Feb 21 2017 04:55:47 GMT+0200 (GTB Standard Time)",
+      "description" : "Have a meeting with the team in order to get our definitions on Agile aligned.",
+      "isExpanded" : true,
+      "name" : "Meeting on Agile",
+      "order" : 0
+    }
+  },
+  "projects" : {
+    "-KdRh_nFQT3Im1KfUPMW" : {
+      "created_at" : "Mon Feb 20 2017 20:08:59 GMT+0200 (GTB Standard Time)",
+      "name" : "TestProject1"
+    }
+  },
+  "tasks" : {
+    "-KdT_iknV-6SxGejJkZt" : {
+      "cardId" : "-KdT_hWu_JChDp22_yYe",
+      "created_at" : "Tue Feb 21 2017 04:53:51 GMT+0200 (GTB Standard Time)",
+      "description" : "Write code",
+      "isCompleted" : true,
+      "order" : 0
+    },
+    "-KdT_jkICL5Q6SwKZ25c" : {
+      "cardId" : "-KdT_hWu_JChDp22_yYe",
+      "created_at" : "Tue Feb 21 2017 04:53:55 GMT+0200 (GTB Standard Time)",
+      "description" : "Check code",
+      "isCompleted" : false,
+      "order" : 0
+    },
+    "-KdT_mNQeZ0BmJvM-Xay" : {
+      "cardId" : "-KdTXIRPx0OAe8V9tfba",
+      "created_at" : "Tue Feb 21 2017 04:54:06 GMT+0200 (GTB Standard Time)",
+      "description" : "Read book",
+      "isCompleted" : false,
+      "order" : 0
+    },
+    "-KdT_oNftsSW6QX0mgYB" : {
+      "cardId" : "-KdTXIRPx0OAe8V9tfba",
+      "created_at" : "Tue Feb 21 2017 04:54:14 GMT+0200 (GTB Standard Time)",
+      "description" : "Find similar examples",
+      "isCompleted" : false,
+      "order" : 0
+    },
+    "-KdT_q8SgYfNs4USoVh3" : {
+      "cardId" : "-KdTXIRPx0OAe8V9tfba",
+      "created_at" : "Tue Feb 21 2017 04:54:21 GMT+0200 (GTB Standard Time)",
+      "description" : "Prepare presentation",
+      "isCompleted" : false,
+      "order" : 0
+    },
+    "-KdTaDPoEdDcMr9PujkO" : {
+      "cardId" : "-KdTaA4uy_7iFCw0Bzr5",
+      "created_at" : "Tue Feb 21 2017 04:56:00 GMT+0200 (GTB Standard Time)",
+      "description" : "Define Agile methodology",
+      "isCompleted" : true,
+      "order" : 0
+    },
+    "-KdTaFqonDXBEef6F-3o" : {
+      "cardId" : "-KdTaA4uy_7iFCw0Bzr5",
+      "created_at" : "Tue Feb 21 2017 04:56:10 GMT+0200 (GTB Standard Time)",
+      "description" : "What is Scrum?",
+      "isCompleted" : true,
+      "order" : 0
+    },
+    "-KdTaHSJYL0uviZyvOST" : {
+      "cardId" : "-KdTaA4uy_7iFCw0Bzr5",
+      "created_at" : "Tue Feb 21 2017 04:56:17 GMT+0200 (GTB Standard Time)",
+      "description" : "Current implementation",
+      "isCompleted" : true,
+      "order" : 0
+    },
+    "-KdTaKOLbyxnCrJz4GVs" : {
+      "cardId" : "-KdTaA4uy_7iFCw0Bzr5",
+      "created_at" : "Tue Feb 21 2017 04:56:29 GMT+0200 (GTB Standard Time)",
+      "description" : "What to improve?",
+      "isCompleted" : true,
+      "order" : 0
+    }
+  }
+}

src/app/cardlist/cardlist.component.css

@@ -50,6 +50,13 @@
 .formfields{
     margin-top: 10px;
 }
+.inline{
+    display: inline-block;
+}
+.listTitle{
+    font-weight: bold;
+    font-size: 1.2em;
+}
 
 
 

src/app/cardlist/cardlist.component.html

@@ -4,13 +4,15 @@
     (onDropSuccess)="cardDropped($event)"
     >
     <div class="panel-heading">
-        <h4>
+        <div>
-        {{item.name}}
+            <i class="fa fa-1 fa-circle inline" aria-hidden="true" [style.color]="item.color"></i>
-        &nbsp;
+            <span class="inline listTitle">
-        <button type="button" class="btn btn-default btn-xs" (click)="showAddCard()">
+            {{item.name}}
-            <i class="fa fa-plus"></i>
+            </span>
-        </button>
+            <button type="button" class="btn btn-default btn-xs inline" (click)="showAddCard()">
-        </h4>
+                <i class="fa fa-plus"></i>
+            </button>
+        </div>
     </div>
     <div class="">
         <ul class="list-group">
@@ -41,7 +43,8 @@
             <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">
+            <textarea cols="39" rows="6" class="form-control" id="taskdescription" placeholder="description" [(ngModel)] = "carddescription"></textarea>
+            <!--<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>

src/app/shared/data.service.ts

@@ -32,7 +32,11 @@ export class DataService {
 
 
     getCardLists(){
-        this.cardlists = this.af.database.list('/cardlist') as
+        this.cardlists = this.af.database.list('/cardlist',{
+            query: {
+                orderByChild: 'order'
+            }}
+        ) as
             FirebaseListObservable<CardList[]>;
         return this.cardlists;
     }