From abf663bfb0d33a3fa7f02c9daf91cb120d06edbb Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Mon, 13 Apr 2020 19:43:21 +0800
Subject: [PATCH] fix: fix column empty issue

---
 .../ledge-kanban/ledge-kanban.component.scss  | 28 +++++++++----------
 .../ledge-kanban/ledge-kanban.component.ts    | 10 +++++--
 src/assets/docs/help.md                       | 17 +++++------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.scss b/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.scss
index 8de76a6c..2cbfc837 100644
--- a/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.scss
+++ b/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.scss
@@ -1,3 +1,8 @@
+$medium-grey: #ddd;
+$fontColor: white;
+$bgColor: rgb(0, 121, 191);
+$boardColor: rgba(white, 0.5);
+
 .root {
   display: flex;
   flex-direction: column;
@@ -12,16 +17,16 @@
   // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
   min-width: 0;
   min-height: 0;
+  background: $bgColor;
 
   .board-bar {
-    background: rgba(gray, 0.5);
     padding: 8px 15px;
 
     .board-name {
       font-size: 20px;
       font-weight: bold;
-      color: white;
-      text-align: center;
+      color: $fontColor;
+      text-align: left;
     }
   }
 
@@ -39,14 +44,11 @@
         flex-direction: column;
         flex-grow: 1;
         flex-basis: 0; // to force the columns to all be the same size, regardless of content
-
-        min-width: 300px;
-        margin: 32px;
-        padding: 24px;
-
+        min-width: 250px;
+        margin: 12px;
+        padding: 12px;
         border-radius: 4px;
-
-        background: rgba(white, 0.5);
+        background: $boardColor;
 
         &:not(:first-child) {
           margin-left: 0;
@@ -71,12 +73,10 @@
 .task {
   display: flex;
   padding: 15px 12px;
-  background: white;
-  border-bottom: solid 1px #ddd;
+  background: $fontColor;
+  border-bottom: solid 1px $medium-grey;
   border-radius: 4px;
-
   margin-bottom: 15px;
-
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05),
   0 3px 14px 2px rgba(0, 0, 0, 0.05);
 }
diff --git a/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.ts b/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.ts
index bf7ba5b1..b3dc9fbe 100644
--- a/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.ts
+++ b/projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.ts
@@ -29,13 +29,19 @@ export class LedgeKanbanComponent implements OnInit, OnChanges {
   }
 
   private updateKanbanData() {
+    if (this.data.length <= 0) {
+      return;
+    }
+
     const kanbanData = this.data[0];
 
     this.board = new Board(kanbanData.name, []);
     for (const column of kanbanData.children) {
       const col = new Column(column.name, []);
-      for (const cell of column.children) {
-        col.tasks.push(cell.name);
+      if (!!column.children) {
+        for (const cell of column.children) {
+          col.tasks.push(cell.name);
+        }
       }
       this.board.columns.push(col);
     }
diff --git a/src/assets/docs/help.md b/src/assets/docs/help.md
index ade96ba0..53003872 100644
--- a/src/assets/docs/help.md
+++ b/src/assets/docs/help.md
@@ -2,14 +2,15 @@
 
 ```kanban
  - Kanban Name
-     - Todo
-       - done basic feature
-       - write document
-     - Doing
-       - create componet
-       - add testing
-     - Done
-       - create card
+   - Todo
+     - done basic feature
+     - write document
+   - Doing
+     - create componet
+     - add testing
+   - Done
+     - create card
+   - Done
 ```
 
 ```tech-radar