Add UI for admins to view and edit member's details

apiserver/apiserver/api/models.py

@@ -7,6 +7,7 @@ from . import old_models
 
 class Member(models.Model):
     user = models.OneToOneField(User, blank=True, null=True, on_delete=models.SET_NULL)
+    old_email = models.CharField(max_length=254, blank=True, null=True)
     photo_large = models.CharField(max_length=64, blank=True, null=True)
     photo_medium = models.CharField(max_length=64, blank=True, null=True)
     photo_small = models.CharField(max_length=64, blank=True, null=True)

apiserver/apiserver/api/serializers.py

@@ -55,7 +55,7 @@ class OtherMemberSerializer(serializers.ModelSerializer):
 
 class UserEmailField(serializers.ModelField):
     def to_representation(self, obj):
-        return obj.user.email
+        return getattr(obj.user, 'email', obj.old_email)
     def to_internal_value(self, data):
         return serializers.EmailField().run_validation(data)
 
@@ -88,8 +88,9 @@ class MemberSerializer(serializers.ModelSerializer):
         ]
 
     def update(self, instance, validated_data):
-        instance.user.email = validated_data.get('email', instance.user.email)
+        if instance.user:
-        instance.user.save()
+            instance.user.email = validated_data.get('email', instance.user.email)
+            instance.user.save()
 
         photo = validated_data.get('photo', None)
         if photo:
@@ -107,6 +108,7 @@ class AdminMemberSerializer(MemberSerializer):
         fields = '__all__'
         read_only_fields = [
             'id',
+            'status',
             'photo_large',
             'photo_medium',
             'photo_small',
@@ -127,7 +129,7 @@ class UserSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = User
-        fields = ['id', 'username', 'member', 'transactions', 'cards', 'training']
+        fields = ['id', 'username', 'member', 'transactions', 'cards', 'training', 'is_staff']
         depth = 1
 
 

apiserver/import_old_portal.py

@@ -7,6 +7,7 @@ from apiserver.api.serializers import process_image
 
 MEMBER_FIELDS = [
     'id',
+    # email -> old_email
     'first_name',
     'last_name',
     'preferred_name',
@@ -91,6 +92,7 @@ for o in old:
 
     if o.city and o.province:
         new['city'] = '{}, {}'.format(o.city, o.province)
+    new['old_email'] = o.email
     new['is_minor'] = o.minor
 
     small, medium, large = None, None, None

webclient/src/Account.js

@@ -65,11 +65,7 @@ function ChangePasswordForm(props) {
 
 export function AccountForm(props) {
 	const member = props.user.member;
-	const [input, setInput] = useState({
+	const [input, setInput] = useState({ ...member, set_details: true });
-		...member,
-		birthdate: member.birthdate || '',
-		set_details: true
-	});
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
 	const history = useHistory();
@@ -97,7 +93,7 @@ export function AccountForm(props) {
 	const makeProps = (name) => ({
 		name: name,
 		onChange: handleChange,
-		value: input[name],
+		value: input[name] || '',
 		error: error[name],
 	});
 
@@ -110,16 +106,16 @@ export function AccountForm(props) {
 				required
 				{...makeProps('first_name')}
 			/>
-			<Form.Input
-				label='Last Name'
-				required
-				{...makeProps('last_name')}
-			/>
 			<Form.Input
 				label='Preferred First Name'
 				required
 				{...makeProps('preferred_name')}
 			/>
+			<Form.Input
+				label='Last Name'
+				required
+				{...makeProps('last_name')}
+			/>
 
 			<Form.Input
 				label='Email Address'
@@ -148,7 +144,7 @@ export function AccountForm(props) {
 				<label>Are you under 18 years old?</label>
 				<Checkbox
 					label='I am a minor'
-					{...makeProps('is_minor')}
+					name='is_minor'
 					onChange={handleCheck}
 					checked={input.is_minor}
 				/>
@@ -159,7 +155,7 @@ export function AccountForm(props) {
 				{...makeProps('birthdate')}
 			/>}
 			{input.is_minor && <Form.Input
-				label="Parent's Name"
+				label="Guardian's Name"
 				{...makeProps('guardian_name')}
 			/>}
 

webclient/src/Admin.js

@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import './light.css';
+import { Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { BasicTable, staticUrl, requester } from './utils.js';
+
+export function AdminMemberForm(props) {
+	const [input, setInput] = useState(false);
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	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 });
+
+	useEffect(() => {
+		requester('/members/'+id+'/', 'GET', props.token)
+		.then(res => {
+			setInput(res);
+		})
+		.catch(err => {
+			console.log(err);
+			setError(true);
+		});
+	}, []);
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		requester('/members/' + id + '/', 'PATCH', props.token, input)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError(false);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	return (
+		<div>
+			{!error ?
+				input ?
+					<Form onSubmit={handleSubmit}>
+						<Header size='medium'>Edit Member Details</Header>
+
+						<Form.Input
+							label='Application Date'
+							{...makeProps('application_date')}
+						/>
+
+						<Form.Input
+							label='Current Start Date'
+							{...makeProps('current_start_date')}
+						/>
+
+						<Form.Input
+							label='Vetted Date'
+							{...makeProps('vetted_date')}
+						/>
+
+						<Form.Input
+							label='Expire Date'
+							{...makeProps('Expire Date')}
+						/>
+
+						<Form.Input
+							label='Membership Fee'
+							{...makeProps('monthly_fees')}
+						/>
+
+						<Form.Field>
+							<label>Is the member a director?</label>
+							<Checkbox
+								label='Yes'
+								name='is_director'
+								onChange={handleCheck}
+								checked={input.is_director}
+							/>
+						</Form.Field>
+
+						<Form.Field>
+							<label>Is the member an instructor?</label>
+							<Checkbox
+								label='Yes'
+								name='is_instructor'
+								onChange={handleCheck}
+								checked={input.is_instructor}
+							/>
+						</Form.Field>
+
+						{success && <p>Success!</p>}
+						<Form.Button loading={loading} error={error.non_field_errors}>
+							Submit
+						</Form.Button>
+					</Form>
+				:
+					<p>Loading...</p>
+			:
+				<p>Error loading member</p>
+			}
+		</div>
+	);
+};
+
+export function AdminMemberInfo(props) {
+	const [member, setMember] = useState(false);
+	const [error, setError] = useState(false);
+	const { id } = useParams();
+
+	useEffect(() => {
+		requester('/members/'+id+'/', 'GET', props.token)
+		.then(res => {
+			setMember(res);
+		})
+		.catch(err => {
+			console.log(err);
+			setError(true);
+		});
+	}, []);
+
+	return (
+		<div>
+			{!error ?
+				member ?
+					<div>
+						<Header size='medium'>Admin Details</Header>
+
+						<BasicTable>
+							<Table.Body>
+								<Table.Row>
+									<Table.Cell>Name:</Table.Cell>
+									<Table.Cell>{member.first_name} {member.last_name}</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Status:</Table.Cell>
+									<Table.Cell>{member.status}</Table.Cell>
+								</Table.Row>
+
+								<Table.Row>
+									<Table.Cell>Email:</Table.Cell>
+									<Table.Cell>{member.email}</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Phone:</Table.Cell>
+									<Table.Cell>{member.phone}</Table.Cell>
+								</Table.Row>
+
+								<Table.Row>
+									<Table.Cell>Address:</Table.Cell>
+									<Table.Cell>{member.street_address}</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>City:</Table.Cell>
+									<Table.Cell>{member.city}</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Postal:</Table.Cell>
+									<Table.Cell>{member.postal_code}</Table.Cell>
+								</Table.Row>
+
+								<Table.Row>
+									<Table.Cell>Minor:</Table.Cell>
+									<Table.Cell>{member.is_minor ? 'Yes' : 'No'}</Table.Cell>
+								</Table.Row>
+								{member.is_minor && <Table.Row>
+									<Table.Cell>Birthdate:</Table.Cell>
+									<Table.Cell>{member.birthdate}</Table.Cell>
+								</Table.Row>}
+								{member.is_minor && <Table.Row>
+									<Table.Cell>Guardian:</Table.Cell>
+									<Table.Cell>{member.guardian_name}</Table.Cell>
+								</Table.Row>}
+
+								<Table.Row>
+									<Table.Cell>Emergency Contact Name:</Table.Cell>
+									<Table.Cell>{member.emergency_contact_name}</Table.Cell>
+								</Table.Row>
+								<Table.Row>
+									<Table.Cell>Emergency Contact Phone:</Table.Cell>
+									<Table.Cell>{member.emergency_contact_phone}</Table.Cell>
+								</Table.Row>
+							</Table.Body>
+						</BasicTable>
+					</div>
+				:
+					<p>Loading...</p>
+			:
+				<p>Error loading member</p>
+			}
+		</div>
+	);
+};

webclient/src/App.js

@@ -30,7 +30,6 @@ function App() {
 	useEffect(() => {
 		requester('/user/', 'GET', token)
 		.then(res => {
-			console.log(res);
 			setUserCache(res);
 		})
 		.catch(err => {
@@ -42,7 +41,6 @@ function App() {
 	function logout() {
 		setTokenCache('');
 		setUserCache(false);
-		window.location = '/';
 	}
 
 	return (
@@ -163,7 +161,7 @@ function App() {
 						</Route>
 
 						<Route path='/members/:id'>
-							<MemberDetail token={token} />
+							<MemberDetail token={token} user={user} />
 						</Route>
 						<Route path='/members'>
 							<Members token={token} />

webclient/src/Classes.js

@@ -56,7 +56,6 @@ export function Classes(props) {
 	useEffect(() => {
 		requester('/sessions/', 'GET', token)
 		.then(res => {
-			console.log(res);
 			setClasses(res.results);
 		})
 		.catch(err => {
@@ -96,7 +95,6 @@ export function ClassDetail(props) {
 	useEffect(() => {
 		requester('/sessions/'+id+'/', 'GET', token)
 		.then(res => {
-			console.log(res);
 			setClass(res);
 		})
 		.catch(err => {

webclient/src/Courses.js

@@ -13,7 +13,6 @@ export function Courses(props) {
 	useEffect(() => {
 		requester('/courses/', 'GET', token)
 		.then(res => {
-			console.log(res);
 			setCourses(res.results);
 		})
 		.catch(err => {
@@ -64,7 +63,6 @@ export function CourseDetail(props) {
 	useEffect(() => {
 		requester('/courses/'+id+'/', 'GET', token)
 		.then(res => {
-			console.log(res);
 			setCourse(res);
 		})
 		.catch(err => {

webclient/src/Home.js

@@ -46,6 +46,11 @@ function MemberInfo(props) {
 				</Grid.Column>
 			</Grid>
 
+			{!member.photo_medium && <Message warning>
+				<Message.Header>Please set a member photo!</Message.Header>
+				<p>Visit the <Link to='/account'>account settings</Link> page to set one.</p>
+			</Message>}
+
 			<Header size='medium'>Details</Header>
 			<BasicTable>
 				<Table.Body>

webclient/src/LoginSignup.js

@@ -16,7 +16,6 @@ export function LoginForm(props) {
 		setLoading(true);
 		requester('/rest-auth/login/', 'POST', '', input)
 		.then(res => {
-			console.log(res);
 			setError({});
 			props.setTokenCache(res.key);
 		})
@@ -71,7 +70,6 @@ export function SignupForm(props) {
 		input.username = genUsername();
 		requester('/registration/', 'POST', '', input)
 		.then(res => {
-			console.log(res);
 			setError({});
 			props.setTokenCache(res.key);
 		})

webclient/src/Members.js

@@ -3,8 +3,9 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
 import './light.css';
 import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { BasicTable, staticUrl, requester } from './utils.js';
+import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
+import { AdminMemberInfo, AdminMemberForm } from './Admin.js';
 
 export function Members(props) {
 	const [members, setMembers] = useState(false);
@@ -75,7 +76,7 @@ export function Members(props) {
 export function MemberDetail(props) {
 	const [member, setMember] = useState(false);
 	const [error, setError] = useState(false);
-	const { token } = props;
+	const { token, user } = props;
 	const { id } = useParams();
 
 	useEffect(() => {
@@ -96,20 +97,35 @@ export function MemberDetail(props) {
 					<div>
 						<Header size='large'>{member.preferred_name} {member.last_name}</Header>
 
-						<Image rounded size='medium' src={member.photo_large ? staticUrl + '/' + member.photo_large : '/nophoto.png'} />
+						<Grid stackable columns={2}>
+							<Grid.Column>
+								<p>
+									<Image rounded size='medium' src={member.photo_large ? staticUrl + '/' + member.photo_large : '/nophoto.png'} />
+								</p>
+
+								{isAdmin(user) ?
+									<AdminMemberInfo {...props} />
+								:
+									<BasicTable>
+										<Table.Body>
+											<Table.Row>
+												<Table.Cell>Status:</Table.Cell>
+												<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
+											</Table.Row>
+											<Table.Row>
+												<Table.Cell>Joined:</Table.Cell>
+												<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
+											</Table.Row>
+										</Table.Body>
+									</BasicTable>
+								}
+							</Grid.Column>
+
+							<Grid.Column>
+								{isAdmin(user) && <Segment padded><AdminMemberForm {...props} /></Segment>}
+							</Grid.Column>
+						</Grid>
 
-						<BasicTable>
-							<Table.Body>
-								<Table.Row>
-									<Table.Cell>Status:</Table.Cell>
-									<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
-								</Table.Row>
-								<Table.Row>
-									<Table.Cell>Joined:</Table.Cell>
-									<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
-								</Table.Row>
-							</Table.Body>
-						</BasicTable>
 					</div>
 				:
 					<p>Loading...</p>

webclient/src/Misc.js

@@ -7,9 +7,11 @@ export function PleaseLogin() {
 	return (
 		<Container text>
 			<Message warning>
-				<Message.Header style={{ padding: 0 }}>You must login before you can do that!</Message.Header>
+				<Message.Header>You must login before you can do that!</Message.Header>
 				<p>Visit our <Link to='/'>login page</Link>, then try again.</p>
 			</Message>
+
+			<img className='photo-404' src='/404.jpg' />
 		</Container>
 	);
 };
@@ -18,7 +20,7 @@ export function NotFound() {
 	return (
 		<Container text>
 			<Message warning>
-				<Message.Header style={{ padding: 0 }}>The page you requested can't be found!</Message.Header>
+				<Message.Header>The page you requested can't be found!</Message.Header>
 				<p>Visit our <Link to='/'>home page</Link> if you are lost.</p>
 			</Message>
 

webclient/src/utils.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Table } from 'semantic-ui-react';
 
+export const isAdmin = (user) => user.is_staff || user.member.is_director;
+
 export const siteUrl = window.location.protocol + '//' + window.location.hostname;
 export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;
 export const staticUrl = window.location.protocol + '//static.' + window.location.hostname;
@@ -23,7 +25,7 @@ export const requester = (route, method, token, data) => {
 	} else if (['POST', 'PUT', 'PATCH'].includes(method)) {
 		const formData = new FormData();
 		Object.keys(data).forEach(key =>
-			formData.append(key, data[key])
+			formData.append(key, data[key] === null ? '' : data[key])
 		);
 
 		options = {