From 747491bf06886186d7af7007b7330cbb91f43378 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Mon, 27 Mar 2017 15:11:23 +0200 Subject: [PATCH] issue #30 fixed widget delete --- src/containers/visualization.js | 166 +++++++++++++++++++------------- 1 file changed, 100 insertions(+), 66 deletions(-) diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 18e75bc..3289d0e 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -47,7 +47,9 @@ class Visualization extends Component { editModal: prevState.editModal || false, modalData: prevState.modalData || null, - modalIndex: prevState.modalIndex || null + modalIndex: prevState.modalIndex || null, + + last_widget_key: prevState.last_widget_key || 0 }; } @@ -85,13 +87,34 @@ class Visualization extends Component { }); } } + + getNewWidgetKey() { + // Increase the counter and update the state + return this.state.last_widget_key++; + } + + transformToWidgetsDict(widgets) { + var widgetsDict = {}; + // Create a new key and make a copy of the widget object + widgets.forEach( (widget) => widgetsDict[this.getNewWidgetKey()] = Object.assign({}, widget) ); + return widgetsDict; + } + + transformToWidgetsList(widgets) { + return Object.keys(widgets).map( (key) => widgets[key]); + } reloadVisualization() { // select visualization by param id - this.state.visualizations.forEach((visualization) => { - if (visualization._id === this.props.params.visualization) { - // JSON.parse(JSON.stringify(obj)) = deep clone to make also copy of widget objects inside - this.setState({ visualization: JSON.parse(JSON.stringify(visualization)), project: null }); + this.state.visualizations.forEach((tempVisualization) => { + if (tempVisualization._id === this.props.params.visualization) { + + // convert widgets list to a dictionary + var visualization = Object.assign({}, tempVisualization, { + widgets: tempVisualization.widgets? this.transformToWidgetsDict(tempVisualization.widgets) : {} + }); + + this.setState({ visualization: visualization, project: null }); AppDispatcher.dispatch({ type: 'projects/start-load', @@ -139,31 +162,44 @@ class Visualization extends Component { widget.height = 200; } - var visualization = this.state.visualization; - visualization.widgets.push(widget); + var new_widgets = this.state.visualization.widgets; + var widget_key = this.getNewWidgetKey(); + new_widgets[widget_key] = widget; + + var visualization = Object.assign({}, this.state.visualization, { + widgets: new_widgets + }); this.setState({ visualization: visualization }); - this.forceUpdate(); } - widgetChange(widget, index) { - // save changes temporarily - var visualization = this.state.visualization; - visualization.widgets[index] = widget; + widgetChange(updated_widget, key) { + + var widgets_update = {}; + widgets_update[key] = updated_widget; + var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update); + var visualization = Object.assign({}, this.state.visualization, { + widgets: new_widgets + }); this.setState({ visualization: visualization }); - this.forceUpdate(); } editWidget(e, data) { - this.setState({ editModal: true, modalData: this.state.visualization.widgets[data.index], modalIndex: data.index }); + this.setState({ editModal: true, modalData: this.state.visualization.widgets[data.key], modalIndex: data.key }); } closeEdit(data) { if (data) { // save changes temporarily - var visualization = this.state.visualization; - visualization.widgets[this.state.modalIndex] = data; + var widgets_update = {}; + widgets_update[this.state.modalIndex] = data; + + var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update); + + var visualization = Object.assign({}, this.state.visualization, { + widgets: new_widgets + }); this.setState({ editModal: false, visualization: visualization }); } else { @@ -172,18 +208,22 @@ class Visualization extends Component { } deleteWidget(e, data) { - // delete widget temporarily - var visualization = this.state.visualization; - visualization.widgets.splice(data.index, 1); - + delete this.state.visualization.widgets[data.key]; + var visualization = Object.assign({}, this.state.visualization, { + widgets: this.state.visualization.widgets + }); this.setState({ visualization: visualization }); - this.forceUpdate(); } saveChanges() { + // Transform to a list + var visualization = Object.assign({}, this.state.visualization, { + widgets: this.transformToWidgetsList(this.state.visualization.widgets) + }); + AppDispatcher.dispatch({ type: 'visualizations/start-edit', - data: this.state.visualization + data: visualization }); this.setState({ editing: false }); @@ -193,63 +233,57 @@ class Visualization extends Component { this.setState({ editing: false, visualization: {} }); this.reloadVisualization(); - this.forceUpdate(); } - moveWidgetAbove(e, data) { + moveWidget(e, data, applyDirection) { + var widget = this.state.visualization.widgets[data.key]; + var updated_widgets = {}; + updated_widgets[data.key] = applyDirection(widget); + var new_widgets = Object.assign({}, this.state.visualization.widgets, updated_widgets); + + var visualization = Object.assign({}, this.state.visualization, { + widgets: new_widgets + }); + this.setState({ visualization: visualization }); + + } + + moveAbove(widget) { // increase z-Order - var visualization = this.state.visualization; - var widget = visualization.widgets[data.index] widget.z++; - - visualization.widgets[data.index] = widget; - this.setState({ visualization: visualization }); - this.forceUpdate(); + return widget; } - moveWidgetToFront(e, data) { + moveToFront(widget) { // increase z-Order - var visualization = this.state.visualization; - var widget = visualization.widgets[data.index] widget.z = 100; - - visualization.widgets[data.index] = widget; - this.setState({ visualization: visualization }); - this.forceUpdate(); + return widget; } - moveWidgetUnderneath(e, data) { + moveUnderneath(widget) { // decrease z-Order - var visualization = this.state.visualization; - var widget = visualization.widgets[data.index] - widget.z--; if (widget.z < 0) { widget.z = 0; } - - visualization.widgets[data.index] = widget; - this.setState({ visualization: visualization }); - this.forceUpdate(); + return widget; } - moveWidgetToBack(e, data) { + moveToBack(widget) { // increase z-Order - var visualization = this.state.visualization; - var widget = visualization.widgets[data.index] widget.z = 0; - - visualization.widgets[data.index] = widget; - this.setState({ visualization: visualization }); - this.forceUpdate(); + return widget; } render() { // calculate widget area height var height = 0; - if (this.state.visualization.widgets) { - this.state.visualization.widgets.forEach((widget) => { + var current_widgets = this.state.visualization.widgets; + + if (current_widgets) { + Object.keys(current_widgets).forEach( (widget_key) => { + var widget = current_widgets[widget_key]; if (widget.y + widget.height > height) { height = widget.y + widget.height; } @@ -298,22 +332,22 @@ class Visualization extends Component { } this.handleDrop(item, position)} editing={this.state.editing}> - {this.state.visualization.widgets != null && - this.state.visualization.widgets.map((widget, index) => ( - this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} /> + {current_widgets != null && + Object.keys(current_widgets).map( (widget_key) => ( + this.widgetChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.grid} /> ))} - {this.state.visualization.widgets != null && - this.state.visualization.widgets.map((widget, index) => ( - - this.editWidget(e, data)}>Edit - this.deleteWidget(e, data)}>Delete + {current_widgets != null && + Object.keys(current_widgets).map( (widget_key) => ( + + this.editWidget(e, data)}>Edit + this.deleteWidget(e, data)}>Delete - this.moveWidgetAbove(e, data)}>Move above - this.moveWidgetToFront(e, data)}>Move to front - this.moveWidgetUnderneath(e, data)}>Move underneath - this.moveWidgetToBack(e, data)}>Move to back + this.moveWidget(e, data, this.moveAbove)}>Move above + this.moveWidget(e, data, this.moveToFront)}>Move to front + this.moveWidget(e, data, this.moveUnderneath)}>Move underneath + this.moveWidget(e, data, this.moveToBack)}>Move to back ))}