[update] readme preview

README.md

@@ -2,7 +2,7 @@
 
 [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
 
-![DHTMLX Kanban with Angular Demo](https://raw.githubusercontent.com/DHTMLX/angular-kanban-demo/master/kanban.png)
+![DHTMLX Kanban with Angular Demo](kanban.png)
 
 ## How to start
 

src/app/app.module.ts

@@ -7,7 +7,6 @@ import { KanbanComponent } from "./kanban/kanban.component";
 @NgModule({
  declarations: [AppComponent, KanbanComponent],
  imports: [BrowserModule],
- providers: [],
- bootstrap: [AppComponent],
+ bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/kanban/data.ts

@@ -3,29 +3,31 @@ export function getData() {
  {
  id: 1,
  label: "Steve Smith",
- avatar: "../assets/user.jpg",
+ avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
  },
  {
  id: 2,
  label: "Aaron Long",
- avatar: "../assets/user-2.jpg",
+ avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
  },
  {
  id: 3,
  label: "Angela Allen",
- avatar: "../assets/user-3.jpg",
+ avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
  },
  {
  id: 4,
  label: "Angela Long",
- avatar: "../assets/user-4.jpg",
- },
+ avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
+ }
  ];
 
  const cardShape = {
  label: true,
  description: true,
  progress: true,
+ comments: true,
+ votes: true,
  start_date: true,
  end_date: true,
  users: {
@@ -35,9 +37,9 @@ export function getData() {
  priority: {
  show: true,
  values: [
- { id: 1, color: "#FF5252", label: "high" },
- { id: 2, color: "#FFC975", label: "medium" },
- { id: 3, color: "#65D3B3", label: "low" },
+ { id: 1, color: "#FF5252", label: "High", value: 1 },
+ { id: 2, color: "#FFC975", label: "Medium", value: 2 },
+ { id: 3, color: "#65D3B3", label: "Low", value: 3 },
  ],
  },
  color: true,
@@ -46,15 +48,6 @@ export function getData() {
  attached: false,
  };
 
- const editorShape = [
- {
- type: "multiselect",
- key: "users",
- label: "Users",
- options: users,
- },
- ];
-
  const columns = [
  {
  label: "Backlog",
@@ -95,8 +88,26 @@ export function getData() {
  users: [3, 2],
  column: "backlog",
  type: "feature",
+ comments: [
+ {
+ id: 1,
+ userId: 1,
+ cardId: 1,
+ text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ",
+ date: new Date(),
+ },
+ {
+ id: 2,
+ userId: 2,
+ cardId: 1,
+ text: "Hi, Aaron. I am sure that that's exactly what is thought best out there in Dunwall. Let's just do what we are supposed to do to get the result.",
+ date: new Date(),
+ },
+ ],
+ votes: [1, 3, 4],
  },
  {
+ id: 2,
  label: "Archive the cards/boards ",
  priority: 3,
  color: "#58C3FE",
@@ -106,6 +117,7 @@ export function getData() {
  type: "feature",
  },
  {
+ id: 3,
  label: "Searching and filtering",
  priority: 1,
  color: "#58C3FE",
@@ -116,6 +128,7 @@ export function getData() {
  type: "task",
  },
  {
+ id: 4,
  label: "Set the tasks priorities",
  color: "#FFC975",
  start_date: new Date("12/21/2020"),
@@ -126,14 +139,15 @@ export function getData() {
  attached: [
  {
  isCover: true,
- coverURL: "../assets/img-1.jpg",
- previewURL: "../assets/img-1.jpg",
- url: "../assets/img-1.jpg",
+ coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
+ previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
+ url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
  name: "img-1.jpg",
  },
  ],
  },
  {
+ id: 5,
  label: "Custom icons",
  color: "#65D3B3",
  start_date: new Date("01/07/2021"),
@@ -142,6 +156,7 @@ export function getData() {
  type: "task",
  },
  {
+ id: 6,
  label: "Integration with Gantt",
  color: "#FFC975",
  start_date: new Date("12/21/2020"),
@@ -151,6 +166,7 @@ export function getData() {
  type: "task",
  },
  {
+ id: 7,
  label: "Drag and drop",
  priority: 1,
  color: "#58C3FE",
@@ -160,6 +176,7 @@ export function getData() {
  type: "feature",
  },
  {
+ id: 8,
  label: "Adding images",
  color: "#58C3FE",
  users: [4],
@@ -168,14 +185,15 @@ export function getData() {
  attached: [
  {
  isCover: true,
- coverURL: "../assets/img-2.jpg",
- previewURL: "../assets/img-2.jpg",
- url: "../assets/img-2.jpg",
+ coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
+ previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
+ url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
  name: "img-2.jpg",
  },
  ],
  },
  {
+ id: 9,
  label: "Create cards and lists from the UI and from code",
  priority: 3,
  color: "#65D3B3",
@@ -185,14 +203,15 @@ export function getData() {
  type: "feature",
  },
  {
- id: 5,
+ id: 10,
  label: "Draw swimlanes",
  color: "#FFC975",
  users: [2],
  column: "done",
  type: "feature",
  },
  {
+ id: 11,
  label: "Progress bar",
  priority: 1,
  color: "#FFC975",
@@ -210,6 +229,5 @@ export function getData() {
  cards,
  users,
  cardShape,
- editorShape,
  };
 }

src/app/kanban/kanban.component.css

@@ -1,7 +1,7 @@
 @import "../../../node_modules/@dhx/trial-kanban/dist/kanban.css";
 
-.widget {
- position: relative;
- width: 100%;
- height: 100%;
+.component_container {
+ height: 100%; 
+ width: 100%; 
+ margin: 0 auto;
 }

src/app/kanban/kanban.component.ts

@@ -1,4 +1,4 @@
-import { Kanban } from "@dhx/trial-kanban";
+import { Kanban, Toolbar, defaultEditorShape } from "@dhx/trial-kanban";
 import { getData } from "./data";
 
 import {
@@ -7,31 +7,62 @@ import {
  OnInit,
  OnDestroy,
  ViewChild,
- ViewEncapsulation,
+ ViewEncapsulation
 } from "@angular/core";
 
 @Component({
  encapsulation: ViewEncapsulation.None,
  selector: "kanban",
  styleUrls: ["./kanban.component.css"],
- template: `<div #here class="widget"></div>`,
+ template: `<div class="component_container">
+ <div #toolbar_container></div>
+ <div #kanban_container style="height: calc(100% - 56px);"></div>
+ </div>`
 })
+
 export class KanbanComponent implements OnInit, OnDestroy {
- @ViewChild("here", { static: true }) container!: ElementRef;
+ @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
+ @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;
 
  private _kanban!: Kanban;
+ private _toolbar!: Toolbar;
 
  ngOnInit() {
- const { cards, columns } = getData();
- const kanban = new Kanban(this.container.nativeElement, {
+ const { cards, columns, rows, cardShape } = getData();
+ this._kanban = new Kanban(this.kanban_container.nativeElement, {
  columns,
  cards,
+ rows,
+ rowKey: "type",
+ cardShape,
+ editorShape: [
+ ...defaultEditorShape, // import default config for editorShape
+ {
+ type: "links",
+ key: "links",
+ label: "Links"
+ },
+ {
+ type: "comments",
+ key: "comments",
+ label: "Comments",
+ config: {
+ placement: "editor"
+ }
+ }
+ ],
+ currentUser: 1,
+ // other configuration properties
  });
 
- this._kanban = kanban;
+ this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
+ api: this._kanban.api,
+ // other configuration properties 
+ });
  }
 
  ngOnDestroy(): void {
  this._kanban.destructor();
+ this._toolbar.destructor();
  }
 }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
- <title>DHX :: Angular</title>
+ <title>DHX Kanban Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">