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