fix: fix column empty issue

phodal · Apr 13, 2020 · abf663b · abf663b
1 parent 278b78f
commit abf663b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 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
@@ -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
@@ -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
@@ -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