Improvement/material ui

backend/modules/email-task/controller.js

@@ -77,10 +77,14 @@ controller.createTravelGrantRejectedTask = async (registration, deliverNow = fal
 
 controller.createGenericTask = async (userId, eventId, uniqueId, msgParams, deliverNow = false) => {
     if (!uniqueId) {
+        console.log('GENERATING UNIQUE ID');
         uniqueId = shortid.generate();
     }
+    console.log('CREATING TASK');
     const task = await controller.createTask(userId, eventId, 'generic_' + uniqueId, msgParams);
+    console.log('CREATED TASK');
     if (task && deliverNow) {
+        console.log('DELIVERING NOW', task);
         return controller.deliverEmailTask(task);
     }
     return task;

backend/modules/email-task/routes.js

@@ -15,6 +15,7 @@ const sendPreviewEmail = asyncHandler(async (req, res) => {
 });
 
 const sendBulkEmail = asyncHandler(async (req, res) => {
+    console.log('BODY', req.body);
     await EmailTaskController.sendBulkEmail(req.body.recipients, req.body.params, req.event, req.body.uniqueId);
     return res.status(200).json({});
 });

backend/modules/registration/controller.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const Promise = require('bluebird');
+const mongoose = require('mongoose');
 const { RegistrationStatuses, RegistrationFields, FieldTypes } = require('@hackjunction/shared');
 const Registration = require('./model');
 const { NotFoundError, ForbiddenError } = require('../../common/errors/errors');
@@ -137,7 +138,7 @@ controller.bulkEditRegistrations = (eventId, registrationIds, edits) => {
     return Registration.updateMany(
         {
             event: eventId,
-            _id: {
+            user: {
                 $in: registrationIds
             }
         },
@@ -177,13 +178,16 @@ controller.rejectPendingTravelGrants = eventId => {
 };
 
 controller.getFullRegistration = (eventId, registrationId) => {
-    return Registration.findById(registrationId).then(registration => {
-        if (!registration || registration.event.toString() !== eventId) {
-            throw new NotFoundError(`Registration with id ${registrationId} does not exist`);
-        }
+    const query = mongoose.Types.ObjectId.isValid(registrationId) ? { _id: registrationId } : { user: registrationId };
+    return Registration.findOne(query)
+        .and({ event: eventId })
+        .then(registration => {
+            if (!registration) {
+                throw new NotFoundError(`Registration with id ${registrationId} does not exist`);
+            }
 
-        return registration;
-    });
+            return registration;
+        });
 };
 
 controller.editRegistration = (registrationId, event, data, user) => {

frontend/package.json

@@ -25,7 +25,7 @@
         "node-sass": "^4.11.0",
         "notistack": "^0.9.2",
         "object-path": "^0.11.4",
-        "react": "^16.8.1",
+        "react": "^16.9.0",
         "react-animate-height": "^2.0.15",
         "react-app-rewired": "^2.1.3",
         "react-dom": "^16.8.1",

frontend/src/components/generic/ConfirmDialog/index.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+
+const ConfirmDialog = ({
+    open,
+    onClose = () => {},
+    onCancel = () => {},
+    onOk = () => {},
+    title,
+    message,
+    cancelText = 'Cancel',
+    okText = 'OK'
+}) => {
+    const handleCancel = useCallback(() => {
+        onClose();
+        onCancel();
+    }, [onClose, onCancel]);
+
+    const handleOk = useCallback(() => {
+        onClose();
+        onOk();
+    }, [onClose, onOk]);
+
+    return (
+        <Dialog open={open} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
+            <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleCancel}>{cancelText}</Button>
+                <Button onClick={handleOk} color="primary" variant="contained">
+                    {okText}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default ConfirmDialog;

frontend/src/components/generic/MaterialTable/index.js

@@ -44,7 +44,11 @@ const _MaterialTable = props => {
         <MaterialTable
             {...props}
             icons={tableIcons}
-            title={<Typography variant="subtitle1">{props.title}</Typography>}
+            title={
+                <Typography variant="subtitle1">{`${props.title} ${
+                    props.showCount ? '(' + props.data.length + ')' : ''
+                }`}</Typography>
+            }
         />
     );
 };

frontend/src/components/generic/Modal/index.js

@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
     },
     header: {
         padding: theme.spacing(3),
-        textAlign: 'left'
+        textAlign: 'center'
     },
     inner: {
         padding: '1rem',
@@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-const GenericModal = ({ title, isOpen, handleClose, size, children }) => {
+const GenericModal = ({ title, isOpen, handleClose, size, children, footer = null }) => {
     const classes = useStyles();
     return (
         <HyperModal
@@ -61,10 +61,11 @@ const GenericModal = ({ title, isOpen, handleClose, size, children }) => {
         >
             {title && (
                 <Box className={classes.header}>
-                    <Typography variant="button">{title}</Typography>
+                    <Typography variant="h6">{title}</Typography>
                 </Box>
             )}
             <Box className={classes.inner}>{children}</Box>
+            {footer}
         </HyperModal>
     );
 };

frontend/src/components/generic/UserListItem/OrganiserListItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+import UserListItem from './index';
+
+const OrganiserListItem = ({ userId, organisersMap = {} }) => {
+    return <UserListItem user={organisersMap[userId]} />;
+};
+
+const mapState = state => ({
+    organisersMap: OrganiserSelectors.organisersMap(state)
+});
+
+export default connect(mapState)(OrganiserListItem);

frontend/src/components/generic/UserListItem/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ListItem, ListItemAvatar, ListItemText, Avatar } from '@material-ui/core';
+
+const UserListItem = ({ user, selectable = false, selected = false, onSelect = () => {} }) => {
+    const userName = user ? `${user.firstName} ${user.lastName}` : '';
+    const userEmail = user ? user.email : '';
+
+    return (
+        <ListItem button={selectable} onClick={onSelect} selected={selected}>
+            {user ? (
+                <React.Fragment>
+                    <ListItemAvatar>
+                        <Avatar alt={userName} src={user ? user.avatar : ''} />
+                    </ListItemAvatar>
+                    <ListItemText primary={userName} secondary={userEmail} />
+                </React.Fragment>
+            ) : (
+                <ListItemText primary="No one" />
+            )}
+        </ListItem>
+    );
+};
+
+export default UserListItem;

frontend/src/components/inputs/TextInput/index.js

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import { TextField } from '@material-ui/core';
 
-const TextInput = ({ label, helperText, value = '', onChange = () => {}, error, disabled, rawOnChange = false, type = 'text', multiline = false, formatValue, formatOnChange }) => {
+const TextInput = ({ label, helperText, value = '', onChange = () => {}, error, disabled, rawOnChange = false, type = 'text', textarea = false, formatValue, formatOnChange }) => {
     const handleChange = useCallback(
         e => {
             if (rawOnChange) {
@@ -13,12 +13,25 @@ const TextInput = ({ label, helperText, value = '', onChange = () => {}, error,
                 onChange(val);
             }
         },
-        [onChange, rawOnChange]
+        [onChange, rawOnChange, formatOnChange]
     );
 
     const formattedValue = formatValue ? formatValue(value) : value;
 
-    return <TextField fullWidth label={label} value={formattedValue} onChange={handleChange} helperText={error || helperText} error={error} disabled={disabled} type={type} />;
+    return(
+        <TextField 
+            fullWidth 
+            label={label} 
+            value={formattedValue} 
+            onChange={handleChange} 
+            helperText={error || helperText} 
+            error={error} 
+            disabled={disabled} 
+            type={type} 
+            multiline={textarea}
+            rows={5}
+        />
+    );
 };
 
 export default TextInput;