Skip to content

Commit 8fa0385

Browse files
rmfay1rmfay1
committed
Merge branch 'courseHome' of https://github.com/CPSECapstone/webrew into single-target-overview
2 parents 8859df9 + 47c1c6c commit 8fa0385

File tree

4 files changed

+229
-67
lines changed

4 files changed

+229
-67
lines changed

‎src/Components/CourseHome/CourseHome.tsx‎

Lines changed: 101 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useParams, useHistory } from 'react-router-dom';
3-
import { createStyles, makeStyles, Theme } from '@material-ui/core';
3+
import {
4+
createStyles,
5+
FormControl,
6+
InputLabel,
7+
makeStyles,
8+
MenuItem,
9+
Select,
10+
Theme,
11+
} from '@material-ui/core';
412

513
import {
614
Mission,
@@ -9,8 +17,8 @@ import {
917
UserProgress,
1018
} from '../../__generated__/types';
1119
import TableComponent from '../TableComponent/TableComponent';
12-
1320
import '../TableComponent/TableComponent.css';
21+
import MissionIcon from '../../assets/images/missionmedical-logo.png';
1422

1523
const useStyles = makeStyles((theme: Theme) =>
1624
createStyles({
@@ -28,8 +36,15 @@ function CourseHome() {
2836
},
2937
});
3038

39+
// const { data: targetProgressData } = gett;
40+
3141
const classes = useStyles();
3242
const { className } = useParams<Record<string, string | undefined>>();
43+
const [viewType, setViewType] = useState('List');
44+
45+
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
46+
setViewType(event.target.value as string);
47+
};
3348

3449
const history = useHistory();
3550
const rowClicked = (userName: string) => {
@@ -43,104 +58,123 @@ function CourseHome() {
4358
progressData?.progressOverview.userProgress.map((userProgress: UserProgress) =>
4459
data.push({
4560
row: {
46-
section: 1,
4761
name: userProgress.userName,
48-
team: '',
49-
time: '',
50-
recent: {
51-
status:
52-
userProgress.progress.length !== 0
53-
? userProgress.progress[userProgress.progress.length - 1].taskId
54-
: '',
55-
style: {
56-
backgroundColor:
57-
userProgress.progress.length !== 0
58-
? userProgress.progress[userProgress.progress.length - 1].status
59-
? '#00b300'
60-
: '#ff6666'
61-
: '#a6a6a6',
62-
},
63-
},
62+
recent:
63+
userProgress.progress.length !== 0
64+
? userProgress.progress[userProgress.progress.length - 1].taskId
65+
: '',
66+
67+
masteryLevel: '19',
68+
lastLogOn: 'Jan. 7, 2021',
6469
},
6570
})
6671
);
6772

6873
const tableColumns = [
6974
{
70-
Header: 'Student Information',
75+
Header: 'Overview',
7176
columns: [
7277
{
73-
Header: 'Section',
74-
accessor: 'row.section',
75-
},
76-
{
77-
Header: 'Student',
78+
Header: 'Name',
7879
accessor: 'row.name',
7980
},
8081
{
81-
Header: 'Team',
82-
accessor: 'row.team',
82+
Header: 'Current Task',
83+
accessor: 'row.recent',
8384
},
8485
{
85-
Header: 'Time',
86-
accessor: 'row.time',
86+
Header: 'Mastery Level',
87+
accessor: 'row.masteryLevel',
8788
},
8889
{
89-
Header: 'Status',
90-
accessor: 'row.recent',
91-
Cell: ({ value }: { value: any }) => {
92-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
93-
return <>{value.status} </>;
94-
},
90+
Header: 'Last Log-On',
91+
accessor: 'row.lastLogOn',
9592
},
9693
],
9794
},
9895
];
9996

100-
const taskGroup: any = {
101-
Header: 'Tasks',
102-
columns: [],
103-
};
97+
// const taskGroup: any = {
98+
// Header: 'Tasks',
99+
// columns: [],
100+
// };
104101

105-
let taskCounter = 1;
106-
if (progressData !== undefined) {
107-
const currentMission: any = progressData?.progressOverview.missions[0];
108-
// console.log(progressData?.progressOverview.missions);
109-
// console.log(currentMission);
110-
for (const missionContent of currentMission.missionContent) {
111-
if (missionContent.__typename === 'Task') {
112-
const taskName = `Task #${taskCounter}`;
113-
data.map((row) => {
114-
row.row[taskName] = '';
115-
});
116-
taskGroup.columns.push({
117-
Header: taskName,
118-
accessor: `row.${taskName}`,
119-
});
120-
taskCounter++;
121-
}
122-
}
123-
tableColumns.push(taskGroup);
124-
}
102+
// let taskCounter = 1;
103+
// if (progressData !== undefined) {
104+
// const currentMission: any = progressData?.progressOverview.missions[0];
105+
// // console.log(progressData?.progressOverview.missions);
106+
// // console.log(currentMission);
107+
// for (const missionContent of currentMission.missionContent) {
108+
// if (missionContent.__typename === 'Task') {
109+
// const taskName = `Task #${taskCounter}`;
110+
// data.map((row) => {
111+
// row.row[taskName] = '';
112+
// });
113+
// taskGroup.columns.push({
114+
// Header: taskName,
115+
// accessor: `row.${taskName}`,
116+
// });
117+
// taskCounter++;
118+
// }
119+
// }
120+
// tableColumns.push(taskGroup);
121+
// }
125122

126123
console.log(data);
127124
console.log(tableColumns);
128125

129126
return (
130127
<div>
131128
<div
129+
className=""
132130
style={{
133-
color: 'white',
134-
fontSize: '50px',
135-
fontWeight: 'bold',
136-
textAlign: 'center',
137-
background:
138-
'linear-gradient(90deg, rgb(49, 119, 238) 0%, rgb(17, 61, 138) 100%) white',
131+
height: '200px',
132+
display: 'flex',
133+
flexDirection: 'column',
134+
justifyContent: 'center',
139135
}}
140136
>
141-
{className} ({progressData ? progressData.progressOverview.missions[0].name : ''})
137+
<div className="row ">
138+
<img
139+
src={MissionIcon}
140+
alt=""
141+
style={{
142+
marginRight: '-28px',
143+
marginTop: '-8px',
144+
width: '90px',
145+
height: '90px',
146+
zIndex: 1,
147+
position: 'relative',
148+
}}
149+
/>
150+
<div
151+
style={{
152+
color: 'white',
153+
fontSize: '50px',
154+
fontWeight: 'bold',
155+
display: 'inline-block',
156+
minWidth: '550px',
157+
height: '75px',
158+
textAlign: 'center',
159+
160+
background:
161+
'linear-gradient(90deg, rgb(49, 119, 238) 0%, rgb(17, 61, 138) 100%) white',
162+
}}
163+
>
164+
{progressData ? progressData.progressOverview.missions[0].name : ''}
165+
</div>
166+
</div>
142167
</div>
168+
143169
<div className={classes.tableContainer}>
170+
<FormControl style={{ minWidth: '150px', marginLeft: '21px', marginTop: '6px' }}>
171+
<InputLabel>View As</InputLabel>
172+
<Select value={viewType} onChange={handleChange}>
173+
<MenuItem value="Chart">Seating Chart</MenuItem>
174+
<MenuItem value="List">List</MenuItem>
175+
</Select>
176+
</FormControl>
177+
144178
<div className="base-table">
145179
<TableComponent columns={tableColumns} data={data} rowClickFunction={rowClicked} />
146180
</div>

‎src/__generated__/types.ts‎

Lines changed: 99 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/images/missionmedical-logo.png‎

5.51 KB
Loading

‎src/hooks/getTargtProgress.graphql‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
query GetTargetProgress {
2+
getAllTargetProgress(courseId: "sample") {
3+
student
4+
target {
5+
...TargetProgressFields
6+
}
7+
objectives {
8+
...ObjectiveProgressFields
9+
}
10+
}
11+
}
12+
fragment TargetProgressFields on Target {
13+
targetName
14+
}
15+
fragment ObjectiveProgressFields on ObjectiveProgress {
16+
objectiveId
17+
objectiveName
18+
tasks {
19+
...TaskObjectiveProgressFields
20+
}
21+
}
22+
fragment TaskObjectiveProgressFields on TaskObjectiveProgress {
23+
taskId
24+
taskName
25+
mastery
26+
}
27+
28+
29+

0 commit comments

Comments
 (0)