[Reliability] Update data table to use React (#2194)

* Add dynamic data table and all necessary columns

* Remove old reliabity table + update reliable index

* Add to grunt

* Update tests

* Clarify comment

* Replace subselects with JOINs

* Cleaned up the main query

* Remove hardcoded subprojects

Gruntfile.js

@@ -49,6 +49,7 @@ module.exports = function(grunt) {
                     'modules/candidate_parameters/js/familyInfo.js': 'modules/candidate_parameters/jsx/familyInfo.js',
                     'modules/candidate_parameters/js/participantStatus.js': 'modules/candidate_parameters/jsx/participantStatus.js',
                     'modules/candidate_parameters/js/probandInfo.js': 'modules/candidate_parameters/jsx/probandInfo.js'
+                    'modules/reliability/js/columnFormatter.js': 'modules/reliability/jsx/columnFormatter.js',
                 }
             }
         },

modules/reliability/js/columnFormatter.js

@@ -0,0 +1,105 @@
+/* exported formatColumn */
+
+/**
+ * Modify behaviour of specified column cells in the Data Table component
+ * @param {string} column - column name
+ * @param {string} cell - cell content
+ * @param {arrray} rowData - array of cell contents for a specific row
+ * @param {arrray} rowHeaders - array of table headers (column names)
+ * @return {*} a formated table cell for a given column
+ */
+function formatColumn(column, cell, rowData, rowHeaders) {
+  // If a column if set as hidden, don't display it
+  if (loris.hiddenHeaders !== undefined && loris.hiddenHeaders.indexOf(column) > -1) {
+    return null;
+  }
+
+  // Create the mapping between rowHeaders and rowData in a row object.
+  var row = {};
+  rowHeaders.forEach(function (header, index) {
+    row[header] = rowData[index];
+  }, this);
+
+  if (column === "PSCID") {
+    if (row["Current Stage"] === "Recycling Bin") {
+      return React.createElement(
+        "td",
+        null,
+        cell,
+        " ",
+        React.createElement(
+          "span",
+          { className: "text-danger" },
+          "(Recycling Bin)"
+        )
+      );
+    }
+
+    if (row["Invalid"] === "yes") {
+      return React.createElement(
+        "td",
+        null,
+        cell,
+        " ",
+        React.createElement(
+          "span",
+          { className: "text-danger" },
+          "(Invalid)"
+        )
+      );
+    }
+
+    if (row["Manual Swap"] === "yes") {
+      return React.createElement(
+        "td",
+        null,
+        cell,
+        " ",
+        React.createElement(
+          "span",
+          { className: "text-danger" },
+          "(Manual)"
+        )
+      );
+    }
+
+    var testName = '/' + row["Instrument"] + '_reliability';
+    var commentID = row['CommentID'];
+    var siteID = row['SiteID'];
+    var url = loris.BaseURL + testName + '?identifier=' + commentID + '&reliability_center_id=' + siteID;
+
+    return React.createElement(
+      "td",
+      null,
+      React.createElement(
+        "a",
+        { href: url },
+        cell
+      )
+    );
+  }
+
+  if (column === 'Reliable') {
+    var reliable = row['Reliable'];
+
+    if (reliable === "Yes") {
+      return React.createElement(
+        "td",
+        { className: "bg-success" },
+        "Yes"
+      );
+    } else if (reliable === "No") {
+      return React.createElement(
+        "td",
+        { className: "bg-danger" },
+        "No"
+      );
+    }
+  }
+
+  return React.createElement(
+    "td",
+    null,
+    cell
+  );
+}

modules/reliability/jsx/columnFormatter.js

@@ -0,0 +1,60 @@
+/* exported formatColumn */
+
+/**
+ * Modify behaviour of specified column cells in the Data Table component
+ * @param {string} column - column name
+ * @param {string} cell - cell content
+ * @param {arrray} rowData - array of cell contents for a specific row
+ * @param {arrray} rowHeaders - array of table headers (column names)
+ * @return {*} a formated table cell for a given column
+ */
+function formatColumn(column, cell, rowData, rowHeaders) {
+  // If a column if set as hidden, don't display it
+  if (loris.hiddenHeaders !== undefined && loris.hiddenHeaders.indexOf(column) > -1) {
+    return null;
+  }
+
+  // Create the mapping between rowHeaders and rowData in a row object.
+  var row = {};
+  rowHeaders.forEach(function(header, index) {
+    row[header] = rowData[index];
+  }, this);
+
+  if (column === "PSCID") {
+    if (row["Current Stage"] === "Recycling Bin") {
+      return (<td>{cell} <span className="text-danger">(Recycling Bin)</span></td>);
+    }
+
+    if (row["Invalid"] === "yes") {
+      return (<td>{cell} <span className="text-danger">(Invalid)</span></td>);
+    }
+
+    if (row["Manual Swap"] === "yes") {
+      return (<td>{cell} <span className="text-danger">(Manual)</span></td>);
+    }
+
+    var testName = '/' + row["Instrument"] + '_reliability';
+    var commentID = row['CommentID'];
+    var siteID = row['SiteID'];
+    var url = loris.BaseURL + testName +
+      '?identifier=' + commentID + '&reliability_center_id=' + siteID;
+
+    return (
+      <td>
+        <a href={url}>{cell}</a>
+      </td>
+    );
+  }
+
+  if (column === 'Reliable') {
+    var reliable = row['Reliable'];
+
+    if (reliable === "Yes") {
+      return <td className="bg-success">Yes</td>;
+    } else if (reliable === "No") {
+      return <td className="bg-danger">No</td>;
+    }
+  }
+
+  return <td>{cell}</td>;
+}