spaceport/webclient/src/Storage.js

import React, { useState, useEffect } from 'react';
import { Link, useParams, useHistory } from 'react-router-dom';
import './light.css';
import { MembersDropdown } from './Members.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) {
	const { token, input, setInput, error } = props;

	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
	const handleChange = (e) => handleValues(e, e.currentTarget);

	const makeProps = (name) => ({
		name: name,
		onChange: handleChange,
		value: input[name] || '',
		error: error[name],
	});

	return (
		<div className='transaction-editor'>
			<Form.Field error={error.member_id}>
				<label>Owner (search)</label>
				<MembersDropdown
					token={token}
					{...makeProps('member_id')}
					onChange={handleValues}
					initial={input.member_name}
					autofocus={!input.member_name}
				/>
			</Form.Field>

			<Form.Input
				label='Memo'
				fluid
				{...makeProps('memo')}
			/>
		</div>
	);
};

function EditStorage(props) {
	const { storage, setStorage, token, refreshUser } = props;
	const [input, setInput] = useState(storage);
	const [error, setError] = useState(false);
	const [loading, setLoading] = useState(false);
	const [success, setSuccess] = useState(false);
	const { id } = useParams();

	const handleSubmit = (e) => {
		if (loading) return;
		setLoading(true);
		setSuccess(false);
		const data = { ...input };
		return requester('/storage/'+id+'/', 'PUT', token, data)
		.then(res => {
			setLoading(false);
			setSuccess(true);
			setError(false);
			setInput(res);
			setStorage(res);
		})
		.catch(err => {
			setLoading(false);
			console.log(err);
			setError(err.data);
		});
	};

	return (
		<div>
			<Header size='medium'>Edit Storage {storage.shelf_id}</Header>

			<Form onSubmit={handleSubmit}>
				<StorageEditor token={token} input={input} setInput={setInput} error={error} />

				<Form.Group widths='equal'>
					<Form.Button loading={loading} error={error.non_field_errors}>
						Save
					</Form.Button>
				</Form.Group>
				{success && <div>Success!</div>}
			</Form>
		</div>
	);
};

function StorageTable(props) {
	const { storage, user } = props;

	const locations = {
		member_shelves: 'Member Shelves',
		lockers: 'Lockers',
		large_project_storage: 'Large Project Storage',
	};

	return (
		<BasicTable>
			<Table.Body>
				<Table.Row>
					<Table.Cell>Shelf ID:</Table.Cell>
					<Table.Cell>{storage.shelf_id}</Table.Cell>
				</Table.Row>
				<Table.Row>
					<Table.Cell>Owner:</Table.Cell>
					{storage.member_id ?
						<Table.Cell>
							<Link to={'/members/'+storage.member_id}>
								{storage.member_name}
							</Link>
						</Table.Cell>
					:
						<Table.Cell>None</Table.Cell>
					}
				</Table.Row>
				<Table.Row>
					<Table.Cell>Location:</Table.Cell>
					<Table.Cell>
						{locations[storage.location]}
						<p>
							Aisle {storage.shelf_id[0]} <br/>
							Column {storage.shelf_id[1]} <br/>
							Row {storage.shelf_id[2]}
						</p>
					</Table.Cell>
				</Table.Row>
				<Table.Row>
					<Table.Cell>Memo:</Table.Cell>
					<Table.Cell>{storage.memo || 'None'}</Table.Cell>
				</Table.Row>
			</Table.Body>
		</BasicTable>
	);
}

export function StorageDetail(props) {
	const { token, user } = props;
	const [storage, setStorage] = useState(false);
	const [error, setError] = useState(false);
	const { id } = useParams();

	useEffect(() => {
		requester('/storage/' + id + '/', 'GET', token)
		.then(res => {
			setStorage(res);
			setError(false);
		})
		.catch(err => {
			console.log(err);
			setError(true);
		});
	}, [id]);

	return (
		<Container>
			{!error ?
				storage ?
					<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} />
							</Grid.Column>

							<Grid.Column width={10}>
								{isAdmin(user) ?
									<Segment padded>
										<EditStorage storage={storage} setStorage={setStorage} token={token} {...props} />
									</Segment>
								:
									<Segment padded>
										<Header size='medium'>Report Storage</Header>

										<p>If there's anything wrong with this storage location please email the Protospace Directors:</p>
										<p><a href='mailto:directors@protospace.ca' target='_blank' rel='noopener noreferrer'>directors@protospace.ca</a></p>
										<p>Please include a link to this storage location and any relevant details.</p>
									</Segment>
								}
							</Grid.Column>
						</Grid>

					</div>
				:
					<p>Loading...</p>
			:
				<p>Error loading.</p>
			}
		</Container>
	);
};

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>
	);
};

let storageSearchCache = '';

export function StorageSearch(props) {
	const { setSearch } = props;
	const [input, setInput] = useState(storageSearchCache);

	const handleChange = (event) => {
		const q = event.target.value.toUpperCase();
		setInput(q);
		setSearch(q);
		storageSearchCache = q;
	};

	return (
		<div>
			<Input icon='search'
				placeholder='Search...'
				value={input}
				onChange={handleChange}
				aria-label='search products'
				style={{ marginRight: '0.5rem' }}
				maxLength={3}
			/>

			{input.length ?
				<Button
					content='Clear'
					onClick={() => {
						setInput('');
						setSearch('');
						storageSearchCache = '';
					}}
				/> : ''
			}
		</div>
	);
};

let storageListCache = false;
let showEmptyCache = false;
let showMemodCache = false;
let showServedCache = false;
let showExpiredCache = 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 [showExpired, setShowExpired] = useState(showExpiredCache);
	const [error, setError] = useState(false);
	const isMobile = useIsMobile();

	useEffect(() => {
		requester('/storage/', 'GET', token)
		.then(res => {
			setStorageList(res.results);
			storageListCache = res.results;
			setError(false);
		})
		.catch(err => {
			console.log(err);
			setError(true);
		});
	}, []);

	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 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;
	};

	const handleShowMemod = (e, v) => {
		setShowMemod(v.checked);
		showMemodCache = v.checked;
	};

	const handleShowServed = (e, v) => {
		setShowServed(v.checked);
		showServedCache = v.checked;
	};

	const handleShowExpired = (e, v) => {
		setShowExpired(v.checked);
		showExpiredCache = v.checked;
	};

	const numResults = storageList ? storageList.filter(filterStorage).length : 0;

	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>

			<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}
				/>

				<Checkbox
					className='filter-option'
					label='Show Expired'
					onChange={handleShowExpired}
					checked={showExpired}
				/>
			</p>

			{!error ?
				storageList ?
					<>
						<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).sort(sortStorage).map(x =>
									<Table.Row key={x.id}>
										<Table.Cell><StorageButton storage={x} /></Table.Cell>
										<Table.Cell>
											{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>
								)}
							</Table.Body>
						</Table>
					</>
				:
					<p>Loading...</p>
			:
				<p>Error loading.</p>
			}
		</div>
	);
};

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;
	const [input, setInput] = useState({});
	const [error, setError] = useState({});
	const [loading, setLoading] = useState(false);
	const history = useHistory();

	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
	const handleChange = (e) => handleValues(e, e.currentTarget);

	const handleSubmit = (e) => {
		if (loading) return;
		setLoading(true);
		requester('/storage/claim/', 'POST', token, input)
		.then(res => {
			setError({});
			refreshUser();
			history.push('/');
		})
		.catch(err => {
			setLoading(false);
			console.log(err);
			setError(err.data);
		});
	};

	const makeProps = (name) => ({
		name: name,
		onChange: handleChange,
		value: input[name] || '',
		error: error[name],
	});

	return (
		<Form onSubmit={handleSubmit}>
			<div className='field'>
				<label>Spaceport Username</label>
				<p>{user.username}</p>
			</div>

			<Form.Input
				label='Shelf ID'
				autoComplete='off'
				required
				{...makeProps('shelf_id')}
				maxLength={3}
			/>

			<Form.Button loading={loading} error={error.non_field_errors || error.detail}>
				Submit
			</Form.Button>
		</Form>
	);
};

export function ClaimShelf(props) {
	const { token, user } = props;

	return (
		<Container>
			<Grid stackable columns={2}>
				<Grid.Column>
					<Header size='large'>Claim Member Shelf</Header>

					<p>Use this form to claim a member shelf.</p>

					<p>Please make sure your name and contact info are visible on the shelf.</p>

					<p>Use the Shelf ID visible on the corner label (A1A, A2B, etc.)</p>

					<ClaimShelfForm {...props} />
				</Grid.Column>
			</Grid>
		</Container>
	);
};