#905 Dashboard edit mode (wip) - refactor + placeholder for target in…

…dicators + dnd widget wrapper

src/assets/css/draggable.css

@@ -93,3 +93,18 @@
     height: 100%;
     float: left;
 }
+
+.draggable-icon-remove {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+}
+
+.dnd-widget {
+    position: relative;
+}
+
+.dnd-placeholder {
+    width: 100%;
+    background-color: $brand-primary-light-color;
+}

src/assets/css/indicator.css

@@ -2,15 +2,22 @@
     border-radius: 3px;
     overflow: hidden;
     margin: .5rem;
+}
+
+.indicators-wrapper {
     display: flex;
+    flex-direction: row;
+}
+
+.indicators-wrapper > * {
+    flex:1;
 }
 
 .indicator {
-    width: 25%;
     border: 1px solid $brand-border-color;
     border-right: none;
-    flex-direction: column;
     display: flex;
+    flex-direction: column;
     align-items: center;
     height: 130px;
     padding: 10px;

src/assets/css/styles.css

@@ -892,6 +892,10 @@ td.pulse-off input {
     padding-top: 10px;
 }
 
+.dashboard-edit-mode {
+    width: 75%;
+}
+
 .dashboard-edit-bar {
     margin: 0 .5rem;
 }

src/components/charts/RawChart.js

@@ -22,6 +22,26 @@ class RawChart extends Component {
         }
     }
 
+    componentDidUpdate(prevProps) {
+        if(
+            prevProps.isMaximize !== this.props.isMaximize ||
+            prevProps.index !== this.props.index ||
+            prevProps.id !== this.props.id
+        ) {
+            if(this.props.chartType === 'Indicator'){
+                this.fetchData();
+            }else{
+                this.setState({
+                    forceChartReRender: true,
+                }, () => {
+                    this.setState({
+                        forceChartReRender: false
+                    })
+                })
+            }
+        }
+    }
+
     componentDidMount(){
         const { pollInterval } = this.props;
 
@@ -85,21 +105,22 @@ class RawChart extends Component {
 
     renderChart() {
         const {
-            id, chartType, caption, fields, groupBy, reRender, height,
+            id, chartType, caption, fields, groupBy, height,
             isMaximize, chartTitle
         } = this.props;
-        const {chartData} = this.state;
+        const {chartData, forceChartReRender} = this.state;
         const data = chartData[0] && chartData[0].values;
 
         switch(chartType){
             case 'BarChart':
                 return(
                     <BarChart
                         {...{
-                            data, groupBy, caption, chartType, height, reRender,
+                            data, groupBy, caption, chartType, height,
                             fields, isMaximize, chartTitle
                         }}
                         chartClass={'chart-' + id}
+                        reRender={forceChartReRender}
                         colors = {[
                             '#89d729', '#9aafbd', '#7688c9', '#c1ea8e',
                             '#c9d5dc', '#aab5e0', '#6aad18', '#298216',
@@ -110,10 +131,11 @@ class RawChart extends Component {
             case 'PieChart':
                 return(
                     <PieChart
-                        {...{data, fields, groupBy, height, reRender,
+                        {...{data, fields, groupBy, height,
                             isMaximize, chartTitle}}
                         chartClass={'chart-' + id}
                         responsive={true}
+                        reRender={forceChartReRender}
                         colors = {[
                             '#89d729', '#9aafbd', '#7688c9', '#c1ea8e',
                             '#c9d5dc', '#aab5e0', '#6aad18', '#298216',

src/components/widget/DraggableWidget.js → src/components/dashboard/ChartWidget.js

@@ -5,50 +5,7 @@ import { DragSource, DropTarget } from 'react-dnd';
 import onClickOutside from 'react-onclickoutside';
 import RawChart from '../charts/RawChart';
 
-const cardSource = {
-    beginDrag(props) {
-        return {
-            id: props.id,
-            index: props.index
-        };
-    }
-};
-
-const cardTarget = {
-    hover(props, monitor) {
-        const dragIndex = monitor.getItem().index;
-        const hoverIndex = props.index;
-
-        // Don't replace items with themselves
-        if (dragIndex === hoverIndex) {
-            return;
-        }
-
-        // Time to actually perform the action
-        props.moveCard(dragIndex, hoverIndex);
-
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
-        monitor.getItem().index = hoverIndex;
-    }
-};
-
-function collect(connect, monitor) {
-    return {
-        connectDragSource: connect.dragSource(),
-        isDragging: monitor.isDragging()
-    };
-}
-
-function connect(connect) {
-    return {
-        connectDropTarget: connect.dropTarget()
-    };
-}
-
-export class DraggableWidget extends Component {
+export class ChartWidget extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -58,18 +15,6 @@ export class DraggableWidget extends Component {
         };
     }
 
-    componentDidUpdate(prevProps) {
-        if(prevProps !== this.props) {
-            this.setState({
-                forceChartReRender: true,
-            }, () => {
-                this.setState({
-                    forceChartReRender: false
-                })
-            })
-        }
-    }
-
     handleClickOutside = () => {
         this.setState({
             toggleWidgetMenu: false
@@ -87,44 +32,32 @@ export class DraggableWidget extends Component {
         this.setState({
             isMaximize: true,
             toggleWidgetMenu: false,
-            forceChartReRender: true,
             height: 500
-        }, () => {
-            this.setState({
-                forceChartReRender: false
-            })
         })
     }
 
     minimizeWidget = () => {
         this.setState({
             isMaximize: false,
             toggleWidgetMenu: false,
-            forceChartReRender: true,
             height: 400
-        }, () => {
-            this.setState({
-                forceChartReRender: false
-            })
         })
     }
 
     render() {
         const {
-            text, isDragging, connectDragSource, connectDropTarget,
+            text,
             hideWidgets, showWidgets, index, idMaximized, id, chartType,
             caption, fields, groupBy, pollInterval
         } = this.props;
 
         const {
-            toggleWidgetMenu, isMaximize, forceChartReRender, height
+            toggleWidgetMenu, isMaximize, height
         } = this.state;
 
-        return connectDragSource(connectDropTarget(
+        return (
             <div className={
-                'draggable-widget' +
                 (isMaximize ? ' draggable-widget-maximize' : '') +
-                (isDragging ? ' dragging' : '') +
                 ((idMaximized !== false) && !isMaximize ? ' hidden-xs-up' : '')
             } >
                 <div
@@ -166,40 +99,17 @@ export class DraggableWidget extends Component {
 
                 <div className="draggable-widget-body">
                     <RawChart
-                        id={id}
-                        chartType={chartType}
-                        caption={caption}
-                        fields={fields}
-                        groupBy={groupBy}
-                        pollInterval={pollInterval}
-                        reRender={forceChartReRender}
+                        {...{
+                            index, chartType, caption, fields, groupBy,
+                            pollInterval, height, isMaximize, id
+                        }}
                         responsive={true}
-                        height={height}
-                        isMaximize={isMaximize}
                         chartTitle={text}
                     />
                 </div>
             </div>
-
-            ));
+        );
     }
 }
 
-DraggableWidget.propTypes = {
-    connectDragSource: PropTypes.func.isRequired,
-    connectDropTarget: PropTypes.func.isRequired,
-    index: PropTypes.number.isRequired,
-    isDragging: PropTypes.bool.isRequired,
-    id: PropTypes.any.isRequired,
-    text: PropTypes.string.isRequired,
-    moveCard: PropTypes.func.isRequired
-};
-
-DraggableWidget =
-    DragSource(ItemTypes.DRAGGABLE_CARD, cardSource, collect)(
-        DropTarget(ItemTypes.DRAGGABLE_CARD, cardTarget, connect)(
-            onClickOutside(DraggableWidget
-        )
-    ));
-
-export default DraggableWidget;
+export default ChartWidget;

src/components/dashboard/DndWidget.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ItemTypes from '../../constants/ItemTypes';
+import { DragSource, DropTarget } from 'react-dnd';
+
+const cardSource = {
+    beginDrag(props) {
+        return {
+            id: props.id,
+            index: props.index
+        };
+    }
+};
+
+const cardTarget = {
+    hover(props, monitor) {
+        const dragIndex = monitor.getItem().index;
+        const hoverIndex = props.index;
+
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex) {
+            return;
+        }
+
+        // Time to actually perform the action
+        props.moveCard(props.entity, dragIndex, hoverIndex);
+
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        monitor.getItem().index = hoverIndex;
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    };
+}
+
+function connect(connect) {
+    return {
+        connectDropTarget: connect.dropTarget()
+    };
+}
+
+export class DndWidget extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {
+            children, connectDragSource, connectDropTarget, isDragging,
+            className, transparent, removeCard, entity, id, placeholder
+        } = this.props;
+
+        if(transparent) return <div {...{className}}>{children}</div>;
+
+        return connectDragSource(connectDropTarget(
+            <div
+                className={
+                    className + ' dnd-widget ' + 
+                    (isDragging ? 'dragging ' : '') +
+                    (placeholder ? 'dnd-placeholder ' : '')
+                }
+            >
+                {!placeholder && <i
+                    className="meta-icon-trash draggable-icon-remove"
+                    onClick={() => removeCard(entity, id)}
+                />}
+                {children}
+            </div>
+        ));
+    }
+}
+
+DndWidget =
+    DragSource(props => props.entity, cardSource, collect)(
+        DropTarget(props => props.entity, cardTarget, connect)(
+            DndWidget
+        )
+    );
+
+export default DndWidget;