diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx index 0666e7e587..990ee92e6e 100644 --- a/tgui/packages/tgui/interfaces/Vending.tsx +++ b/tgui/packages/tgui/interfaces/Vending.tsx @@ -1,6 +1,9 @@ +import { filter } from 'common/collections'; +import { flow } from 'common/fp'; import { classes } from 'common/react'; -import { useBackend } from '../backend'; -import { Box, Button, Section, Table } from '../components'; +import { createSearch } from 'common/string'; +import { useBackend, useLocalState } from '../backend'; +import { Box, Button, Icon, Input, Section, Table } from '../components'; import { Window } from '../layouts'; type VendingData = { @@ -23,6 +26,7 @@ type ProductRecord = { price: number; max_amount: number; ref: string; + amount: number; } type CoinRecord = { @@ -83,7 +87,7 @@ const VendingRow = (props, context) => { ); return ( - + {product.img && ( { hidden_records = [], stock, } = data; + const [ + searchText, + setSearchText, + ] = useLocalState(context, 'searchText', ''); let inventory; let custom = false; if (data.vending_machine_input) { @@ -194,6 +202,8 @@ export const Vending = (props, context) => { } // Just in case we still have undefined values in the list inventory = inventory.filter(item => !!item); + // Filter by search text + inventory = prepareSearch(inventory, searchText); return ( { )}
+ + + + + + setSearchText(value)} /> + +
{inventory.map(product => ( { ); }; + +/** + * Search box + */ +export const prepareSearch = (products, searchText = '') => { + const testSearch = createSearch(searchText, + product => product.name); + return flow([ + // Optional search term + searchText && filter(testSearch), + ])(products); +};