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 import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
  11
  12 type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         padding: '0px'
  17     },
  18     listItem: {
  19         paddingLeft: theme.spacing.unit,
  20         paddingRight: theme.spacing.unit * 2
  21     },
  22     listItemText: {
  23         fontSize: '0.8125rem',
  24         color: theme.palette.grey["900"]
  25     },
  26     button: {
  27         padding: '6px',
  28         marginRight: theme.spacing.unit
  29     }
  30 });
  31
  32 export interface SearchBarSavedQueriesDataProps {
  33     savedQueries: SearchBarAdvanceFormData[];
  34     selectedItem: SearchBarSelectedItem;
  35 }
  36
  37 export interface SearchBarSavedQueriesActionProps {
  38     onSearch: (searchValue: string) => void;
  39     deleteSavedQuery: (id: number) => void;
  40     editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
  41 }
  42
  43 type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps
  44     & SearchBarSavedQueriesActionProps
  45     & WithStyles<CssRules>;
  46
  47 export const SearchBarSavedQueries = withStyles(styles)(
  48     ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery, selectedItem }: SearchBarSavedQueriesProps) =>
  49         <List component="nav" className={classes.root}>
  50             {savedQueries.map((query, index) =>
  51                 <ListItem button key={index} className={classes.listItem} selected={`SQ-${index}-${query.searchQuery}` === selectedItem.id}>
  52                     <ListItemText disableTypography
  53                         secondary={query.searchQuery}
  54                         onClick={() => onSearch(query.searchQuery)}
  55                         className={classes.listItemText} />
  56                     <ListItemSecondaryAction>
  57                         <Tooltip title="Edit">
  58                             <IconButton aria-label="Edit" onClick={() => editSavedQuery(query, index)} className={classes.button}>
  59                                 <EditSavedQueryIcon />
  60                             </IconButton>
  61                         </Tooltip>
  62                         <Tooltip title="Remove">
  63                             <IconButton aria-label="Remove" onClick={() => deleteSavedQuery(index)} className={classes.button}>
  64                                 <RemoveIcon />
  65                             </IconButton>
  66                         </Tooltip>
  67                     </ListItemSecondaryAction>
  68                 </ListItem>
  69             )}
  70     </List>);