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 <aijana.schumann@highstreet-technologies.com>
Change-Id: I49f03840de6092f9ac4641b7c98785b5feb760b4

2 files changed, 211 insertions, 1 deletions

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<TValue = string> = { value: ViewElement, inputValue: TValue, readOnly: boolean, disabled: boolean, onChange(newValue: TValue): void };
\ No newline at end of file
+export type BaseProps<TValue = string> = { 
+    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<any []> & {
+  getEditorForViewElement:  (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>)  
+};
+
+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 (
+    <>
+      <FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+        <InputLabel htmlFor={`list-${element.id}`} shrink={!props.readOnly || !!(inputValue && inputValue.length)} >{element.label}</InputLabel>
+        <ul className={`${classes.root} ${classes.underline}`} id={`list-${element.id}`}>
+        { !props.readOnly ? <li>
+          <Chip
+            icon={<AddIcon />}
+            label={"Add"}
+            className={classes.chip}
+            size="small"
+            color="secondary"
+            onClick={ () => { 
+              setOpen(true); 
+              setEditorValue("");
+              setEditorValueIndex(-1);
+             } 
+            }
+          />
+        </li> : null }  
+        { inputValue.map((val, ind) => (
+          <li key={ind}>
+            <Chip
+              className={classes.chip}
+              size="small"
+              variant="outlined"
+              label={String(val)}
+              onDelete={ !props.readOnly ? () => { onDelete(ind); } : undefined }  
+              onClick={ !props.readOnly ? () => { 
+                  setOpen(true); 
+                  setEditorValue(val);
+                  setEditorValueIndex(ind);
+                  } : undefined
+              }   
+            />
+            </li>
+          ))
+        }
+        </ul>
+        {/* <FormHelperText>{ "Value is mandetory"}</FormHelperText> */}
+        </FormControl>
+        <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+          <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? "Add new value" : "Edit value" } </DialogTitle>
+          <DialogContent>
+            { ValueEditor && <ValueEditor 
+                inputValue={ editorValue }
+                value={{ ...element, isList: false}}
+                disabled={false}
+                readOnly={props.readOnly}
+                onChange={ setEditorValue }
+            /> || null }
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={ handleClose }> Cancel </Button>
+            <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </Button>
+          </DialogActions>
+        </Dialog>
+      </>
+  );
+};
\ No newline at end of file