Merge pull request #2523 from kongtiaowang/2017-01-18-mri_protocol_vi…

…olations [Mri violations]Update react table mri protocol violations - rebase
aces · Feb 17, 2017 · aa77cce · aa77cce
2 parents 8e3bd7f + b66a62c
commit aa77cce
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 40 deletions.
diff --git a/modules/mri_violations/js/mri_protocol_violations_columnFormatter.js b/modules/mri_violations/js/mri_protocol_violations_columnFormatter.js
diff --git a/modules/mri_violations/jsx/mri_protocol_violations_columnFormatter.js b/modules/mri_violations/jsx/mri_protocol_violations_columnFormatter.js
@@ -0,0 +1,34 @@
+/**
+ * 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) {
+  var url;
+  if (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 === 'PatientName') {
+    url = loris.BaseURL + "/dicom_archive/viewDetails/?tarchiveID=" +
+       row.TarchiveID;
+    return <td>
+                <a href ={url}>{cell}</a>
+             </td>;
+  }
+
+  return <td>{cell}</td>;
+}
+
+window.formatColumn = formatColumn;
+
+export default formatColumn;
+
diff --git a/modules/mri_violations/php/NDB_Menu_Filter_mri_protocol_violations.class.inc b/modules/mri_violations/php/NDB_Menu_Filter_mri_protocol_violations.class.inc
@@ -74,7 +74,8 @@ class NDB_Menu_Mri_Protocol_Violations extends NDB_Menu_Filter
             'mpv.ystep_range',
             'mpv.zstep_range',
             'mpv.time_range',
-            'mpv.SeriesUID'
+            'mpv.SeriesUID',
+            'tarchive.TarchiveID'
         );
         $config=&NDB_Config::singleton();
         $this->validFilters = array(
@@ -85,8 +86,14 @@ class NDB_Menu_Mri_Protocol_Violations extends NDB_Menu_Filter
             'mpv.series_description',
             'mpv.time_run'
         );
-        $this->query = " FROM mri_protocol_violated_scans mpv WHERE 1=1";
-
+        $this->headers  = array('CandID','PSCID','Time_Run','Series_Description',
+              'Minc_Location','PatientName','TR_Range','TE_Range','TI_Range',
+              'Slice_Thickness_Range','Xspace_Range','Yspace_Range','Zspace_Range',
+              'Xstep_Range','Ystep_Range','Zstep_Range','Time_Range','SeriesUID',
+              'TarchiveID');
+        $this->tpl_data['hiddenHeaders'] = json_encode(['TarchiveID']);
+        $this->query = " FROM mri_protocol_violated_scans mpv LEFT JOIN tarchive ON
+                (mpv.PatientName = tarchive.PatientName) WHERE 1=1";
         $this->formToFilter = array(
                 'CandID' => 'mpv.CandID',
                 'PSCID' => 'mpv.PSCID',
@@ -154,5 +161,22 @@ class NDB_Menu_Mri_Protocol_Violations extends NDB_Menu_Filter
         );
         return $mri_protocols;
     }
+    /**
+     * Gathers JS dependecies and merge them with the parent
+     *
+     * @return array of javascript to be inserted
+     */
+    function getJSDependencies()
+    {
+        $factory = NDB_Factory::singleton();
+        $baseURL = $factory->settings()->getBaseURL();
+        $deps    = parent::getJSDependencies();
+        return array_merge(
+            $deps,
+            array(
+                $baseURL . "/mri_violations/js/mri_protocol_violations_columnFormatter.js",
+            )
+        );
+    }
 }
 ?>
diff --git a/modules/mri_violations/templates/menu_mri_protocol_violations.tpl b/modules/mri_violations/templates/menu_mri_protocol_violations.tpl
@@ -124,44 +124,20 @@
                     <td align="right" id="pageLinks"></td>
                 </tr>
             </table>
-
-            <table class="dynamictable table table-hover table-primary table-bordered" border="0" width="100%">
-                <thead>
-                <tr class="info">
-                    <th nowrap="nowrap">No.</th>
-                    {section name=header loop=$headers}
-                        <th nowrap="nowrap"><a href="{$baseurl}/mri_violations/?submenu=mri_protocol_violations&filter[order][field]={$headers[header].name}&filter[order][fieldOrder]={$headers[header].fieldOrder}">{$headers[header].displayName}</a></th>
-                    {/section}
-                </tr>
-                </thead>
-                <tbody>
-                {section name=item loop=$items}
-                    <tr>
-                        <!-- print out data rows -->
-                        {section name=piece loop=$items[item]}
-                            <td nowrap="nowrap" bgcolor="{$items[item][piece].bgcolor}">
-                                {$items[item][piece].value}
-                            </td>
-                        {/section}
-                    </tr>
-                    {sectionelse}
-                    <tr><td colspan="19">No data found</td></tr>
-                {/section}
-                </tbody>
-            </table>
-        </div>
+          <div class="dynamictable" id="datatable"></div> 
+
+      </div>
     </div>
 </div>
 <script>
-var pageLinks = RPaginationLinks(
-{
-    RowsPerPage : {$rowsPerPage},
-    Total: {$TotalItems},
-    onChangePage: function(pageNum) {
-        location.href="{$baseurl}/mri_violations/?submenu=mri_protocol_violations&filter[order][field]={$filterfield}&filter[order][fieldOrder]={$filterfieldOrder}&pageID=" + pageNum
-    },
-    Active: {$pageID}
-});
-ReactDOM.render(pageLinks, document.getElementById("pageLinks"));
-</script>
 
+loris.hiddenHeaders = {(empty($hiddenHeaders))? [] : $hiddenHeaders };
+var table = RDynamicDataTable({
+     "DataURL" : "{$baseurl}/mri_violations/?submenu=mri_protocol_violations&format=json",
+     "getFormattedCell" : formatColumn,
+     "freezeColumn" : "PatientName"
+     
+  });
+ReactDOM.render(table, document.getElementById("datatable"));
+
+</script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -40,6 +40,7 @@ var config = {
     './modules/server_processes_manager/js/columnFormatter.js': './modules/server_processes_manager/jsx/columnFormatter.js',
     './modules/mri_violations/js/mri_protocol_check_violations_columnFormatter.js': './modules/mri_violations/jsx/mri_protocol_check_violations_columnFormatter.js',
     './modules/mri_violations/js/columnFormatter.js': './modules/mri_violations/jsx/columnFormatter.js',
+    './modules/mri_violations/js/mri_protocol_violations_columnFormatter.js': './modules/mri_violations/jsx/mri_protocol_violations_columnFormatter.js',
     './modules/user_accounts/js/columnFormatter.js': './modules/user_accounts/jsx/columnFormatter.js',
     './modules/reliability/js/columnFormatter.js': './modules/reliability/jsx/columnFormatter.js',
     './modules/conflict_resolver/js/resolved_conflicts_columnFormatter.js': './modules/conflict_resolver/jsx/resolved_conflicts_columnFormatter.js',