sdnr/wt-odlux/odlux/framework/src/components/material-table/tableFilter.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
  19 import * as React from 'react';
  20 import { ColumnModel, ColumnType } from './columnModel';
  21 import { Theme } from '@mui/material/styles';
  22
  23
  24 import { WithStyles } from '@mui/styles';
  25 import withStyles from '@mui/styles/withStyles';
  26 import createStyles from '@mui/styles/createStyles';
  27
  28
  29 import TableCell from '@mui/material/TableCell';
  30 import TableRow from '@mui/material/TableRow';
  31 import Input from '@mui/material/Input';
  32 import { Select, FormControl, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
  33 import { toAriaLabel } from '../../utilities/yangHelper';
  34
  35
  36 const styles = (theme: Theme) => createStyles({
  37   container: {
  38     display: 'flex',
  39     flexWrap: 'wrap',
  40   },
  41   input: {
  42     margin: theme.spacing(1),
  43   },
  44   numberInput: {
  45     float: "right"
  46   }
  47 });
  48
  49 interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
  50   onFilterChanged: (property: string, filterTerm: string) => void;
  51   filter: { [property: string]: string };
  52   columns: ColumnModel<{}>[];
  53   hiddenColumns: string[];
  54   enableSelection?: boolean;
  55 }
  56
  57 class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
  58   createSelectFilterHandler = (property: string) => (event: SelectChangeEvent<HTMLSelectElement | string>) => {
  59     this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string);
  60   };
  61   createInputFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
  62     this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value);
  63   };
  64
  65
  66   render() {
  67     const { columns, filter, classes } = this.props;
  68     return (
  69       <TableRow>
  70         {this.props.enableSelection
  71           ? <TableCell padding="checkbox" style={{ width: "50px" }}>
  72           </TableCell>
  73           : null
  74         }
  75         {columns.map((col, ind) => {
  76           const style = col.width ? { width: col.width } : {};
  77           const tableCell = (
  78             <TableCell
  79               className={col.type === ColumnType.numeric ? classes.numberInput : ''}
  80               key={col.property}
  81               padding={col.disablePadding ? 'none' : 'normal'}
  82               style={style}
  83             >
  84               {col.disableFilter || (col.type === ColumnType.custom)
  85                 ? null
  86                 : (col.type === ColumnType.boolean)
  87                   ? <Select variant="standard" className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`}
  88                     value={filter[col.property] !== undefined ? filter[col.property] : ''}
  89                     onChange={this.createSelectFilterHandler(col.property)}
  90                     inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
  91                     <MenuItem value={undefined} aria-label="none-value" >
  92                       <em>None</em>
  93                     </MenuItem>
  94                     <MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
  95                     <MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
  96                   </Select>
  97                   : <Input className={classes.input}
  98                     inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter` }}
  99                     value={filter[col.property] || ''}
 100                     onChange={this.createInputFilterHandler(col.property)} />}
 101             </TableCell>
 102           );
 103
 104           const showColumn = !this.props.hiddenColumns.includes(col.property);
 105
 106           return showColumn && tableCell;
 107         }, this)}
 108       </TableRow>
 109     );
 110   }
 111 }
 112
 113 export const EnhancedTableFilter = withStyles(styles)(EnhancedTableFilterComponent);