Add options to sort the member list

apiserver/apiserver/api/views.py

@@ -60,6 +60,7 @@ class SearchViewSet(Base, Retrieve):
     def get_queryset(self):
         queryset = models.Member.objects.all()
         search = self.request.data.get('q', '').lower()
+        sort = self.request.data.get('sort', '').lower()
 
         if not cache.touch('search_strings'):
             utils.gen_search_strings() # init cache
@@ -87,9 +88,23 @@ class SearchViewSet(Base, Retrieve):
 
             queryset = result_objects
             logging.info('Search for: {}, results: {}'.format(search, len(queryset)))
-        elif self.action == 'create':
+        elif self.action == 'create' and sort == 'recently_vetted':
             utils.gen_search_strings() # update cache
             queryset = queryset.order_by('-vetted_date')
+        elif self.action == 'create' and sort == 'newest_active':
+            queryset = queryset.filter(paused_date__isnull=True)
+            queryset = queryset.order_by('-application_date')
+        elif self.action == 'create' and sort == 'newest_overall':
+            queryset = queryset.filter(paused_date__isnull=True)
+            queryset = queryset.order_by('-application_date')
+        elif self.action == 'create' and sort == 'oldest_active':
+            queryset = queryset.filter(paused_date__isnull=True)
+            queryset = queryset.order_by('application_date')
+        elif self.action == 'create' and sort == 'oldest_overall':
+            queryset = queryset.filter(application_date__isnull=False)
+            queryset = queryset.order_by('application_date')
+        elif self.action == 'create' and sort == 'best_looking':
+            queryset = []
 
         return queryset
 
@@ -101,7 +116,13 @@ class SearchViewSet(Base, Retrieve):
         except ValueError:
             seq = 0
 
-        queryset = self.get_queryset()[:NUM_SEARCH_RESULTS]
+        search = self.request.data.get('q', '').lower()
+        if search:
+            num_results = NUM_SEARCH_RESULTS
+        else:
+            num_results = 100
+
+        queryset = self.get_queryset()[:num_results]
         serializer = serializers.SearchSerializer(queryset, many=True)
         return Response({'seq': seq, 'results': serializer.data})
 

webclient/src/Members.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
 import './light.css';
 import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } from './utils.js';
@@ -7,6 +7,15 @@ import { NotFound, PleaseLogin } from './Misc.js';
 import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminMemberTraining, AdminMemberCertifications } from './AdminMembers.js';
 import { AdminMemberTransactions } from './AdminTransactions.js';
 
+const memberSorts = {
+	recently_vetted: 'Recently Vetted',
+	newest_active: 'Newest Active',
+	newest_overall: 'Newest Overall',
+	best_looking: 'Best Looking',
+	oldest_active: 'Oldest Active',
+	oldest_overall: 'Oldest Overall',
+};
+
 export function MembersDropdown(props) {
 	const { token, name, onChange, value, initial } = props;
 	const [response, setResponse] = useState({ results: [] });
@@ -52,13 +61,22 @@ export function MembersDropdown(props) {
 let searchCache = '';
 
 export function Members(props) {
+	const qs = useLocation().search;
+	const params = new URLSearchParams(qs);
+	const sort = params.get('sort') || 'recently_vetted';
+
 	const [response, setResponse] = useState(false);
+	const [numShow, setNumShow] = useState(20);
 	const searchDefault = {seq: 0, q: searchCache};
 	const [search, setSearch] = useState(searchDefault);
 	const { token } = props;
 
+	console.log(sort);
+
 	useEffect(() => {
+		setResponse(false);
 		searchCache = search.q;
+		search.sort = sort;
 		requester('/search/', 'POST', token, search)
 		.then(res => {
 			if (!search.seq || res.seq > response.seq) {
@@ -68,7 +86,7 @@ export function Members(props) {
 		.catch(err => {
 			console.log(err);
 		});
-	}, [search]);
+	}, [search, sort]);
 
 	return (
 		<Container>
@@ -91,32 +109,60 @@ export function Members(props) {
 				/> : ''
 			}
 
+			<p></p>
+
+			<p>
+				Sort by{' '}
+				{Object.entries(memberSorts).map((x, i) =>
+					<>
+						<Link to={'/members?sort='+x[0]} replace>{x[1]}</Link>
+						{i < Object.keys(memberSorts).length - 1 && ', '}
+					</>
+				)}.
+			</p>
+
 			<Header size='medium'>
-				{search.q.length ? 'Search Results' : 'Newest Vetted Members'}
+				{search.q.length ? 'Search Results' : memberSorts[sort] + ' Members'}
 			</Header>
 
-			{response ?
-				<Item.Group unstackable divided>
-					{response.results.length ?
-						response.results.map(x =>
-							<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
-								<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
-								<Item.Content verticalAlign='top'>
-									<Item.Header>
-										<Icon name='circle' color={statusColor[x.member.status]} />
-										{x.member.preferred_name} {x.member.last_name}
-									</Item.Header>
-									<Item.Description>Status: {x.member.status || 'Unknown'}</Item.Description>
-									<Item.Description>Joined: {x.member.application_date || 'Unknown'}</Item.Description>
-								</Item.Content>
-							</Item>
-						)
-					:
-						<p>No Results</p>
-					}
-				</Item.Group>
+			{sort === 'best_looking' ?
+				<center>
+					<img className='bean' src='/mr-bean.jpg' />
+				</center>
 			:
-				<p>Loading...</p>
+				response ?
+					<>
+						<Item.Group unstackable divided>
+							{response.results.length ?
+								response.results.slice(0, numShow).map((x, i) =>
+									<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
+										<div className='list-num'>{i+1}</div>
+										<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
+										<Item.Content verticalAlign='top'>
+											<Item.Header>
+												<Icon name='circle' color={statusColor[x.member.status]} />
+												{x.member.preferred_name} {x.member.last_name}
+											</Item.Header>
+											<Item.Description>Status: {x.member.status || 'Unknown'}</Item.Description>
+											<Item.Description>Joined: {x.member.application_date || 'Unknown'}</Item.Description>
+											<Item.Description>ID: {x.member.id}</Item.Description>
+										</Item.Content>
+									</Item>
+								)
+							:
+								<p>No Results</p>
+							}
+						</Item.Group>
+
+						{numShow !== 100 ?
+							<Button
+								content='Load More'
+								onClick={() => setNumShow(100)}
+							/> : ''
+						}
+					</>
+				:
+					<p>Loading...</p>
 			}
 
 		</Container>

webclient/src/light.css

@@ -117,6 +117,13 @@ body {
 	margin-left: 1rem;
 }
 
+.list-num {
+	display: flex;
+	align-items: center;
+	margin-right: 1rem;
+	color: black;
+}
+
 .footer {
 	margin-top: -20rem;
 	background: black;