Merge pull request #302 from PrerakMathur20/TaskCardIcon

Task card icon
scorelab · Aug 30, 2022 · 1b8410f · 1b8410f
2 parents a329041 + 975e7ba
commit 1b8410f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js
@@ -9,14 +9,16 @@ import {
     Container,
     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';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateTask } from '../../store/actions/admin';
 
 
-
 // Custom styles
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -45,19 +47,22 @@ const useStyles = makeStyles((theme) => ({
     bodyText: {
         fontSize: theme.spacing(1.4),
         fontWeight: '400',
-        marginBottom: theme.spacing(.3)
+        marginBottom: theme.spacing(1)
+    },
+    icons: {
+        fontSize: '2.3vh'
+    },
+    button: {
+        marginLeft: theme.spacing(1)
     }
 }))
 
-
-
 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))
@@ -93,17 +98,52 @@ function TaskCard({ id, title, description, due_on, is_completed }) {
                 }
             </Typography>
 
-            {/* Button to mask task completed */}
             {
                 (auth.user.role === "admin") ?
-                    (<Button
-                        variant="contained"
-                        color="primary"
-                        onClick={() => toggleComplete(id, is_completed)}>
+                    (<div>
+                        {/* Task Completed status Button */}
                         {
-                            (is_completed) ? (<span>Mark Incomplete</span>) : (<span>Mark Complete</span>)
+                            (is_completed) ? (
+                                <Tooltip title="Mark as Not Completed" placement="bottom-start">
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        onClick={() => toggleComplete(id, is_completed)}
+                                        className={classes.button}
+                                    >
+                                        <CheckCircleIcon
+                                            className={classes.icons}
+                                        />
+                                    </Button>
+                                </Tooltip>
+                            ) : (
+                                <Tooltip title="Mark as Completed" placement="bottom-start">
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        onClick={() => toggleComplete(id, is_completed)}
+                                        className={classes.button}
+                                    >
+                                        <CheckCircleOutlineIcon
+                                            className={classes.icons}
+                                        />
+                                    </Button>
+                                </Tooltip>
+                            )
                         }
-                    </Button>)
+                        {/* Task Edit Button */}
+                        <Tooltip title="Edit" placement="bottom-end">
+
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                className={classes.button}
+                            >
+                                <CreateIcon className={classes.icons} />
+                            </Button>
+                        </Tooltip>
+                    </div>
+                    )
                     : null
             }
 

diff --git a/React-frontend/src/pages/dashboard/Dashboard.js b/React-frontend/src/pages/dashboard/Dashboard.js
@@ -14,7 +14,7 @@ import {
     Box,
     Grid
 } from '@material-ui/core';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import TaskCard from '../../components/Admin/TaskCard';