TextualSummary: client side rendering of TextualListview.

Author: martinpovolny

app/helpers/textual_summary_helper.rb

@@ -47,7 +47,6 @@ def process_textual_info(groups, record)
 
         group = {
           :partial => group_result.template,
-          :locals  => group_result.locals,
         }
         if (group_result.template == 'shared/summary/textual') ||
            (group_result.template == 'shared/summary/textual_tags') ||
@@ -69,6 +68,11 @@ def process_textual_info(groups, record)
           group[:title]  = group_result.locals[:title]
           group[:rows]   = group_result.locals[:rows]
           group[:labels] = group_result.locals[:labels]
+        elsif (group_result.template == 'shared/summary/textual_listview')
+          group[:title]    = group_result.locals[:title]
+          group[:headers]  = group_result.locals[:headers]
+          group[:values]   = group_result.locals[:value]
+          group[:colOrder] = group_result.locals[:col_order]
         else
           binding.pry
         end

app/javascript/react/textual_summary/table_list_view.jsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+const simpleRow = (row, i, colOrder) => (
+  <tr key={i} className="no-hover">
+    {colOrder.map(col => <td>{row[col]}</td>)}
+  </tr>
+);
+
+const linkClick = (row, event) => {
+  console.log('linkClick');
+  console.log(row);
+  DoNav(row.link);
+  event.preventDefault();
+};
+
+const clickableRow = (row, i, colOrder) => {
+  const label = __('View the table');
+  return (
+    <tr key={i} onClick={e => linkClick(row, e)}>
+      {colOrder.map(col => <td title={label}>{row[col]}</td>)}
+    </tr>
+  );
+};
+
+const renderRow = (row, i, colOrder) => (
+  row.link ? clickableRow(row, i, colOrder) : simpleRow(row, i, colOrder)
+);
+
+export default function TableListView(props) {
+  return (
+    <table className="table table-bordered table-hover table-striped table-summary-screen">
+      <thead>
+        <tr>
+          <th colSpan={props.headers.length} align="left">{props.title}</th>
+        </tr>
+        <tr>
+          {props.headers.map((header, i) => <th key={i}>{header}</th>)}
+        </tr>
+      </thead>
+      <tbody>
+        {props.values.map((row, i) => renderRow(row, i, props.colOrder))}
+      </tbody>
+    </table>
+  );
+}
+
+TableListView.propTypes = {
+  title: PropTypes.string.isRequired,
+  headers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  values: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+  colOrder: PropTypes.arrayOf(PropTypes.integer).isRequired,
+};

app/javascript/react/textual_summary/textual_group.jsx

@@ -5,6 +5,7 @@ import TagGroup from './tag_group';
 import SimpleTable from './simple_table';
 import OperationRanges from './operation_ranges';
 import MultilinkTable from './multilink_table';
+import TableListView from './table_list_view';
 
 const renderComponent = (props) => {
   switch (props.group.partial) {
@@ -25,6 +26,15 @@ const renderComponent = (props) => {
       return <OperationRanges items={props.group.items} title={props.group.title} />;
     case 'shared/summary/multilink_table':
       return <MultilinkTable items={props.group.items} title={props.group.title} />;
+    case 'shared/summary/textual_listview':
+      return (
+        <TableListView
+          title={props.group.title}
+          headers={props.group.headers}
+          values={props.group.values}
+          colOrder={props.group.colOrder}
+        />
+      );
     default:
       return <span>Error: Unknown summary group type.</span>;
   }