Skip to content
This repository was archived by the owner on Jul 16, 2020. It is now read-only.

Commit e8dd9ae

Browse files
author
Rico Kahler
committed
wip requirement groups
1 parent 73d866f commit e8dd9ae

File tree

4 files changed

+252
-3
lines changed

4 files changed

+252
-3
lines changed

‎src/client/components/degree/components/requirement-group.tsx

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import * as React from 'react';
2+
import * as styles from 'styles';
3+
import styled from 'styled-components';
4+
5+
import { View } from 'components/view';
6+
import { Text } from 'components/text';
7+
import { Caption } from 'components/caption';
8+
import { Card } from 'components/card';
9+
10+
const Root = styled(View)``;
11+
const Title = styled(Text)`
12+
font-size: ${styles.space(1)};
13+
font-weight: ${styles.bold};
14+
margin-bottom: ${styles.space(0)};
15+
color: ${styles.textLight};
16+
`;
17+
const Courses = styled(View)`
18+
& > *:not(:last-child) {
19+
margin-bottom: ${styles.space(-1)};
20+
}
21+
`;
22+
const Course = styled(View)`
23+
flex-direction: row;
24+
padding: 0 ${styles.space(0)};
25+
align-items: center;
26+
min-height: ${styles.space(2)};
27+
&:hover {
28+
background-color: ${styles.whiteTer};
29+
}
30+
&:active {
31+
background-color: ${styles.grayLighter};
32+
}
33+
transition: all 200ms;
34+
`;
35+
const Header = styled(View)`
36+
flex-direction: row;
37+
padding: 0 ${styles.space(0)};
38+
margin-bottom: ${styles.space(0)};
39+
`;
40+
const CourseName = styled(Text)`
41+
margin-right: ${styles.space(0)};
42+
flex: 1 1 auto;
43+
`;
44+
const CreditHours = styled(Text)`
45+
width: 3rem;
46+
flex: 0 0 auto;
47+
text-align: right;
48+
`;
49+
const Completed = styled(Text)`
50+
width: 3rem;
51+
flex: 0 0 auto;
52+
text-align: right;
53+
`;
54+
55+
export interface CourseModel {
56+
id: string;
57+
name: string;
58+
completed: boolean;
59+
creditHours: number;
60+
}
61+
62+
interface RequirementGroupProps {
63+
name: string;
64+
courses: CourseModel[];
65+
onClickCourse: (courseId: string) => void;
66+
}
67+
68+
export class RequirementGroup extends React.PureComponent<RequirementGroupProps> {
69+
render() {
70+
const { name, courses } = this.props;
71+
72+
return (
73+
<Root>
74+
<Title>{name}</Title>
75+
<Card>
76+
<Header>
77+
<CourseName>
78+
<Caption>
79+
<strong>Course name</strong>
80+
</Caption>
81+
</CourseName>
82+
<CreditHours>
83+
<Caption>
84+
<strong>Credits</strong>
85+
</Caption>
86+
</CreditHours>
87+
<Completed>
88+
<Caption>
89+
<strong>Done?</strong>
90+
</Caption>
91+
</Completed>
92+
</Header>
93+
<Courses>
94+
{courses.map(({ id, name, creditHours, completed }) => (
95+
<Course key={id}>
96+
<CourseName>{name}</CourseName>
97+
<CreditHours>({creditHours})</CreditHours>
98+
<Completed>
99+
<input type="checkbox" checked={completed} />
100+
</Completed>
101+
</Course>
102+
))}
103+
</Courses>
104+
</Card>
105+
</Root>
106+
);
107+
}
108+
}

‎src/client/components/degree/degree.tsx

+78-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Page } from 'components/page';
77
import { Text } from 'components/text';
88
import { View } from 'components/view';
99
import { PrimaryButton } from 'components/button';
10+
import { RequirementGroup, CourseModel } from './components/requirement-group';
1011

1112
const { round } = Math;
1213

@@ -25,6 +26,7 @@ const Percentage = styled(Text)`
2526
font-weight: bold;
2627
margin-right: ${styles.space(-1)};
2728
min-width: 6rem;
29+
text-align: right;
2830
`;
2931
const CompleteText = styled(Text)`
3032
font-size: ${styles.space(1)};
@@ -37,22 +39,64 @@ const Credits = styled(Text)`
3739
font-size: ${styles.space(1)};
3840
margin-right: ${styles.space(-1)};
3941
min-width: 6rem;
42+
text-align: right;
4043
`;
4144
const CreditsText = styled(Text)``;
4245
const TutorialButton = styled(PrimaryButton)`
4346
margin-right: ${styles.space(0)};
4447
`;
48+
const Warnings = styled(View)`
49+
flex: 0 0 auto;
50+
margin-bottom: ${styles.space(0)};
51+
& > *:not(:last-child) {
52+
margin-bottom: ${styles.space(-1)};
53+
}
54+
`;
55+
const Warning = styled(Text)`
56+
font-weight: bold;
57+
color: ${styles.danger};
58+
padding: 0 ${styles.space(1)};
59+
`;
60+
const Body = styled(View)`
61+
flex: 1 0 auto;
62+
flex-direction: row;
63+
padding: 0 ${styles.space(1)};
64+
overflow-x: auto;
65+
& > *:not(:last-child) {
66+
margin-right: ${styles.space(1)};
67+
}
68+
`;
69+
const Column = styled(View)`
70+
flex: 0 0 auto;
71+
width: 24rem;
72+
`;
73+
74+
interface RequirementGroupModel {
75+
id: string;
76+
name: string;
77+
courses: CourseModel[];
78+
}
4579

4680
interface DegreeProps {
4781
degreeName: string;
4882
currentCredits: number;
4983
totalCredits: number;
84+
columnOne: RequirementGroupModel[];
85+
columnTwo: RequirementGroupModel[];
86+
columnThree: RequirementGroupModel[];
5087
}
5188
interface DegreeState {}
5289

5390
export class Degree extends React.PureComponent<DegreeProps, DegreeState> {
5491
render() {
55-
const { degreeName, currentCredits, totalCredits } = this.props;
92+
const {
93+
degreeName,
94+
currentCredits,
95+
totalCredits,
96+
columnOne,
97+
columnTwo,
98+
columnThree,
99+
} = this.props;
56100

57101
const percentage = (currentCredits * 100) / totalCredits;
58102

@@ -76,7 +120,39 @@ export class Degree extends React.PureComponent<DegreeProps, DegreeState> {
76120
</TitleLeft>
77121
}
78122
>
79-
<Text>Test degree</Text>
123+
<Warnings>
124+
<Warning>A warning</Warning>
125+
<Warning>Another warning</Warning>
126+
</Warnings>
127+
<Body>
128+
<Column>
129+
{columnOne.map(requirementGroup => (
130+
<RequirementGroup
131+
key={requirementGroup.id}
132+
{...requirementGroup}
133+
onClickCourse={() => {}}
134+
/>
135+
))}
136+
</Column>
137+
<Column>
138+
{columnTwo.map(requirementGroup => (
139+
<RequirementGroup
140+
key={requirementGroup.id}
141+
{...requirementGroup}
142+
onClickCourse={() => {}}
143+
/>
144+
))}
145+
</Column>
146+
<Column>
147+
{columnThree.map(requirementGroup => (
148+
<RequirementGroup
149+
key={requirementGroup.id}
150+
{...requirementGroup}
151+
onClickCourse={() => {}}
152+
/>
153+
))}
154+
</Column>
155+
</Body>
80156
</Page>
81157
);
82158
}

‎src/client/components/degree/index.ts

+63
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,69 @@ const Container = Model.store.connect({
1313
degreeName,
1414
currentCredits: 90,
1515
totalCredits: 120,
16+
columnOne: [
17+
{
18+
id: 'some-group',
19+
name: 'Writing and Oral Communication',
20+
courses: [
21+
{
22+
id: 'some-course',
23+
name: 'Writing and Rhetoric I',
24+
completed: true,
25+
creditHours: 3,
26+
},
27+
28+
{
29+
id: 'some-cours3e',
30+
name: 'Writing and Rhetoric II',
31+
completed: false,
32+
creditHours: 3,
33+
},
34+
],
35+
},
36+
],
37+
columnTwo: [
38+
{
39+
id: 'some-group',
40+
name: 'Writing and Oral Communication',
41+
courses: [
42+
{
43+
id: 'sosme-course',
44+
name: 'Writing and Rhetoric I',
45+
completed: true,
46+
creditHours: 3,
47+
},
48+
49+
{
50+
id: 'somse-cours3e',
51+
name: 'Writing and Rhetoric II',
52+
completed: false,
53+
creditHours: 3,
54+
},
55+
],
56+
},
57+
],
58+
columnThree: [
59+
{
60+
id: 'some-group',
61+
name: 'Writing and Oral Communication',
62+
courses: [
63+
{
64+
id: 'some-coufrse',
65+
name: 'Writing and Rhetoric I',
66+
completed: true,
67+
creditHours: 3,
68+
},
69+
70+
{
71+
id: 'some-codsurs3e',
72+
name: 'Writing and Rhetoric II',
73+
completed: false,
74+
creditHours: 3,
75+
},
76+
],
77+
},
78+
],
1679
};
1780
},
1881
mapDispatchToProps: () => ({}),

‎src/client/routes/degree/degree.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import { Degree } from 'components/degree';
77

88
import { RouteComponentProps } from 'react-router';
99

10-
const Root = styled(View)``;
10+
const Root = styled(View)`
11+
flex: 1 1 auto;
12+
`;
1113
interface DegreePageProps extends RouteComponentProps<any> {
1214
degreeName: string;
1315
}

0 commit comments

Comments
 (0)