tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tanner Collin 2020-01-13 08:01:42 +00:00
parent 0c814790a7
commit f52ee5532d
13 changed files with 268 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apiserver/apiserver/api/models.py
View File

@ -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)

6
apiserver/apiserver/api/serializers.py
View File

@ -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,6 +88,7 @@ class MemberSerializer(serializers.ModelSerializer):
]
def update(self, instance, validated_data):
if instance.user:
instance.user.email = validated_data.get('email', instance.user.email)
instance.user.save()
@ -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

2
apiserver/import_old_portal.py
View File

@ -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

22
webclient/src/Account.js
View File

@ -65,11 +65,7 @@ function ChangePasswordForm(props) {
export function AccountForm(props) {
const member = props.user.member;
const [input, setInput] = useState({
...member,
birthdate: member.birthdate || '',
set_details: true
});
const [input, setInput] = useState({ ...member, 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')}
/>}

206
webclient/src/Admin.js Normal file
View File

@ -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>
);
};

4
webclient/src/App.js
View File

@ -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} />

2
webclient/src/Classes.js
View File

@ -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 => {

2
webclient/src/Courses.js
View File

@ -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 => {

5
webclient/src/Home.js
View File

@ -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>

2
webclient/src/LoginSignup.js
View File

@ -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);
})

20
webclient/src/Members.js
View File

@ -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,8 +97,15 @@ export function MemberDetail(props) {
<div>
<Header size='large'>{member.preferred_name} {member.last_name}</Header>
<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>
@ -110,6 +118,14 @@ export function MemberDetail(props) {
</Table.Row>
</Table.Body>
</BasicTable>
}
</Grid.Column>
<Grid.Column>
{isAdmin(user) && <Segment padded><AdminMemberForm {...props} /></Segment>}
</Grid.Column>
</Grid>
</div>
:
<p>Loading...</p>

6
webclient/src/Misc.js
View File

@ -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>

4
webclient/src/utils.js
View File

@ -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 = {