src/views-components/search-bar/search-bar-save-queries.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
   9 import { SearchBarAdvanceFormData } from '~/models/search-bar';
  10
  11 type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     root: {
  15         padding: '0px'
  16     },
  17     listItem: {
  18         paddingLeft: theme.spacing.unit,
  19         paddingRight: theme.spacing.unit * 2
  20     },
  21     listItemText: {
  22         fontSize: '0.8125rem',
  23         color: theme.palette.grey["900"]
  24     },
  25     button: {
  26         padding: '6px',
  27         marginRight: theme.spacing.unit
  28     }
  29 });
  30
  31 export interface SearchBarSavedQueriesDataProps {
  32     savedQueries: SearchBarAdvanceFormData[];
  33 }
  34
  35 export interface SearchBarSavedQueriesActionProps {
  36     onSearch: (searchValue: string) => void;
  37     deleteSavedQuery: (id: number) => void;
  38     editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
  39 }
  40
  41 type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
  42     & SearchBarSavedQueriesActionProps
  43     & WithStyles<CssRules>;
  44
  45 export const SearchBarSavedQueries = withStyles(styles)(
  46     ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery }: SearchBarSavedQueriesProps) =>
  47         <List component="nav" className={classes.root}>
  48             {savedQueries.map((query, index) =>
  49                 <ListItem button key={index} className={classes.listItem}>
  50                     <ListItemText disableTypography
  51                         secondary={query.searchQuery}
  52                         onClick={() => onSearch(query.searchQuery)}
  53                         className={classes.listItemText} />
  54                     <ListItemSecondaryAction>
  55                         <Tooltip title="Edit">
  56                             <IconButton aria-label="Edit" onClick={() => editSavedQuery(query, index)} className={classes.button}>
  57                                 <EditSavedQueryIcon />
  58                             </IconButton>
  59                         </Tooltip>
  60                         <Tooltip title="Remove">
  61                             <IconButton aria-label="Remove" onClick={() => deleteSavedQuery(index)} className={classes.button}>
  62                                 <RemoveIcon />
  63                             </IconButton>
  64                         </Tooltip>
  65                     </ListItemSecondaryAction>
  66                 </ListItem>
  67             )}
  68     </List>);