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

98
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,31 +338,60 @@ export function StorageList(props) {
<Icon name='circle' color='brown' /> Large project storage <Icon name='circle' color='brown' /> Large project storage
</p> </p>
<StorageSearch setSearch={setSearch} /> <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 ? {!error ?
storageList ? storageList ?
<Table basic='very'> <>
{!isMobile && <Table.Header> <p>{storageList.filter(filterStorage).length} results:</p>
<Table.Row>
<Table.HeaderCell>Shelf ID</Table.HeaderCell>
<Table.HeaderCell>Owner</Table.HeaderCell>
<Table.HeaderCell>Memo</Table.HeaderCell>
</Table.Row>
</Table.Header>}
<Table.Body> <Table basic='very'>
{storageList.filter(filterStorage).map(x => {!isMobile && <Table.Header>
<Table.Row key={x.id}> <Table.Row>
<Table.Cell><StorageButton storage={x} /></Table.Cell> <Table.HeaderCell>Shelf ID</Table.HeaderCell>
<Table.Cell> <Table.HeaderCell>Owner</Table.HeaderCell>
{isMobile && 'Owner: '}<Link to={'/members/'+x.member_id}>{x.member_name}</Link> <Table.HeaderCell>Memo</Table.HeaderCell>
</Table.Cell>
<Table.Cell>{isMobile && 'Memo: '}{x.memo}</Table.Cell>
</Table.Row> </Table.Row>
)} </Table.Header>}
</Table.Body>
</Table> <Table.Body>
{storageList.filter(filterStorage).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> <p>Loading...</p>
: :