tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tanner Collin 2023-06-23 00:32:26 +00:00
parent 1129d552a5
commit c0c41f5c1c
1 changed files with 77 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
webclient/src/Storage.js
View File

@ -3,7 +3,7 @@ import { Link, useParams, useHistory } from 'react-router-dom';
import './light.css'; import './light.css';
import { MembersDropdown } from './Members.js'; import { MembersDropdown } from './Members.js';
import { isAdmin, BasicTable, requester, useIsMobile } from './utils.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) { export function StorageEditor(props) {
const { token, input, setInput, error } = props; const { token, input, setInput, error } = props;
@ -274,11 +274,17 @@ export function StorageSearch(props) {
}; };
let storageListCache = false; let storageListCache = false;
let showEmptyCache = false;
let showMemodCache = false;
let showServedCache = false;
export function StorageList(props) { export function StorageList(props) {
const { token } = props; const { token } = props;
const [storageList, setStorageList] = useState(storageListCache); const [storageList, setStorageList] = useState(storageListCache);
const [search, setSearch] = useState(storageSearchCache); 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 [error, setError] = useState(false);
const isMobile = useIsMobile(); const isMobile = useIsMobile();
@ -298,11 +304,32 @@ export function StorageList(props) {
const filterStorage = (x) => { const filterStorage = (x) => {
if (search.length && !x.shelf_id.startsWith(search)) { if (search.length && !x.shelf_id.startsWith(search)) {
return false; 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 { } else {
return true; 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 ( return (
<div> <div>
<p> <p>
@ -311,10 +338,38 @@ export function StorageList(props) {
<Icon name='circle' color='brown' /> Large project storage <Icon name='circle' color='brown' /> Large project storage
</p> </p>
<p>
<StorageSearch setSearch={setSearch} /> <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 ? {!error ?
storageList ? storageList ?
<>
<p>{storageList.filter(filterStorage).length} results:</p>
<Table basic='very'> <Table basic='very'>
{!isMobile && <Table.Header> {!isMobile && <Table.Header>
<Table.Row> <Table.Row>
@ -336,6 +391,7 @@ export function StorageList(props) {
)} )}
</Table.Body> </Table.Body>
</Table> </Table>
</>
: :
<p>Loading...</p> <p>Loading...</p>
: :