diff options
Diffstat (limited to 'webui/src/list/FilterToolbar.tsx')
-rw-r--r-- | webui/src/list/FilterToolbar.tsx | 128 |
1 files changed, 0 insertions, 128 deletions
diff --git a/webui/src/list/FilterToolbar.tsx b/webui/src/list/FilterToolbar.tsx deleted file mode 100644 index b95b10bc..00000000 --- a/webui/src/list/FilterToolbar.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { pipe } from '@arrows/composition'; -import Toolbar from '@material-ui/core/Toolbar'; -import { makeStyles } from '@material-ui/core/styles'; -import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; -import ErrorOutline from '@material-ui/icons/ErrorOutline'; -import { LocationDescriptor } from 'history'; -import React from 'react'; - -import { - FilterDropdown, - FilterProps, - Filter, - parse, - stringify, - Query, -} from './Filter'; -import { useBugCountQuery } from './FilterToolbar.generated'; - -const useStyles = makeStyles(theme => ({ - toolbar: { - backgroundColor: theme.palette.grey['100'], - borderColor: theme.palette.grey['300'], - borderWidth: '1px 0', - borderStyle: 'solid', - margin: theme.spacing(0, -1), - }, - spacer: { - flex: 1, - }, -})); - -// This prepends the filter text with a count -type CountingFilterProps = { - query: string; - children: React.ReactNode; -} & FilterProps; -function CountingFilter({ query, children, ...props }: CountingFilterProps) { - const { data, loading, error } = useBugCountQuery({ - variables: { query }, - }); - - var prefix; - if (loading) prefix = '...'; - else if (error || !data?.repository) prefix = '???'; - // TODO: better prefixes & error handling - else prefix = data.repository.bugs.totalCount; - - return ( - <Filter {...props}> - {prefix} {children} - </Filter> - ); -} - -type Props = { - query: string; - queryLocation: (query: string) => LocationDescriptor; -}; -function FilterToolbar({ query, queryLocation }: Props) { - const classes = useStyles(); - const params: Query = parse(query); - - const hasKey = (key: string): boolean => - params[key] && params[key].length > 0; - const hasValue = (key: string, value: string): boolean => - hasKey(key) && params[key].includes(value); - const loc = pipe(stringify, queryLocation); - const replaceParam = (key: string, value: string) => ( - params: Query - ): Query => ({ - ...params, - [key]: [value], - }); - const clearParam = (key: string) => (params: Query): Query => ({ - ...params, - [key]: [], - }); - - // TODO: author/label filters - return ( - <Toolbar className={classes.toolbar}> - <CountingFilter - active={hasValue('status', 'open')} - query={pipe( - replaceParam('status', 'open'), - clearParam('sort'), - stringify - )(params)} - to={pipe(replaceParam('status', 'open'), loc)(params)} - icon={ErrorOutline} - > - open - </CountingFilter> - <CountingFilter - active={hasValue('status', 'closed')} - query={pipe( - replaceParam('status', 'closed'), - clearParam('sort'), - stringify - )(params)} - to={pipe(replaceParam('status', 'closed'), loc)(params)} - icon={CheckCircleOutline} - > - closed - </CountingFilter> - <div className={classes.spacer} /> - {/* - <Filter active={hasKey('author')}>Author</Filter> - <Filter active={hasKey('label')}>Label</Filter> - */} - <FilterDropdown - dropdown={[ - ['id', 'ID'], - ['creation', 'Newest'], - ['creation-asc', 'Oldest'], - ['edit', 'Recently updated'], - ['edit-asc', 'Least recently updated'], - ]} - itemActive={key => hasValue('sort', key)} - to={key => pipe(replaceParam('sort', key), loc)(params)} - > - Sort - </FilterDropdown> - </Toolbar> - ); -} - -export default FilterToolbar; |