TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Working on kanban table.

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-06 20:14:17 +07:00
parent f189b8ea75
commit 66f1b7dccc
4 changed files with 179 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -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",

130
frontend/pnpm-lock.yaml
View File

@ -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:

4
frontend/src/App.jsx
View File

@ -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 = () => {
</Routes>
</div>
<IconSideNav />
<UncontrolledBoard/>
<KanbanBoard/>
</BrowserRouter>
);
}

66
frontend/src/components/kanbanBoard/kanbanBoard.jsx
View File

@ -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 (
<div id="Kanban"></div>
);
};
export default KanbanBoard;