Add UI to change the order of components and metrics

packages/frontend/src/actions/components.js

@@ -64,10 +64,10 @@ export const postComponent = (name, description, status, callbacks = {}) => {
   }
 }
 
-export const updateComponent = (componentID, name, description, status, callbacks = {}) => {
+export const updateComponent = (componentID, name, description, status, order, callbacks = {}) => {
   return async dispatch => {
     try {
-      const body = { name, description, status }
+      const body = { name, description, status, order }
       const json = await sendRequest(apiURL + 'components/' + componentID, {
         headers: buildHeaders(),
         method: 'PATCH',

packages/frontend/src/actions/metrics.js

@@ -113,10 +113,10 @@ export const postMetric = (type, props, title, status, unit, description, callba
   }
 }
 
-export const updateMetric = (metricID, type, props, title, status, unit, description, callbacks = {}) => {
+export const updateMetric = (metricID, type, props, title, status, unit, description, order, callbacks = {}) => {
   return async dispatch => {
     try {
-      const body = { type, props, title, status, unit, description }
+      const body = { type, props, title, status, unit, description, order }
       const json = await sendRequest(apiURL + 'metrics/' + metricID, {
         headers: buildHeaders(),
         method: 'PATCH',

packages/frontend/src/components/adminPage/ComponentDialog/ComponentDialog.js

@@ -4,8 +4,8 @@ import classnames from 'classnames'
 import Button from 'components/common/Button'
 import ErrorMessage from 'components/common/ErrorMessage'
 import TextField from 'components/common/TextField'
-import { componentStatuses } from 'utils/status'
 import { mountDialog, unmountDialog } from 'utils/dialog'
+import { componentStatuses } from 'utils/status'
 import classes from './ComponentDialog.scss'
 
 export const dialogType = {
@@ -20,7 +20,8 @@ export default class ComponentDialog extends React.Component {
       componentID: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
       description: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired
+      status: PropTypes.string.isRequired,
+      order: PropTypes.number.isRequired
     }),
     dialogType: PropTypes.number.isRequired,
     postComponent: PropTypes.func.isRequired,
@@ -75,7 +76,7 @@ export default class ComponentDialog extends React.Component {
 
   handleClickEditButton = (e) => {
     this.props.updateComponent(this.props.component.componentID, this.state.name, this.state.description,
-      this.state.status, this.updateCallbacks)
+                               this.state.status, this.props.component.order, this.updateCallbacks)
   }
 
   handleHideDialog = () => {

packages/frontend/src/components/adminPage/Components/Components.js

@@ -22,9 +22,11 @@ export default class Components extends React.Component {
       componentID: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
       description: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired
+      status: PropTypes.string.isRequired,
+      order: PropTypes.number.isRequired
     }).isRequired).isRequired,
     fetchComponents: PropTypes.func.isRequired,
+    updateComponent: PropTypes.func.isRequired,
     deleteComponent: PropTypes.func.isRequired
   }
 
@@ -38,14 +40,16 @@ export default class Components extends React.Component {
     }
   }
 
+  callbacks = {
+    onLoad: () => { this.setState({isFetching: true}) },
+    onSuccess: () => { this.setState({isFetching: false}) },
+    onFailure: (msg) => {
+      this.setState({isFetching: false, message: msg})
+    }
+  }
+
   componentDidMount () {
-    this.props.fetchComponents({
-      onLoad: () => { this.setState({isFetching: true}) },
-      onSuccess: () => { this.setState({isFetching: false}) },
-      onFailure: (msg) => {
-        this.setState({isFetching: false, message: msg})
-      }
-    })
+    this.props.fetchComponents(this.callbacks)
   }
 
   handleShowDialog = (type, component) => {
@@ -68,7 +72,25 @@ export default class Components extends React.Component {
     this.setState({ component: null, dialogType: dialogType.none })
   }
 
-  renderListItem = (component) => {
+  handleClickArrowUpward = (i) => {
+    if (i === 0) { return () => {} }
+    return this.handleClickArrowDownward(i - 1)
+  }
+
+  handleClickArrowDownward = (i) => {
+    return () => {
+      if (i === this.props.components.length - 1) { return }
+      const { components } = this.props
+      const clickedComp = components[i]
+      const orderA = components[i + 1].order
+      const orderB = (i + 2 < components.length ? components[i + 2].order : Math.floor(new Date().getTime() / 1000))
+      const newOrder = Math.floor((orderA + orderB) / 2)
+      this.props.updateComponent(clickedComp.componentID, clickedComp.name, clickedComp.description,
+                                 clickedComp.status, newOrder, this.callbacks)
+    }
+  }
+
+  renderListItem = (component, i) => {
     let statusColor = getComponentColor(component.status)
     return (
       <li key={component.componentID} className='mdl-list__item mdl-list__item--two-line mdl-shadow--2dp'>
@@ -79,16 +101,17 @@ export default class Components extends React.Component {
           <span>{component.name}</span>
           <span className='mdl-list__item-sub-title'>{component.description}</span>
         </span>
-        <span className='mdl-list__item-secondary-content'>
-          <div className='mdl-grid'>
-            <div className='mdl-cell mdl-cell--6-col'>
-              <Button plain name='Edit'
-                onClick={this.handleShowEditDialog(component)} />
-            </div>
-            <div className='mdl-cell mdl-cell--6-col'>
-              <Button plain name='Delete'
-                onClick={this.handleShowDeleteDialog(component)} />
-            </div>
+        <span className={classnames('mdl-list__item-secondary-content', classes['buttons'])}>
+          <Button plain name='Edit' onClick={this.handleShowEditDialog(component)} />
+          <Button plain name='Delete' onClick={this.handleShowDeleteDialog(component)} />
+          <div className={classnames(classes['order-buttons'])}>
+            <i className={classnames(classes['order-icon'], 'material-icons')} onClick={this.handleClickArrowUpward(i)}>
+              arrow_upward
+            </i>
+            <i className={classnames(classes['order-icon'], 'material-icons')}
+              onClick={this.handleClickArrowDownward(i)}>
+              arrow_downward
+            </i>
           </div>
         </span>
       </li>
@@ -121,8 +144,8 @@ export default class Components extends React.Component {
   }
 
   render () {
-    const { components } = this.props
-    const componentItems = components.map(this.renderListItem)
+    const componentItems = this.props.components.map(this.renderListItem)
+
     const dialog = this.renderDialog()
     const textInButton = (<div>
       <i className='material-icons'>add</i>

packages/frontend/src/components/adminPage/Components/Components.scss

@@ -9,6 +9,24 @@
   background-color: #FFFFFF !important;
 }
 
+.buttons {
+  flex-direction: row !important;
+}
+
+.order-buttons {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.order-icon {
+  background-color: #FFFFFF !important;
+  color: #757575;
+  font-size: 18px;
+  height: 36px;
+  line-height: 36px;
+  cursor: pointer;
+}
+
 .showDialogButton {
   text-align: right;
 }

packages/frontend/src/components/adminPage/Components/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { fetchComponents, deleteComponent } from 'actions/components'
+import { fetchComponents, updateComponent, deleteComponent } from 'actions/components'
 import Components from './Components'
 
 const mapStateToProps = (state) => {
@@ -10,7 +10,7 @@ const mapStateToProps = (state) => {
 }
 
 function mapDispatchToProps (dispatch) {
-  return bindActionCreators({fetchComponents, deleteComponent}, dispatch)
+  return bindActionCreators({fetchComponents, updateComponent, deleteComponent}, dispatch)
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Components)

packages/frontend/src/components/adminPage/MetricDialog/MetricDialog.js

@@ -26,7 +26,8 @@ export default class MetricDialog extends React.Component {
       title: PropTypes.string.isRequired,
       status: PropTypes.string.isRequired,
       unit: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired
+      description: PropTypes.string.isRequired,
+      order: PropTypes.number.isRequired
     }),
     dialogType: PropTypes.number.isRequired,
     postMetric: PropTypes.func.isRequired,
@@ -100,24 +101,14 @@ export default class MetricDialog extends React.Component {
   }
 
   handleClickAddButton = (e) => {
-    this.props.postMetric(this.state.type,
-                          this.state.props,
-                          this.state.title,
-                          this.state.status,
-                          this.state.unit,
-                          this.state.description,
-                          this.updateCallbacks)
+    this.props.postMetric(this.state.type, this.state.props, this.state.title, this.state.status,
+                          this.state.unit, this.state.description, this.updateCallbacks)
   }
 
   handleClickEditButton = (e) => {
-    this.props.updateMetric(this.props.metric.metricID,
-                            this.state.type,
-                            this.state.props,
-                            this.state.title,
-                            this.state.status,
-                            this.state.unit,
-                            this.state.description,
-                            this.updateCallbacks)
+    this.props.updateMetric(this.props.metric.metricID, this.state.type, this.state.props,
+                            this.state.title, this.state.status, this.state.unit,
+                            this.state.description, this.props.metric.order, this.updateCallbacks)
   }
 
   handleHideDialog = () => {

packages/frontend/src/components/adminPage/Metrics/Metrics.js

@@ -22,11 +22,16 @@ export default class Metrics extends React.Component {
   static propTypes = {
     metrics: PropTypes.arrayOf(PropTypes.shape({
       metricID: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      props: PropTypes.object.isRequired,
       title: PropTypes.string.isRequired,
+      status: PropTypes.string.isRequired,
+      unit: PropTypes.string.isRequired,
       description: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired
+      order: PropTypes.number.isRequired
     }).isRequired).isRequired,
     fetchMetrics: PropTypes.func.isRequired,
+    updateMetric: PropTypes.func.isRequired,
     deleteMetric: PropTypes.func.isRequired
   }
 
@@ -40,14 +45,16 @@ export default class Metrics extends React.Component {
     }
   }
 
+  callbacks = {
+    onLoad: () => { this.setState({isFetching: true}) },
+    onSuccess: () => { this.setState({isFetching: false}) },
+    onFailure: (msg) => {
+      this.setState({isFetching: false, message: msg})
+    }
+  }
+
   componentDidMount () {
-    this.props.fetchMetrics({
-      onLoad: () => { this.setState({isFetching: true}) },
-      onSuccess: () => { this.setState({isFetching: false}) },
-      onFailure: (msg) => {
-        this.setState({isFetching: false, message: msg})
-      }
-    })
+    this.props.fetchMetrics(this.callbacks)
   }
 
   handleShowDialog = (type, metricID) => {
@@ -74,7 +81,26 @@ export default class Metrics extends React.Component {
     this.setState({ metricID: null, dialogType: dialogType.none })
   }
 
-  renderListItem = (metric) => {
+  handleClickArrowUpward = (i) => {
+    if (i === 0) { return () => {} }
+    return this.handleClickArrowDownward(i - 1)
+  }
+
+  handleClickArrowDownward = (i) => {
+    return () => {
+      if (i === this.props.metrics.length - 1) { return }
+      const { metrics } = this.props
+      const clickedMetric = metrics[i]
+      const orderA = metrics[i + 1].order
+      const orderB = (i + 2 < metrics.length ? metrics[i + 2].order : Math.floor(new Date().getTime() / 1000))
+      const newOrder = Math.floor((orderA + orderB) / 2)
+      this.props.updateMetric(clickedMetric.metricID, clickedMetric.type, clickedMetric.props,
+                              clickedMetric.title, clickedMetric.status, clickedMetric.unit,
+                              clickedMetric.description, newOrder, this.callbacks)
+    }
+  }
+
+  renderListItem = (metric, i) => {
     let statusColor = getMetricColor(metric.status)
     return (
       <li key={metric.metricID} className='mdl-list__item mdl-list__item--two-line mdl-shadow--2dp'>
@@ -85,20 +111,18 @@ export default class Metrics extends React.Component {
           <span>{metric.title}</span>
           <span className='mdl-list__item-sub-title'>{metric.description}</span>
         </span>
-        <span className='mdl-list__item-secondary-content'>
-          <div className='mdl-grid'>
-            <div className='mdl-cell mdl-cell--4-col'>
-              <Button plain name='Preview'
-                onClick={this.handleShowPreviewDialog(metric.metricID)} />
-            </div>
-            <div className='mdl-cell mdl-cell--3-col'>
-              <Button plain name='Edit'
-                onClick={this.handleShowEditDialog(metric.metricID)} />
-            </div>
-            <div className='mdl-cell mdl-cell--5-col'>
-              <Button plain name='Delete'
-                onClick={this.handleShowDeleteDialog(metric.metricID)} />
-            </div>
+        <span className={classnames('mdl-list__item-secondary-content', classes['buttons'])}>
+          <Button plain name='Preview' onClick={this.handleShowPreviewDialog(metric.metricID)} />
+          <Button plain name='Edit' onClick={this.handleShowEditDialog(metric.metricID)} />
+          <Button plain name='Delete' onClick={this.handleShowDeleteDialog(metric.metricID)} />
+          <div className={classnames(classes['order-buttons'])}>
+            <i className={classnames(classes['order-icon'], 'material-icons')} onClick={this.handleClickArrowUpward(i)}>
+              arrow_upward
+            </i>
+            <i className={classnames(classes['order-icon'], 'material-icons')}
+              onClick={this.handleClickArrowDownward(i)}>
+              arrow_downward
+            </i>
           </div>
         </span>
       </li>

packages/frontend/src/components/adminPage/Metrics/Metrics.scss

@@ -9,6 +9,24 @@
   background-color: #FFFFFF !important;
 }
 
+.buttons {
+  flex-direction: row !important;
+}
+
+.order-buttons {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.order-icon {
+  background-color: #FFFFFF !important;
+  color: #757575;
+  font-size: 18px;
+  height: 36px;
+  line-height: 36px;
+  cursor: pointer;
+}
+
 .showDialogButton {
   text-align: right;
 }

packages/frontend/src/components/adminPage/Metrics/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { fetchMetrics, deleteMetric } from 'actions/metrics'
+import { fetchMetrics, updateMetric, deleteMetric } from 'actions/metrics'
 import Metrics from './Metrics'
 
 const mapStateToProps = (state) => {
@@ -10,7 +10,7 @@ const mapStateToProps = (state) => {
 }
 
 function mapDispatchToProps (dispatch) {
-  return bindActionCreators({fetchMetrics, deleteMetric}, dispatch)
+  return bindActionCreators({fetchMetrics, updateMetric, deleteMetric}, dispatch)
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Metrics)