Merge branch 'decoupling-settings-page' into td_SCI_1494_v2

.eslintrc.json

@@ -17,12 +17,7 @@
     }
   },
   "rules": {
-    "import/no-unresolved": [
-      "error",
-      {
-        "ignore": ["app/javascript/"]
-      }
-    ],
+    "import/no-unresolved": [2, {"commonjs": true, "amd": true}],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "spaced-comment": [
       "error",

app/javascript/packs/app/constants/colors.js

@@ -10,3 +10,7 @@ export const ICON_GREEN_COLOR = "#8fd13f";
 export const NOTIFICATION_YES = "#5a8921";
 export const NOTIFICATION_YES_BORDER = "#4d751c";
 export const SIDEBAR_HOVER_GRAY_COLOR = "#D2D2D2";
+
+export const COLOR_ALTO = "#dddddd";
+export const COLOR_GRAY = "#909088";
+export const COLOR_ALABASTER = "#fcfcfc";

app/javascript/packs/shared/data_grid/index.jsx

@@ -0,0 +1,149 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ReactDataGrid from 'react-data-grid';
+import styled from "styled-components";
+import {
+  WHITE_COLOR,
+  COLOR_GRAY
+} from "../../app/constants/colors";
+
+const StyledReactDataGrid = styled(ReactDataGrid)`
+  background-color: inherit;
+
+  .react-grid-Grid {
+    background-color: inherit;
+  }
+
+  .react-grid-Header {
+    .react-grid-HeaderCell {
+      background-color: ${COLOR_GRAY};
+
+      color: ${WHITE_COLOR};
+      font-weight: normal;
+      vertical-align: bottom;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  .react-grid-Canvas {
+    background-color: inherit;
+  }
+`;
+
+class DataGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.transformColumns = this.transformColumns.bind(this);
+    this.setupDefaultProps = this.setupDefaultProps.bind(this);
+
+    this.transformColumns();
+    this.setupDefaultProps();
+
+    // Store the original rows array, and make a copy that
+    // can be used for modifying eg.filtering, sorting
+    this.state = {
+      originalRows: this.props.data,
+      rows: this.props.data.slice(0)
+    };
+  }
+
+  setupDefaultProps() {
+    // Setup the default props if they're not provided
+    if ('rowGetter' in this.props) {
+      this._rowGetter = this.props.rowGetter;
+    } else {
+      this._rowGetter = ((i) => this.state.rows[i]);
+    }
+    this._rowGetter = this._rowGetter.bind(this);
+
+    if ('rowsCount' in this.props) {
+      this._rowsCount = this.props.rowsCount;
+    } else {
+      this._rowsCount = this.props.data.length;
+    }
+
+    if ('onGridSort' in this.props) {
+      this._onGridSort = this.props.onGridSort;
+    } else {
+      this._onGridSort = ((sortColumn, sortDirection) => {
+        const comparer = (a, b) => {
+          if (sortDirection === 'ASC') {
+            return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
+          } else if (sortDirection === 'DESC') {
+            return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
+          }
+          return 0;
+        };
+        let rows;
+        if (sortDirection === 'NONE') {
+          rows = this.state.originalRows.slice(0);
+        } else {
+          rows = this.state.rows.sort(comparer);
+        }
+
+        this.setState({ rows });
+      });
+    }
+    this._onGridSort = this._onGridSort.bind(this);
+  }
+
+  transformColumns() {
+    // Transform columns from the "sciNote" representation into
+    // ReactDataGrid-compatible representation
+    this._columns =
+      this.props.columns
+      .sort((a, b) => a.position - b.position)
+      .filter((col) => (!('visible' in col) || col.visible))
+      .map((col) => ({
+        key: col.textId,
+        name: col.name,
+        locked: col.locked,
+        sortable: col.sortable
+      }));
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const {
+      columns, rowGetter, rowsCount, ...cleanProps
+    } = this.props;
+    return cleanProps;
+  }
+
+  render() {
+    return (
+      <StyledReactDataGrid
+        columns={this._columns}
+        rowGetter={this._rowGetter}
+        rowsCount={this._rowsCount}
+        onGridSort={this._onGridSort}
+        {...this.cleanProps()}
+      />
+    );
+  }
+}
+
+DataGrid.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      isKey: PropTypes.bool.isRequired,
+      textId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      position: PropTypes.number.isRequired,
+      visible: PropTypes.bool,
+      sortable: PropTypes.bool,
+      locked: PropTypes.bool
+    })
+  ).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rowGetter: PropTypes.func,
+  rowsCount: PropTypes.number,
+  onGridSort: PropTypes.func
+};
+
+export default DataGrid;

app/javascript/packs/shared/data_table/index.jsx

@@ -0,0 +1,111 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+import styled from "styled-components";
+import {
+  WHITE_COLOR,
+  COLOR_GRAY,
+  COLOR_ALTO,
+  COLOR_ALABASTER
+} from "../../app/constants/colors";
+
+const StyledBootstrapTable = styled(BootstrapTable)`
+  thead {
+    background-color: ${COLOR_GRAY};
+
+    > tr > th,
+    >tr > td {
+      padding: 6px;
+      padding-right: 30px;
+    }
+
+    > tr > th {
+      border-bottom: 2px solid ${COLOR_ALTO};
+      border-bottom-width: 0;
+      border-left: 2px solid ${COLOR_ALABASTER};
+      color: ${WHITE_COLOR};
+      font-weight: normal;
+      vertical-align: bottom;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  td, th {
+    box-sizing: content-box;
+  }
+
+  td {
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+`;
+
+class DataTable extends Component {
+  static cleanColumnAttributes(col) {
+    // Remove additional attributes from the columns
+    const {
+      id, isKey, textId, name, position, visible,
+      sortable, locked, ...cleanCol
+    } = col;
+    return cleanCol;
+  }
+
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.displayHeader = this.displayHeader.bind(this);
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const {columns, ...cleanProps} = this.props;
+    return cleanProps;
+  }
+
+
+  displayHeader() {
+    const orderedCols = this.props.columns.sort((a, b) => a.position - b.position);
+    return orderedCols.map((col) =>
+      <TableHeaderColumn
+        key={col.id}
+        dataField={col.textId}
+        isKey={col.isKey}
+        hidden={('visible' in col) && !col.visible}
+        dataSort={col.sortable}
+        {...DataTable.cleanColumnAttributes(col)}
+      >
+        {col.name}
+      </TableHeaderColumn>
+    );
+  }
+
+  render() {
+    return (
+      <StyledBootstrapTable {...this.cleanProps()}>
+        {this.displayHeader()}
+      </StyledBootstrapTable>
+    );
+  }
+}
+
+DataTable.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      isKey: PropTypes.bool.isRequired,
+      textId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      position: PropTypes.number.isRequired,
+      visible: PropTypes.bool,
+      sortable: PropTypes.bool,
+      locked: PropTypes.bool
+    })
+  ).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default DataTable;

app/javascript/packs/styles/main.scss

@@ -1,5 +1,6 @@
 @import 'constants';
 @import 'react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css';
+@import '~react-bootstrap-table/dist/react-bootstrap-table.min';
 
 body {
   background-color: $color-concrete;

package.json

@@ -78,6 +78,8 @@
     "styled-components": "^2.1.1",
     "webpack": "^3.2.0",
     "webpack-manifest-plugin": "^1.1.2",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "react-bootstrap-table": "^4.0.0",
+    "react-data-grid": "^2.0.2"
   }
 }