From c8d6b99344fbcea23efaabe7afd6c36ffa2a2eef Mon Sep 17 00:00:00 2001 From: Prerak Mathur Date: Tue, 23 Aug 2022 14:52:23 +0530 Subject: [PATCH 1/6] Added icons in task card --- .../src/components/Admin/TaskCard.js | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index 662906d..6aee19f 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -9,8 +9,10 @@ import { Container, Typography, Button - } from '@material-ui/core'; +import CreateIcon from '@material-ui/icons/Create'; +import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { updateTask } from '../../store/actions/admin'; @@ -45,12 +47,13 @@ const useStyles = makeStyles((theme) => ({ bodyText: { fontSize: theme.spacing(1.4), fontWeight: '400', - marginBottom: theme.spacing(.3) + marginBottom: theme.spacing(1) } })) + function TaskCard({ id, title, description, due_on, is_completed }) { const classes = useStyles() const auth = useSelector(state => state.auth) @@ -96,14 +99,29 @@ function TaskCard({ id, title, description, due_on, is_completed }) { {/* Button to mask task completed */} { (auth.user.role === "admin") ? - () + (
+ {/* Task Completed Button */} + + {/* Edit Task Button */} + +
+ ) : null } From c17b30966d08384aed27fd34779d0bb0df110d37 Mon Sep 17 00:00:00 2001 From: Prerak Mathur Date: Tue, 23 Aug 2022 15:09:34 +0530 Subject: [PATCH 2/6] Cleaned code --- .../src/components/Admin/TaskCard.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index 6aee19f..53ad51b 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -48,6 +48,12 @@ const useStyles = makeStyles((theme) => ({ fontSize: theme.spacing(1.4), fontWeight: '400', marginBottom: theme.spacing(1) + }, + icons: { + fontSize: '2.3vh' + }, + button: { + marginLeft: theme.spacing(1) } })) @@ -96,7 +102,6 @@ function TaskCard({ id, title, description, due_on, is_completed }) { } - {/* Button to mask task completed */} { (auth.user.role === "admin") ? (
@@ -105,10 +110,16 @@ function TaskCard({ id, title, description, due_on, is_completed }) { variant="contained" color="primary" onClick={() => toggleComplete(id, is_completed)} - style={{ fontSize: '1.3vh' }} > { - (is_completed) ? () : () + (is_completed) ? () + : ( + ) } {/* Edit Task Button */} @@ -116,9 +127,9 @@ function TaskCard({ id, title, description, due_on, is_completed }) { variant="contained" color="primary" onClick={() => { console.log('edit task', id) }} - style={{ marginLeft: '10px' }} + className={classes.button} > - +
) From b7afba94903264aff22d63f9120525f177561b85 Mon Sep 17 00:00:00 2001 From: Prerak Mathur Date: Tue, 23 Aug 2022 15:42:43 +0530 Subject: [PATCH 3/6] Added tooltip text --- .../src/components/Admin/TaskCard.js | 70 +++++++++++-------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index 53ad51b..f9197bd 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -10,6 +10,7 @@ import { Typography, Button } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; import CreateIcon from '@material-ui/icons/Create'; import CheckCircleIcon from '@material-ui/icons/CheckCircle'; import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; @@ -18,7 +19,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { updateTask } from '../../store/actions/admin'; - // Custom styles const useStyles = makeStyles((theme) => ({ root: { @@ -57,16 +57,12 @@ const useStyles = makeStyles((theme) => ({ } })) - - - function TaskCard({ id, title, description, due_on, is_completed }) { const classes = useStyles() const auth = useSelector(state => state.auth) const dispatch = useDispatch() const history = useHistory() - // toggle is_completed true of false function function toggleComplete(id, is_completed) { dispatch(updateTask(id, is_completed, history)) @@ -105,32 +101,50 @@ function TaskCard({ id, title, description, due_on, is_completed }) { { (auth.user.role === "admin") ? (
- {/* Task Completed Button */} - + + ) : ( + + + /> + + + ) + } + {/* Edit Task Button */} - + + + +
) : null From 945cbe40fd7fd4937219e6afc803d8531a901da1 Mon Sep 17 00:00:00 2001 From: Prerak Mathur Date: Tue, 23 Aug 2022 15:45:54 +0530 Subject: [PATCH 4/6] cleaned code --- React-frontend/src/components/Admin/TaskCard.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index f9197bd..7f13efc 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -131,8 +131,7 @@ function TaskCard({ id, title, description, due_on, is_completed }) { ) } - - {/* Edit Task Button */} + {/* Task Edit Button */} From d3f1bf73949b20a4851452ce9664011e87d5ff04 Mon Sep 17 00:00:00 2001 From: Prerak Mathur Date: Mon, 29 Aug 2022 20:28:12 +0530 Subject: [PATCH 5/6] cleaned code --- React-frontend/src/components/Admin/TaskCard.js | 1 - 1 file changed, 1 deletion(-) diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index 7f13efc..40f9180 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -137,7 +137,6 @@ function TaskCard({ id, title, description, due_on, is_completed }) {