Add UI for instructors to edit courses

master
Tanner Collin 4 years ago
parent 9b27c41433
commit 9617d9776b
  1. 6
      webclient/src/Courses.js
  2. 101
      webclient/src/Instructor.js

@ -5,7 +5,7 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
import moment from 'moment'; import moment from 'moment';
import { isInstructor, requester } from './utils.js'; import { isInstructor, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
import { InstructorCourseList } from './Instructor.js'; import { InstructorCourseList, InstructorCourseDetail } from './Instructor.js';
export function Courses(props) { export function Courses(props) {
const [courses, setCourses] = useState(false); const [courses, setCourses] = useState(false);
@ -86,6 +86,10 @@ export function CourseDetail(props) {
<div> <div>
<Header size='large'>{course.name}</Header> <Header size='large'>{course.name}</Header>
{isInstructor && <Segment padded>
<InstructorCourseDetail course={course} setCourse={setCourse} {...props} />
</Segment>}
<Header size='medium'>Course Description</Header> <Header size='medium'>Course Description</Header>
{course.is_old ? {course.is_old ?
course.description.split('\n').map((x, i) => course.description.split('\n').map((x, i) =>

@ -60,28 +60,30 @@ function InstructorCourseEditor(props) {
); );
} }
function InstructorCourseDetail(props) { export function InstructorCourseDetail(props) {
const [input, setInput] = useState({ ...props.card }); const { course, setCourse, token } = props;
const [open, setOpen] = useState(false);
const convertNewlineToPara = (t) => t.split('\n').map(x => '<p>'+x+'</p>').join('')
const [input, setInput] = useState({
...course,
description: course.is_old ? convertNewlineToPara(course.description) : course.description,
});
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const id = props.card.id; const { id } = useParams();
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) => { const handleSubmit = (e) => {
setLoading(true); setLoading(true);
setSuccess(false); setSuccess(false);
const data = { ...input, member_id: props.result.member.id }; const data = { ...input, is_old: false };
requester('/cards/'+id+'/', 'PUT', props.token, data) requester('/courses/'+id+'/', 'PUT', props.token, data)
.then(res => { .then(res => {
setLoading(false);
setSuccess(true); setSuccess(true);
setLoading(false);
setError(false); setError(false);
setInput(res); setOpen(false);
props.setCourse({...course, ...res});
}) })
.catch(err => { .catch(err => {
setLoading(false); setLoading(false);
@ -90,65 +92,28 @@ function InstructorCourseDetail(props) {
}); });
}; };
const handleDelete = (e) => { return (
e.preventDefault(); <div>
<Header size='medium'>Instructor Panel</Header>
requester('/cards/'+id+'/', 'DELETE', props.token)
.then(res => {
setInput(false);
})
.catch(err => {
console.log(err);
});
};
const statusOptions = [ {!open && success && <p>Saved!</p>}
{ 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 ( {open ?
input ?
<Segment raised color={input.active_status === 'card_active' ? 'green' : 'red'}>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Form.Group widths='equal'> <Header size='small'>Edit Course</Header>
<Form.Input
fluid <InstructorCourseEditor input={input} setInput={setInput} error={error} />
{...makeProps('card_number')}
/> <Form.Button loading={loading} error={error.non_field_errors}>
<Form.Select Submit
fluid </Form.Button>
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> </Form>
</Segment> :
: <Button onClick={() => setOpen(true)}>
<Segment raised color='black'> Edit Course
Deleted card: {props.card.card_number} </Button>
</Segment> }
</div>
); );
}; };
@ -184,7 +149,7 @@ export function InstructorCourseList(props) {
<div> <div>
<Header size='medium'>Instructor Panel</Header> <Header size='medium'>Instructor Panel</Header>
{success && <p>Added to bottom of course list! <Link to={'/courses/'+success}>View the course.</Link></p>} {!open && success && <p>Added to bottom of course list! <Link to={'/courses/'+success}>View the course.</Link></p>}
{open ? {open ?
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>

Loading…
Cancel
Save