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;