Add printable attendance sheet to class

This commit is contained in:
Tanner Collin 2020-02-23 00:06:05 +00:00
parent 68537b824e
commit bcb8108f4d
3 changed files with 77 additions and 1 deletions

View File

@ -13,6 +13,7 @@
"react-quill": "^1.3.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-to-print": "^2.5.1",
"semantic-ui-react": "^0.88.2",
"serialize-javascript": "^2.1.2"
},

View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import ReactToPrint from 'react-to-print';
import * as Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
import moment from 'moment';
@ -8,6 +9,62 @@ import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Ico
import { BasicTable, staticUrl, requester } from './utils.js';
import { MembersDropdown } from './Members.js';
class AttendanceSheet extends React.Component {
render() {
const clazz = this.props.clazz;
const num = clazz.students.length;
return (
<div style={{ padding: '3rem' }}>
<Header size='medium'>{clazz.course_name} Attendance</Header>
<p>
{moment.utc(clazz.datetime).local().format('llll')}
{num >= 2 ? ', '+num+' students sorted by registration time.' : '.'}
</p>
<Grid stackable padded columns={2}>
<Grid.Column>
<Table collapsing unstackable basic='very'>
{clazz.students
.filter(x => x.attendance_status !== 'Withdrawn')
.slice(0, 15)
.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Icon name='square outline' size='large' />
</Table.Cell>
<Table.Cell>
{x.student_name}
</Table.Cell>
</Table.Row>
)
}
</Table>
</Grid.Column>
<Grid.Column>
<Table collapsing unstackable basic='very'>
{clazz.students
.filter(x => x.attendance_status !== 'Withdrawn')
.slice(15)
.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Icon name='square outline' size='large' />
</Table.Cell>
<Table.Cell>
{x.student_name}
</Table.Cell>
</Table.Row>
)
}
</Table>
</Grid.Column>
</Grid>
</div>
);
}
}
function AttendanceRow(props) {
const { student, token, refreshClass } = props;
const [error, setError] = useState(false);
@ -67,6 +124,7 @@ export function InstructorClassAttendance(props) {
const [input, setInput] = useState({});
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const printRef = useRef();
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
@ -106,6 +164,16 @@ export function InstructorClassAttendance(props) {
<Header size='small'>Mark Attendance</Header>
{!!clazz.students.length && <div>
<div style={{ display: 'none' }}>
<AttendanceSheet clazz={clazz} ref={printRef} />
</div>
<ReactToPrint
trigger={() => <Button>Print Attendance Sheet</Button>}
content={() => printRef.current}
/>
</div>}
{clazz.students.length ?
clazz.students.map(x =>
<AttendanceRow key={x.id} student={x} {...props} />

View File

@ -8724,6 +8724,13 @@ react-scripts@3.3.0:
optionalDependencies:
fsevents "2.1.2"
react-to-print@^2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.5.1.tgz#eaaff4248910f179788ab15a593ceb3e07527b8c"
integrity sha512-HhuujwTmuGYB+yBq52y1pwiv0aooaLTqksMJ6cGKWy+aT+x6zponitZd54swiAeILndxJ7oO+X1F/93XyfT/JA==
dependencies:
prop-types "^15.7.2"
react@^16.12.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"