Skip to content
This repository has been archived by the owner on Jan 22, 2022. It is now read-only.

History attendance clicking #411

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

History attendance clicking #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1360dc2
working switch
patwang123 Jul 17, 2021
436b64e
working stuff
patwang123 Jul 20, 2021
2915c7d
minor fix to addsessionmodal key
patwang123 Jul 20, 2021
526d199
Merge branch 'master' into history-attendance
rahularya50 Aug 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion sections/src/AddSessionModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function AddSessionModel({ section, show, onClose }: Props) {
<Modal.Body>
<ListGroup variant="flush">
{startTimes.map((startTime) => (
<ListGroup.Item>
<ListGroup.Item key={`${startTime}-${section.id}`}>
{startTime.format("MMMM D")}{" "}
<FloatRightDiv>
<Button
Expand Down
33 changes: 26 additions & 7 deletions sections/src/AttendanceRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
// @flow strict

import React from "react";
import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import { AttendanceStatus } from "./models";
import type { AttendanceStatusType } from "./models";
import useSectionAPI from "./useSectionAPI";

type Props = {
editable: boolean,
status: ?AttendanceStatusType,
onClick?: (AttendanceStatusType) => void,
sessionId: string,
email: String,
};

const buttonColorMap = {
Expand All @@ -17,22 +19,39 @@ const buttonColorMap = {
absent: "danger",
};

export default function AttendanceRow({ editable, status, onClick }: Props) {
export default function AttendanceRow({
editable,
status,
sessionId,
email,
}: Props) {
const [currentStatus, setStatus] = useState(status);
const setAttendance = useSectionAPI("set_attendance");
return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: newline before return

<>
{Object.entries(AttendanceStatus).map(([statusOption, text]) => (
<span key={statusOption}>
<Button
size="sm"
variant={
status === statusOption
statusOption === currentStatus
? buttonColorMap[statusOption]
: `outline-${buttonColorMap[statusOption]}`
}
disabled={!editable && status !== statusOption}
onClick={() =>
onClick && onClick(((statusOption: any): AttendanceStatusType))
}
onClick={() => {
if (sessionId != null && email != null) {
const settingAttendance = async () => {
await setAttendance({
session_id: sessionId,
students: email,
status: statusOption,
});
setStatus(statusOption);
};
settingAttendance();
}
}}
>
{text}
</Button>{" "}
Expand Down
48 changes: 29 additions & 19 deletions sections/src/HistoryPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,35 @@ export default function HistoryPage({ userID }: Props): React.Node {
</tr>
</thead>
<tbody>
{user.attendanceHistory.map(({ section, session, status }, i) => (
<tr key={i} className="text-center">
<td className="align-middle">
<b>{moment.unix(session.startTime).format("MMMM D")}</b>
</td>
<td className="align-middle">
{section != null && currentUser.isStaff ? (
<Link to={`/section/${section.id}`}>
{sectionTitle(section)}
</Link>
) : (
sectionTitle(section)
)}
</td>
<td>
<AttendanceRow editable={false} status={status} />
</td>
</tr>
))}
{user.attendanceHistory.map(({ section, session, status }, i) => {
return (
<tr key={i} className="text-center">
<td className="align-middle">
<b>{moment.unix(session.startTime).format("MMMM D")}</b>
</td>
<td className="align-middle">
{section != null && currentUser.isStaff ? (
<Link to={`/section/${section.id}`}>
{sectionTitle(section)}
</Link>
) : (
sectionTitle(section)
)}
</td>
<td>
<AttendanceRow
editable={
currentUser.isStaff &&
section.staff.email === currentUser.email
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want this check, put it on the server-side too. But honestly just don't check it at all, just let staff edit whatever we want!

}
status={status}
sessionId={session.id}
email={user.email}
/>
</td>
</tr>
);
})}
</tbody>
</Table>
</Col>
Expand Down
10 changes: 2 additions & 8 deletions sections/src/SessionAttendance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,14 +129,8 @@ export default function SectionAttendance({ section, session }: Props) {
<AttendanceRow
editable={session != null}
status={getStudentAttendanceStatus(student.email)}
onClick={(status) => {
if (session != null)
setAttendance({
session_id: session.id,
students: student.email,
status,
});
}}
sessionId={session != null ? session.id: null}
email={session != null ? student.email: null}
/>
</td>
</tr>
Expand Down