Add options to sort the member list
This commit is contained in:
parent
393bf04180
commit
403b0be895
|
|
@ -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})
|
||||
|
||||
|
|
|
|||
BIN
webclient/public/mr-bean.jpg
Normal file
BIN
webclient/public/mr-bean.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user