Add UI for instructors to create a new course

webclient/src/App.js

@@ -150,7 +150,7 @@ function App() {
 							<CourseDetail token={token} />
 						</Route>
 						<Route path='/courses'>
-							<Courses token={token} />
+							<Courses token={token} user={user} />
 						</Route>
 
 						<Route path='/classes/:id'>

webclient/src/Courses.js

@@ -3,12 +3,13 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { requester } from './utils.js';
+import { isInstructor, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
+import { InstructorCourseList } from './Instructor.js';
 
 export function Courses(props) {
 	const [courses, setCourses] = useState(false);
-	const { token } = props;
+	const { token, user } = props;
 
 	useEffect(() => {
 		requester('/courses/', 'GET', token)
@@ -24,6 +25,10 @@ export function Courses(props) {
 		<Container>
 			<Header size='large'>Courses</Header>
 
+			{isInstructor && <Segment padded>
+				<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
+			</Segment>}
+
 			{courses ?
 				<Table basic='very'>
 					<Table.Header>
@@ -42,7 +47,7 @@ export function Courses(props) {
 								</Table.Row>
 							)
 						:
-							<p>None</p>
+							<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
 						}
 					</Table.Body>
 				</Table>
@@ -82,9 +87,13 @@ export function CourseDetail(props) {
 						<Header size='large'>{course.name}</Header>
 
 						<Header size='medium'>Course Description</Header>
-						{course.description.split('\n').map((x, i) =>
-							<p key={i}>{x}</p>
-						)}
+						{course.is_old ?
+							course.description.split('\n').map((x, i) =>
+								<p key={i}>{x}</p>
+							)
+						:
+							<div dangerouslySetInnerHTML={{__html: course.description}} />
+						}
 
 						<Header size='medium'>Classes</Header>
 						<Table basic='very'>
@@ -112,7 +121,7 @@ export function CourseDetail(props) {
 										</Table.Row>
 									)
 								:
-									<p>None</p>
+									<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
 								}
 							</Table.Body>
 						</Table>

webclient/src/Instructor.js

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import './light.css';
+import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Label, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { BasicTable, staticUrl, requester } from './utils.js';
+
+function InstructorCourseEditor(props) {
+	const { input, setInput, error } = props;
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
+	const handleQuill = (v, d, s, e) => s === 'user' && setInput({
+		...input,
+		description: v === '<p><br></p>' ? '' : v,
+	});
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	const modules = {
+		toolbar: [
+			[{ 'header': [3, false] }],
+			['bold', 'italic', 'underline', 'code'],
+			[{'list': 'ordered'}, {'list': 'bullet'}],
+			['link'],
+			['clean']
+		],
+	};
+
+	return (
+		<div className='course-editor'>
+			<Form.Input
+				label='Course Name'
+				fluid
+				{...makeProps('name')}
+			/>
+
+			<Form.Field>
+				<label>Description</label>
+				<ReactQuill
+					value={input.description || ''}
+					modules={modules}
+					onChange={handleQuill}
+				/>
+				{error.description &&
+					<Label pointing prompt>
+						{error.description}
+					</Label>
+				}
+			</Form.Field>
+		</div>
+	);
+}
+
+function InstructorCourseDetail(props) {
+	const [input, setInput] = useState({ ...props.card });
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const id = props.card.id;
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		const data = { ...input, member_id: props.result.member.id };
+		requester('/cards/'+id+'/', 'PUT', props.token, data)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError(false);
+			setInput(res);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const handleDelete = (e) => {
+		e.preventDefault();
+
+		requester('/cards/'+id+'/', 'DELETE', props.token)
+		.then(res => {
+			setInput(false);
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	};
+
+	const statusOptions = [
+		{ key: '0', text: 'Card Active', value: 'card_active' },
+		{ key: '1', text: 'Card Blocked', value: 'card_blocked' },
+		{ key: '2', text: 'Card Inactive', value: 'card_inactive' },
+		{ key: '3', text: 'Card Member Blocked', value: 'card_member_blocked' },
+	];
+
+	return (
+		input ?
+			<Segment raised color={input.active_status === 'card_active' ? 'green' : 'red'}>
+				<Form onSubmit={handleSubmit}>
+					<Form.Group widths='equal'>
+						<Form.Input
+							fluid
+							{...makeProps('card_number')}
+						/>
+						<Form.Select
+							fluid
+							options={statusOptions}
+							{...makeProps('active_status')}
+							onChange={handleValues}
+						/>
+
+						<Form.Group widths='equal'>
+							<Form.Button
+								loading={loading}
+								error={error.non_field_errors}
+							>
+								{success ? 'Saved.' : 'Save'}
+							</Form.Button>
+
+							<Form.Button
+								color='red'
+								onClick={handleDelete}
+							>
+								Delete
+							</Form.Button>
+						</Form.Group>
+					</Form.Group>
+
+					Notes: {input.notes || 'None'}
+				</Form>
+			</Segment>
+		:
+			<Segment raised color='black'>
+				Deleted card: {props.card.card_number}
+			</Segment>
+	);
+};
+
+export function InstructorCourseList(props) {
+	const { courses, setCourses, token } = props;
+	const [open, setOpen] = useState(false);
+	const [input, setInput] = useState({});
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		const data = { ...input, is_old: false };
+		requester('/courses/', 'POST', props.token, data)
+		.then(res => {
+			setSuccess(res.id);
+			setInput({});
+			setLoading(false);
+			setError(false);
+			setOpen(false);
+			props.setCourses([ ...courses, res ]);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	return (
+		<div>
+			<Header size='medium'>Instructor Panel</Header>
+
+			{success && <p>Added to bottom of course list! <Link to={'/courses/'+success}>View the course.</Link></p>}
+
+			{open ?
+				<Form onSubmit={handleSubmit}>
+					<Header size='small'>Add a Course</Header>
+
+					<InstructorCourseEditor input={input} setInput={setInput} error={error} />
+
+					<Form.Button loading={loading} error={error.non_field_errors}>
+						Submit
+					</Form.Button>
+				</Form>
+			:
+				<Button onClick={() => setOpen(true)}>
+					Add a Course
+				</Button>
+			}
+		</div>
+	);
+};
+

webclient/src/light.css

@@ -63,6 +63,30 @@ body {
 	padding-bottom: 24rem;
 }
 
+.course-editor {
+	margin-bottom: 1rem;
+}
+
+.ql-container {
+	height: 30rem !important;
+	font-size: inherit !important;
+	font-family: inherit !important;
+}
+
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+	margin-bottom: 1rem !important;
+}
+
 .footer {
 	margin-top: -20rem;
 

webclient/src/utils.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Table } from 'semantic-ui-react';
 
 export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
+export const isInstructor = (user) => isAdmin(user) || user.member.is_staff;
 
 export const siteUrl = window.location.protocol + '//' + window.location.hostname;
 export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;