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