From 9516ced50cd8cea7ca9675cbf0e5e42f6a2c68ae Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Tue, 21 Jan 2020 10:26:52 +0100 Subject: [PATCH] widgets are now rendered in edit mode --- src/dashboard/dashboard.js | 33 +++++++++++++------- src/dashboard/dropzone.js | 1 + src/dashboard/widget-area.js | 4 +-- src/dashboard/widget-context-menu.js | 1 - src/widget/edit-widget-control-creator.js | 2 +- src/widget/edit-widget-simulation-control.js | 3 -- src/widget/editable-widget-container.js | 26 +++++++-------- src/widget/widget.js | 2 +- src/widget/widgets/label.js | 3 +- 9 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index a6b277f..899a355 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -322,17 +322,14 @@ class Dashboard extends Component { } widgetChange(widget, index, callback = null){ - const widgets = this.state.dashboard.get('widgets'); - widgets[index] = widget; + console.log("widget change was called (dashboard)"); - const dashboard = this.state.dashboard.set('widgets'); - - // Check if the height needs to be increased, the section may have shrunk if not - if (!this.increaseHeightWithWidget(widget)) { - this.computeHeightWithWidgets(dashboard.widgets); - } - - this.setState({ dashboard }, callback); + AppDispatcher.dispatch({ + type: 'widgets/start-edit', + token: this.state.sessionToken, + data: widget + }); + } @@ -495,8 +492,8 @@ class Dashboard extends Component { key={widgetKey} data={widgets[widgetKey]} simulation={this.state.simulation} - onWidgetChange={this.widgetChange} - onWidgetStatusChange={this.widgetStatusChange} + onWidgetChange={this.widgetChange.bind(this)} + onWidgetStatusChange={this.widgetStatusChange.bind(this)} editing={this.state.editing} index={parseInt(widgetKey,10)} grid={grid} @@ -518,6 +515,18 @@ class Dashboard extends Component { /* onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} + +const widgets = this.state.dashboard.get('widgets'); + widgets[index] = widget; + + const dashboard = this.state.dashboard.set('widgets'); + + // Check if the height needs to be increased, the section may have shrunk if not + if (!this.increaseHeightWithWidget(widget)) { + this.computeHeightWithWidgets(dashboard.widgets); + } + + this.setState({ dashboard }, callback); */ let fluxContainerConverter = require('../common/FluxContainerConverter'); diff --git a/src/dashboard/dropzone.js b/src/dashboard/dropzone.js index d73a295..979a692 100644 --- a/src/dashboard/dropzone.js +++ b/src/dashboard/dropzone.js @@ -62,6 +62,7 @@ function collect(connect, monitor) { class Dropzone extends React.Component { render() { + var toolboxClass = classNames({ 'box-content': true, 'toolbox-dropzone': true, diff --git a/src/dashboard/widget-area.js b/src/dashboard/widget-area.js index f3e7c0f..8a06382 100644 --- a/src/dashboard/widget-area.js +++ b/src/dashboard/widget-area.js @@ -48,7 +48,7 @@ class WidgetArea extends React.Component { } render() { - const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => { + const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => { const absolutHeight = widget.y + widget.height; return absolutHeight > currentHeight ? absolutHeight : currentHeight; @@ -67,7 +67,7 @@ WidgetArea.propTypes = { editing: PropTypes.bool, grid: PropTypes.number, defaultSimulationModel: PropTypes.string, - widgets: PropTypes.array, + //widgets: PropTypes.array, onWidgetAdded: PropTypes.func }; diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js index ee53b4a..ae8c40f 100644 --- a/src/dashboard/widget-context-menu.js +++ b/src/dashboard/widget-context-menu.js @@ -33,7 +33,6 @@ class WidgetContextMenu extends React.Component { deleteWidget = event => { if (this.props.onDelete != null) { - console.log("deleteWIget in wcm was called"); this.props.onDelete(this.props.widget, this.props.index); } }; diff --git a/src/widget/edit-widget-control-creator.js b/src/widget/edit-widget-control-creator.js index f435085..c0b853c 100644 --- a/src/widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget-control-creator.js @@ -38,7 +38,7 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control'; import EditWidgetHTMLContent from './edit-widget-html-content'; import EditWidgetParametersControl from './edit-widget-parameters-control'; -export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) { +export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels = null, handleChange) { // Use a list to concatenate the controls according to the widget type var DialogControls = []; diff --git a/src/widget/edit-widget-simulation-control.js b/src/widget/edit-widget-simulation-control.js index 8862567..ffeb212 100644 --- a/src/widget/edit-widget-simulation-control.js +++ b/src/widget/edit-widget-simulation-control.js @@ -28,9 +28,6 @@ class EditWidgetSimulationControl extends Component { this.state = { widget: { - customProperties: { - simulationModel: '' - } } }; } diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js index 27824b4..29140a0 100644 --- a/src/widget/editable-widget-container.js +++ b/src/widget/editable-widget-container.js @@ -90,21 +90,21 @@ class EditableWidgetContainer extends React.Component { const widget = this.props.widget; const resizing = { - bottom: !widget.locked, - bottomLeft: !widget.locked, - bottomRight: !widget.locked, - left: !widget.locked, - right: !widget.locked, - top: !widget.locked, - topLeft: !widget.locked, - topRight: !widget.locked + bottom: !widget.isLocked, + bottomLeft: !widget.isLocked, + bottomRight: !widget.isLocked, + left: !widget.isLocked, + right: !widget.idLocked, + top: !widget.isLocked, + topLeft: !widget.isLocked, + topRight: !widget.isLocked }; const gridArray = [ this.props.grid, this.props.grid ]; const widgetClasses = classNames({ 'editing-widget': true, - 'locked': widget.locked + 'locked': widget.isLocked }); return - + {this.props.children} - + ; } } diff --git a/src/widget/widget.js b/src/widget/widget.js index 41de002..b32f96f 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -168,7 +168,7 @@ class Widget extends React.Component { const element = this.createWidget(this.props.data); if (this.props.editing) { - return + return {element} ; } diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index 2ee131f..ed4400d 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -25,8 +25,7 @@ import EditWidgetColorControl from '../edit-widget-color-control'; class WidgetLabel extends Component { render() { - - const style = { + const style = { fontSize: this.props.widget.customProperties.textSize + 'px', color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor] };