#73: Detailed task FE BE

app/web/package.json

@@ -18,15 +18,20 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.19",
-    "@mui/material": "^5.14.19",
+    "@mui/lab": "^5.0.0-alpha.165",
+    "@mui/material": "^5.15.10",
+    "@mui/x-date-pickers": "^6.19.4",
     "@reduxjs/toolkit": "^2.0.1",
+    "@uiw/react-md-editor": "^4.0.3",
     "axios": "^1.6.5",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-cookie": "^7.0.2",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.1",
     "react-router-dom": "^6.20.1",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "rehype-sanitize": "^6.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

app/web/src/App.js

@@ -10,6 +10,7 @@ import Settings from './components/pages/settings/Settings';
 import Login from './components/pages/auth/login/Login';
 import Register from './components/pages/auth/register/Register';
 import HandleSession from './components/pages/auth/HandleSession';
+import Task from './components/pages/task/detailed/Task';
 
 const App = () =>
 {
@@ -49,6 +50,7 @@ const App = () =>
 
 				<Routes>
 					<Route path='/' element={activeUser ? <Home /> : <Login />} />
+					<Route path='/task/*' element={activeUser ? <Task /> : <Login />} />
 					<Route path='/settings' element={activeUser ? <Settings /> : <Login />} />
 					<Route path='/auth/login' element={activeUser ? <Home /> : <Login />} />
 					<Route path='/auth/register' element={activeUser ? <Home /> : <Register />} />

app/web/src/components/layout/header/Header.js

@@ -6,7 +6,7 @@ import { uiActions } from '../../../store/slices/uiSlice';
 import { useRef } from 'react';
 import UserMenu from './menu/UserMenu';
 
-const Header = ({ titleTxt, subtitleTxt }) =>
+const Header = ({ titleTxt, subtitleTxt, onClick, onBlur }) =>
 {
 	const dispatch = useDispatch();
 	const refUser = useRef(null);
@@ -25,13 +25,15 @@ const Header = ({ titleTxt, subtitleTxt }) =>
 				justifyContent: 'space-between'
 			} }>
 
-			<Typography variant='h3'
-						sx={ {
-							fontWeight: 'bold'
-						} }>
-
-				{ titleTxt?.length > 0 ? titleTxt : 'Dashboard' }
-			</Typography>
+			{/*<Tooltip title={titleTxt} placement={'bottom-start'}>*/}
+				<Typography variant={'h3'} onClick={onClick} onBlur={onBlur} noWrap
+							sx={{
+								fontWeight: 'bold',
+								maxWidth: 900
+							}}>
+					{titleTxt}
+				</Typography>
+			{/*</Tooltip>*/}
 
 			<Box
 				sx={ {
@@ -42,8 +44,7 @@ const Header = ({ titleTxt, subtitleTxt }) =>
 				<Tooltip title={'Press CTRL + / to open search window'}>
 					<Button
 						onClick={ () => dispatch(uiActions.setSearchOpen(true)) }>
-						<SearchIcon
-							color={ 'primary' }
+						<SearchIcon color={ 'primary' }
 							sx={ {
 								cursor: 'pointer'
 							} }/>

app/web/src/components/pages/home/HomeController.js

@@ -1,6 +1,6 @@
-import { teamActions } from '../../../store/slices/teamSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import {teamActions} from '../../../store/slices/teamSlice';
+import {useDispatch, useSelector} from 'react-redux';
+import {useNavigate} from 'react-router-dom';
 import axios from 'axios';
 
 const HomeController = () =>
@@ -14,7 +14,7 @@ const HomeController = () =>
 
 	const handeValChange = (e, val, reason) =>
 	{
-		if ( reason === 'selectOption' )
+		if (reason === 'selectOption' && selectedTeam.id !== val.id)
 		{
 			dispatch(teamActions.setSelectedTeam(val));
 			dispatch(teamActions.setTeamStats(null));
@@ -25,15 +25,15 @@ const HomeController = () =>
 	const getCount = async (teamId) =>
 	{
 		axios.get('http://localhost:8080/tasks/count/' + (teamId ?? -1),
-			{ headers: {"Authorization" : `Bearer ${btoken}`} })
-			 .then(res =>
-			 {
-				 if (res.status === 200 && res.data.status)
-				 {
-					 dispatch(teamActions.setTeamStats(res.data.data))
-				 }
-			 })
-			 .catch(e => dispatch(teamActions.setTeamStats(null)));
+			{headers: {"Authorization": `Bearer ${btoken}`}})
+			.then(res =>
+			{
+				if (res.status === 200 && res.data.status)
+				{
+					dispatch(teamActions.setTeamStats(res.data.data))
+				}
+			})
+			.catch(e => dispatch(teamActions.setTeamStats(null)));
 	};
 
 	return {

app/web/src/components/pages/settings/Settings.js

@@ -14,21 +14,21 @@ const Settings = () => {
 			<Tabs
 				value={tabIdx}
 				onChange={(_e, newValue) => setTabIdx(newValue)}
-				sx={{ my: 5, borderBottom: 2, borderColor: 'grey.light' }}
+				sx={{ my: 5, borderBottom: 1, borderColor: 'divider'}}
 				indicatorColor='none'>
 				<Tab
 					label='User Information'
 					aria-controls={`simple-tabpanel-${tabIdx}`}
 					sx={{
 						'&.Mui-selected':
-							{ bgcolor: 'grey.light', color: 'white.light', borderTopLeftRadius: 5, borderTopRightRadius: 5 }
+							{  borderTopLeftRadius: 5, borderTopRightRadius: 5, borderBottom: 2 }
 					}} />
 				<Tab
 					label='Change Password'
 					aria-controls={`simple-tabpanel-${tabIdx}`}
 					sx={{
 						'&.Mui-selected':
-							{ bgcolor: 'grey.light', color: 'white.light', borderTopLeftRadius: 5, borderTopRightRadius: 5 }
+							{ borderTopLeftRadius: 5, borderTopRightRadius: 5, borderBottom: 2 }
 					}} />
 			</Tabs>
 			<Box component='div' role='tabpanel' hidden={tabIdx !== 0} sx={{ mx: '10%' }}>

app/web/src/components/pages/task/detailed/Task.js

@@ -0,0 +1,30 @@
+import {useDispatch, useSelector} from 'react-redux';
+import {useEffect} from 'react';
+import {getTaskDetails} from '../../../../store/controllers/taskController';
+import TabNavigation from './navigation/TabNavigation';
+import {taskActions} from '../../../../store/slices/taskSlice';
+import TaskHeader from './navigation/TaskHeader';
+
+const Task = () =>
+{
+	const id = document.URL.split('/').pop();
+	const task = useSelector(state => state.task.loadedTask);
+	const tkn = useSelector(state => state.user.btoken);
+
+	const dispatch = useDispatch();
+
+	useEffect(() =>
+	{
+		dispatch(taskActions.setTaskId(id));
+		dispatch(getTaskDetails(id, tkn));
+	}, [id]);
+
+	return task !== null
+		   ? <>
+			   <TaskHeader/>
+			   <TabNavigation/>
+		   </>
+		   : null;
+};
+
+export default Task;

app/web/src/components/pages/task/detailed/description/TaskDescription.js

@@ -0,0 +1,75 @@
+import {useDispatch, useSelector} from 'react-redux';
+import {Box} from '@mui/material';
+import {useRef, useState} from 'react';
+import rehypeSanitize from 'rehype-sanitize';
+import MDEditor, {commands} from '@uiw/react-md-editor';
+import {updateTaskValuePatch} from '../../../../../store/controllers/taskController';
+
+const TaskDescription = () =>
+{
+	const task = useSelector(state => state.task.loadedTask);
+	const id = useSelector(state => state.task.taskId);
+	const tkn = useSelector(state => state.user.btoken);
+
+	const [editable, setEditable] = useState(false);
+	const [value, setValue] = useState(task.description);
+
+	const timerRef = useRef();
+	const dispatch = useDispatch();
+
+	const handleEditable = (e) =>
+	{
+		e.preventDefault();
+
+		setEditable(true);
+
+		handleSave(value, e);
+	}
+
+	const handleSave = (v) =>
+	{
+		setValue(v);
+
+		if(timerRef.current)
+		{
+			clearTimeout(timerRef.current);
+		}
+
+		timerRef.current = setTimeout(() =>
+		{
+			if(v !== task.description)
+			{
+				dispatch(updateTaskValuePatch(tkn, id, 'description', value));
+			}
+
+			setEditable(false);
+		}, 3000);
+	};
+
+	return task !== null
+		   ? <Box
+			   sx={{p: 2, cursor: 'pointer'}}
+			   onClick={handleEditable}>
+
+			   <MDEditor
+				   style={{display: editable ? 'block' : 'none'}}
+				   height={'100%'}
+				   preview={'edit'}
+				   autoFocus={true}
+				   visibleDragbar={false}
+				   value={value}
+				   onChange={handleSave}
+				   previewOptions={{
+					   rehypePlugins: [[rehypeSanitize]],
+				   }}
+				   extraCommands={[commands.codeEdit, commands.codeLive]}
+			   />
+
+			   <MDEditor.Markdown source={value}
+								  style={{whiteSpace: 'pre-wrap', display: !editable ? 'block' : 'none'}}/>
+		   </Box>
+
+		   : null;
+};
+
+export default TaskDescription;

app/web/src/components/pages/task/detailed/navigation/TabNavigation.js

@@ -0,0 +1,50 @@
+import {Box, Tab} from '@mui/material';
+import {TabContext, TabList, TabPanel} from '@mui/lab';
+import {useState} from 'react';
+import TaskDescription from '../description/TaskDescription';
+import TaskOverview from '../overview/TaskOverview';
+
+const TabNavigation = () =>
+{
+	const [value, setValue] = useState('1');
+
+	const handleChange = (event, newValue) =>
+	{
+		setValue(newValue);
+	};
+
+	return <TabContext value={value}>
+		<Box sx={{
+			borderBottom: 1,
+			borderColor: 'divider',
+			mt: 8,
+			mb: 2
+		}}>
+
+			<TabList onChange={handleChange}>
+				<Tab label='Description' value={'1'}/>
+				<Tab label='Overview' value={'2'}/>
+				<Tab label='Comments' value={'3'}/>
+				<Tab label='History' value={'4'}/>
+			</TabList>
+		</Box>
+
+		<TabPanel value={'1'}>
+			<TaskDescription/>
+		</TabPanel>
+
+		<TabPanel value={'2'}>
+			<TaskOverview/>
+		</TabPanel>
+
+		<TabPanel value={'3'}>
+			Comments TODO
+		</TabPanel>
+
+		<TabPanel value={'4'}>
+			History TODO
+		</TabPanel>
+	</TabContext>
+};
+
+export default TabNavigation;

app/web/src/components/pages/task/detailed/navigation/TaskHeader.js

@@ -0,0 +1,40 @@
+import Header from '../../../../layout/header/Header';
+import {useDispatch, useSelector} from 'react-redux';
+import {useState} from 'react';
+import {TextField} from '@mui/material';
+import {updateTaskValuePatch} from '../../../../../store/controllers/taskController';
+
+const TaskHeader = () =>
+{
+	const task = useSelector(state => state.task.loadedTask);
+	const tkn = useSelector(state => state.user.btoken);
+	const id = useSelector(state => state.task.taskId);
+
+	const [editable, setEditable] = useState(false);
+	const dispatch = useDispatch();
+
+	const handleKey = (e) =>
+	{
+		if(e.keyCode === 13)
+		{
+			handleSave(e);
+		}
+	};
+
+	const handleSave = (e) =>
+	{
+		if(e.target.value !== task.title)
+		{
+			dispatch(updateTaskValuePatch(tkn, id, 'title', e.target.value));
+		}
+
+		setEditable(false);
+	};
+
+	return <Header onClick={() => setEditable(true)}
+		subtitleTxt={`Created by ` + task.creatorUser.fname + ' ' + task.creatorUser.lname + ' Created on ' + task.createdDate}
+		titleTxt={!editable ? '#' + task.id + ': ' + task.title
+							: <TextField margin={'dense'} autoFocus onBlur={handleSave} onKeyDown={handleKey} defaultValue={task.title}/>}/>
+};
+
+export default TaskHeader;