wip

modules/gob-web/modules/student/area-of-study-bar.js

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import {List, Map} from 'immutable'
+import {Tooltip, IconButton} from 'evergreen-ui'
+import {
+	sortStudiesByType,
+	areaTypeConstants,
+	Student,
+} from '@gob/object-student'
+
+type Props = {
+	student: Student,
+}
+
+type State = {
+	showAreaPickerFor: Map<string, boolean>,
+}
+
+export class AreaOfStudyBar extends React.PureComponent<Props, State> {
+	state = {
+		showAreaPicker: false,
+	}
+
+	addArea = () => {
+		this.setState(() => ({showAreaPicker: true}))
+	}
+
+	render() {
+		let props = this.props
+		let {student} = props
+		let {showAreaPickerFor} = this.state
+
+		let sortedStudies = List(sortStudiesByType([...student.studies]))
+
+		let activeAreas = sortedStudies.map(area => (
+			<span key={`${area.name}${String(area.revision)}`}>
+				{area.name}
+			</span>
+			/*<AreaOfStudy
+					key={`${area.name}${String(area.revision)}`}
+					areaOfStudy={area}
+					student={student}
+				/>*/
+		))
+
+		return (
+			<>
+				{[...activeAreas.values()]}
+				<Tooltip content="Add an Area of Study">
+					<IconButton onClick={this.addArea} icon="plus" />
+				</Tooltip>
+			</>
+		)
+	}
+}

modules/gob-web/modules/student/student.js

@@ -10,16 +10,8 @@ import styled from 'styled-components'
 import {Card} from '../../components/card'
 
 const Container = styled.div`
-	display: grid;
-	justify-content: space-between;
-	// grid-gap: calc(var(--page-edge-padding) * (2 / 3));
-	grid-gap: var(--page-edge-padding);
 	padding-left: var(--page-edge-padding);
 	padding-right: var(--page-edge-padding);
-
-	@media all and (min-width: 900px) {
-		grid-template-columns: 280px minmax(0, 1fr) 280px;
-	}
 `
 
 const CouldNotLoadCard = styled(Card)`

modules/gob-web/modules/student/toolbar.js

@@ -0,0 +1,85 @@
+// @flow
+
+import * as React from 'react'
+import styled, {css} from 'styled-components'
+import {
+	Avatar,
+	IconButton,
+	Tooltip,
+	Popover,
+	Button,
+	BackButton,
+	SearchInput,
+} from 'evergreen-ui'
+import {AreaOfStudyBar} from './area-of-study-bar'
+
+const Container = styled.nav`
+	margin: 0;
+
+	display: flex;
+	flex-flow: row nowrap;
+`
+
+const Spacer = styled.div`
+	${props =>
+		props.static &&
+		css`
+			width: 24px;
+		`};
+
+	${props =>
+		props.flex &&
+		css`
+			flex: 1;
+		`};
+`
+
+class StudentSummaryBar extends React.Component {
+	render() {
+		let {student} = this.props
+		return (
+			<>
+				<Avatar name={student.name} size={24} />
+
+				<AreaOfStudyBar student={student} />
+			</>
+		)
+	}
+}
+
+export class StudentToolbar extends React.Component {
+	render() {
+		let {student} = this.props
+
+		return (
+			<Container>
+				<Tooltip content="Back to student list">
+					<BackButton />
+				</Tooltip>
+
+				<Spacer static />
+
+				<Tooltip content="Undo">
+					<IconButton icon="undo" />
+				</Tooltip>
+				<Tooltip content="Redo">
+					<IconButton icon="redo" />
+				</Tooltip>
+
+				<Spacer static />
+
+				<StudentSummaryBar student={student} />
+
+				<Spacer flex />
+
+				<SearchInput placeholder="Find a course" />
+
+				<Spacer flex />
+
+				<Tooltip content="Share student">
+					<IconButton icon="share" />
+				</Tooltip>
+			</Container>
+		)
+	}
+}

modules/gob-web/package.json

@@ -35,6 +35,7 @@
     "classnames": "^2.2.6",
     "codemirror": "^5.40.2",
     "delay": "^4.1.0",
+    "evergreen-ui": "^4.0.0",
     "fuzzysearch": "^1.0.3",
     "js-yaml": "^3.12.0",
     "keymage": "^1.1.3",

modules/gob-web/screens/student/index.js

@@ -10,59 +10,14 @@ import {Sidebar} from '../../components/sidebar'
 
 import StudentOverview from '../../modules/student'
 
-const SearchSidebar = Loadable({
-	loader: () =>
-		import('../../components/sidebar--course-search').then(
-			mod => mod.CourseSearcherSidebar,
-		),
-	loading: LoadingComponent,
-})
-
-import CourseRemovalBox from '../../components/course-removal-box'
-import {ConnectedSidebarToolbar} from '../../components/sidebar-toolbar'
-import {AreaOfStudySidebar} from '../../modules/student/area-of-study-sidebar'
-import {StudentSummary} from '../../modules/student/student-summary'
-
-const StatusSidebar = ({student}: {student: Undoable<Student>}) => (
-	<Sidebar>
-		<ConnectedSidebarToolbar
-			backTo="picker"
-			search={false}
-			share={true}
-			student={student}
-		/>
-		<CourseRemovalBox student={student.present} />
-		<StudentSummary student={student.present} randomizeHello={true} />
-		<AreaOfStudySidebar student={student.present} />
-	</Sidebar>
-)
-
-const CourseTable = Loadable({
-	loader: () => import('../../modules/course-table'),
-	loading: LoadingComponent,
-})
-
-const ShareStudentOverlay = Loadable({
-	loader: () => import('./share-student'),
-	loading: LoadingComponent,
-})
+import CourseTable from '../../modules/course-table'
+import {StudentToolbar} from '../../modules/student/toolbar'
 
 const SemesterDetail = Loadable({
 	loader: () => import('../../modules/semester-detail'),
 	loading: LoadingComponent,
 })
 
-const TermSidebar = ({student}: {student: Undoable<Student>}) => (
-	<Sidebar>
-		<ConnectedSidebarToolbar
-			backTo="picker"
-			search={false}
-			share={true}
-			student={student}
-		/>
-	</Sidebar>
-)
-
 export default function StudentIndex(props: {
 	studentId?: string,
 	location?: {search: string},
@@ -84,38 +39,16 @@ export default function StudentIndex(props: {
 		<StudentOverview studentId={props.studentId}>
 			{({student}) => (
 				<>
-					<Router>
-						<StatusSidebar default student={student} />
-
-						<TermSidebar
-							path="/term/:term"
-							student={student}
-							navigate={navigate}
-						/>
-					</Router>
+					<StudentToolbar student={student.present} />
 
 					<Router>
 						<CourseTable default student={student.present} />
 
 						<SemesterDetail
-							student={student.present}
 							path="/term/:term"
-						/>
-					</Router>
-
-					<SearchSidebar
-						term={params.get('term')}
-						student={student}
-						navigate={navigate}
-					/>
-
-					{params.has('share') && (
-						<ShareStudentOverlay
 							student={student.present}
-							navigate={navigate}
-							location={location}
 						/>
-					)}
+					</Router>
 				</>
 			)}
 		</StudentOverview>