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

Created User Dashboard #298

Merged
merged 7 commits into from
Aug 25, 2022
Merged

Created User Dashboard #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51d2094
Dashboard Files
PrerakMathur20 Aug 6, 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
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
154 changes: 147 additions & 7 deletions React-frontend/src/pages/dashboard/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,160 @@
/*
* Dashboard Page Component
*/

// Import Dependecies
import React from 'react';
import Layout from '../../components/core/Layout';
import ManagementLayout from '../../components/Management/ManagementLayout';
import ExtractorLayout from '../../components/Extractor/ExtractorLayout';
import ProfileCard from './ProfileCard';
import { makeStyles } from '@material-ui/core';
import {
Container,
Typography,
Box,
Grid
} from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import TaskCard from '../../components/Admin/TaskCard';


// custom styles
const useStyle = makeStyles((theme) => ({
root: {
marginTop: '10vh',
height: '82.5vh',
width: '100%',
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
display: 'flex',
flexDirection: 'column',
margin: '20px'
},
TaskList: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center'
}
}))

// Main Profile Component
const Dashboard = () => {
return (
<Layout sidebarBool={true}>
<h1>Dashboard</h1>
</Layout>
)
// custom styles
const classes = useStyle()

// get tasks from admin reducer
const auth = useSelector(state => state.auth)

// fetch tasks
const tasksAdmin = useSelector(state => state.admin.tasks)
const tasksManagement = useSelector(state => state.management.todoTasks)
const tasksExtractor = useSelector(state => state.management.todoTasks)

// If the role is admin
if (auth.user.role === 'admin') {
return (
<Layout sidebarBool={true}>
<Container component="main" className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h4" component="h1" gutterBottom>
Dashboard
</Typography>
</Grid>
</Grid>
<Grid container spacing={5}>
<Grid item xs={12} sm={12} md={6}>
<ProfileCard />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box>
{
(tasksAdmin.length > 0) ?
tasksAdmin.map((tasksAdmin) => {
return (<TaskCard {...tasksAdmin} key={tasksAdmin.id} />)

})
: (
<span> Not Tasks Found.</span>
)
}
</Box>
</Grid>
</Grid>
</Container>
</Layout>
)
}

// If the role is management
else if (auth.user.role === 'management') {
return (
<ManagementLayout sidebarBool={true}>
<Container component="main" className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h4" component="h1" gutterBottom>
Dashboard
</Typography>
</Grid>
</Grid>
<Grid container spacing={5} >
<Grid item xs={12} sm={12} md={6}>
<ProfileCard />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box>
{
(tasksManagement.length > 0) ?
tasksManagement.map((tasksManagement) => {
return (<TaskCard {...tasksManagement} key={tasksManagement.id} />)

})
: (
<span> Not Tasks Found.</span>
)
}
</Box>
</Grid>
</Grid>
</Container>
</ManagementLayout>
)
}

// If the role is extractor
else if (auth.user.role === 'extractor') {
return (
<ExtractorLayout sidebarBool={true}>
<Container component="main" className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h4" component="h1" gutterBottom>
Dashboard
</Typography>
</Grid>
</Grid>
<Grid container spacing={5} >
<Grid item xs={12} sm={12} md={6}>
<ProfileCard />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box>
{
(tasksExtractor.length > 0) ?
tasksExtractor.map((tasksExtractor) => {
return (<TaskCard {...tasksExtractor} key={tasksExtractor.id} />)

})
: (
<span> Not Tasks Found.</span>
)
}
</Box>
</Grid>
</Grid>
</Container>
</ExtractorLayout>
)
}
}

export default Dashboard
93 changes: 93 additions & 0 deletions React-frontend/src/pages/dashboard/ProfileCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/*
Functional component to render
profie card component
*/

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import {
Container,
Typography,
Avatar,
ListItemText,
} from '@material-ui/core';
import { useSelector } from 'react-redux';
import VerifyButton from '../../components/Utils/VerifyButton';


// Custom styles
const useStyles = makeStyles((theme) => ({
root: {
minWidth: theme.spacing(35),
maxWidth: theme.spacing(40),
padding: theme.spacing(2),
border: '1px solid #aaa',
borderRadius: '4px',
display: 'table',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
margin: `${theme.spacing(4)}px`,
overflowx: 'scroll',
},
icon: {
width: '90px',
height: '90px',
fontSize: '1.5rem',
float: 'right',
position: 'relative',
},
name: {
fontSize: '1.2rem',
fontWeight: '500',
}
}))



function ProfileCard() {
// auth reducer
const classes = useStyles()
const auth = useSelector(state => state.auth)

// Profile Card Component
return (
<Container component="main" className={classes.root}>

<Avatar className={classes.icon}>
{(auth && auth.user) ? auth.user.name.charAt(0).toUpperCase() : (<span>wait...</span>)}
</Avatar>

<Typography
className={classes.name}
>
{auth && auth.user && auth.user.name.toUpperCase()}
</Typography>

<Typography
variant="body1"
component="h4"
>
<ListItemText primary={auth && auth.user && auth.user.role} />
</Typography>

<Typography
variant="body1"
component="h4"
>
<ListItemText primary={auth && auth.user && auth.user.email} />
</Typography>

{/* Verification status button */}
<Typography>
{(auth.user && !auth.isLoading) ?
(<VerifyButton />) :
(<span>wait...</span>)
}
</Typography>

</Container>
)
}

export default ProfileCard