aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components/material-table
diff options
context:
space:
mode:
authorRavi Pendurty <ravi.pendurty@highstreet-technologies.com>2023-12-19 17:13:25 +0530
committerRavi Pendurty <ravi.pendurty@highstreet-technologies.com>2023-12-19 17:13:25 +0530
commitc5b8756512cb6dfbb0093514af7924cb3e78699b (patch)
tree7202621ea816d666bbce482b420ef574280a1c0a /sdnr/wt/odlux/framework/src/components/material-table
parentdfd91573b7567e1dab482f17111ab8f809553d99 (diff)
Delete wt/odlux directory
New directory for odlux is sdnr/wt-odlux Issue-ID: CCSDK-3971 Change-Id: Ia0f8ba38d913a3d3bcde999b871794c65d5e575e Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts56
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx707
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx188
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx113
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx127
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx191
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/utilities.ts357
7 files changed, 0 insertions, 1739 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
deleted file mode 100644
index 3ed313497..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * ============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<TData> = {
- className?: string;
- style?: React.CSSProperties;
- rowData: TData;
-}
-
-export type ColumnModel<TData> = {
- title?: string;
- disablePadding?: boolean;
- width?: string | number ;
- className?: string;
- hide?: boolean;
- style?: React.CSSProperties;
- align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
- disableSorting?: boolean;
- disableFilter?: boolean;
-} & ({
- property: string;
- type: ColumnType.custom;
- customControl: React.ComponentType<CustomControl<TData>>;
-} | {
- 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
deleted file mode 100644
index c1a5005d4..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ /dev/null
@@ -1,707 +0,0 @@
-/**
- * ============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';
-import { Theme } from '@mui/material/styles';
-
-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 { Menu, Typography } from '@mui/material';
-import { DistributiveOmit } from '@mui/types';
-
-import makeStyles from '@mui/styles/makeStyles';
-
-import { SvgIconProps } from '@mui/material/SvgIcon';
-
-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';
-
-type propType = string | number | null | undefined | (string | number)[];
-type dataType = { [prop: string]: propType };
-type resultType<TData = dataType> = { page: number, total: number, rows: TData[] };
-
-export type DataCallback<TData = dataType> = (page?: number, rowsPerPage?: number, orderBy?: string | null, order?: 'asc' | 'desc' | null, filter?: { [property: string]: string }) => resultType<TData> | Promise<resultType<TData>>;
-
-function regExpEscape(s: string) {
- return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
-}
-
-function wildcardCheck(input: string, pattern: string) {
- if (!pattern) return true;
- const regex = new RegExp(
- (!pattern.startsWith('*') ? '^' : '') +
- pattern.split(/\*+/).map(p => p.split(/\?+/).map(regExpEscape).join('.')).join('.*') +
- (!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] || "")) {
- return -1;
- }
- if ((b[orderBy] || "") > (a[orderBy] || "")) {
- return 1;
- }
- return 0;
-}
-
-function stableSort(array: dataType[], cmp: (a: dataType, b: dataType) => number) {
- const stabilizedThis = array.map((el, index) => [el, index]) as [dataType, number][];
- stabilizedThis.sort((a, b) => {
- const order = cmp(a[0], b[0]);
- if (order !== 0) return order;
- return a[1] - b[1];
- });
- return stabilizedThis.map(el => el[0]);
-}
-
-function getSorting(order: 'asc' | 'desc' | null, orderBy: string) {
- return order === 'desc' ? (a: dataType, b: dataType) => desc(a, b, orderBy) : (a: dataType, b: dataType) => -desc(a, b, orderBy);
-}
-
-const styles = (theme: Theme) => createStyles({
- root: {
- width: '100%',
- overflow: "hidden",
- marginTop: theme.spacing(3),
- position: "relative",
- boxSizing: "border-box",
- display: "flex",
- flexDirection: "column",
- },
- container: {
- flex: "1 1 100%"
- },
- pagination: {
- overflow: "hidden",
- minHeight: "52px"
- }
-});
-
-const useTableRowExtStyles = makeStyles((theme: Theme) => createStyles({
- disabled: {
- color: "rgba(180, 180, 180, 0.7)",
- },
-}));
-
-type GetStatelessComponentProps<T> = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any;
-type TableRowExtProps = GetStatelessComponentProps<typeof TableRow> & { disabled: boolean };
-const TableRowExt : React.FC<TableRowExtProps> = (props) => {
- const [disabled, setDisabled] = React.useState(true);
- const classes = useTableRowExtStyles();
-
- const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {
- if (ev.button ===1){
- setDisabled(!disabled);
- ev.preventDefault();
- ev.stopPropagation();
- } else if (props.disabled && disabled) {
- ev.preventDefault();
- ev.stopPropagation();
- }
- };
-
- return (
- <TableRow {...{...props, color: props.disabled && disabled ? '#a0a0a0' : undefined , className: props.disabled && disabled ? classes.disabled : '', onMouseDown, onContextMenu: props.disabled && disabled ? onMouseDown : props.onContextMenu } } />
- );
-};
-
-export type MaterialTableComponentState<TData = {}> = {
- order: 'asc' | 'desc';
- orderBy: string | null;
- selected: any[] | null;
- rows: TData[];
- total: number;
- page: number;
- rowsPerPage: number;
- loading: boolean;
- showFilter: boolean;
- hiddenColumns: string[];
- filter: { [property: string]: string };
-};
-
-export type TableApi = { forceRefresh?: () => Promise<void> };
-
-type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
- className?: string;
- columns: ColumnModel<TData>[];
- idProperty: keyof TData | ((data: TData) => React.Key);
-
- //Note: used to save settings as well. Must be unique across apps. Null tableIds will not get saved to the settings
- tableId: string | null;
- isPopup?: boolean;
- title?: string;
- stickyHeader?: boolean;
- allowHtmlHeader?: boolean;
- defaultSortOrder?: 'asc' | 'desc';
- defaultSortColumn?: keyof TData;
- enableSelection?: boolean;
- disableSorting?: boolean;
- disableFilter?: boolean;
- customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
- onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
- createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr">>>[];
-};
-
-type MaterialTableComponentPropsWithRows<TData = {}> = MaterialTableComponentBaseProps<TData> & { rows: TData[]; asynchronus?: boolean; };
-type MaterialTableComponentPropsWithRequestData<TData = {}> = MaterialTableComponentBaseProps<TData> & { onRequestData: DataCallback; tableApi?: TableApi; };
-type MaterialTableComponentPropsWithExternalState<TData = {}> = MaterialTableComponentBaseProps<TData> & MaterialTableComponentState & {
- onToggleFilter: () => void;
- onFilterChanged: (property: string, filterTerm: string) => void;
- onHandleChangePage: (page: number) => void;
- onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void;
- onHandleRequestSort: (property: string) => void;
- onHideColumns : (columnNames: string[]) => void
- onShowColumns: (columnNames: string[]) => void
-};
-
-type MaterialTableComponentProps<TData = {}> =
- MaterialTableComponentPropsWithRows<TData> |
- MaterialTableComponentPropsWithRequestData<TData> |
- MaterialTableComponentPropsWithExternalState<TData>;
-
-function isMaterialTableComponentPropsWithRows(props: MaterialTableComponentProps): props is MaterialTableComponentPropsWithRows {
- return (props as MaterialTableComponentPropsWithRows).rows !== undefined && (props as MaterialTableComponentPropsWithRows).rows instanceof Array;
-}
-
-function isMaterialTableComponentPropsWithRequestData(props: MaterialTableComponentProps): props is MaterialTableComponentPropsWithRequestData {
- return (props as MaterialTableComponentPropsWithRequestData).onRequestData !== undefined && (props as MaterialTableComponentPropsWithRequestData).onRequestData instanceof Function;
-}
-
-function isMaterialTableComponentPropsWithRowsAndRequestData(props: MaterialTableComponentProps): props is MaterialTableComponentPropsWithExternalState {
- const propsWithExternalState = (props as MaterialTableComponentPropsWithExternalState)
- return propsWithExternalState.onFilterChanged instanceof Function ||
- propsWithExternalState.onHandleChangePage instanceof Function ||
- propsWithExternalState.onHandleChangeRowsPerPage instanceof Function ||
- propsWithExternalState.onToggleFilter instanceof Function ||
- propsWithExternalState.onHideColumns instanceof Function ||
- propsWithExternalState.onHandleRequestSort instanceof Function
-}
-
-// get settings in here!
-
-
-class MaterialTableComponent<TData extends {} = {}> extends React.Component<MaterialTableComponentProps, MaterialTableComponentState & { contextMenuInfo: { index: number; mouseX?: number; mouseY?: number }; }> {
-
- constructor(props: MaterialTableComponentProps) {
- super(props);
-
-
- const page = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.page : 0;
- const rowsPerPage = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.rowsPerPage || 10 : 10;
-
- this.state = {
- contextMenuInfo: { index: -1 },
- filter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.filter || {} : {},
- showFilter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.showFilter : false,
- loading: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.loading : false,
- order: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.order : this.props.defaultSortOrder || 'asc',
- orderBy: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.orderBy : this.props.defaultSortColumn || null,
- selected: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.selected : null,
- rows: isMaterialTableComponentPropsWithRows(this.props) && this.props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) || [],
- total: isMaterialTableComponentPropsWithRows(this.props) && this.props.rows.length || 0,
- hiddenColumns: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) && this.props.hiddenColumns || [],
- page,
- rowsPerPage,
- };
-
- if (isMaterialTableComponentPropsWithRequestData(this.props)) {
- this.update();
-
- if (this.props.tableApi) {
- this.props.tableApi.forceRefresh = () => this.update();
- }
- }
- }
- render(): JSX.Element {
- const { classes, columns, allowHtmlHeader } = this.props;
- const { rows, total: rowCount, order, orderBy, selected, rowsPerPage, page, showFilter, filter } = this.state;
- const emptyRows = rowsPerPage - Math.min(rowsPerPage, rowCount - page * rowsPerPage);
- const getId = typeof this.props.idProperty !== "function" ? (data: TData) => ((data as { [key: string]: any })[this.props.idProperty as any as string] as string | number) : this.props.idProperty;
- const toggleFilter = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.onToggleFilter : () => { !this.props.disableFilter && this.setState({ showFilter: !showFilter }, this.update) }
-
- const hideColumns = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.onHideColumns : (data: string[]) => { const newArray = [...new Set([...this.state.hiddenColumns, ...data])]; this.setState({hiddenColumns:newArray}); }
- const showColumns = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.onShowColumns : (data: string[]) => { const newArray = this.state.hiddenColumns.filter(el=> !data.includes(el)); this.setState({hiddenColumns:newArray}); }
-
- const allColumnsHidden = this.props.columns.length === this.state.hiddenColumns.length;
- return (
- <Paper className={this.props.className ? `${classes.root} ${this.props.className}` : classes.root}>
- <TableContainer className={classes.container}>
- <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
- onToggleFilter={toggleFilter}
- columns={columns}
- onHideColumns={hideColumns}
- onShowColumns={showColumns} />
- <Table padding="normal" aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
- <EnhancedTableHead
- allowHtmlHeader={allowHtmlHeader || false}
- columns={columns}
- numSelected={selected && selected.length}
- order={order}
- orderBy={orderBy}
- onSelectAllClick={this.handleSelectAllClick}
- onRequestSort={this.onHandleRequestSort}
- rowCount={rows.length}
- enableSelection={this.props.enableSelection}
- hiddenColumns={this.state.hiddenColumns}
- />
- <TableBody>
- {showFilter && <EnhancedTableFilter columns={columns} hiddenColumns={this.state.hiddenColumns} filter={filter} onFilterChanged={this.onFilterChanged} enableSelection={this.props.enableSelection} /> || null}
-
- {allColumnsHidden ? <Typography variant="body1" textAlign="center">All columns of this table are hidden.</Typography> :
-
- rows // may need ordering here
- .map((entry: TData & { [RowDisabled]?: boolean, [kex: string]: any }, index) => {
- const entryId = getId(entry);
- const contextMenu = (this.props.createContextMenu && this.state.contextMenuInfo.index === index && this.props.createContextMenu(entry)) || null;
- const isSelected = this.isSelected(entryId) || this.state.contextMenuInfo.index === index;
- return (
- <TableRowExt
- hover
- onClick={event => {
- if (this.props.createContextMenu) {
- this.setState({
- contextMenuInfo: {
- index: -1
- }
- });
- }
- this.handleClick(event, entry, entryId);
- }}
- onContextMenu={event => {
- if (this.props.createContextMenu) {
- event.preventDefault();
- event.stopPropagation();
- this.setState({ contextMenuInfo: { index, mouseX: event.clientX - 2, mouseY: event.clientY - 4 } });
- }
- }}
- role="checkbox"
- aria-checked={isSelected}
- aria-label="table-row"
- tabIndex={-1}
- key={entryId}
- selected={isSelected}
- disabled={entry[RowDisabled] || false}
- >
- {this.props.enableSelection
- ? <TableCell padding="checkbox" style={{ width: "50px", color: entry[RowDisabled] || false ? "inherit" : undefined } }>
- <Checkbox color='secondary' checked={isSelected} />
- </TableCell>
- : null
- }
- {
-
- this.props.columns.map(
- col => {
- const style = col.width ? { width: col.width } : {};
- const tableCell = (
-
- <TableCell style={ entry[RowDisabled] || false ? { ...style, color: "inherit" } : style } aria-label={col.title? toAriaLabel(col.title) : toAriaLabel(col.property)} key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} >
- {col.type === ColumnType.custom && col.customControl
- ? <col.customControl className={col.className} style={col.style} rowData={entry} />
- : col.type === ColumnType.boolean
- ? <span className={col.className} style={col.style}>{col.labels ? col.labels[entry[col.property] ? "true" : "false"] : String(entry[col.property])}</span>
- : <span className={col.className} style={col.style}>{String(entry[col.property])}</span>
- }
- </TableCell>
- );
-
- //show column if...
- const showColumn = !this.state.hiddenColumns.includes(col.property);
- return showColumn && tableCell
- }
- )
- }
- {<Menu open={!!contextMenu} onClose={() => this.setState({ contextMenuInfo: { index: -1 } })} anchorReference="anchorPosition" keepMounted
- anchorPosition={this.state.contextMenuInfo.mouseY != null && this.state.contextMenuInfo.mouseX != null ? { top: this.state.contextMenuInfo.mouseY, left: this.state.contextMenuInfo.mouseX } : undefined}>
- {contextMenu}
- </Menu> || null}
- </TableRowExt>
- );
- })}
- {emptyRows > 0 && (
- <TableRow style={{ height: 49 * emptyRows }}>
- <TableCell colSpan={this.props.columns.length} />
- </TableRow>
- )}
- </TableBody>
- </Table>
- </TableContainer>
- <TablePagination className={classes.pagination}
- rowsPerPageOptions={[5, 10, 20, 50]}
- component="div"
- count={rowCount}
- rowsPerPage={rowsPerPage}
- page={page}
- aria-label={this.props.isPopup ? "popup-table-pagination-footer" : "table-pagination-footer" }
- backIconButtonProps={{
- 'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page',
- }}
- nextIconButtonProps={{
- 'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page',
- }}
- onPageChange={this.onHandleChangePage}
- onRowsPerPageChange={this.onHandleChangeRowsPerPage}
- />
- </Paper>
- );
- }
-
- static getDerivedStateFromProps(props: MaterialTableComponentProps, state: MaterialTableComponentState & { _rawRows: {}[] }): MaterialTableComponentState & { _rawRows: {}[] } {
-
- if (isMaterialTableComponentPropsWithRowsAndRequestData(props)) {
- return {
- ...state,
- rows: props.rows,
- total: props.total,
- orderBy: props.orderBy,
- order: props.order,
- filter: props.filter,
- loading: props.loading,
- showFilter: props.showFilter,
- page: props.page,
- hiddenColumns: props.hiddenColumns,
- rowsPerPage: props.rowsPerPage
- }
- } else if (isMaterialTableComponentPropsWithRows(props) && props.asynchronus && state._rawRows !== props.rows) {
- const newState = MaterialTableComponent.updateRows(props, state);
- return {
- ...state,
- ...newState,
- _rawRows: props.rows || []
- };
- }
- return state;
- }
-
- private static updateRows(props: MaterialTableComponentPropsWithRows, state: MaterialTableComponentState): { rows: {}[], total: number, page: number } {
-
- let data = [...(props.rows as dataType[] || [])];
- const columns = props.columns;
-
- const { page, rowsPerPage, order, orderBy, filter } = state;
-
- try {
- if (state.showFilter) {
- Object.keys(filter).forEach(prop => {
- const column = columns.find(c => c.property === prop);
- const filterExpression = filter[prop];
-
- if (!column) throw new Error("Filter for not existing column found.");
-
- if (filterExpression != null) {
- data = data.filter((val) => {
- const dataValue = val[prop];
-
- if (dataValue != null) {
-
- if (column.type === ColumnType.boolean) {
-
- const boolDataValue = JSON.parse(String(dataValue).toLowerCase());
- const boolFilterExpression = JSON.parse(String(filterExpression).toLowerCase());
- return boolDataValue == boolFilterExpression;
-
- } else if (column.type === ColumnType.text) {
-
- const valueAsString = String(dataValue);
- const filterExpressionAsString = String(filterExpression).trim();
- if (filterExpressionAsString.length === 0) return true;
- return wildcardCheck(valueAsString, filterExpressionAsString);
-
- } else if (column.type === ColumnType.numeric){
-
- const valueAsNumber = Number(dataValue);
- const filterExpressionAsString = String(filterExpression).trim();
- if (filterExpressionAsString.length === 0 || isNaN(valueAsNumber)) return true;
-
- if (filterExpressionAsString.startsWith('>=')) {
- return valueAsNumber >= Number(filterExpressionAsString.substring(2).trim());
- } else if (filterExpressionAsString.startsWith('<=')) {
- return valueAsNumber <= Number(filterExpressionAsString.substring(2).trim());
- } else if (filterExpressionAsString.startsWith('>')) {
- return valueAsNumber > Number(filterExpressionAsString.substring(1).trim());
- } else if (filterExpressionAsString.startsWith('<')) {
- return valueAsNumber < Number(filterExpressionAsString.substring(1).trim());
- }
- } else if (column.type === ColumnType.date){
- const valueAsString = String(dataValue);
-
- const convertToDate = (valueAsString: string) => {
- // time value needs to be padded
- const hasTimeValue = /T\d{2,2}/.test(valueAsString);
- const indexCollon = valueAsString.indexOf(':');
- if (hasTimeValue && (indexCollon === -1 || indexCollon >= valueAsString.length-2)) {
- valueAsString = indexCollon === -1
- ? valueAsString + ":00"
- : indexCollon === valueAsString.length-1
- ? valueAsString + "00"
- : valueAsString += "0"
- }
- return new Date(Date.parse(valueAsString));
- };
-
- // @ts-ignore
- const valueAsDate = new Date(Date.parse(dataValue));
- const filterExpressionAsString = String(filterExpression).trim();
-
- if (filterExpressionAsString.startsWith('>=')) {
- return valueAsDate >= convertToDate(filterExpressionAsString.substring(2).trim());
- } else if (filterExpressionAsString.startsWith('<=')) {
- return valueAsDate <= convertToDate(filterExpressionAsString.substring(2).trim());
- } else if (filterExpressionAsString.startsWith('>')) {
- return valueAsDate > convertToDate(filterExpressionAsString.substring(1).trim());
- } else if (filterExpressionAsString.startsWith('<')) {
- return valueAsDate < convertToDate(filterExpressionAsString.substring(1).trim());
- }
-
-
- if (filterExpressionAsString.length === 0) return true;
- return wildcardCheck(valueAsString, filterExpressionAsString);
-
- }
- }
-
- return (dataValue == filterExpression)
- });
- };
- });
- }
-
- const rowCount = data.length;
-
- if (page > 0 && rowsPerPage * page > rowCount) { //if result is smaller than the currently shown page, new search and repaginate
- let newPage = Math.floor(rowCount / rowsPerPage);
- return {
- rows: data,
- total: rowCount,
- page: newPage
- };
- } else {
- data = (orderBy && order
- ? stableSort(data, getSorting(order, orderBy))
- : data).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-
- return {
- rows: data,
- total: rowCount,
- page: page
- };
- }
-
-
- } catch (e) {
- console.error(e);
- return {
- rows: [],
- total: 0,
- page: page
- }
- }
- }
-
- private async update() {
- if (isMaterialTableComponentPropsWithRequestData(this.props)) {
- const response = await Promise.resolve(
- this.props.onRequestData(
- this.state.page, this.state.rowsPerPage, this.state.orderBy, this.state.order, this.state.showFilter && this.state.filter || {})
- );
- this.setState(response);
- } else {
- let updateResult = MaterialTableComponent.updateRows(this.props, this.state);
- this.setState(updateResult);
- }
- }
-
- private onFilterChanged = (property: string, filterTerm: string) => {
- if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
- this.props.onFilterChanged(property, filterTerm);
- return;
- }
- if (this.props.disableFilter) return;
- const colDefinition = this.props.columns && this.props.columns.find(col => col.property === property);
- if (colDefinition && colDefinition.disableFilter) return;
-
- const filter = { ...this.state.filter, [property]: filterTerm };
- this.setState({
- filter
- }, this.update);
- };
-
- private onHandleRequestSort = (event: React.SyntheticEvent, property: string) => {
- if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
- this.props.onHandleRequestSort(property);
- return;
- }
- if (this.props.disableSorting) return;
- const colDefinition = this.props.columns && this.props.columns.find(col => col.property === property);
- if (colDefinition && colDefinition.disableSorting) return;
-
- const orderBy = this.state.orderBy === property && this.state.order === 'desc' ? null : property;
- const order = this.state.orderBy === property && this.state.order === 'asc' ? 'desc' : 'asc';
- this.setState({
- order,
- orderBy
- }, this.update);
- };
-
- handleSelectAllClick: () => {};
-
- private onHandleChangePage = (event: any | null, page: number) => {
- if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
- this.props.onHandleChangePage(page);
- return;
- }
- this.setState({
- page
- }, this.update);
- };
-
- private onHandleChangeRowsPerPage = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
- if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
- this.props.onHandleChangeRowsPerPage(+(event && event.target.value));
- return;
- }
- const rowsPerPage = +(event && event.target.value);
- if (rowsPerPage && rowsPerPage > 0) {
- this.setState({
- rowsPerPage
- }, this.update);
- }
- };
-
- private isSelected(id: string | number): boolean {
- let selected = this.state.selected || [];
- const selectedIndex = selected.indexOf(id);
- return (selectedIndex > -1);
- }
-
- private handleClick(event: any, rowData: TData, id: string | number): void {
- if (this.props.onHandleClick instanceof Function) {
- this.props.onHandleClick(event, rowData);
- return;
- }
- if (!this.props.enableSelection) {
- return;
- }
- let selected = this.state.selected || [];
- const selectedIndex = selected.indexOf(id);
- if (selectedIndex > -1) {
- selected = [
- ...selected.slice(0, selectedIndex),
- ...selected.slice(selectedIndex + 1)
- ];
- } else {
- selected = [
- ...selected,
- id
- ];
- }
- this.setState({
- selected
- });
- }
-
-
- private exportToCsv = async () => {
- let file;
- let data: dataType[] | null = null;
- let csv: string[] = [];
-
- if (isMaterialTableComponentPropsWithRequestData(this.props)) {
- // table with extra request handler
- this.setState({ loading: true });
- const result = await Promise.resolve(
- this.props.onRequestData(0, 1000, this.state.orderBy, this.state.order, this.state.showFilter && this.state.filter || {})
- );
- data = result.rows;
- this.setState({ loading: true });
- } else if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
- // table with generated handlers note: exports data shown on current page
- data = this.props.rows;
- }
- else {
- // table with local data
- data = MaterialTableComponent.updateRows(this.props, this.state).rows;
- }
-
- if (data && data.length > 0) {
- csv.push(this.props.columns.map(col => col.title || col.property).join(',') + "\r\n");
- this.state.rows && this.state.rows.forEach((row: any) => {
- csv.push(this.props.columns.map(col => row[col.property]).join(',') + "\r\n");
- });
- const properties = { type: "text/csv;charset=utf-8" }; // Specify the file's mime-type.
- try {
- // Specify the filename using the File constructor, but ...
- file = new File(csv, "export.csv", properties);
- } catch (e) {
- // ... fall back to the Blob constructor if that isn't supported.
- file = new Blob(csv, properties);
- }
- }
- if (!file) return;
- var reader = new FileReader();
- reader.onload = function (e) {
- const dataUri = reader.result as any;
- const link = document.createElement("a");
- if (typeof link.download === 'string') {
- link.href = dataUri;
- link.download = "export.csv";
-
- //Firefox requires the link to be in the body
- document.body.appendChild(link);
-
- //simulate click
- link.click();
-
- //remove the link when done
- document.body.removeChild(link);
- } else {
- window.open(dataUri);
- }
- }
- reader.readAsDataURL(file);
-
- // const url = URL.createObjectURL(file);
- // window.location.replace(url);
- }
-}
-
-export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<DistributiveOmit<MaterialTableComponentProps<TData>, '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/showColumnDialog.tsx b/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx
deleted file mode 100644
index ab0d465e7..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/showColumnDialog.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2022 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 React from 'react';
-import { Button, FormControlLabel, Popover, Switch, Typography } from '@mui/material';
-import { connect, Connect, IDispatcher } from '../../flux/connect';
-
-import { ColumnModel } from './columnModel';
-import { IApplicationStoreState } from '../../store/applicationStore';
-import { TableSettingsColumn } from '../../models/settings';
-import { updateTableSettings } from '../../actions/settingsAction';
-
-const mapStateToProps = (state: IApplicationStoreState) => ({
- settings: state.framework.applicationState.settings,
- settingsDoneLoading: state.framework.applicationState.settings.isInitialLoadDone
-});
-
-const mapDispatchToProps = (dispatcher: IDispatcher) => ({
- saveToSettings: (tableName: string, columns: TableSettingsColumn[]) => dispatcher.dispatch(updateTableSettings(tableName, columns))
-})
-
-type DialogProps = {
- columns: ColumnModel<{}>[],
- settingsName: string | null,
- anchorEl: HTMLElement | null;
- hideColumns: (columnNames: string[]) => void
- showColumns: (columnNames: string[]) => void
- onClose(): void
-
-} & Connect<typeof mapStateToProps, typeof mapDispatchToProps>;
-
- //TODO: figure out why everything gets triggered twice...
-
-const ShowColumnsDialog: React.FunctionComponent<DialogProps> = (props) => {
-
- const savedSettings = props.settingsName && props.settings.tables[props.settingsName];
-
- const [checkedColumns, setCheckedColumns] = React.useState<{ property: string, display: boolean, title: string | undefined }[]>([]);
-
- const open = Boolean(props.anchorEl);
- const allColumnNames = props.columns.map(e => e.property);
-
- React.useEffect(() => {
-
- createHideShowSelection();
-
- }, []);
-
- React.useEffect(() => {
-
- createHideShowSelection();
-
- }, [props.settings.isInitialLoadDone]);
-
-
- const createHideShowSelection = () => {
- let columns = props.columns.map(e => { return { property: e.property, display: !Boolean(e.hide), title: e.title } });
-
-
- if (savedSettings) {
-
- if (columns.length !== savedSettings.columns.length) {
- console.error("saved column length does not match current column length. Maybe a settings entry got wrongly overridden?")
- }
-
- //overwrite column data with settings
- savedSettings?.columns.forEach(el => {
- let foundIndex = columns.findIndex(e => e.property == el.property);
- if (columns[foundIndex] !== undefined)
- columns[foundIndex].display = el.displayed;
- });
-
- } else {
- console.warn("No settingsName set, changes will not be saved.")
- }
-
- setCheckedColumns(columns);
-
- const hideColumns = columns.filter(el => !el.display).map(e => e.property);
- props.hideColumns(hideColumns);
- }
-
-
- const handleChange = (propertyName: string, checked: boolean) => {
- if (!checked) {
- props.hideColumns([propertyName]);
- } else {
- props.showColumns([propertyName])
-
- }
-
- let updatedList = checkedColumns.map(item => {
- if (item.property == propertyName) {
- return { ...item, display: checked };
- }
- return item;
- });
-
- setCheckedColumns(updatedList);
- };
-
- const onHideAll = () => {
-
- switchCheckedColumns(false);
- props.hideColumns(allColumnNames);
- }
-
- const onShowAll = () => {
-
- switchCheckedColumns(true);
- props.showColumns(allColumnNames);
- }
-
- const onClose = () => {
-
- const tableColumns: TableSettingsColumn[] = checkedColumns.map(el => {
- return {
- property: el.property,
- displayed: el.display
- }
- });
-
- if (props.settingsName) {
- props.saveToSettings(props.settingsName, tableColumns);
- }
- props.onClose();
-
- }
-
- const switchCheckedColumns = (changeToValue: boolean) => {
- let updatedList = checkedColumns.map(item => {
- return { ...item, display: changeToValue };
- });
-
- setCheckedColumns(updatedList);
-
- }
-
- return (<Popover open={open} onClose={onClose}
- anchorEl={props.anchorEl}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'left',
- }} >
- <div>
- <Typography fontWeight={600} style={{ margin: 10 }} >Hide / Show Columns</Typography>
- </div>
- <div style={{ display: "flex", flexDirection: "column", margin: 10 }}>
- {
- checkedColumns?.map((el, i) => {
-
- return <>
-
- <FormControlLabel
- value="end"
- key={"hide-show-column-"+i}
- aria-label={"hide-or-show-column-button"}
- control={<Switch color="secondary" checked={el.display} onChange={e => handleChange(el.property, e.target.checked)} />}
- label={el.title || el.property}
- labelPlacement="end"
- />
- </>
- })
- }
- <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
- <Button color="secondary" aria-label="hide-all-columns-button" onClick={(e) => onHideAll()}>Hide all</Button>
- <Button color="secondary" aria-label="show-all-columns-button" onClick={(e) => onShowAll()}>Show all</Button>
- </div>
- </div>
- </Popover>)
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ShowColumnsDialog);
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
deleted file mode 100644
index 1b9136844..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * ============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';
-import { ColumnModel, ColumnType } from './columnModel';
-import { Theme } from '@mui/material/styles';
-
-
-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';
-
-
-const styles = (theme: Theme) => createStyles({
- container: {
- display: 'flex',
- flexWrap: 'wrap',
- },
- input: {
- margin: theme.spacing(1),
- },
- numberInput: {
- float: "right"
- }
-});
-
-interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
- onFilterChanged: (property: string, filterTerm: string) => void;
- filter: { [property: string]: string };
- columns: ColumnModel<{}>[];
- hiddenColumns: string[];
- enableSelection?: boolean;
-}
-
-class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
- createSelectFilterHandler = (property: string) => (event: SelectChangeEvent<HTMLSelectElement | string>) => {
- this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string);
- };
- createInputFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
- this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value);
- };
-
-
- render() {
- const { columns, filter, classes } = this.props;
- return (
- <TableRow>
- {this.props.enableSelection
- ? <TableCell padding="checkbox" style={{ width: "50px" }}>
- </TableCell>
- : null
- }
- {columns.map((col, ind) => {
- const style = col.width ? { width: col.width } : {};
- const tableCell = (
- <TableCell
- className={col.type === ColumnType.numeric ? classes.numberInput : ''}
- key={col.property}
- padding={col.disablePadding ? 'none' : 'normal'}
- style={style}
- >
- {col.disableFilter || (col.type === ColumnType.custom)
- ? null
- : (col.type === ColumnType.boolean)
- ? <Select variant="standard" 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.createSelectFilterHandler(col.property)}
- inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
- <MenuItem value={undefined} aria-label="none-value" >
- <em>None</em>
- </MenuItem>
- <MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
- <MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
- </Select>
- : <Input className={classes.input}
- inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter` }}
- value={filter[col.property] || ''}
- onChange={this.createInputFilterHandler(col.property)} />}
- </TableCell>
- );
-
- const showColumn = !this.props.hiddenColumns.includes(col.property);
-
- return showColumn && tableCell;
- }, this)}
- </TableRow>
- );
- }
-}
-
-export const EnhancedTableFilter = withStyles(styles)(EnhancedTableFilterComponent); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
deleted file mode 100644
index d6f7b7def..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * ============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';
-import { ColumnModel, ColumnType } from './columnModel';
-import { Theme } from '@mui/material/styles';
-
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
-import createStyles from '@mui/styles/createStyles';
-
-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<typeof styles>;
-
-interface IEnhancedTableHeadComponentProps extends styles_header {
- numSelected: number | null;
- onRequestSort: (event: React.SyntheticEvent, property: string) => void;
- onSelectAllClick: () => void;
- order: 'asc' | 'desc';
- orderBy: string | null;
- rowCount: number;
- columns: ColumnModel<{}>[];
- hiddenColumns: string[];
- enableSelection?: boolean;
- allowHtmlHeader?: boolean;
-}
-
-class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadComponentProps> {
- createSortHandler = (property: string) => (event: React.SyntheticEvent) => {
- this.props.onRequestSort(event, property);
- };
-
- render() {
- const { onSelectAllClick, order, orderBy, numSelected, rowCount, columns } = this.props;
- const {classes} = this.props;
-
- return (
- <TableHead>
- <TableRow>
- { this.props.enableSelection
- ? <TableCell padding="checkbox" style={ { width: "50px" } } className= {classes.header} >
- <Checkbox
- indeterminate={ numSelected && numSelected > 0 && numSelected < rowCount || undefined }
- checked={ numSelected === rowCount }
- onChange={ onSelectAllClick }
- />
- </TableCell>
- : null
- }
- { columns.map(col => {
- const style = col.width ? { width: col.width } : {};
- const tableCell = (
- <TableCell className= {classes.header}
- key={ col.property }
- align={ col.type === ColumnType.numeric ? 'right' : 'left' }
- padding={ col.disablePadding ? 'none' : 'normal' }
- sortDirection={ orderBy === (col.property) ? order : false }
- style={ style }
- >
- { col.disableSorting || (col.type === ColumnType.custom)
- ? <TableSortLabel
- active={ false }
- direction={ undefined }
- >
- { col.title || col.property }
- </TableSortLabel>
- : <Tooltip disableInteractive
- title="Sort"
- placement={ col.type === ColumnType.numeric ? 'bottom-end' : 'bottom-start' }
- enterDelay={ 300 }
- >
- <TableSortLabel
- active={ orderBy === col.property }
- direction={ order || undefined }
- onClick={ this.createSortHandler(col.property) }
- >
- {
- this.props.allowHtmlHeader ? <div className="content" dangerouslySetInnerHTML={{__html: col.title || col.property}}></div>
- : (col.title || col.property )
- }
- </TableSortLabel>
- </Tooltip> }
- </TableCell>
- );
-
- //show column if...
- const showColumn = !this.props.hiddenColumns.includes(col.property);
-
- return showColumn && tableCell;
- }, this) }
- </TableRow>
- </TableHead>
- );
- }
-}
-
-export const EnhancedTableHead = withStyles(styles)(EnhancedTableHeadComponent); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
deleted file mode 100644
index 143b802a4..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * ============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';
-import { Theme, lighten } from '@mui/material/styles';
-
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
-import createStyles from '@mui/styles/createStyles';
-
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import DeleteIcon from '@mui/icons-material/Delete';
-import MoreIcon from '@mui/icons-material/MoreVert';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import MenuItem from '@mui/material/MenuItem';
-import Menu from '@mui/material/Menu';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { Button } from '@mui/material';
-import { ColumnModel } from './columnModel';
-import ShowColumnsDialog from './showColumnDialog'
-
-const styles = (theme: Theme) => createStyles({
- root: {
- paddingRight: theme.spacing(1),
- },
- highlight:
- theme.palette.mode === 'light'
- ? {
- color: theme.palette.secondary.main,
- backgroundColor: lighten(theme.palette.secondary.light, 0.85),
- }
- : {
- color: theme.palette.text.primary,
- backgroundColor: theme.palette.secondary.dark,
- },
- spacer: {
- flex: '1 1 100%',
- },
- actions: {
- color: theme.palette.text.secondary,
- display: "flex",
- flex: "auto",
- flexDirection: "row"
- },
- title: {
- flex: '0 0 auto',
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
-});
-
-interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
- numSelected: number | null;
- title?: string;
- tableId: string | null;
- customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
- columns: ColumnModel<{}>[];
- onHideColumns: (columnNames: string[]) => void
- onShowColumns: (columnNames: string[]) => void
- onToggleFilter: () => void;
- onExportToCsv: () => void;
-}
-
-class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null, anchorElDialog: HTMLElement | null }> {
-
-
- constructor(props: ITableToolbarComponentProps) {
- super(props);
-
- this.state = {
- anchorEl: null,
- anchorElDialog: null
- };
- }
-
- private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
- this.setState({ anchorEl: event.currentTarget });
- };
-
- private handleClose = () => {
- this.setState({ anchorEl: null });
- };
-
- private showColumnsDialog = (event: React.MouseEvent<HTMLElement>) =>{
- this.setState({ anchorElDialog: this.state.anchorEl });
- }
-
- private onCloseDialog = () =>{
- this.setState({ anchorElDialog: null });
-
- }
-
- render() {
- const { numSelected, classes } = this.props;
- const open = !!this.state.anchorEl;
- const buttonPrefix = this.props.tableId !== null ? this.props.tableId : 'table';
- return (
- <>
- <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
- <div className={classes.title}>
- {numSelected && numSelected > 0 ? (
- <Typography color="inherit" variant="subtitle1">
- {numSelected} selected
- </Typography>
- ) : (
- <Typography variant="h5" id="tableTitle">
- {this.props.title || null}
- </Typography>
- )}
- </div>
- <div className={classes.spacer} />
- <div className={classes.actions}>
- {this.props.customActionButtons
- ? this.props.customActionButtons.map((action, ind) => (
- <Tooltip disableInteractive key={`custom-action-${ind}`} title={action.tooltip || ''}>
- <IconButton
- disabled={action.disabled}
- aria-label={`${buttonPrefix}-${action.ariaLabel}-button`}
- onClick={() => action.onClick()}
- size="large">
- <action.icon />
- </IconButton>
- </Tooltip>
- ))
- : null}
- {numSelected && numSelected > 0 ? (
- <Tooltip disableInteractive title="Delete">
- <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large">
- <DeleteIcon />
- </IconButton>
- </Tooltip>
- ) : (
- <Tooltip disableInteractive title="Filter list">
- <IconButton
- aria-label={`${buttonPrefix}-filter-list-button`}
- onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}
- size="large">
- <FilterListIcon />
- </IconButton>
- </Tooltip>
- )}
- <Tooltip disableInteractive title="Actions">
- <IconButton
- color="inherit"
- aria-label={`${buttonPrefix}-additional-actions-button`}
- aria-owns={open ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.handleMenu}
- size="large">
- <MoreIcon />
- </IconButton>
- </Tooltip>
- <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
- <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem>
- <MenuItem aria-label="hide-show-table-columns" onClick={(e) =>{ this.showColumnsDialog(e); this.handleClose()}}>Hide/show columns</MenuItem>
- </Menu>
- </div>
- </Toolbar>
- <ShowColumnsDialog
- anchorEl={this.state.anchorElDialog}
- onClose={this.onCloseDialog}
- settingsName={this.props.tableId}
- columns={this.props.columns}
- hideColumns={this.props.onHideColumns}
- showColumns={this.props.onShowColumns} />
- </>
- );
- }
-}
-
-export const TableToolbar = withStyles(styles)(TableToolbarComponent); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
deleted file mode 100644
index e2fda7647..000000000
--- a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
+++ /dev/null
@@ -1,357 +0,0 @@
-/**
- * ============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 { Action, IActionHandler } from '../../flux/action';
-import { Dispatch } from '../../flux/store';
-
-import { AddErrorInfoAction } from '../../actions/errorActions';
-import { IApplicationStoreState } from '../../store/applicationStore';
-
-export const RowDisabled = Symbol("RowDisabled");
-import { DataCallback } from ".";
-
-export interface IExternalTableState<TData> {
- order: 'asc' | 'desc';
- orderBy: string | null;
- selected: any[] | null;
- hiddenColumns: string[]
- rows: (TData & { [RowDisabled]?: boolean })[];
- total: number;
- page: number;
- rowsPerPage: number;
- loading: boolean;
- showFilter: boolean;
- filter: { [property: string]: string };
- preFilter: { [property: string]: string };
-}
-
-export type ExternalMethodes<TData> = {
- reloadAction: (dispatch: Dispatch, getAppState: () => IApplicationStoreState) => Promise<void | AddErrorInfoAction>;
- createActions: (dispatch: Dispatch, skipRefresh?: boolean) => {
- onRefresh: () => void;
- onHandleRequestSort: (orderBy: string) => void;
- onHandleExplicitRequestSort: (property: string, sortOrder: "asc" | "desc") => void;
- onToggleFilter: (refresh?: boolean | undefined) => void;
- onFilterChanged: (property: string, filterTerm: string) => void;
- onHandleChangePage: (page: number) => void;
- onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void;
- onHideColumns: (columnName: string[]) => void;
- onShowColumns: (columnName: string[]) => void;
- onClearFilters: () => void;
- },
- createPreActions: (dispatch: Dispatch, skipRefresh?: boolean) => {
- onPreFilterChanged: (preFilter: {
- [key: string]: string;
- }) => void;
- };
- createProperties: (state: IApplicationStoreState) => IExternalTableState<TData>;
- actionHandler: IActionHandler<IExternalTableState<TData>, Action>;
-}
-
-
-/** Create an actionHandler and actions for external table states. */
-export function createExternal<TData>(callback: DataCallback<TData>, selectState: (appState: IApplicationStoreState) => IExternalTableState<TData>) : ExternalMethodes<TData> ;
-export function createExternal<TData>(callback: DataCallback<TData>, selectState: (appState: IApplicationStoreState) => IExternalTableState<TData>, disableRow: (data: TData) => boolean) : ExternalMethodes<TData>;
-export function createExternal<TData>(callback: DataCallback<TData>, selectState: (appState: IApplicationStoreState) => IExternalTableState<TData>, disableRow?: (data: TData) => boolean) : ExternalMethodes<TData> {
-
- //#region Actions
- abstract class TableAction extends Action { }
-
-
- class RequestSortAction extends TableAction {
- constructor(public orderBy: string) {
- super();
- }
- }
-
- class RequestExplicitSortAction extends TableAction {
- constructor(public propertyName: string, public sortOrder: "asc" | "desc") {
- super();
- }
- }
-
- class SetSelectedAction extends TableAction {
- constructor(public selected: TData[] | null) {
- super();
- }
- }
-
- class SetPageAction extends TableAction {
- constructor(public page: number) {
- super();
- }
- }
-
- class SetRowsPerPageAction extends TableAction {
- constructor(public rowsPerPage: number) {
- super();
- }
- }
-
- class SetPreFilterChangedAction extends TableAction {
- constructor(public preFilter: { [key: string]: string }) {
- super();
- }
- }
-
- class SetFilterChangedAction extends TableAction {
- constructor(public filter: { [key: string]: string }) {
- super();
- }
- }
-
- class SetShowFilterAction extends TableAction {
- constructor(public show: boolean) {
- super();
- }
- }
-
- class RefreshAction extends TableAction {
- constructor() {
- super();
- }
- }
-
- class SetResultAction extends TableAction {
- constructor(public result: { page: number, total: number, rows: TData[] }) {
- super();
- }
- }
-
- class HideColumnsAction extends TableAction{
- constructor(public property: string[]){
- super();
- }
- }
-
- class ShowColumnsAction extends TableAction{
- constructor(public property: string[]){
- super();
- }
- }
-
- // #endregion
-
- //#region Action Handler
- const externalTableStateInit: IExternalTableState<TData> = {
- order: 'asc',
- orderBy: null,
- selected: null,
- hiddenColumns:[],
- rows: [],
- total: 0,
- page: 0,
- rowsPerPage: 10,
- loading: false,
- showFilter: false,
- filter: {},
- preFilter: {}
- };
-
- const externalTableStateActionHandler: IActionHandler<IExternalTableState<TData>> = (state = externalTableStateInit, action) => {
- if (!(action instanceof TableAction)) return state;
- if (action instanceof RefreshAction) {
- state = {
- ...state,
- loading: true
- }
- } else if (action instanceof SetResultAction) {
- state = {
- ...state,
- loading: false,
- rows: disableRow
- ? action.result.rows.map((row: TData) => ({...row, [RowDisabled]: disableRow(row) }))
- : action.result.rows,
- total: action.result.total,
- page: action.result.page,
- }
- } else if (action instanceof RequestSortAction) {
- state = {
- ...state,
- loading: true,
- orderBy: state.orderBy === action.orderBy && state.order === 'desc' ? null : action.orderBy,
- order: state.orderBy === action.orderBy && state.order === 'asc' ? 'desc' : 'asc',
- }
- } else if (action instanceof RequestExplicitSortAction) {
- state = {
- ...state,
- loading: true,
- orderBy: action.propertyName,
- order: action.sortOrder
- }
- }
- else if (action instanceof SetShowFilterAction) {
- state = {
- ...state,
- loading: true,
- showFilter: action.show
- }
- } else if (action instanceof SetPreFilterChangedAction) {
- state = {
- ...state,
- loading: true,
- preFilter: action.preFilter
- }
- } else if (action instanceof SetFilterChangedAction) {
- state = {
- ...state,
- loading: true,
- filter: action.filter
- }
- } else if (action instanceof SetPageAction) {
- state = {
- ...state,
- loading: true,
- page: action.page
- }
- } else if (action instanceof SetRowsPerPageAction) {
- state = {
- ...state,
- loading: true,
- rowsPerPage: action.rowsPerPage
- }
- }
- else if (action instanceof HideColumnsAction){
-
- //merge arrays, remove duplicates
- const newArray = [...new Set([...state.hiddenColumns, ...action.property])]
- state = {...state, hiddenColumns: newArray};
- }
- else if(action instanceof ShowColumnsAction){
-
- const newArray = state.hiddenColumns.filter(el=> !action.property.includes(el));
- state = {...state, hiddenColumns: newArray};
- }
-
- return state;
- }
-
- //const createTableAction(tableAction)
-
- //#endregion
- const reloadAction = (dispatch: Dispatch, getAppState: () => IApplicationStoreState) => {
- dispatch(new RefreshAction());
- const ownState = selectState(getAppState());
- const filter = { ...ownState.preFilter, ...(ownState.showFilter && ownState.filter || {}) };
- return Promise.resolve(callback(ownState.page, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter)).then(result => {
-
- if (ownState.page > 0 && ownState.rowsPerPage * ownState.page > result.total) { //if result is smaller than the currently shown page, new search and repaginate
-
- let newPage = Math.floor(result.total / ownState.rowsPerPage);
-
- Promise.resolve(callback(newPage, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter)).then(result1 => {
- dispatch(new SetResultAction(result1));
- });
-
-
- } else {
- dispatch(new SetResultAction(result));
- }
-
-
- }).catch(error => dispatch(new AddErrorInfoAction(error)));
- };
-
- const createPreActions = (dispatch: Dispatch, skipRefresh: boolean = false) => {
- return {
- onPreFilterChanged: (preFilter: { [key: string]: string }) => {
- dispatch(new SetPreFilterChangedAction(preFilter));
- (!skipRefresh) && dispatch(reloadAction);
- }
- };
- }
-
- const createActions = (dispatch: Dispatch, skipRefresh: boolean = false) => {
- return {
- onRefresh: () => {
- dispatch(reloadAction);
- },
- onHandleRequestSort: (orderBy: string) => {
- dispatch((dispatch: Dispatch) => {
- dispatch(new RequestSortAction(orderBy));
- (!skipRefresh) && dispatch(reloadAction);
- });
- },
- onHandleExplicitRequestSort: (property: string, sortOrder: "asc" | "desc") => {
- dispatch((dispatch: Dispatch) => {
- dispatch(new RequestExplicitSortAction(property, sortOrder));
- (!skipRefresh) && dispatch(reloadAction);
- });
- },
- onToggleFilter: (refresh?: boolean) => {
- dispatch((dispatch: Dispatch, getAppState: () => IApplicationStoreState) => {
- const { showFilter } = selectState(getAppState());
- dispatch(new SetShowFilterAction(!showFilter));
- if (!skipRefresh && (refresh === undefined || refresh))
- dispatch(reloadAction);
- });
- },
- onFilterChanged: (property: string, filterTerm: string) => {
- dispatch((dispatch: Dispatch, getAppState: () => IApplicationStoreState) => {
- let { filter } = selectState(getAppState());
- filter = { ...filter, [property]: filterTerm };
- dispatch(new SetFilterChangedAction(filter));
- (!skipRefresh) && dispatch(reloadAction);
- });
- },
- onHandleChangePage: (page: number) => {
- dispatch((dispatch: Dispatch) => {
- dispatch(new SetPageAction(page));
- (!skipRefresh) && dispatch(reloadAction);
- });
- },
- onHandleChangeRowsPerPage: (rowsPerPage: number | null) => {
- dispatch((dispatch: Dispatch) => {
- dispatch(new SetRowsPerPageAction(rowsPerPage || 10));
- (!skipRefresh) && dispatch(reloadAction);
- });
- },
- onHideColumns: (columnName: string[]) =>{
- dispatch((dispatch: Dispatch) => {
- dispatch(new HideColumnsAction(columnName));
- })
- },
- onShowColumns: (columnName: string[]) =>{
- dispatch((dispatch: Dispatch) => {
- dispatch(new ShowColumnsAction(columnName));
- })
- },
- onClearFilters: () => {
- dispatch((dispatch: Dispatch) => {
- let filter = { };
- dispatch(new SetFilterChangedAction(filter));
- });
- },
- // selected:
- };
- };
-
- const createProperties = (state: IApplicationStoreState) => {
- return {
- ...selectState(state)
- }
- }
-
- return {
- reloadAction: reloadAction,
- createActions: createActions,
- createProperties: createProperties,
- createPreActions: createPreActions,
- actionHandler: externalTableStateActionHandler,
- }
-}
-