Add filtering Storage by empty, memo'd, and served

webclient/src/Storage.js

@@ -3,7 +3,7 @@ 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 { Button, Container, Form, Grid, Header, Icon, Input, Message, Segment, Table } from 'semantic-ui-react';
+import { Button, Checkbox, Container, Form, Grid, Header, Icon, Input, Message, Segment, Table } from 'semantic-ui-react';
 
 export function StorageEditor(props) {
 	const { token, input, setInput, error } = props;
@@ -274,11 +274,17 @@ export function StorageSearch(props) {
 };
 
 let storageListCache = false;
+let showEmptyCache = false;
+let showMemodCache = false;
+let showServedCache = false;
 
 export function StorageList(props) {
 	const { token } = props;
 	const [storageList, setStorageList] = useState(storageListCache);
 	const [search, setSearch] = useState(storageSearchCache);
+	const [showEmpty, setShowEmpty] = useState(showEmptyCache);
+	const [showMemod, setShowMemod] = useState(showMemodCache);
+	const [showServed, setShowServed] = useState(showServedCache);
 	const [error, setError] = useState(false);
 	const isMobile = useIsMobile();
 
@@ -298,11 +304,32 @@ export function StorageList(props) {
 	const filterStorage = (x) => {
 		if (search.length && !x.shelf_id.startsWith(search)) {
 			return false;
+		} else if (showEmpty && x.member_name) {
+			return false;
+		} else if (showMemod && !x.memo) {
+			return false;
+		} else if (showServed && !x.memo.toLowerCase().includes('served')) {
+			return false;
 		} else {
 			return true;
 		}
 	};
 
+	const handleShowEmpty = (e, v) => {
+		setShowEmpty(v.checked);
+		showEmptyCache = v.checked;
+	};
+
+	const handleShowMemod = (e, v) => {
+		setShowMemod(v.checked);
+		showMemodCache = v.checked;
+	};
+
+	const handleShowServed = (e, v) => {
+		setShowServed(v.checked);
+		showServedCache = v.checked;
+	};
+
 	return (
 		<div>
 			<p>
@@ -311,10 +338,38 @@ export function StorageList(props) {
 				<Icon name='circle' color='brown' /> Large project storage
 			</p>
 
+			<p>
 				<StorageSearch setSearch={setSearch} />
+			</p>
+
+			<p>
+				<Checkbox
+					className='filter-option'
+					label='Show Empty'
+					onChange={handleShowEmpty}
+					checked={showEmpty}
+				/>
+
+				<Checkbox
+					className='filter-option'
+					label={'Show Memo\'d'}
+					onChange={handleShowMemod}
+					checked={showMemod}
+				/>
+
+				<Checkbox
+					className='filter-option'
+					label='Show Served'
+					onChange={handleShowServed}
+					checked={showServed}
+				/>
+			</p>
 
 			{!error ?
 				storageList ?
+					<>
+						<p>{storageList.filter(filterStorage).length} results:</p>
+
 						<Table basic='very'>
 							{!isMobile && <Table.Header>
 								<Table.Row>
@@ -336,6 +391,7 @@ export function StorageList(props) {
 								)}
 							</Table.Body>
 						</Table>
+					</>
 				:
 					<p>Loading...</p>
 			: