Add table of all storage locations

webclient/src/Storage.js

@@ -2,8 +2,8 @@ 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 } from './utils.js';
-import { Button, Container, Form, Grid, Header, Message, Segment, Table } from 'semantic-ui-react';
+import { isAdmin, BasicTable, requester, useIsMobile } from './utils.js';
+import { Button, Container, Form, Grid, Header, Icon, Message, Segment, Table } from 'semantic-ui-react';
 
 export function StorageEditor(props) {
 	const { token, input, setInput, error } = props;
@@ -174,6 +174,8 @@ export function StorageDetail(props) {
 					<div>
 						<Header size='large'>Storage Location</Header>
 
+						<p><Link to={'/storage'}>View the list of all storage locations.</Link></p>
+
 						<Grid stackable columns={2}>
 							<Grid.Column width={6}>
 								<StorageTable user={user} storage={storage} />
@@ -206,10 +208,38 @@ export function StorageDetail(props) {
 	);
 };
 
+export function StorageButton(props) {
+	const { storage } = props;
+	const history = useHistory();
+
+	const buttonColors = {
+		member_shelves: 'grey',
+		lockers: 'blue',
+		large_project_storage: 'brown',
+	};
+
+	const handleStorageButton = (e, id) => {
+		e.preventDefault();
+		history.push('/storage/' + id);
+	};
+
+	return (
+		<Button
+			className='storage-button'
+			onClick={(e) => handleStorageButton(e, storage.id)}
+			size='tiny'
+			color={buttonColors[storage.location]}
+		>
+			{storage.shelf_id}
+		</Button>
+	);
+};
+
 export function StorageList(props) {
 	const { token } = props;
 	const [storageList, setStorageList] = useState(false);
 	const [error, setError] = useState(false);
+	const isMobile = useIsMobile();
 
 	useEffect(() => {
 		requester('/storage/', 'GET', token)
@@ -225,13 +255,34 @@ export function StorageList(props) {
 
 	return (
 		<div>
+			<p>
+				<Icon name='circle' color='grey' /> Member shelf <br/>
+				<Icon name='circle' color='blue' /> Locker <br/>
+				<Icon name='circle' color='brown' /> Large project storage
+			</p>
 			{!error ?
 				storageList ?
-					storageList.map(x =>
-						<p><Link to={'/storage/'+x.id}>{x.shelf_id}</Link> - {!!x.member_id &&
-							<Link to={'/members/'+x.member_id}>{x.member_name}</Link>
-						}</p>
-					)
+					<Table basic='very'>
+						<Table.Header>
+							<Table.Row>
+								<Table.HeaderCell>Shelf ID</Table.HeaderCell>
+								<Table.HeaderCell>Owner</Table.HeaderCell>
+								<Table.HeaderCell>Memo</Table.HeaderCell>
+							</Table.Row>
+						</Table.Header>
+
+						<Table.Body>
+							{storageList.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>
+									</Table.Cell>
+									<Table.Cell>{isMobile && 'Memo: '}{x.memo}</Table.Cell>
+								</Table.Row>
+							)}
+						</Table.Body>
+					</Table>
 				:
 					<p>Loading...</p>
 			:
@@ -241,6 +292,18 @@ export function StorageList(props) {
 	);
 };
 
+export function Storage(props) {
+	const { token, user } = props;
+
+	return (
+		<Container>
+			<Header size='large'>Storage Locations</Header>
+
+			<StorageList {...props} />
+		</Container>
+	);
+};
+
 export function ClaimShelfForm(props) {
 	const { token, user, refreshUser } = props;
 	const member = user.member;
@@ -299,7 +362,6 @@ export function ClaimShelfForm(props) {
 
 export function ClaimShelf(props) {
 	const { token, user } = props;
-	const [error, setError] = useState(false);
 
 	return (
 		<Container>