diff --git a/README.md b/README.md
index d445125..151645f 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,7 @@
[](https://dhtmlx.com/)
-
-
+
## How to start
diff --git a/kanban.png b/kanban.png
index 781dd33..555b3f1 100644
Binary files a/kanban.png and b/kanban.png differ
diff --git a/public/index.html b/public/index.html
index 4ad4fcf..5359113 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,10 +6,9 @@
-
- XBS :: React
+ DHX Kanban React
diff --git a/src/App.js b/src/App.js
index d802cf4..f56b291 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,9 @@
-import "./styles.css";
-
import Kanban from "./Kanban";
import { getData } from "./data";
function App() {
- const { columns, cards } = getData();
- return ;
+ const { cards, columns, rows, cardShape } = getData();
+ return ;
}
export default App;
diff --git a/src/Kanban.jsx b/src/Kanban.jsx
index 6c2f04d..a56d44d 100644
--- a/src/Kanban.jsx
+++ b/src/Kanban.jsx
@@ -1,18 +1,51 @@
import { useEffect, useRef } from "react";
-import { Kanban } from "@dhx/trial-kanban";
+import { Kanban, Toolbar, defaultEditorShape } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";
-export default function KanbanView(props) {
- let container = useRef();
+export default function KanbanComponent(props) {
+ let kanban_container = useRef();
+ let toolbar_container = useRef();
useEffect(() => {
- new Kanban(container.current, {
+ const kanban = new Kanban(kanban_container.current, {
columns: props.columns,
cards: props.cards,
+ rows: props.rows,
+ rowKey: "type",
+ cardShape: props.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
+ });
+
+ const toolbar = new Toolbar(toolbar_container.current, {
+ api: kanban.api,
+ // other configuration properties
});
- return () => (container.current.innerHTML = "");
+ return () => {
+ kanban.destructor();
+ toolbar.destructor();
+ };
}, []);
- return ;
+ return
}
diff --git a/src/data.js b/src/data.js
index 9b60385..c0fc6a4 100644
--- a/src/data.js
+++ b/src/data.js
@@ -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,7 +203,7 @@ export function getData() {
type: "feature",
},
{
- id: 5,
+ id: 10,
label: "Draw swimlanes",
color: "#FFC975",
users: [2],
@@ -193,6 +211,7 @@ export function getData() {
type: "feature",
},
{
+ id: 11,
label: "Progress bar",
priority: 1,
color: "#FFC975",
@@ -210,6 +229,5 @@ export function getData() {
cards,
users,
cardShape,
- editorShape,
};
}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..eae87bd
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,19 @@
+/* specify styles for initial page */
+html,
+body,
+#root {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+/* specify styles for Kanban and Toolbar container*/
+.component_container {
+ height: 100%;
+ margin: 0 auto;
+}
+
+/* specify styles for Kanban container*/
+.widget {
+ height: calc(100% - 56px);
+}
diff --git a/src/index.js b/src/index.js
index c223b56..2cb1087 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,11 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import App from "./App";
-
-const rootElement = document.getElementById("root");
-const root = createRoot(rootElement);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
-
+
);
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index ef8ea91..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-html,
-body,
-#root {
- height: 100%;
- padding: 0;
- margin: 0;
-}