From f189b8ea75dca79465235ba35d108eed9cb4633f Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Sun, 5 Nov 2023 11:59:27 +0700 Subject: [PATCH 1/2] Constructing kanban board. --- frontend/pnpm-lock.yaml | 93 +++++++++++++++++++ frontend/src/App.jsx | 6 +- .../components/kanbanBoard/kanbanBoard.jsx | 30 ++++++ 3 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/kanbanBoard/kanbanBoard.jsx diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 18613e9..73b01f7 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -1202,6 +1202,13 @@ packages: '@babel/types': 7.23.0 dev: true + /@types/hoist-non-react-statics@3.3.4: + resolution: {integrity: sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ==} + dependencies: + '@types/react': 18.2.33 + hoist-non-react-statics: 3.3.2 + dev: false + /@types/parse-json@4.0.1: resolution: {integrity: sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng==} dev: false @@ -1215,6 +1222,15 @@ packages: '@types/react': 18.2.33 dev: true + /@types/react-redux@7.1.28: + resolution: {integrity: sha512-EQr7cChVzVUuqbA+J8ArWK1H0hLAHKOs21SIMrskKZ3nHNeE+LFYA+IsoZGhVOT8Ktjn3M20v4rnZKN3fLbypw==} + dependencies: + '@types/hoist-non-react-statics': 3.3.4 + '@types/react': 18.2.33 + hoist-non-react-statics: 3.3.2 + redux: 4.2.1 + dev: false + /@types/react-transition-group@4.4.8: resolution: {integrity: sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==} dependencies: @@ -1598,6 +1614,12 @@ packages: which: 2.0.2 dev: true + /css-box-model@1.2.1: + resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==} + dependencies: + tiny-invariant: 1.3.1 + dev: false + /css-vendor@2.0.8: resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} dependencies: @@ -2653,6 +2675,10 @@ packages: yallist: 3.1.1 dev: true + /memoize-one@5.2.1: + resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} + dev: false + /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -2981,6 +3007,29 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true + /raf-schd@4.0.3: + resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==} + dev: false + + /react-beautiful-dnd@13.1.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==} + peerDependencies: + react: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.23.2 + css-box-model: 1.2.1 + memoize-one: 5.2.1 + raf-schd: 4.0.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-redux: 7.2.9(react-dom@18.2.0)(react@18.2.0) + redux: 4.2.1 + use-memo-one: 1.1.3(react@18.2.0) + transitivePeerDependencies: + - react-native + dev: false + /react-bootstrap@2.9.1(@types/react@18.2.33)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==} peerDependencies: @@ -3042,6 +3091,10 @@ packages: /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + /react-is@17.0.2: + resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} + dev: false + /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: false @@ -3050,6 +3103,28 @@ packages: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} dev: false + /react-redux@7.2.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==} + peerDependencies: + react: ^16.8.3 || ^17 || ^18 + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@types/react-redux': 7.1.28 + hoist-non-react-statics: 3.3.2 + loose-envify: 1.4.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-is: 17.0.2 + dev: false + /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -3112,6 +3187,12 @@ packages: picomatch: 2.3.1 dev: true + /redux@4.2.1: + resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} + dependencies: + '@babel/runtime': 7.23.2 + dev: false + /reflect.getprototypeof@1.0.4: resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==} engines: {node: '>= 0.4'} @@ -3396,6 +3477,10 @@ packages: any-promise: 1.3.0 dev: true + /tiny-invariant@1.3.1: + resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} + dev: false + /tiny-warning@1.0.3: resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} dev: false @@ -3515,6 +3600,14 @@ packages: punycode: 2.3.0 dev: true + /use-memo-one@1.1.3(react@18.2.0): + resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 7333c4a..76c6abc 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -7,6 +7,7 @@ import AuthenticantionPage from './components/authentication/AuthenticationPage' import SignUpPage from './components/authentication/SignUpPage'; import NavBar from './components/Nav/Navbar'; import Home from './components/Home'; +import UncontrolledBoard from './components/kanbanBoard/kanbanBoard'; const App = () => { @@ -21,9 +22,8 @@ const App = () => { }/> - {/*
- -
*/} + + ); } diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx new file mode 100644 index 0000000..852fd7d --- /dev/null +++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx @@ -0,0 +1,30 @@ +import React, { useState } from "react"; +import Column from "./Column"; + +const KanbanBoard = () => { + const [tasks, setTasks] = useState([ + { id: 1, content: "Task 1" }, + { id: 2, content: "Task 2" }, + { id: 3, content: "Task 3" }, + ]); + + const [columns, setColumns] = useState({ + backlog: tasks, + inProgress: [], + done: [], + }); + + const handleTaskDelete = (taskId) => { + const updatedTasks = tasks.filter((task) => task.id !== taskId); + setTasks(updatedTasks); + + const updatedColumns = { + ...columns, + backlog: updatedTasks, + inProgress: columns.inProgress.filter((task) => task.id !== taskId), + done: columns.done.filter((task) => task.id !== taskId), + }; + setColumns(updatedColumns); + }; + + From 66f1b7dccc36c99d9cffb093d540378e717c2c89 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Mon, 6 Nov 2023 20:14:17 +0700 Subject: [PATCH 2/2] Working on kanban table. --- frontend/package.json | 4 + frontend/pnpm-lock.yaml | 130 ++++++++++++++++++ frontend/src/App.jsx | 4 +- .../components/kanbanBoard/kanbanBoard.jsx | 66 +++++---- 4 files changed, 179 insertions(+), 25 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 7ff9906..6f616fb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@asseinfo/react-kanban": "^2.2.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@material-ui/core": "^4.12.4", @@ -18,6 +19,8 @@ "@mui/material": "^5.14.15", "@mui/system": "^5.14.15", "@react-oauth/google": "^0.11.1", + "@syncfusion/ej2-base": "^23.1.41", + "@syncfusion/ej2-kanban": "^23.1.36", "axios": "^1.5.1", "bootstrap": "^5.3.2", "dotenv": "^16.3.1", @@ -25,6 +28,7 @@ "gapi-script": "^1.2.0", "jwt-decode": "^4.0.0", "react": "^18.2.0", + "react-beautiful-dnd": "^13.1.1", "react-bootstrap": "^2.9.1", "react-dom": "^18.2.0", "react-google-login": "^5.2.2", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 73b01f7..27511eb 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@asseinfo/react-kanban': + specifier: ^2.2.0 + version: 2.2.0(react-dom@18.2.0)(react@18.2.0) '@emotion/react': specifier: ^11.11.1 version: 11.11.1(@types/react@18.2.33)(react@18.2.0) @@ -29,6 +32,12 @@ dependencies: '@react-oauth/google': specifier: ^0.11.1 version: 0.11.1(react-dom@18.2.0)(react@18.2.0) + '@syncfusion/ej2-base': + specifier: ^23.1.41 + version: 23.1.41 + '@syncfusion/ej2-kanban': + specifier: ^23.1.36 + version: 23.1.36 axios: specifier: ^1.5.1 version: 1.5.1 @@ -50,6 +59,9 @@ dependencies: react: specifier: ^18.2.0 version: 18.2.0 + react-beautiful-dnd: + specifier: ^13.1.1 + version: 13.1.1(react-dom@18.2.0)(react@18.2.0) react-bootstrap: specifier: ^2.9.1 version: 2.9.1(@types/react@18.2.33)(react-dom@18.2.0)(react@18.2.0) @@ -121,6 +133,19 @@ packages: '@jridgewell/trace-mapping': 0.3.20 dev: true + /@asseinfo/react-kanban@2.2.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-/gCigrNXRHeP9VCo8RipTOrA0vAPRIOThJhR4ibVxe6BLkaWFUEuJ1RMT4fODpRRsE3XsdrfVGKkfpRBKgvxXg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + dependencies: + react: 18.2.0 + react-beautiful-dnd: 13.1.1(react-dom@18.2.0)(react@18.2.0) + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - react-native + dev: false + /@babel/code-frame@7.22.13: resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} engines: {node: '>=6.9.0'} @@ -1173,6 +1198,111 @@ packages: tslib: 2.6.2 dev: false + /@syncfusion/ej2-base@23.1.41: + resolution: {integrity: sha512-ROtvuLIVkKl4eL+ubQjQQLleRMY98nYlxlBaFw4axtiDLoBbzOYtiFXmdP/KE+uNrMquZAwl+aduPX0loG3EAw==} + hasBin: true + dependencies: + '@syncfusion/ej2-icons': 23.1.36 + dev: false + + /@syncfusion/ej2-buttons@23.1.43: + resolution: {integrity: sha512-Jg1cC/2o6ds+xDwQSlAF7cEYP4O4C9wojKFllcVvZTwTKWVxZ2KfYeAFM1kV1GR/WuJd+TmvNhwkvmkWz8UgQw==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + dev: false + + /@syncfusion/ej2-data@23.1.43: + resolution: {integrity: sha512-kiuyuKsVogLvIP72Bd2IwETk9mOpZrbtfbOx5/y7Q1A05FQkaxlJqKFoOjkzbfMtKV5iDjAxz/Q3VHqq+hZoYA==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + dev: false + + /@syncfusion/ej2-dropdowns@23.1.43: + resolution: {integrity: sha512-75tWTEoEJU/fJ8V3CvwOeQ7svZoyftlVp7DO3oSl6nR4LuyG0Uf7BP+bSMvKVXuEyulyZmHo1/xeqjYoVp4M7g==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-data': 23.1.43 + '@syncfusion/ej2-inputs': 23.1.43 + '@syncfusion/ej2-lists': 23.1.43 + '@syncfusion/ej2-navigations': 23.1.43 + '@syncfusion/ej2-notifications': 23.1.40 + '@syncfusion/ej2-popups': 23.1.43 + dev: false + + /@syncfusion/ej2-icons@23.1.36: + resolution: {integrity: sha512-Q7S50bOzXL9X46doNIGSGr61RCY/1RW9iz1U7yyARr2XBQhWnijk+t/FVBk1piR0nioRXbKQcPZOLiEo6zf1xw==} + dev: false + + /@syncfusion/ej2-inputs@23.1.43: + resolution: {integrity: sha512-G4HhneF2HXe6Tcig5pDlTaEgR46vQJgshcEym6WEVm0G39xiUSR5NIvyvS54IldGRyWwoyWEucbpM1kWGJC+7g==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + '@syncfusion/ej2-popups': 23.1.43 + '@syncfusion/ej2-splitbuttons': 23.1.43 + dev: false + + /@syncfusion/ej2-kanban@23.1.36: + resolution: {integrity: sha512-qkp7ZS+o40I9oWj/lDJ4D20ygsOuDmjJ1CEkpz2xQgzXuHcA+/89OGeKS8WGFtK2uPSl+U2ub2PdopXF4OqL+w==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + '@syncfusion/ej2-data': 23.1.43 + '@syncfusion/ej2-dropdowns': 23.1.43 + '@syncfusion/ej2-inputs': 23.1.43 + '@syncfusion/ej2-layouts': 23.1.36 + '@syncfusion/ej2-navigations': 23.1.43 + '@syncfusion/ej2-notifications': 23.1.40 + '@syncfusion/ej2-popups': 23.1.43 + dev: false + + /@syncfusion/ej2-layouts@23.1.36: + resolution: {integrity: sha512-vS1KpUxLcrFNjRgkaotWWMmja9x1XjY06r70P/1JbxT66oJZwv5YRfBBqT1rFeYEWUGm0ciMEMehyTsPE3Pefw==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + dev: false + + /@syncfusion/ej2-lists@23.1.43: + resolution: {integrity: sha512-AoEpXn7F8AmXq74PmGCqQjURHnriyhimVreenDWrB1HlMUPcAw7Lkep4gYQdJXYyfWlT+GE+lr6lfS7hgAFT+A==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + '@syncfusion/ej2-data': 23.1.43 + dev: false + + /@syncfusion/ej2-navigations@23.1.43: + resolution: {integrity: sha512-3eiMnciQx8X5FSQd4CONd5yZfTvphcgH3U+tQNFecntCh/3hfoYoj0yGkayakIR0DP08YE32y3/8yztwK+GwUQ==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + '@syncfusion/ej2-data': 23.1.43 + '@syncfusion/ej2-inputs': 23.1.43 + '@syncfusion/ej2-lists': 23.1.43 + '@syncfusion/ej2-popups': 23.1.43 + dev: false + + /@syncfusion/ej2-notifications@23.1.40: + resolution: {integrity: sha512-xB0U/THNVQN09AK+5DV6f9e7YbvWi5UqhdObCdpZarAMOFUEZBtAIVQRxc1LrINRmRapGU7NMFQj1F1xU7DVyw==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + '@syncfusion/ej2-popups': 23.1.43 + dev: false + + /@syncfusion/ej2-popups@23.1.43: + resolution: {integrity: sha512-I3CT7LmJHJ4r+4kRrVMgOTUrV7xpVHkjk67ApbJFucpN++Qo18b9Qy/QetRera5mS26ZVG78T3TST3g9dvO5Zw==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-buttons': 23.1.43 + dev: false + + /@syncfusion/ej2-splitbuttons@23.1.43: + resolution: {integrity: sha512-NbT5XMCU87QPRr4svcEn/zEwIFAmwZiAYYLz2WjiuKVOnFw6htAKT81FF7X4CLl4HN0o1S7w09N9r5HQxv3mgQ==} + dependencies: + '@syncfusion/ej2-base': 23.1.41 + '@syncfusion/ej2-popups': 23.1.43 + dev: false + /@types/babel__core@7.20.3: resolution: {integrity: sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==} dependencies: diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 76c6abc..47a3ef4 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -7,7 +7,7 @@ import AuthenticantionPage from './components/authentication/AuthenticationPage' import SignUpPage from './components/authentication/SignUpPage'; import NavBar from './components/Nav/Navbar'; import Home from './components/Home'; -import UncontrolledBoard from './components/kanbanBoard/kanbanBoard'; +import KanbanBoard from './components/kanbanBoard/kanbanBoard'; const App = () => { @@ -23,7 +23,7 @@ const App = () => { - + ); } diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx index 852fd7d..5ddfc7d 100644 --- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx +++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx @@ -1,30 +1,50 @@ -import React, { useState } from "react"; -import Column from "./Column"; +import React, { useEffect } from 'react'; +import * as ej from '@syncfusion/ej2-base'; // Import necessary Syncfusion modules and styles +import '@syncfusion/ej2-base/styles/material.css'; +import '@syncfusion/ej2-buttons/styles/material.css'; +import '@syncfusion/ej2-lists/styles/material.css'; +import '@syncfusion/ej2-inputs/styles/material.css'; +import '@syncfusion/ej2-popups/styles/material.css'; +import '@syncfusion/ej2-dropdowns/styles/material.css'; +import '@syncfusion/ej2-splitbuttons/styles/material.css'; +import '@syncfusion/ej2-navigations/styles/material.css'; +import '@syncfusion/ej2-kanban/styles/material.css'; +import '@syncfusion/ej2-react-kanban/styles/material.css'; const KanbanBoard = () => { - const [tasks, setTasks] = useState([ - { id: 1, content: "Task 1" }, - { id: 2, content: "Task 2" }, - { id: 3, content: "Task 3" }, - ]); + useEffect(() => { + const kanbanData = [ + // Your Kanban data here + ]; - const [columns, setColumns] = useState({ - backlog: tasks, - inProgress: [], - done: [], - }); + const kanbanObj = new ej.kanban.Kanban({ + dataSource: kanbanData, + keyField: 'Status', + columns: [ + { headerText: 'Backlog', keyField: 'Open' }, + { headerText: 'In Progress', keyField: 'InProgress' }, + { headerText: 'Testing', keyField: 'Testing' }, + { headerText: 'Done', keyField: 'Close' } + ], + cardSettings: { + contentField: 'Summary', + headerField: 'Id', + }, + swimlaneSettings: { + keyField: 'Assignee' + } + }); - const handleTaskDelete = (taskId) => { - const updatedTasks = tasks.filter((task) => task.id !== taskId); - setTasks(updatedTasks); - - const updatedColumns = { - ...columns, - backlog: updatedTasks, - inProgress: columns.inProgress.filter((task) => task.id !== taskId), - done: columns.done.filter((task) => task.id !== taskId), + kanbanObj.appendTo('#Kanban'); + + return () => { + kanbanObj.destroy(); }; - setColumns(updatedColumns); - }; + }, []); + return ( +
+ ); +}; +export default KanbanBoard;