feat: init basic kanban

README.md

@@ -152,16 +152,17 @@ Fluency model:
 
 - [http://agilefluency.org/](http://agilefluency.org/)
 
-Periodic based on:
+and:
 
-- [https://stackblitz.com/edit/ng-periodic-table](https://stackblitz.com/edit/ng-periodic-table)
 - [https://www.nexthink.com/periodic-table/](https://www.nexthink.com/periodic-table/)
 
 others see in the Code.
 
 ## License
 
-Tech Radar based on: [https://cofinpro.github.io/Tech-Radar/](https://cofinpro.github.io/Tech-Radar/))
+- Periodic based on:[https://stackblitz.com/edit/ng-periodic-table](https://stackblitz.com/edit/ng-periodic-table)
+- Tech Radar based on: [https://cofinpro.github.io/Tech-Radar/](https://cofinpro.github.io/Tech-Radar/))
+- Kanban based on: https://github.com/Devstackr/kanban-angular-layout
 
 [![Phodal's Idea](http://brand.phodal.com/shields/idea-small.svg)](http://ideas.phodal.com/)
 

projects/ledge-render/src/lib/components/ledge-kanban/README.md

@@ -0,0 +1 @@
+based on: https://github.com/Devstackr/kanban-angular-layout

projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.html

@@ -1 +1,30 @@
-<p>ledge-kanban works!</p>
+<div class="board">
+
+  <div class="board-bar">
+    <p class="board-name">{{ board.name }}</p>
+  </div>
+
+  <div class="board-wrapper">
+
+    <div class="board-columns" cdkDropListGroup>
+      <div class="board-column" *ngFor="let column of board.columns">
+
+        <div class="column-title">
+          {{ column.name }}
+        </div>
+
+        <div class="tasks-container"
+             cdkDropList
+             [cdkDropListData]="column.tasks"
+             (cdkDropListDropped)="drop($event)">
+          <div class="task" *ngFor="let item of column.tasks" cdkDrag>
+            {{ item }}
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.scss

@@ -0,0 +1,117 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.app-name {
+  font-size: 28px;
+  font-family: 'Lato', sans-serif;
+  font-weight: bold;
+}
+
+.has-gradient-text {
+  background: -webkit-linear-gradient(#13f7f4, #2af598);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+.board {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  // Override Automatic Minimum Size
+  // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+  min-width: 0;
+  min-height: 0;
+
+  .board-bar {
+    background: rgba(gray, 0.5);
+    padding: 8px 15px;
+
+    .board-name {
+      font-size: 20px;
+      font-weight: bold;
+      color: white;
+    }
+  }
+
+  .board-wrapper {
+    display: flex;
+    flex-grow: 1;
+    overflow-x: auto;
+
+    .board-columns {
+      display: flex;
+      flex-grow: 1;
+
+      .board-column {
+        display: flex;
+        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: 50px;
+        padding: 25px;
+
+        border-radius: 4px;
+
+        background: rgba(white, 0.5);
+
+        &:not(:first-child) {
+          margin-left: 0;
+        }
+
+        .column-title {
+          font-size: 20px;
+          font-weight: 800;
+          font-family: 'Lato', sans-serif;
+          text-transform: uppercase;
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+}
+
+
+.tasks-container {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.task {
+  display: flex;
+  padding: 15px 12px;
+  background: white;
+  border-bottom: solid 1px #ddd;
+  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);
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.tasks-container.cdk-drop-list-dragging .task:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

projects/ledge-render/src/lib/components/ledge-kanban/ledge-kanban.component.ts

@@ -1,5 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { LedgeListItem } from '../model/ledge-chart.model';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { Column } from './model/column';
+import { Board } from './model/board';
 
 @Component({
   selector: 'ledge-kanban',
@@ -13,9 +16,47 @@ export class LedgeKanbanComponent implements OnInit {
   @Input()
   config: any;
 
-  constructor() { }
+  board: Board = new Board('Test Board', [
+    new Column('Ideas', [
+      'Some random idea',
+      'This is another random idea',
+      'build an awesome application'
+    ]),
+    new Column('Research', [
+      'Lorem ipsum',
+      'foo',
+      'This was in the \'Research\' column'
+    ]),
+    new Column('Todo', [
+      'Get to work',
+      'Pick up groceries',
+      'Go home',
+      'Fall asleep'
+    ]),
+    new Column('Done', [
+      'Get up',
+      'Brush teeth',
+      'Take a shower',
+      'Check e-mail',
+      'Walk dog'
+    ])
+  ]);
+
+  constructor() {
+  }
 
   ngOnInit(): void {
   }
 
+  drop(event: CdkDragDrop<string[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(event.previousContainer.data,
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex);
+    }
+  }
+
 }

projects/ledge-render/src/lib/components/ledge-kanban/model/board.ts

@@ -0,0 +1,5 @@
+import { Column } from './column';
+
+export class Board {
+  constructor(public name: string, public columns: Column[]) {}
+}

projects/ledge-render/src/lib/components/ledge-kanban/model/column.ts

@@ -0,0 +1,3 @@
+export class Column {
+  constructor(public name: string, public tasks: string[]) {}
+}

projects/ledge-render/src/lib/custom-material.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { MatSliderModule } from '@angular/material/slider';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 const modules = [
   MatSliderModule,
+  DragDropModule,
 ];
 
 @NgModule({

src/assets/docs/help.md

@@ -1,5 +1,15 @@
 # Ledge 语法帮助
 
+```kanban
+ - Kanban Name
+     - Todo
+       - done basic feature
+     - Doing
+       - create componet
+     - Done
+       - create card
+```
+
 ```tech-radar
  - 框架
    - adopt
@@ -33,10 +43,6 @@
    - hold
 ```
 
-```kanban
-
-```
-
 ```list-style
  - 开源工具采用
  - 商业采购