diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src')
7 files changed, 168 insertions, 103 deletions
diff --git a/sdnr/wt/odlux/framework/src/app.tsx b/sdnr/wt/odlux/framework/src/app.tsx index 85b0dfb34..791f46d0a 100644 --- a/sdnr/wt/odlux/framework/src/app.tsx +++ b/sdnr/wt/odlux/framework/src/app.tsx @@ -15,21 +15,6 @@ * the License.
* ============LICENSE_END==========================================================================
*/
-/******************************************************************************
- * Copyright 2018 highstreet technologies GmbH
- *
- * 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.
- *****************************************************************************/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
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 c05142084..8124e450d 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts @@ -1,20 +1,20 @@ -/** - * ============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========================================================================== - */ +/**
+ * ============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';
@@ -22,6 +22,7 @@ export enum ColumnType { text,
numeric,
boolean,
+ date,
custom
}
@@ -34,7 +35,7 @@ type CustomControl<TData> = { export type ColumnModel<TData> = {
title?: string;
disablePadding?: boolean;
- width?: string | number;
+ width?: string | number ;
className?: string;
style?: React.CSSProperties;
align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
@@ -50,5 +51,5 @@ export type ColumnModel<TData> = { labels?: { "true": string, "false": string };
} | {
property: keyof TData;
- type?: ColumnType.numeric | ColumnType.text;
+ 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 c5be81914..7d4633bc6 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -47,6 +47,20 @@ 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; @@ -118,7 +132,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & { disableFilter?: boolean; customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[]; onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void; - createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr" >>>[]; + createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr">>>[]; }; type MaterialTableComponentPropsWithRows<TData = {}> = MaterialTableComponentBaseProps<TData> & { rows: TData[]; asynchronus?: boolean; }; @@ -162,7 +176,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate const rowsPerPage = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.rowsPerPage || 10 : 10; this.state = { - contextMenuInfo: {index : -1 }, + 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, @@ -234,7 +248,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate }} role="checkbox" aria-checked={isSelected} - aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row`} + aria-label="table-row" tabIndex={-1} key={entryId} selected={isSelected} @@ -250,7 +264,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate col => { const style = col.width ? { width: col.width } : {}; return ( - <TableCell key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} style={style}> + <TableCell aria-label={col.title? col.title.toLowerCase().replace(/\s/g, "-") : col.property.toLowerCase().replace(/\s/g, "-")} key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} style={style}> {col.type === ColumnType.custom && col.customControl ? <col.customControl className={col.className} style={col.style} rowData={entry} /> : col.type === ColumnType.boolean @@ -283,6 +297,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate count={rowCount} rowsPerPage={rowsPerPage} page={page} + aria-label="table-pagination-footer" backIconButtonProps={{ 'aria-label': 'previous-page', }} @@ -323,64 +338,94 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate 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 { - let data: dataType[] = props.rows || []; - let filtered = false; if (state.showFilter) { Object.keys(filter).forEach(prop => { - const exp = filter[prop]; - filtered = filtered || exp !== undefined; - data = exp !== undefined ? data.filter((val) => { - const value = val[prop]; - - if (value) { - - if (typeof exp === 'boolean') { - return value == exp; - - } else if (typeof exp === 'string') { - - const valueAsString = value.toString(); - if (exp.length === 0) return value; - - const regex = new RegExp("\\*", "g"); - const regex2 = new RegExp("\\?", "g"); - - const countStar = (exp.match(regex) || []).length; - const countQuestionmarks = (exp.match(regex2) || []).length; - - if (countStar > 0 || countQuestionmarks > 0) { - let editableExpression = exp; - - if (!exp.startsWith('*')) { - editableExpression = '^' + exp; + 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.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('<=')) { + return valueAsNumber <= Number(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('>')) { + return valueAsNumber > Number(filterExpressionAsString.substr(1).trim()); + } else if (filterExpressionAsString.startsWith('<')) { + return valueAsNumber < Number(filterExpressionAsString.substr(1).trim()); } - - if (!exp.endsWith('*')) { - editableExpression = editableExpression + '$'; + } 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.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('<=')) { + return valueAsDate <= convertToDate(filterExpressionAsString.substr(2).trim()); + } else if (filterExpressionAsString.startsWith('>')) { + return valueAsDate > convertToDate(filterExpressionAsString.substr(1).trim()); + } else if (filterExpressionAsString.startsWith('<')) { + return valueAsDate < convertToDate(filterExpressionAsString.substr(1).trim()); } - const expressionAsRegex = editableExpression.replace(/\*/g, ".*").replace(/\?/g, "."); + + if (filterExpressionAsString.length === 0) return true; + return wildcardCheck(valueAsString, filterExpressionAsString); - return valueAsString.match(new RegExp(expressionAsRegex, "g")); } - else if (exp.includes('>=')) { - return Number(valueAsString) >= Number(exp.replace('>=', '')); - } else if (exp.includes('<=')) { - return Number(valueAsString) <= Number(exp.replace('<=', '')); - } else - if (exp.includes('>')) { - return Number(valueAsString) > Number(exp.replace('>', '')); - } else if (exp.includes('<')) { - return Number(valueAsString) < Number(exp.replace('<', '')); - } } - } - return (value == exp) - }) : data; + return (dataValue == filterExpression) + }); + }; }); } 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 76f778eb4..5aefac445 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx @@ -73,14 +73,14 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC {col.disableFilter || (col.type === ColumnType.custom) ? null : (col.type === ColumnType.boolean) - ? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase() + ' 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` }} > + ? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-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` }} > <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 ? (col.title as string).toLowerCase() + ' filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} + : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} </TableCell> ); }, this)} diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx index 59dc49c50..96bcbf375 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx @@ -130,6 +130,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, )} <Tooltip title="Actions"> <IconButton color="inherit" + aria-label={buttonPrefix +"additional-actions-button"} aria-owns={open ? 'menu-appbar' : undefined} aria-haspopup="true" onClick={this.handleMenu} > @@ -138,7 +139,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, </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 onClick={this.props.onExportToCsv}>Export as CSV</MenuItem> + <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem> </Menu> </div> </Toolbar> diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx index adf0b8e5a..e62b42472 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; -import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit } from '@material-ui/core'; +import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit, Typography } from '@material-ui/core'; import { SvgIconProps } from '@material-ui/core/SvgIcon'; import FileIcon from '@material-ui/icons/InsertDriveFile'; @@ -62,7 +62,7 @@ type TreeViewComponentState<TData = { }> = { expandedItems: ExternalTreeItem<TData>[]; /** The index of the active iten or undefined if no item is active. */ activeItem?: ExternalTreeItem<TData>; - /** The search term or undefined if search is corrently not active. */ + /** The search term or undefined if search is currently not active. */ searchTerm?: string; searchTermValue?: string; } @@ -153,7 +153,8 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr return ( <div className={this.props.className ? `${this.props.classes.root} ${this.props.className}` : this.props.classes.root} style={this.props.style}> {children} - {enableSearchBar && <TextField label={"Search"} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null} + {enableSearchBar && <TextField label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null} + {enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& <Typography style={{marginTop:'10px'}}>Please search for an inventory identifier or use *.</Typography>} <List> {this.renderItems(items, searchTerm && searchTerm.toLowerCase())} </List> @@ -216,7 +217,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr return ((searchTerm && (matchIndex > -1 || expanded || (!isTreeViewComponentWithExternalStateProps(this.props) && item.isMatch || depth === 1)) || !searchTerm || forceRender) ? ( - <ListItem key={`tree-list-${this.itemIndex++}`} style={styles.item} onClick={handleClickCreator(false)} button > + <ListItem key={`tree-list-${this.itemIndex++}`} aria-label="tree-view-item" style={styles.item} onClick={handleClickCreator(false)} button > { // display the left icon (this.props.useFolderIcons && <ListItemIcon>{isFolder ? <FolderIcon /> : <FileIcon />}</ListItemIcon>) || diff --git a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx index d449f5cd3..d2de7cc02 100644 --- a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx @@ -70,20 +70,50 @@ const useSimpleTableStyles = makeStyles({ color: "white", padding: "5px", backgroundColor: "#cccccc", + }, td: { verticalAlign: "top", padding: "0.5rem 1rem", - borderBottom: "2px solid #DDD" + border: "2px solid #DDD" }, object: { }, objectTh: { - backgroundColor: "#4444cc", + backgroundColor: "#cccccc", }, objectTd: { padding: "0.5rem 1rem", - borderBottom: "2px solid #DDD" + border: "2px solid #DDD" + }, + chevron: { + '&:before': { + borderStyle: 'solid', + borderWidth: '0.25em 0.25em 0 0', + content: '\'\'', + display: 'inline-block', + height: '0.45em', + left: '0.15em', + position: 'relative', + top: '0.15em', + transform: 'rotate(-45deg)', + transition: 'all 0.3s', + verticalAlign: 'top', + width: '0.45em', + } + + }, + right: { + '&:before': { + left: '0', + transform: 'rotate(45deg)', + } + }, + bottom: { + '&:before': { + left: '0', + transform: 'rotate(135deg)', + } }, }); @@ -93,6 +123,7 @@ type SimpleTableProps = { label?: JSX.Element | string | null; cols?: number; expand?: boolean; + ariaLabel?: string; } const SimpleTable: React.FC<SimpleTableProps> = (props) => { @@ -110,11 +141,11 @@ const SimpleTable: React.FC<SimpleTableProps> = (props) => { }; return ( - <table className={`${classes.root} ${classes.table}`}> + <table className={`${classes.root} ${classes.table}`} aria-label={props.ariaLabel? props.ariaLabel+'-table' : 'table'}> {label && (<thead> - <tr> + <tr aria-label={props.ariaLabel? props.ariaLabel+'-title-row' : 'title row'}> <th className={`${classes.th} ${classes.label} ${classNameTh ? classNameTh : ''}`} colSpan={cols} onClick={handleClick}> - {label} + <span className={`${classes.chevron} ${isExpanded ? classes.bottom : classes.right }`}></span> { label } </th> </tr> </thead>) || null @@ -130,6 +161,7 @@ type ObjectRendererProps = { label?: JSX.Element | string | null; expand?: boolean; object: { [key: string]: any }; + ariaLabel?: string; }; const ObjectRenderer: React.FC<ObjectRendererProps> = (props) => { @@ -137,13 +169,13 @@ const ObjectRenderer: React.FC<ObjectRendererProps> = (props) => { const classes = useSimpleTableStyles(); return ( - <SimpleTable classNameTh={classes.objectTh} label={getTypeName(object) || label} expand={expand}> + <SimpleTable ariaLabel={props.ariaLabel} classNameTh={classes.objectTh} label={getTypeName(object) || label} expand={expand}> { Object.keys(object).map(key => { return ( - <tr key={String(key)}> - <td className={`${classes.td} ${classes.objectTd}`}>{String(key)} </td> - <td className={`${classes.td}`}>{renderObject(object[key])}</td> + <tr key={String(key)} aria-label={props.ariaLabel? props.ariaLabel+'-row': 'row'}> + <td className={`${classes.td} ${classes.objectTd}`} aria-label="object-title">{String(key)} </td> + <td className={`${classes.td}`} aria-label="object-details">{renderObject(object[key], "sub-element")}</td> </tr> ); }) @@ -165,9 +197,9 @@ const ArrayRenderer: React.FC<ArrayRendererProps> = (props) => { return null; }; -export const renderObject = (object: any): JSX.Element | string => { +export const renderObject = (object: any, ariaLabel?: string): JSX.Element | string => { if (isString(object) || isNumber(object) || isBoolean(object)) { return String(object); } - return <ObjectRenderer object={object} />; + return <ObjectRenderer object={object} ariaLabel={ariaLabel} />; }; |