summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-12-06 15:09:15 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-12-06 15:12:24 +0100
commit152cb381ea2c915c762416092337ce1d8589d1c6 (patch)
tree63b71c8343f9292281f5d7f5eac14342fec06402 /sdnr/wt/odlux/framework/src/components
parent8ea94e1210671b941f84abfe16e248cfa086fe49 (diff)
Update ODLUX
Update login view, add logout after user session ends, add user settings, several bugfixes Issue-ID: CCSDK-3540 Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com> Change-Id: I21137756b204287e25766a9646bf2faf7bad9d35
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx13
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx5
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx3
-rw-r--r--sdnr/wt/odlux/framework/src/components/navigationMenu.tsx11
-rw-r--r--sdnr/wt/odlux/framework/src/components/settings/general.tsx109
-rw-r--r--sdnr/wt/odlux/framework/src/components/titleBar.tsx18
6 files changed, 147 insertions, 12 deletions
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 9155f38ec..cb675218f 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -40,6 +40,7 @@ import { DividerTypeMap } from '@material-ui/core/Divider';
import { MenuItemProps } from '@material-ui/core/MenuItem';
import { flexbox } from '@material-ui/system';
import { RowDisabled } from './utilities';
+import { toAriaLabel } from '../../utilities/yangHelper';
export { ColumnModel, ColumnType } from './columnModel';
type propType = string | number | null | undefined | (string | number)[];
@@ -100,7 +101,8 @@ const styles = (theme: Theme) => createStyles({
flex: "1 1 100%"
},
pagination: {
- overflow: "hidden"
+ overflow: "hidden",
+ minHeight: "52px"
}
});
@@ -152,6 +154,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
columns: ColumnModel<TData>[];
idProperty: keyof TData | ((data: TData) => React.Key);
tableId?: string;
+ isPopup?: boolean;
title?: string;
stickyHeader?: boolean;
defaultSortOrder?: 'asc' | 'desc';
@@ -294,7 +297,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
col => {
const style = col.width ? { width: col.width } : {};
return (
- <TableCell style={ entry[RowDisabled] || false ? { ...style, color: "inherit" } : style } 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} >
+ <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
@@ -327,12 +330,12 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
count={rowCount}
rowsPerPage={rowsPerPage}
page={page}
- aria-label="table-pagination-footer"
+ aria-label={"table-pagination-footer" }
backIconButtonProps={{
- 'aria-label': 'previous-page',
+ 'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page',
}}
nextIconButtonProps={{
- 'aria-label': 'next-page',
+ 'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page',
}}
onChangePage={this.onHandleChangePage}
onChangeRowsPerPage={this.onHandleChangeRowsPerPage}
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 5aefac445..e4cc5ab7c 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -25,6 +25,7 @@ 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 { toAriaLabel } from '../../utilities/yangHelper';
const styles = (theme: Theme) => createStyles({
@@ -73,14 +74,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().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` }} >
+ ? <Select className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
<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().replace(/\s/g, "-") + '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
+ : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string)+ '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
</TableCell>
);
}, this)}
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
index 8828ac3fc..49e7be514 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
@@ -23,6 +23,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { toAriaLabel } from '../../utilities/yangHelper';
const styles = (theme: Theme) => createStyles({
active: {
@@ -45,7 +46,7 @@ export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
props.external ? <a target="_blank" href={to} { ...itemProps }></a> :
<NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);
- const ariaLabel = typeof Primary === 'string' ? "link-to-"+Primary.toLowerCase().replace(/\s/g, "-") : "link-to-"+Primary.displayName?.toLowerCase();
+ const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);
return (
<>
<ListItem button component={ renderLink } aria-label={ariaLabel}>
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index b65eb29e2..b50d68081 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -94,6 +94,17 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di
const [responsive, setResponsive] = React.useState(false);
+ //collapse menu on mount if necessary
+ React.useEffect(()=>{
+
+ if(isOpen && window.innerWidth < tabletWidthBreakpoint){
+
+ setResponsive(true);
+ dispatch(new MenuAction(false));
+ }
+
+ },[]);
+
React.useEffect(() => {
function handleResize() {
diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
new file mode 100644
index 000000000..ca1849049
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
@@ -0,0 +1,109 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2021 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 { Button, FormControlLabel, makeStyles, Switch, Typography } from '@material-ui/core';
+import { SettingsComponentProps } from '../../models/settings';
+import * as React from 'react';
+import connect, { Connect, IDispatcher } from '../../flux/connect';
+import { IApplicationStoreState } from '../../store/applicationStore';
+import { getGeneralSettingsAction, SetGeneralSettingsAction, updateGeneralSettingsAction } from '../../actions/settingsAction';
+import { sendMessage, SettingsMessage } from '../../services/broadcastService';
+
+
+type props = Connect<typeof mapProps, typeof mapDispatch> & SettingsComponentProps;
+
+const mapProps = (state: IApplicationStoreState) => ({
+ settings: state.framework.applicationState.settings,
+ user: state.framework.authenticationState.user?.user
+
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+
+ updateSettings :(activateNotifications: boolean) => dispatcher.dispatch(updateGeneralSettingsAction(activateNotifications)),
+ getSettings: () =>dispatcher.dispatch(getGeneralSettingsAction()),
+ });
+
+const styles = makeStyles({
+ sectionMargin: {
+ marginTop: "30px",
+ marginBottom: "15px"
+ },
+ elementMargin: {
+ marginLeft: "10px"
+ },
+ buttonPosition:{
+ position: "absolute",
+ right: "32%"
+ }
+ });
+
+const General : React.FunctionComponent<props> = (props) =>{
+
+const classes = styles();
+
+const [areWebsocketsEnabled, setWebsocketsEnabled] = React.useState(props.settings.general.areNotificationsEnabled || false);
+
+React.useEffect(()=>{
+ props.getSettings();
+},[]);
+
+React.useEffect(()=>{
+ if(props.settings.general.areNotificationsEnabled!==null)
+ setWebsocketsEnabled(props.settings.general.areNotificationsEnabled)
+},[props.settings]);
+
+const onWebsocketsChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: boolean) =>{
+ setWebsocketsEnabled(newValue);
+ }
+
+const onSave = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+
+ e.preventDefault();
+ const message: SettingsMessage = {key: 'general', enableNotifications: areWebsocketsEnabled, user: props.user!};
+ sendMessage(message, "odlux_settings");
+ props.updateSettings(areWebsocketsEnabled);
+ props.onClose();
+}
+
+const onCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+ e.preventDefault();
+ props.onClose();
+
+}
+
+
+ return <div>
+ <Typography className={classes.sectionMargin} variant="body1" style={{ fontWeight: "bold" }} gutterBottom>
+ Enable Notifications
+ </Typography>
+ <FormControlLabel style={{ padding:5}}
+ value="end"
+ control={<Switch color="secondary" checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />}
+ label="Enable Notifications"
+ labelPlacement="end"
+ />
+ <div className={classes.buttonPosition}>
+ <Button className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button>
+ <Button className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button>
+ </div>
+ </div>
+}
+
+export const GeneralUserSettings = connect(mapProps, mapDispatch)(General);
+export default GeneralUserSettings; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 62db1de40..5d916e8c8 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -35,8 +35,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBan } from '@fortawesome/free-solid-svg-icons';
import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
-import { UpdateUser } from '../actions/authentication';
-import { ReplaceAction } from '../actions/navigationActions';
+import { logoutUser } from '../actions/authentication';
+import { PushAction, ReplaceAction } from '../actions/navigationActions';
import connect, { Connect, IDispatcher } from '../flux/connect';
import Logo from './logo';
@@ -71,9 +71,12 @@ const styles = (theme: Theme) => createStyles({
const mapDispatch = (dispatcher: IDispatcher) => {
return {
logout: () => {
- dispatcher.dispatch(new UpdateUser(undefined));
+ dispatcher.dispatch(logoutUser());
dispatcher.dispatch(new ReplaceAction("/login"));
},
+ openSettings : () =>{
+ dispatcher.dispatch(new PushAction("/settings"));
+ },
toggleMainMenu: (value: boolean, value2: boolean) => {
dispatcher.dispatch(new MenuAction(value));
dispatcher.dispatch(new MenuClosedByUser(value2))
@@ -172,7 +175,14 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
onClose={this.closeMenu}
>
{/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
- <MenuItem onClick={() => {
+ <MenuItem
+ aria-label="settings-button"
+ onClick={ () =>{
+ this.props.openSettings();
+ this.closeMenu(); }}>Settings</MenuItem>
+ <MenuItem
+ aria-label="logout-button"
+ onClick={() => {
this.props.logout();
this.closeMenu();
}}>Logout</MenuItem>