sdnr/wt-odlux/odlux/framework/src/components/material-table/tableToolbar.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';
  19 import { Theme, lighten } from '@mui/material/styles';
  20
  21 import { WithStyles } from '@mui/styles';
  22 import withStyles from '@mui/styles/withStyles';
  23 import createStyles from '@mui/styles/createStyles';
  24
  25 import IconButton from '@mui/material/IconButton';
  26 import Tooltip from '@mui/material/Tooltip';
  27 import Toolbar from '@mui/material/Toolbar';
  28 import Typography from '@mui/material/Typography';
  29 import DeleteIcon from '@mui/icons-material/Delete';
  30 import MoreIcon from '@mui/icons-material/MoreVert';
  31 import FilterListIcon from '@mui/icons-material/FilterList';
  32 import MenuItem from '@mui/material/MenuItem';
  33 import Menu from '@mui/material/Menu';
  34 import { SvgIconProps } from '@mui/material/SvgIcon';
  35 import { Button } from '@mui/material';
  36 import { ColumnModel } from './columnModel';
  37 import  ShowColumnsDialog  from './showColumnDialog'
  38
  39 const styles = (theme: Theme) => createStyles({
  40   root: {
  41     paddingRight: theme.spacing(1),
  42   },
  43   highlight:
  44     theme.palette.mode === 'light'
  45       ? {
  46         color: theme.palette.secondary.main,
  47         backgroundColor: lighten(theme.palette.secondary.light, 0.85),
  48       }
  49       : {
  50         color: theme.palette.text.primary,
  51         backgroundColor: theme.palette.secondary.dark,
  52       },
  53   spacer: {
  54     flex: '1 1 100%',
  55   },
  56   actions: {
  57     color: theme.palette.text.secondary,
  58     display: "flex",
  59     flex: "auto",
  60     flexDirection: "row"
  61   },
  62   title: {
  63     flex: '0 0 auto',
  64   },
  65   menuButton: {
  66     marginLeft: -12,
  67     marginRight: 20,
  68   },
  69 });
  70
  71 interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
  72   numSelected: number | null;
  73   title?: string;
  74   tableId: string | null;
  75   customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
  76   columns: ColumnModel<{}>[];
  77   onHideColumns: (columnNames: string[]) => void
  78   onShowColumns: (columnNames: string[]) => void
  79   onToggleFilter: () => void;
  80   onExportToCsv: () => void;
  81 }
  82
  83 class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null, anchorElDialog: HTMLElement | null }> {
  84
  85
  86   constructor(props: ITableToolbarComponentProps) {
  87     super(props);
  88
  89     this.state = {
  90       anchorEl: null,
  91       anchorElDialog: null
  92     };
  93   }
  94
  95   private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
  96     this.setState({ anchorEl: event.currentTarget });
  97   };
  98
  99   private handleClose = () => {
 100     this.setState({ anchorEl: null });
 101   };
 102
 103   private showColumnsDialog = (event: React.MouseEvent<HTMLElement>) =>{
 104     this.setState({ anchorElDialog: this.state.anchorEl });
 105   }
 106
 107   private onCloseDialog = () =>{
 108     this.setState({ anchorElDialog: null });
 109
 110   }
 111
 112   render() {
 113     const { numSelected, classes } = this.props;
 114     const open = !!this.state.anchorEl;
 115     const buttonPrefix = this.props.tableId !== null ? this.props.tableId : 'table';
 116     return (
 117       <>
 118       <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
 119         <div className={classes.title}>
 120           {numSelected && numSelected > 0 ? (
 121             <Typography color="inherit" variant="subtitle1">
 122               {numSelected} selected
 123           </Typography>
 124           ) : (
 125               <Typography variant="h5" id="tableTitle">
 126                 {this.props.title || null}
 127               </Typography>
 128             )}
 129         </div>
 130         <div className={classes.spacer} />
 131         <div className={classes.actions}>
 132           {this.props.customActionButtons
 133             ? this.props.customActionButtons.map((action, ind) => (
 134               <Tooltip disableInteractive key={`custom-action-${ind}`} title={action.tooltip || ''}>
 135                 <IconButton
 136                   disabled={action.disabled}
 137                   aria-label={`${buttonPrefix}-${action.ariaLabel}-button`}
 138                   onClick={() => action.onClick()}
 139                   size="large">
 140                   <action.icon />
 141                 </IconButton>
 142               </Tooltip>
 143             ))
 144             : null}
 145           {numSelected && numSelected > 0 ? (
 146             <Tooltip disableInteractive title="Delete">
 147               <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large">
 148                 <DeleteIcon />
 149               </IconButton>
 150             </Tooltip>
 151           ) : (
 152               <Tooltip disableInteractive title="Filter list">
 153                 <IconButton
 154                   aria-label={`${buttonPrefix}-filter-list-button`}
 155                   onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}
 156                   size="large">
 157                   <FilterListIcon />
 158                 </IconButton>
 159               </Tooltip>
 160             )}
 161           <Tooltip disableInteractive title="Actions">
 162             <IconButton
 163               color="inherit"
 164               aria-label={`${buttonPrefix}-additional-actions-button`}
 165               aria-owns={open ? 'menu-appbar' : undefined}
 166               aria-haspopup="true"
 167               onClick={this.handleMenu}
 168               size="large">
 169               <MoreIcon />
 170             </IconButton>
 171           </Tooltip>
 172           <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
 173             transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
 174             <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem>
 175             <MenuItem aria-label="hide-show-table-columns" onClick={(e) =>{ this.showColumnsDialog(e); this.handleClose()}}>Hide/show columns</MenuItem>
 176           </Menu>
 177         </div>
 178       </Toolbar>
 179       <ShowColumnsDialog
 180         anchorEl={this.state.anchorElDialog}
 181         onClose={this.onCloseDialog}
 182         settingsName={this.props.tableId}
 183         columns={this.props.columns}
 184         hideColumns={this.props.onHideColumns}
 185         showColumns={this.props.onShowColumns} />
 186       </>
 187     );
 188   }
 189 }
 190
 191 export const TableToolbar = withStyles(styles)(TableToolbarComponent);