From aee5dc5c1a62ba13c792028e9eea5886a680eb79 Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Wed, 7 Oct 2020 13:51:14 +0200 Subject: ConfigApp bugfixes fix remove button in lists and boolean filters not working, fix delay-period not configurable Issue-ID: CCSDK-2878 Signed-off-by: Aijana Schumann Change-Id: I49f03840de6092f9ac4641b7c98785b5feb760b4 --- .../configurationApp/src/actions/deviceActions.ts | 5 +- .../configurationApp/src/components/baseProps.ts | 8 +- .../src/components/uiElementLeafList.tsx | 204 ++++++++++++++++++++ .../src/views/configurationApplication.tsx | 214 ++++++++++++++------- 4 files changed, 360 insertions(+), 71 deletions(-) create mode 100644 sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx (limited to 'sdnr/wt/odlux/apps/configurationApp/src') diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts index 1db66c0d4..790d2515c 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts @@ -49,6 +49,9 @@ export class UpdatOutputData extends Action { export const updateNodeIdAsyncActionCreator = (nodeId: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState ) => { + dispatch(new UpdateDeviceDescription("", {}, [])); + dispatch(new SetCollectingSelectionData(true)); + const availableCapabilities = await restService.getCapabilitiesByMoutId(nodeId); if (!availableCapabilities || availableCapabilities.length <= 0) { @@ -70,7 +73,7 @@ export const updateNodeIdAsyncActionCreator = (nodeId: string) => async (dispatc parser.postProcess(); - console.log(parser.modules, parser.views) + dispatch(new SetCollectingSelectionData(false)); return dispatch(new UpdateDeviceDescription(nodeId, parser.modules, parser.views)); } diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts index 8f7300cfb..73812a4b8 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts @@ -18,4 +18,10 @@ import { ViewElement } from "../models/uiModels"; -export type BaseProps = { value: ViewElement, inputValue: TValue, readOnly: boolean, disabled: boolean, onChange(newValue: TValue): void }; \ No newline at end of file +export type BaseProps = { + value: ViewElement, + inputValue: TValue, + readOnly: boolean, + disabled: boolean, + onChange(newValue: TValue): void +}; diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx new file mode 100644 index 000000000..c705b982f --- /dev/null +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx @@ -0,0 +1,204 @@ +/** + * ============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 { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@material-ui/core"; +import { makeStyles } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; + +import { ViewElement } from "../models/uiModels"; + +import { BaseProps } from "./baseProps"; + +type LeafListProps = BaseProps & { + getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType>) +}; + +const useStyles = makeStyles((theme) => { + const light = theme.palette.type === 'light'; + const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; + + return ({ + root: { + display: 'flex', + justifyContent: 'left', + verticalAlign: 'bottom', + flexWrap: 'wrap', + listStyle: 'none', + margin: 0, + padding: 0, + paddingTop: theme.spacing(0.5), + marginTop: theme.spacing(1), + }, + chip: { + margin: theme.spacing(0.5), + }, + underline: { + '&:after': { + borderBottom: `2px solid ${theme.palette.primary.main}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '""', + position: 'absolute', + right: 0, + transform: 'scaleX(0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&$focused:after': { + transform: 'scaleX(1)', + }, + '&$error:after': { + borderBottomColor: theme.palette.error.main, + transform: 'scaleX(1)', // error is always underlined in red + }, + '&:before': { + borderBottom: `1px solid ${bottomLineColor}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '"\\00a0"', + position: 'absolute', + right: 0, + transition: theme.transitions.create('border-bottom-color', { + duration: theme.transitions.duration.shorter, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&:hover:not($disabled):before': { + borderBottom: `2px solid ${theme.palette.text.primary}`, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + borderBottom: `1px solid ${bottomLineColor}`, + }, + }, + '&$disabled:before': { + borderBottomStyle: 'dotted', + }, + }, + }) +}); + +export const UiElementLeafList = (props: LeafListProps) => { + const { value: element, inputValue, onChange } = props; + + const classes = useStyles(); + + const [open, setOpen] = React.useState(false); + const [editorValue, setEditorValue] = React.useState(""); + const [editorValueIndex, setEditorValueIndex] = React.useState(-1); + + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const onApplyButton = () => { + if (editorValue != null && editorValue != "" && editorValueIndex < 0) { + props.onChange([ + ...inputValue, + editorValue, + ]); + } else if (editorValue != null && editorValue != "") { + props.onChange([ + ...inputValue.slice(0, editorValueIndex), + editorValue, + ...inputValue.slice(editorValueIndex+1), + ]); + } + setOpen(false); + }; + + const onDelete = (index : number) => { + const newValue : any[] = [ + ...inputValue.slice(0, index), + ...inputValue.slice(index+1), + ]; + onChange(newValue); + }; + + const ValueEditor = props.getEditorForViewElement(props.value); + + return ( + <> + + {element.label} +
    + { !props.readOnly ?
  • + } + label={"Add"} + className={classes.chip} + size="small" + color="secondary" + onClick={ () => { + setOpen(true); + setEditorValue(""); + setEditorValueIndex(-1); + } + } + /> +
    • : null } + { inputValue.map((val, ind) => ( +
  • + { onDelete(ind); } : undefined } + onClick={ !props.readOnly ? () => { + setOpen(true); + setEditorValue(val); + setEditorValueIndex(ind); + } : undefined + } + /> +
    • + )) + } +
+ {/* { "Value is mandetory"} */} + + + {editorValueIndex < 0 ? "Add new value" : "Edit value" } + + { ValueEditor && || null } + + + + + + + + ); +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx index 6465feb4e..fc3c68e88 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx @@ -45,15 +45,19 @@ import InputLabel from "@material-ui/core/InputLabel"; import Select from "@material-ui/core/Select"; import MenuItem from "@material-ui/core/MenuItem"; import Breadcrumbs from "@material-ui/core/Breadcrumbs"; +import { Button } from '@material-ui/core'; import Link from "@material-ui/core/Link"; +import { BaseProps } from '../components/baseProps'; import { UIElementReference } from '../components/uiElementReference'; import { UiElementNumber } from '../components/uiElementNumber'; import { UiElementString } from '../components/uiElementString'; import { UiElementBoolean } from '../components/uiElementBoolean'; import { UiElementSelection } from '../components/uiElementSelection'; import { UIElementUnion } from '../components/uiElementUnion'; -import { Button } from '@material-ui/core'; +import { UiElementLeafList } from '../components/uiElementLeafList'; + +import { useConfirm } from 'material-ui-confirm'; const styles = (theme: Theme) => createStyles({ header: { @@ -281,68 +285,130 @@ class ConfigurationApplicationComponent extends React.Component>) => { + if (isViewElementEmpty(uiElement)) { + return null; + } else if (isViewElementSelection(uiElement)) { + return UiElementSelection; + } else if (isViewElementBoolean(uiElement)) { + return UiElementBoolean; + } else if (isViewElementString(uiElement)) { + return UiElementString; + } else if (isViewElementNumber(uiElement)) { + return UiElementNumber; + } else if (isViewElementUnion(uiElement)) { + return UIElementUnion; + } else { + if (process.env.NODE_ENV !== "production") { + console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) + } + return null; + } + } + private renderUIElement = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => { const isKey = (uiElement.label === keyProperty); const canEdit = editMode && (isNew || (uiElement.config && !isKey)); - - // do not show elements w/o any value from the backend + + // do not show elements w/o any value from the backend if (viewData[uiElement.id] == null && !editMode) { return null; - } else if (isViewElementEmpty(uiElement)) { + } else if (isViewElementEmpty(uiElement)) { return null; - } else if (isViewElementSelection(uiElement)) { - - return { this.changeValueFor(uiElement.id, e) }} - /> - - } else if (isViewElementBoolean(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - - } else if (isViewElementString(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - - } else if (isViewElementNumber(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - } else if (isViewElementUnion(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> + } else if (uiElement.isList) { + /* element is a leaf-list */ + return { this.changeValueFor(uiElement.id, e) }} + getEditorForViewElement = { this.getEditorForViewElement } + />; } else { - if (process.env.NODE_ENV !== "production") { - console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) - } - return null; + const Element = this.getEditorForViewElement(uiElement); + return Element != null + ? ( + { this.changeValueFor(uiElement.id, e) }} + /> ) + : null ; } + + // // do not show elements w/o any value from the backend + // if (viewData[uiElement.id] == null && !editMode) { + // return null; + // } else if (isViewElementEmpty(uiElement)) { + // return null; + // } else if (uiElement.isList) { + // /* element is a leaf-list */ + // return { this.changeValueFor(uiElement.id, e) }} + // />; + // } else if (isViewElementSelection(uiElement)) { + + // return { this.changeValueFor(uiElement.id, e) }} + // /> + + // } else if (isViewElementBoolean(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + + // } else if (isViewElementString(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + + // } else if (isViewElementNumber(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + // } else if (isViewElementUnion(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + // } else { + // if (process.env.NODE_ENV !== "production") { + // console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) + // } + // return null; + // } }; // private renderUIReference = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => { @@ -399,7 +465,7 @@ class ConfigurationApplicationComponent extends React.Component { const caseElm = uiElement.cases[caseKey]; return ( - {caseElm.label} +
{caseElm.label}
 ); }) } @@ -508,31 +574,41 @@ class ConfigurationApplicationComponent extends React.Component void} > = (props) => { + const confirm = useConfirm(); + + return ( + + { + e.stopPropagation(); + e.preventDefault(); + confirm({title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }}) + .then(() => removeElement(`${this.props.vPath}[${props.rowData[listKeyProperty]}]`)) + .then( props.onReload ); + }} > + + + + ); + } + return ( []>((acc, cur) => { const elm = listElements[cur]; if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) { if (elm.label !== listKeyProperty) { - acc.push({ property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text }); + acc.push(elm.uiType === "boolean" ? { property: elm.label, type: ColumnType.boolean } : { property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text }); } else { - acc.unshift({ property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text }); + acc.unshift(elm.uiType === "boolean" ? { property: elm.label, type: ColumnType.boolean } : { property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text }); } } return acc; }, []).concat([{ property: "Actions", disableFilter: true, disableSorting: true, type: ColumnType.custom, customControl: ( ({ rowData })=> { return ( - - { - e.stopPropagation(); - e.preventDefault(); - removeElement(`${this.props.vPath}[${rowData[listKeyProperty]}]`) - }} > - - - - ) + this.props.vPath && this.props.reloadView(this.props.vPath) } /> + ); }) }]) } onHandleClick={(ev, row) => { @@ -725,7 +801,7 @@ class ConfigurationApplicationComponent extends React.Component
-

Collecting Data ...

+

Processing ...

); -- cgit 1.2.3-korg