From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- .../src/components/material-table/columnModel.ts | 108 ++++++++++----------- .../src/components/material-table/index.tsx | 51 +++++----- .../src/components/material-table/tableFilter.tsx | 35 +++++-- .../src/components/material-table/tableHead.tsx | 42 +++++--- .../src/components/material-table/tableToolbar.tsx | 62 +++++++----- 5 files changed, 174 insertions(+), 124 deletions(-) (limited to 'sdnr/wt/odlux/framework/src/components/material-table') diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts index 8124e450d..ce5b2cd1e 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts @@ -1,55 +1,55 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ - -import * as React from 'react'; - -export enum ColumnType { - text, - numeric, - boolean, - date, - custom -} - -type CustomControl = { - className?: string; - style?: React.CSSProperties; - rowData: TData; -} - -export type ColumnModel = { - title?: string; - disablePadding?: boolean; - width?: string | number ; - className?: string; - style?: React.CSSProperties; - align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; - disableSorting?: boolean; - disableFilter?: boolean; -} & ({ - property: string; - type: ColumnType.custom; - customControl: React.ComponentType>; -} | { - property: keyof TData; - type: ColumnType.boolean; - labels?: { "true": string, "false": string }; -} | { - property: keyof TData; - type?: ColumnType.numeric | ColumnType.text | ColumnType.date; +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ + +import * as React from 'react'; + +export enum ColumnType { + text, + numeric, + boolean, + date, + custom +} + +type CustomControl = { + className?: string; + style?: React.CSSProperties; + rowData: TData; +} + +export type ColumnModel = { + title?: string; + disablePadding?: boolean; + width?: string | number ; + className?: string; + style?: React.CSSProperties; + align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; + disableSorting?: boolean; + disableFilter?: boolean; +} & ({ + property: string; + type: ColumnType.custom; + customControl: React.ComponentType>; +} | { + property: keyof TData; + type: ColumnType.boolean; + labels?: { "true": string, "false": string }; +} | { + property: keyof TData; + type?: ColumnType.numeric | ColumnType.text | ColumnType.date; }); \ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index cb675218f..aac2a1252 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -16,29 +16,36 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TablePagination from '@material-ui/core/TablePagination'; -import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; -import Checkbox from '@material-ui/core/Checkbox'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TablePagination from '@mui/material/TablePagination'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Checkbox from '@mui/material/Checkbox'; import { TableToolbar } from './tableToolbar'; import { EnhancedTableHead } from './tableHead'; import { EnhancedTableFilter } from './tableFilter'; import { ColumnModel, ColumnType } from './columnModel'; -import { Omit, Menu, makeStyles } from '@material-ui/core'; +import { Menu } from '@mui/material'; +import { DistributiveOmit } from '@mui/types'; + +import makeStyles from '@mui/styles/makeStyles'; -import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon'; +import { SvgIconProps } from '@mui/material/SvgIcon'; -import { DividerTypeMap } from '@material-ui/core/Divider'; -import { MenuItemProps } from '@material-ui/core/MenuItem'; -import { flexbox } from '@material-ui/system'; +import { DividerTypeMap } from '@mui/material/Divider'; +import { MenuItemProps } from '@mui/material/MenuItem'; +import { flexbox } from '@mui/system'; import { RowDisabled } from './utilities'; import { toAriaLabel } from '../../utilities/yangHelper'; export { ColumnModel, ColumnType } from './columnModel'; @@ -51,7 +58,7 @@ export type DataCallback = (page?: number, rowsPerPage?: numbe function regExpEscape(s: string) { return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); -}; +} function wildcardCheck(input: string, pattern: string) { if (!pattern) return true; @@ -61,7 +68,7 @@ function wildcardCheck(input: string, pattern: string) { (!pattern.endsWith('*') ? '$' : '') ); return input.match(regex) !== null && input.match(regex)!.length >= 1; -}; +} function desc(a: dataType, b: dataType, orderBy: string) { if ((b[orderBy] || "") < (a[orderBy] || "")) { @@ -240,7 +247,7 @@ class MaterialTableComponent extends React.Component - +
extends React.Component ); @@ -371,7 +378,7 @@ class MaterialTableComponent extends React.Component extends React.Component = new () => React.Component, 'classes'>>; +export type MaterialTableCtorType = new () => React.Component, 'classes'>>; export const MaterialTable = withStyles(styles)(MaterialTableComponent); export default MaterialTable; \ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx index e4cc5ab7c..a46dd18d8 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx @@ -18,13 +18,18 @@ import * as React from 'react'; import { ColumnModel, ColumnType } from './columnModel'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import TableCell from '@material-ui/core/TableCell'; -import TableRow from '@material-ui/core/TableRow'; -import Input from '@material-ui/core/Input'; -import { Select, FormControl, InputLabel, MenuItem } from '@material-ui/core'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + + +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import Input from '@mui/material/Input'; +import { Select, FormControl, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material'; import { toAriaLabel } from '../../utilities/yangHelper'; @@ -49,9 +54,13 @@ interface IEnhancedTableFilterComponentProps extends WithStyles { } class EnhancedTableFilterComponent extends React.Component { - createFilterHandler = (property: string) => (event: React.ChangeEvent) => { - this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value); + createSelectFilterHandler = (property: string) => (event: SelectChangeEvent) => { + this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string); }; + createInputFilterHandler = (property: string) => (event: React.ChangeEvent) => { + this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value); + }; + render() { const { columns, filter, classes } = this.props; @@ -68,20 +77,26 @@ class EnhancedTableFilterComponent extends React.Component {col.disableFilter || (col.type === ColumnType.custom) ? null : (col.type === ColumnType.boolean) - ? None {col.labels ? col.labels["true"] : "true"} {col.labels ? col.labels["false"] : "false"} - : } + : } ); }, this)} diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx index 428f4cf3f..c500f44ce 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx @@ -18,16 +18,31 @@ import * as React from 'react'; import { ColumnModel, ColumnType } from './columnModel'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import Checkbox from '@material-ui/core/Checkbox'; -import Tooltip from '@material-ui/core/Tooltip'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; -interface IEnhancedTableHeadComponentProps { +import TableSortLabel from '@mui/material/TableSortLabel'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Checkbox from '@mui/material/Checkbox'; +import Tooltip from '@mui/material/Tooltip'; + +const styles = (theme: Theme) => createStyles({ + header: { + backgroundColor: "#fafafa", + position: "sticky", + top: 0 + } +}); + + +type styles_header = WithStyles; + +interface IEnhancedTableHeadComponentProps extends styles_header { numSelected: number | null; onRequestSort: (event: React.SyntheticEvent, property: string) => void; onSelectAllClick: () => void; @@ -45,12 +60,13 @@ class EnhancedTableHeadComponent extends React.Component { this.props.enableSelection - ? + ? 0 && numSelected < rowCount || undefined } checked={ numSelected === rowCount } @@ -62,10 +78,10 @@ class EnhancedTableHeadComponent extends React.Component { const style = col.width ? { width: col.width } : {}; return ( - @@ -76,7 +92,7 @@ class EnhancedTableHeadComponent extends React.Component { col.title || col.property } - : createStyles({ root: { paddingRight: theme.spacing(1), }, highlight: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? { color: theme.palette.secondary.main, backgroundColor: lighten(theme.palette.secondary.light, 0.85), @@ -109,32 +112,41 @@ class TableToolbarComponent extends React.Component {this.props.customActionButtons ? this.props.customActionButtons.map((action, ind) => ( - - action.onClick()}> + + action.onClick()} + size="large"> )) : null} {numSelected && numSelected > 0 ? ( - - + + ) : ( - - { this.props.onToggleFilter && this.props.onToggleFilter() }}> + + { this.props.onToggleFilter && this.props.onToggleFilter() }} + size="large"> )} - - + + onClick={this.handleMenu} + size="large"> @@ -146,6 +158,6 @@ class TableToolbarComponent extends React.Component ); } -}; +} export const TableToolbar = withStyles(styles)(TableToolbarComponent); \ No newline at end of file -- cgit 1.2.3-korg