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

Use item list for members and add member detail view

Browse Source
master
Tanner Collin 4 years ago
parent 58f3021cb1
commit 3ff81633a7
10 changed files with 118 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      apiserver/apiserver/api/serializers.py
  2. 10
      apiserver/apiserver/api/views.py
  3. 24
      webclient/src/App.js
  4. 6
      webclient/src/Cards.js
  5. 6
      webclient/src/Classes.js
  6. 14
      webclient/src/Home.js
  7. 98
      webclient/src/Members.js
  8. 6
      webclient/src/Transactions.js
  9. 4
      webclient/src/light.css
  10. 9
      webclient/src/utils.js

4
apiserver/apiserver/api/serializers.py
Unescape View File

@ -60,11 +60,11 @@ class UserSerializer(serializers.ModelSerializer):
# member viewing member list or other member # member viewing member list or other member
class OtherMemberSerializer(serializers.ModelSerializer): class OtherMemberSerializer(serializers.ModelSerializer):
q = serializers.CharField(write_only=True, max_length=64) q = serializers.CharField(write_only=True, max_length=64)
seq = serializers.IntegerField(write_only=True, ) seq = serializers.IntegerField(write_only=True)
class Meta: class Meta:
model = models.Member model = models.Member
fields = ['q', 'seq', 'preferred_name', 'last_name', 'status', 'current_start_date', 'photo_small'] fields = ['q', 'seq', 'id', 'preferred_name', 'last_name', 'status', 'current_start_date', 'photo_small', 'photo_large']
# member viewing himself # member viewing himself
class MemberSerializer(serializers.ModelSerializer): class MemberSerializer(serializers.ModelSerializer):

10
apiserver/apiserver/api/views.py
Unescape View File

@ -1,6 +1,6 @@
from django.contrib.auth.models import User, Group from django.contrib.auth.models import User, Group
from django.db.models import Max from django.db.models import Max
from rest_framework import viewsets, views, permissions from rest_framework import viewsets, views, permissions, mixins
from rest_framework.response import Response from rest_framework.response import Response
from rest_auth.registration.views import RegisterView from rest_auth.registration.views import RegisterView
from fuzzywuzzy import fuzz, process from fuzzywuzzy import fuzz, process
@ -23,12 +23,12 @@ def gen_search_strings():
).lower() ).lower()
search_strings[string] = m.id search_strings[string] = m.id
class SearchViewSet(viewsets.ViewSet): NUM_SEARCH_RESULTS = 10
class SearchViewSet(viewsets.GenericViewSet, mixins.RetrieveModelMixin):
permission_classes = [AllowMetadata | permissions.IsAuthenticated] permission_classes = [AllowMetadata | permissions.IsAuthenticated]
serializer_class = serializers.OtherMemberSerializer serializer_class = serializers.OtherMemberSerializer
def get_queryset(self): def get_queryset(self):
NUM_SEARCH_RESULTS = 10
queryset = models.Member.objects.all() queryset = models.Member.objects.all()
search = self.request.data.get('q', '').lower() search = self.request.data.get('q', '').lower()
@ -55,7 +55,7 @@ class SearchViewSet(viewsets.ViewSet):
queryset = result_objects queryset = result_objects
else: else:
gen_search_strings() gen_search_strings()
queryset = queryset.order_by('-vetted_date')[:NUM_SEARCH_RESULTS] queryset = queryset.order_by('-vetted_date')
return queryset return queryset
@ -66,7 +66,7 @@ class SearchViewSet(viewsets.ViewSet):
except ValueError: except ValueError:
seq = 0 seq = 0
queryset = self.get_queryset() queryset = self.get_queryset()[:NUM_SEARCH_RESULTS]
serializer = self.serializer_class(queryset, many=True) serializer = self.serializer_class(queryset, many=True)
return Response({'seq': seq, 'results': serializer.data}) return Response({'seq': seq, 'results': serializer.data})

24
webclient/src/App.js
Unescape View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js'; import { requester } from './utils.js';
import { Home } from './Home.js'; import { Home } from './Home.js';
import { Transactions, TransactionDetail } from './Transactions.js'; import { Transactions, TransactionDetail } from './Transactions.js';
@ -9,7 +8,7 @@ import { Cards } from './Cards.js';
import { Training } from './Training.js'; import { Training } from './Training.js';
import { Courses, CourseDetail } from './Courses.js'; import { Courses, CourseDetail } from './Courses.js';
import { Classes, ClassDetail } from './Classes.js'; import { Classes, ClassDetail } from './Classes.js';
import { Members } from './Members.js'; import { Members, MemberDetail } from './Members.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
import { Footer } from './Footer.js'; import { Footer } from './Footer.js';
@ -50,7 +49,7 @@ function App() {
<div className='content-wrap'> <div className='content-wrap'>
<div className='content-wrap-inside'> <div className='content-wrap-inside'>
<Container> <Container>
<div className='header'> <div className='hero'>
<img src='/logo-long.svg' className='logo-long' /> <img src='/logo-long.svg' className='logo-long' />
</div> </div>
</Container> </Container>
@ -63,8 +62,13 @@ function App() {
to='/' to='/'
/> />
<Dropdown item text='Profile' id='ps-menu'> <Dropdown item text='Member' id='ps-menu'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item
content='Profile'
as={Link}
to='/transactions'
/>
<Dropdown.Item <Dropdown.Item
content='Transactions' content='Transactions'
as={Link} as={Link}
@ -80,13 +84,18 @@ function App() {
as={Link} as={Link}
to='/cards' to='/cards'
/> />
<Dropdown.Item
content='Account'
as={Link}
to='/cards'
/>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<Dropdown item text='Space' id='ps-menu'> <Dropdown item text='Space' id='ps-menu'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item <Dropdown.Item
content='Members' content='Member List'
as={Link} as={Link}
to='/members' to='/members'
/> />
@ -150,6 +159,9 @@ function App() {
<Classes token={token} /> <Classes token={token} />
</Route> </Route>
<Route path='/members/:id'>
<MemberDetail token={token} />
</Route>
<Route path='/members'> <Route path='/members'>
<Members token={token} /> <Members token={token} />
</Route> </Route>

6
webclient/src/Cards.js
Unescape View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js'; import { BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
export function Cards(props) { export function Cards(props) {
@ -39,7 +39,7 @@ export function Cards(props) {
</Table.Body> </Table.Body>
</Table> </Table>
: :
<Table unstackable basic='very'> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell>Number:</Table.Cell> <Table.Cell>Number:</Table.Cell>
@ -58,7 +58,7 @@ export function Cards(props) {
<Table.Cell>{cardStatus(card)}</Table.Cell> <Table.Cell>{cardStatus(card)}</Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </BasicTable>
: :
<p>No cards yet! Ask a director for one after you are vetted.</p> <p>No cards yet! Ask a director for one after you are vetted.</p>
} }

6
webclient/src/Classes.js
Unescape View File

@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
import './light.css'; import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment'; import moment from 'moment';
import { requester } from './utils.js'; import { BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
function ClassTable(props) { function ClassTable(props) {
@ -115,7 +115,7 @@ export function ClassDetail(props) {
<div> <div>
<Header size='large'>Class Details</Header> <Header size='large'>Class Details</Header>
<Table unstackable basic='very'> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell>Name:</Table.Cell> <Table.Cell>Name:</Table.Cell>
@ -150,7 +150,7 @@ export function ClassDetail(props) {
<Table.Cell>{clazz.student_count}</Table.Cell> <Table.Cell>{clazz.student_count}</Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </BasicTable>
<Header size='medium'>Attendance</Header> <Header size='medium'>Attendance</Header>
</div> </div>

14
webclient/src/Home.js
Unescape View File

@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { staticUrl, requester } from './utils.js'; import { BasicTable, staticUrl, requester } from './utils.js';
import { LoginForm, SignupForm } from './LoginSignup.js'; import { LoginForm, SignupForm } from './LoginSignup.js';
function DetailsForm(props) { function SignupDetailsForm(props) {
const member = props.user.member; const member = props.user.member;
const [input, setInput] = useState({ const [input, setInput] = useState({
preferred_name: member.preferred_name, preferred_name: member.preferred_name,
@ -110,7 +110,7 @@ function MemberInfo(props) {
</Grid> </Grid>
<Header size='medium'>Details</Header> <Header size='medium'>Details</Header>
<Table unstackable basic='very'> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell>Expiry:</Table.Cell> <Table.Cell>Expiry:</Table.Cell>
@ -137,10 +137,10 @@ function MemberInfo(props) {
<Table.Cell>{lastCard && lastCard.card_number || 'None'}</Table.Cell> <Table.Cell>{lastCard && lastCard.card_number || 'None'}</Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </BasicTable>
<Header size='medium'>Latest Transactions</Header> <Header size='medium'>Latest Transactions</Header>
<Table unstackable basic='very'> <BasicTable>
<Table.Body> <Table.Body>
{lastTrans.length ? {lastTrans.length ?
lastTrans.map((x, i) => lastTrans.map((x, i) =>
@ -156,7 +156,7 @@ function MemberInfo(props) {
<Table.Row><Table.Cell>None</Table.Cell></Table.Row> <Table.Row><Table.Cell>None</Table.Cell></Table.Row>
} }
</Table.Body> </Table.Body>
</Table> </BasicTable>
</div> </div>
); );
}; };
@ -172,7 +172,7 @@ export function Home(props) {
user.member.set_details ? user.member.set_details ?
<MemberInfo user={user} /> <MemberInfo user={user} />
: :
<DetailsForm token={token} user={user} setUserCache={setUserCache} /> <SignupDetailsForm token={token} user={user} setUserCache={setUserCache} />
: :
<div> <div>
<LoginForm setTokenCache={setTokenCache} /> <LoginForm setTokenCache={setTokenCache} />

98
webclient/src/Members.js
Unescape View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Menu, Message, Segment, Table } from 'semantic-ui-react'; 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 moment from 'moment';
import { staticUrl, requester } from './utils.js'; import { BasicTable, staticUrl, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
export function Members(props) { export function Members(props) {
@ -48,36 +48,22 @@ export function Members(props) {
</Header> </Header>
{members ? {members ?
<Table basic='very'> <Item.Group divided>
<Table.Header> {members.results.length ?
<Table.Row> members.results.map((x, i) =>
<Table.HeaderCell></Table.HeaderCell> <Item key={i} as={Link} to={'/members/'+x.id}>
<Table.HeaderCell>Name</Table.HeaderCell> <Item.Image size='tiny' src={x.photo_small ? staticUrl + '/' + x.photo_small : '/nophoto.png'} />
<Table.HeaderCell>Status</Table.HeaderCell> <Item.Content verticalAlign='top'>
<Table.HeaderCell>Member Since</Table.HeaderCell> <Item.Header>{x.preferred_name} {x.last_name}</Item.Header>
</Table.Row> <Item.Description>Status: {x.status || 'Unknown'}</Item.Description>
</Table.Header> <Item.Description>Joined: {x.current_start_date || 'Unknown'}</Item.Description>
</Item.Content>
<Table.Body> </Item>
{members.results.length ? )
members.results.map((x, i) => :
<Table.Row key={i}> <p>No Results</p>
<Table.Cell> }
<img </Item.Group>
className='photo-small'
src={x.photo_small ? staticUrl + '/' + x.photo_small : '/nophoto.png'}
/>
</Table.Cell>
<Table.Cell>{x.preferred_name} {x.last_name}</Table.Cell>
<Table.Cell>{x.status}</Table.Cell>
<Table.Cell>{x.current_start_date}</Table.Cell>
</Table.Row>
)
:
<Table.Row><Table.Cell>No Results</Table.Cell></Table.Row>
}
</Table.Body>
</Table>
: :
<p>Loading...</p> <p>Loading...</p>
} }
@ -86,3 +72,51 @@ export function Members(props) {
); );
}; };
export function MemberDetail(props) {
const [member, setMember] = useState(false);
const [error, setError] = useState(false);
const { token } = props;
const { id } = useParams();
useEffect(() => {
requester('/search/'+id+'/', 'GET', token)
.then(res => {
setMember(res);
})
.catch(err => {
console.log(err);
setError(true);
});
}, []);
return (
<Container>
{!error ?
member ?
<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'} />
<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>
:
<NotFound />
}
</Container>
);
};

6
webclient/src/Transactions.js
Unescape View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js'; import { BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
export function Transactions(props) { export function Transactions(props) {
@ -55,7 +55,7 @@ export function TransactionDetail(props) {
<Container> <Container>
<Header size='large'>Transaction Receipt</Header> <Header size='large'>Transaction Receipt</Header>
<Table unstackable basic='very'> <BasicTable>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell>Date:</Table.Cell> <Table.Cell>Date:</Table.Cell>
@ -90,7 +90,7 @@ export function TransactionDetail(props) {
<Table.Cell>{t.memo}</Table.Cell> <Table.Cell>{t.memo}</Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </BasicTable>
</Container> </Container>
: :

4
webclient/src/light.css
Unescape View File

@ -15,12 +15,12 @@ body {
margin: 0; margin: 0;
} }
.header { .hero {
padding-top: 1.5rem; padding-top: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.header .logo-long { .hero .logo-long {
max-width: 100%; max-width: 100%;
height: 2rem; height: 2rem;
display: block; display: block;

9
webclient/src/utils.js
Unescape View File

@ -1,7 +1,16 @@
import React, { useState, useEffect } from 'react';
import { Table } from 'semantic-ui-react';
export const siteUrl = window.location.protocol + '//' + window.location.hostname; export const siteUrl = window.location.protocol + '//' + window.location.hostname;
export const apiUrl = window.location.protocol + '//api.' + window.location.hostname; export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;
export const staticUrl = window.location.protocol + '//static.' + window.location.hostname; export const staticUrl = window.location.protocol + '//static.' + window.location.hostname;
export const BasicTable = (props) => (
<Table collapsing padded unstackable basic='very'>
{props.children}
</Table>
);
export const requester = (route, method, token, data) => { export const requester = (route, method, token, data) => {
let options = {headers: {}}; let options = {headers: {}};

Write Preview
Loading…
Cancel
Save