Add member status and expiry date to Storage

webclient/src/Storage.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link, useParams, useHistory } from 'react-router-dom';
 import './light.css';
 import { MembersDropdown } from './Members.js';
-import { isAdmin, BasicTable, requester, useIsMobile } from './utils.js';
+import { statusColor, isAdmin, BasicTable, requester, useIsMobile } from './utils.js';
 import { Button, Checkbox, Container, Form, Grid, Header, Icon, Input, Message, Segment, Table } from 'semantic-ui-react';
 
 export function StorageEditor(props) {
@@ -277,6 +277,7 @@ let storageListCache = false;
 let showEmptyCache = false;
 let showMemodCache = false;
 let showServedCache = false;
+let showExpiredCache = false;
 
 export function StorageList(props) {
 	const { token } = props;
@@ -285,6 +286,7 @@ export function StorageList(props) {
 	const [showEmpty, setShowEmpty] = useState(showEmptyCache);
 	const [showMemod, setShowMemod] = useState(showMemodCache);
 	const [showServed, setShowServed] = useState(showServedCache);
+	const [showExpired, setShowExpired] = useState(showExpiredCache);
 	const [error, setError] = useState(false);
 	const isMobile = useIsMobile();
 
@@ -310,11 +312,21 @@ export function StorageList(props) {
 			return false;
 		} else if (showServed && !x.memo.toLowerCase().includes('served')) {
 			return false;
+		} else if (showExpired && !x.member_paused) {
+			return false;
 		} else {
 			return true;
 		}
 	};
 
+	const sortStorage = (a, b) => {
+		if (showExpired) {
+			return a.member_paused !== b.member_paused ? a.member_paused < b.member_paused ? -1 : 1 : 0;
+		} else {
+			return a.shelf_id !== b.shelf_id ? a.shelf_id < b.shelf_id ? -1 : 1 : 0;
+		}
+	};
+
 	const handleShowEmpty = (e, v) => {
 		setShowEmpty(v.checked);
 		showEmptyCache = v.checked;
@@ -330,6 +342,13 @@ export function StorageList(props) {
 		showServedCache = v.checked;
 	};
 
+	const handleShowExpired = (e, v) => {
+		setShowExpired(v.checked);
+		showExpiredCache = v.checked;
+	};
+
+	const numResults = storageList ? storageList.filter(filterStorage).length : 0;
+
 	return (
 		<div>
 			<p>
@@ -363,29 +382,40 @@ export function StorageList(props) {
 					onChange={handleShowServed}
 					checked={showServed}
 				/>
+
+				<Checkbox
+					className='filter-option'
+					label='Show Expired'
+					onChange={handleShowExpired}
+					checked={showExpired}
+				/>
 			</p>
 
 			{!error ?
 				storageList ?
 					<>
-						<p>{storageList.filter(filterStorage).length} results:</p>
+						<p>{numResults} result{numResults === 1 ? '' : 's'}{showExpired && ', ordered by expiry'}:</p>
 
 						<Table basic='very'>
 							{!isMobile && <Table.Header>
 								<Table.Row>
 									<Table.HeaderCell>Shelf ID</Table.HeaderCell>
 									<Table.HeaderCell>Owner</Table.HeaderCell>
+									<Table.HeaderCell>Expired</Table.HeaderCell>
 									<Table.HeaderCell>Memo</Table.HeaderCell>
 								</Table.Row>
 							</Table.Header>}
 
 							<Table.Body>
-								{storageList.filter(filterStorage).map(x =>
+								{storageList.filter(filterStorage).sort(sortStorage).map(x =>
 									<Table.Row key={x.id}>
 										<Table.Cell><StorageButton storage={x} /></Table.Cell>
 										<Table.Cell>
-											{isMobile && 'Owner: '}<Link to={'/members/'+x.member_id}>{x.member_name}</Link>
+											{isMobile && 'Owner: '}
+											{x.member_name && <Icon name='circle' color={statusColor[x.member_status]} />}
+											<Link to={'/members/'+x.member_id}>{x.member_name}</Link>
 										</Table.Cell>
+										<Table.Cell>{isMobile && 'Expired: '}{x.member_paused}</Table.Cell>
 										<Table.Cell>{isMobile && 'Memo: '}{x.memo}</Table.Cell>
 									</Table.Row>
 								)}