Use item list for members and add member detail view

apiserver/apiserver/api/serializers.py

@@ -60,11 +60,11 @@ class UserSerializer(serializers.ModelSerializer):
 # member viewing member list or other member
 class OtherMemberSerializer(serializers.ModelSerializer):
     q = serializers.CharField(write_only=True, max_length=64)
-    seq = serializers.IntegerField(write_only=True, )
+    seq = serializers.IntegerField(write_only=True)
 
     class Meta:
         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
 class MemberSerializer(serializers.ModelSerializer):

apiserver/apiserver/api/views.py

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

webclient/src/App.js

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

webclient/src/Cards.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 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';
 
 export function Cards(props) {
@@ -39,7 +39,7 @@ export function Cards(props) {
 						</Table.Body>
 					</Table>
 				:
-					<Table unstackable basic='very'>
+					<BasicTable>
 						<Table.Body>
 							<Table.Row>
 								<Table.Cell>Number:</Table.Cell>
@@ -58,7 +58,7 @@ export function Cards(props) {
 								<Table.Cell>{cardStatus(card)}</Table.Cell>
 							</Table.Row>
 						</Table.Body>
-					</Table>
+					</BasicTable>
 			:
 				<p>No cards yet! Ask a director for one after you are vetted.</p>
 			}

webclient/src/Classes.js

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

webclient/src/Home.js

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

webclient/src/Members.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 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 { staticUrl, requester } from './utils.js';
+import { BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
 export function Members(props) {
@@ -48,36 +48,22 @@ export function Members(props) {
 			</Header>
 
 			{members ?
-				<Table basic='very'>
-					<Table.Header>
-						<Table.Row>
-							<Table.HeaderCell></Table.HeaderCell>
-							<Table.HeaderCell>Name</Table.HeaderCell>
-							<Table.HeaderCell>Status</Table.HeaderCell>
-							<Table.HeaderCell>Member Since</Table.HeaderCell>
-						</Table.Row>
-					</Table.Header>
-
-					<Table.Body>
-						{members.results.length ?
-							members.results.map((x, i) =>
-								<Table.Row key={i}>
-									<Table.Cell>
-										<img
-											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>
+				<Item.Group divided>
+					{members.results.length ?
+						members.results.map((x, i) =>
+							<Item key={i} as={Link} to={'/members/'+x.id}>
+								<Item.Image size='tiny' src={x.photo_small ? staticUrl + '/' + x.photo_small : '/nophoto.png'} />
+								<Item.Content verticalAlign='top'>
+									<Item.Header>{x.preferred_name} {x.last_name}</Item.Header>
+									<Item.Description>Status: {x.status || 'Unknown'}</Item.Description>
+									<Item.Description>Joined: {x.current_start_date || 'Unknown'}</Item.Description>
+								</Item.Content>
+							</Item>
+						)
+					:
+						<p>No Results</p>
+					}
+				</Item.Group>
 			:
 				<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>
+	);
+};
+

webclient/src/Transactions.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 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';
 
 export function Transactions(props) {
@@ -55,7 +55,7 @@ export function TransactionDetail(props) {
 			<Container>
 				<Header size='large'>Transaction Receipt</Header>
 
-				<Table unstackable basic='very'>
+				<BasicTable>
 					<Table.Body>
 						<Table.Row>
 							<Table.Cell>Date:</Table.Cell>
@@ -90,7 +90,7 @@ export function TransactionDetail(props) {
 							<Table.Cell>{t.memo}</Table.Cell>
 						</Table.Row>
 					</Table.Body>
-				</Table>
+				</BasicTable>
 
 			</Container>
 		:

webclient/src/light.css

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

webclient/src/utils.js

@@ -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 apiUrl = window.location.protocol + '//api.' + 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) => {
 	let options = {headers: {}};