Added an initial cut at a student segement of the site, with a list of workshops and the ability to sign up for them.

2022-10-26 08:45:21 -07:00
parent d7319e340c
commit 77b420ea6f
12 changed files with 538 additions and 32 deletions
--- a/imports/ui/pages/Student/Workshops.jsx
+++ b/imports/ui/pages/Student/Workshops.jsx
@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import {Meteor} from "meteor/meteor";
+import {Roles} from 'meteor/alanning:roles';
+import { useTracker } from 'meteor/react-meteor-data';
+import {Link} from 'react-router-dom';
+import _ from 'lodash';
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import MenuItem from '@mui/material/MenuItem';
+import {InputLabel, List, ListItem, ListItemButton, ListItemText, Paper} from "@mui/material";
+import Box from "@mui/material/Box";
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import {Editor} from 'react-draft-wysiwyg'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import {Students} from "/imports/api/students";
+import {Staff} from "/imports/api/staff";
+import {conditions} from "/imports/api/assets";
+
+const cssTwoColumnContainer = {
+	display: 'grid',
+	gridTemplateColumns: "1fr 1fr",
+	columnGap: '1rem',
+	rowGap: '0.4rem',
+}
+
+export const Workshops = () => {
+	Meteor.subscribe('students');
+	Meteor.subscribe('staff');
+	Meteor.subscribe('workshops');
+	
+	const user = Meteor.user();
+	const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+	const [selectedWorkshop, setSelectedWorkshop] = useState("")
+
+	const {workshops} = useTracker(() => {
+		let workshops = [];
+		
+		workshops = Workshops.find({isComplete: false}).fetch();
+
+		for(let workshop of workshops) {
+			for(let user of workshop.signupSheet) {
+				user.data = Students.findOne({_id: user._id})
+				if(!user.data) user.data = Staff.findOne({_id: user._id})
+			}
+		}
+
+		return {workshops}
+	});
+
+	const getListItemStyle = (item) => {
+		return {
+			backgroundColor: selectedWorkshop === item ? '#EECFA6' : 'white'
+		}
+	}
+	
+	const newWorkshop = () => {
+		if(isAdmin) {
+			setEditedWorkshop({})
+			setOpenWorkshopEditor(true)
+		}
+	}
+	const editWorkshop = () => {
+		if(isAdmin && selectedWorkshop) {
+			setEditedWorkshop({...selectedWorkshop})
+			setOpenWorkshopEditor(true)
+		}
+	}
+
+	const [openWorkshopEditor, setOpenWorkshopEditor] = useState(false)
+	const [editedWorkshop, setEditedWorkshop] = useState(false)
+	const workshopEditorClosed = (save) => {
+		const completeHandler = (err, result) => {
+			if(err) console.error(err)
+			else {
+				setOpenWorkshopEditor(false)
+				setEditedWorkshop(null)
+			}
+		}
+		
+		if(save) {
+			if(editedWorkshop._id) Meteor.call('workshops.update', editedWorkshop._id, editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
+			else Meteor.call('workshops.add', editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
+		}
+		else completeHandler()
+	}
+	
+	return (
+		<>
+			<Dialog open={openWorkshopEditor} onClose={workshopEditorClosed}>
+				<DialogTitle>Workshop Editor</DialogTitle>
+				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
+					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Name" value={editedWorkshop.name} onChange={(e) => {editedWorkshop.name = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+					<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" type="number" label="Signup Limit" value={editedWorkshop.signupLimit} onChange={(e) => {editedWorkshop.signupLimit = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => workshopEditorClosed(true)}>Save</Button>
+					<Button onClick={() => workshopEditorClosed(false)}>Cancel</Button>
+				</DialogActions>
+			</Dialog>
+			
+			<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
+				{isAdmin && <Button onClick={() => newWorkshop()}>New...</Button>}
+				<List>
+					{workshops.map((next, i) => {
+						return (
+							<ListItemButton key={next._id} onDoubleClick={editWorkshop} style={getListItemStyle(next)} selected={selectedWorkshop === next} onClick={(e) => {setSelectedWorkshop(next)}}>
+								<ListItemText primary={next.name}/>
+							</ListItemButton>
+						)
+					})}
+				</List>
+			</Box>
+
+			<Box style={{...cssTwoColumnContainer}}>
+				<Paper>
+					{/*<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = ""}}/>*/}
+					{`${selectedWorkshop.description}`}
+				</Paper>
+				<List>
+					{selectedWorkshop.signupSheet.map((next, i) => {
+						return (
+							<ListItem key={next._id}>
+								<ListItemText primary={next.data.firstName + " " + next.data.lastName} secondary={next.data.email}/>
+							</ListItem>
+						)
+					})}
+				</List>
+			</Box>
+		</>
+	)
+}