Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Task card icon #302

Merged
merged 18 commits into from
Aug 30, 2022
Merged

Task card icon #302

Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
51d2094
Dashboard Files
PrerakMathur20 Aug 6, 2022
a352dfe
Open path Filter path
PrerakMathur20 Aug 8, 2022
f88161f
Open Keyword path
PrerakMathur20 Aug 8, 2022
2c3b9ff
ProfileCard Layout
PrerakMathur20 Aug 13, 2022
01bce1a
Merge branch 'master' of https://github.com/PrerakMathur20/OpenMF int…
PrerakMathur20 Aug 15, 2022
bb5eb56
Profle Card Component Created
PrerakMathur20 Aug 18, 2022
72a31fc
Profile card added to Dashobard
PrerakMathur20 Aug 18, 2022
133d407
Profile Card error fixed
PrerakMathur20 Aug 20, 2022
483be91
Dashboard Completed
PrerakMathur20 Aug 20, 2022
c8d6b99
Added icons in task card
PrerakMathur20 Aug 23, 2022
c17b309
Cleaned code
PrerakMathur20 Aug 23, 2022
b7afba9
Added tooltip text
PrerakMathur20 Aug 23, 2022
945cbe4
cleaned code
PrerakMathur20 Aug 23, 2022
9a0b07c
Merge pull request #298 from PrerakMathur20/Dash
swapnalshahil Aug 25, 2022
a329041
Merge pull request #294 from PrerakMathur20/linkLink
swapnalshahil Aug 27, 2022
ae1d79d
Merge branch 'TaskCardIcon' of https://github.com/PrerakMathur20/Open…
PrerakMathur20 Aug 29, 2022
d3f1bf7
cleaned code
PrerakMathur20 Aug 29, 2022
975e7ba
Removed unnecessary warning
PrerakMathur20 Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 54 additions & 13 deletions React-frontend/src/components/Admin/TaskCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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))
Expand Down Expand Up @@ -93,17 +98,53 @@ 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"
onClick={() => { console.log('edit task', id) }}
PrerakMathur20 marked this conversation as resolved.
Show resolved Hide resolved
className={classes.button}
>
<CreateIcon className={classes.icons} />
</Button>
</Tooltip>
</div>
)
: null
}

Expand Down