summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src/views
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-10-07 13:51:14 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-10-07 13:51:14 +0200
commitaee5dc5c1a62ba13c792028e9eea5886a680eb79 (patch)
tree1d821337a3f01b7b4374dae2662bb2420958b55b /sdnr/wt/odlux/apps/configurationApp/src/views
parentd5bea98dfb5ff7dafb9adaecea53a4d6a9987102 (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx214
1 files changed, 145 insertions, 69 deletions
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<ConfigurationApp
}, {} as { [key: string]: any });
}
+ private getEditorForViewElement = (uiElement: ViewElement) : (null | React.ComponentType<BaseProps<any>>) => {
+ 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 <UiElementSelection
- key={uiElement.id}
- inputValue={viewData[uiElement.id] || ''}
- value={uiElement}
- readOnly={!canEdit}
- disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }}
- />
-
- } else if (isViewElementBoolean(uiElement)) {
- return <UiElementBoolean
- key={uiElement.id}
- inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
- value={uiElement}
- readOnly={!canEdit}
- disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
-
- } else if (isViewElementString(uiElement)) {
- return <UiElementString
- key={uiElement.id}
- inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
- value={uiElement}
- isKey={isKey}
- readOnly={!canEdit}
- disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
-
- } else if (isViewElementNumber(uiElement)) {
- return <UiElementNumber
- key={uiElement.id}
- value={uiElement}
- inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
- readOnly={!canEdit}
- disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
- } else if (isViewElementUnion(uiElement)) {
- return <UIElementUnion
- key={uiElement.id}
- isKey={false}
- value={uiElement}
- inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
- readOnly={!canEdit}
- disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
+ } else if (uiElement.isList) {
+ /* element is a leaf-list */
+ return <UiElementLeafList
+ key={uiElement.id}
+ inputValue={viewData[uiElement.id] == null ? [] : viewData[uiElement.id]}
+ value={uiElement}
+ readOnly={!canEdit}
+ disabled={editMode && !canEdit}
+ onChange={(e) => { 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
+ ? (
+ <Element
+ key={uiElement.id}
+ inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
+ value={uiElement}
+ readOnly={!canEdit}
+ disabled={editMode && !canEdit}
+ onChange={(e) => { 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 <UiElementLeafList
+ // key={uiElement.id}
+ // inputValue={viewData[uiElement.id] || ''}
+ // value={uiElement}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { this.changeValueFor(uiElement.id, e) }}
+ // />;
+ // } else if (isViewElementSelection(uiElement)) {
+
+ // return <UiElementSelection
+ // key={uiElement.id}
+ // inputValue={viewData[uiElement.id] || ''}
+ // value={uiElement}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { this.changeValueFor(uiElement.id, e) }}
+ // />
+
+ // } else if (isViewElementBoolean(uiElement)) {
+ // return <UiElementBoolean
+ // key={uiElement.id}
+ // inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
+ // value={uiElement}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
+
+ // } else if (isViewElementString(uiElement)) {
+ // return <UiElementString
+ // key={uiElement.id}
+ // inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
+ // value={uiElement}
+ // isKey={isKey}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
+
+ // } else if (isViewElementNumber(uiElement)) {
+ // return <UiElementNumber
+ // key={uiElement.id}
+ // value={uiElement}
+ // inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { this.changeValueFor(uiElement.id, e) }} />
+ // } else if (isViewElementUnion(uiElement)) {
+ // return <UIElementUnion
+ // key={uiElement.id}
+ // isKey={false}
+ // value={uiElement}
+ // inputValue={viewData[uiElement.id] == null ? '' : viewData[uiElement.id]}
+ // readOnly={!canEdit}
+ // disabled={editMode && !canEdit}
+ // onChange={(e) => { 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<ConfigurationApp
Object.keys(uiElement.cases).map(caseKey => {
const caseElm = uiElement.cases[caseKey];
return (
- <MenuItem key={caseElm.id} title={caseElm.description} value={caseKey}>{caseElm.label}</MenuItem>
+ <MenuItem key={caseElm.id} value={caseKey}><Tooltip title={caseElm.description}><div style={{width:"100%"}}>{caseElm.label}</div></Tooltip></MenuItem>
);
})
}
@@ -508,31 +574,41 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
const { classes, removeElement } = this.props;
+ const DeleteIconWithConfirmation : React.FC<{rowData: {[key:string]:any}, onReload: () => void} > = (props) => {
+ const confirm = useConfirm();
+
+ return (
+ <Tooltip title={"Remove"} >
+ <IconButton className={classes.button} onClick={async (e) => {
+ 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 );
+ }} >
+ <RemoveIcon />
+ </IconButton>
+ </Tooltip>
+ );
+ }
+
return (
<SelectElementTable stickyHeader idProperty={listKeyProperty} rows={listData} customActionButtons={[addNewElementAction]} columns={
Object.keys(listElements).reduce<ColumnModel<{ [key: string]: any }>[]>((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 (
- <Tooltip title={"Remove"} >
- <IconButton className={classes.button} onClick={(e) => {
- e.stopPropagation();
- e.preventDefault();
- removeElement(`${this.props.vPath}[${rowData[listKeyProperty]}]`)
- }} >
- <RemoveIcon />
- </IconButton>
- </Tooltip>
- )
+ <DeleteIconWithConfirmation rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath) } />
+ );
})
}])
} onHandleClick={(ev, row) => {
@@ -725,7 +801,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
<div className={this.props.classes.outer}>
<div className={this.props.classes.inner}>
<Loader />
- <h3>Collecting Data ...</h3>
+ <h3>Processing ...</h3>
</div>
</div>
);