1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import messageStyles from 'ba-styles/Messages.scss';
import progressStyles from 'ba-styles/Progress.scss';
import avatarApi from 'ba-api/avatars';
import {
Typography,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Chip,
LinearProgress,
Avatar,
Icon,
} from '@material-ui/core';
import PapperBlock from '../PapperBlock/PapperBlock';
import styles from './widget-jss';
let id = 0;
function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) {
id += 1;
return {
id,
name,
avatar,
title,
type,
taskNumber,
taskTitle,
progress,
status,
};
}
const data = [
createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'),
createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'),
createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'),
createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'),
createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'),
];
function TableWidget(props) {
const { classes } = props;
const getStatus = status => {
switch (status) {
case 'Error': return messageStyles.bgError;
case 'Warning': return messageStyles.bgWarning;
case 'Info': return messageStyles.bgInfo;
case 'Success': return messageStyles.bgSuccess;
default: return messageStyles.bgDefault;
}
};
const getProgress = status => {
switch (status) {
case 'Error': return progressStyles.bgError;
case 'Warning': return progressStyles.bgWarning;
case 'Info': return progressStyles.bgInfo;
case 'Success': return progressStyles.bgSuccess;
default: return progressStyles.bgDefault;
}
};
const getType = type => {
switch (type) {
case 'bug_report': return classes.red;
case 'flag': return classes.indigo;
case 'whatshot': return classes.orange;
case 'settings': return classes.lime;
default: return classes.purple;
}
};
return (
<PapperBlock noMargin title="Tracking Table" whiteBg desc="Monitoring Your Team progress. Tracking task, current progress, and task status here.">
<div className={classes.root}>
<Table className={classNames(classes.table)}>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Task</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => ([
<TableRow key={n.id}>
<TableCell>
<div className={classes.user}>
<Avatar alt={n.name} src={n.avatar} className={classes.avatar} />
<div>
<Typography variant="subtitle1">{n.name}</Typography>
<Typography>{n.title}</Typography>
</div>
</div>
</TableCell>
<TableCell>
<div className={classes.taskStatus}>
<Icon className={classNames(classes.taskIcon, getType(n.type))}>{n.type}</Icon>
<a href="#">
#
{n.taskNumber}
</a>
<Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} />
</div>
<LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} />
</TableCell>
</TableRow>
])
)}
</TableBody>
</Table>
</div>
</PapperBlock>
);
}
TableWidget.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(TableWidget);
|
