Add expandable content to result table cells

src/client/components/facet_results/ResultTable.js

@@ -46,7 +46,8 @@ const styles = theme => ({
   },
   expandCell: {
     paddingRight: 0,
-    //paddingLeft: 0
+    paddingTop: 0,
+    paddingBottom: 0
   },
   expand: {
     transform: 'rotate(0deg)',
@@ -74,7 +75,6 @@ class ResultTable extends React.Component {
       page = this.props.data.page === -1 ? 0 : this.props.data.page;
       // console.log(`result table mounted WITHOUT page parameter, set page to ${page}`);
     } else {
-
       const qs = this.props.routeProps.location.search.replace('?', '');
       page = parseInt(querystring.parse(qs).page);
       // console.log(`result table mounted with page parameter, set page to ${page}`);
@@ -140,7 +140,6 @@ class ResultTable extends React.Component {
   }
 
   handleExpandRow = rowId => () => {
-    console.log(rowId);
     let expandedRows = this.state.expandedRows;
     if (expandedRows.has(rowId)) {
       expandedRows.delete(rowId);
@@ -152,38 +151,45 @@ class ResultTable extends React.Component {
 
   rowRenderer = row => {
     const { classes } = this.props;
-    //console.log(this.state.expandedRows)
     const expanded = this.state.expandedRows.has(row.id);
+    let hasExpandableContent = false;
+    const dataCells = this.props.data.tableColumns.map(column => {
+      const columnData = row[column.id];
+      if (Array.isArray(columnData)) {
+        hasExpandableContent = true;
+      }
+      return (
+        <ResultTableCell
+          key={column.id}
+          columnId={column.id}
+          data={row[column.id] == null ? '-' : row[column.id]}
+          valueType={column.valueType}
+          makeLink={column.makeLink}
+          sortValues={column.sortValues}
+          numberedList={column.numberedList}
+          minWidth={column.minWidth}
+          container='cell'
+          expanded={expanded}
+        />
+      );
+    });
     return (
       <TableRow key={row.id}>
         <TableCell className={classes.expandCell}>
-          <IconButton
-            className={clsx(classes.expand, {
-              [classes.expandOpen]: expanded,
-            })}
-            onClick={this.handleExpandRow(row.id)}
-            aria-expanded={expanded}
-            aria-label="Show more"
-          >
-            <ExpandMoreIcon />
-          </IconButton>
+          {hasExpandableContent &&
+            <IconButton
+              className={clsx(classes.expand, {
+                [classes.expandOpen]: expanded,
+              })}
+              onClick={this.handleExpandRow(row.id)}
+              aria-expanded={expanded}
+              aria-label="Show more"
+            >
+              <ExpandMoreIcon />
+            </IconButton>
+          }
         </TableCell>
-        {this.props.data.tableColumns.map(column => {
-          return (
-            <ResultTableCell
-              key={column.id}
-              columnId={column.id}
-              data={row[column.id] == null ? '-' : row[column.id]}
-              valueType={column.valueType}
-              makeLink={column.makeLink}
-              sortValues={column.sortValues}
-              numberedList={column.numberedList}
-              minWidth={column.minWidth}
-              container='cell'
-              expanded={expanded}
-            />
-          );
-        })}
+        {dataCells}
       </TableRow>
     );
   }
@@ -201,7 +207,7 @@ class ResultTable extends React.Component {
           count={resultCount}
           rowsPerPage={pagesize}
           rowsPerPageOptions={[5]}
-          page={page == -1 ? 0 : page}
+          page={page == -1 || resultCount == 0 ? 0 : page}
           onChangePage={this.handleChangePage}
           onChangeRowsPerPage={this.handleOnchangeRowsPerPage}
           ActionsComponent={ResultTablePaginationActions}

src/client/components/facet_results/ResultTableCell.js

@@ -4,7 +4,7 @@ import { sortBy, orderBy, has } from 'lodash';
 import TableCell from '@material-ui/core/TableCell';
 import { withStyles } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
-import Typography from '@material-ui/core/Typography';
+//import Typography from '@material-ui/core/Typography';
 
 const styles = () => ({
   valueList: {
@@ -42,12 +42,12 @@ const ResultTableCell = props => {
       return '-';
     }
     else if (Array.isArray(cell)) {
-      if (props.columnId == 'timespan') {
+      if (props.columnId == 'productionTimespan') {
         cell = sortValues ? sortBy(cell, obj => Number(obj.start)) : cell;
       } else {
         cell = sortValues ? orderBy(cell, 'prefLabel') : cell;
       }
-
+      const firstValue = cell[0];
       const listItems = cell.map((item, i) =>
         <li key={i}>
           {makeLink &&
@@ -69,9 +69,23 @@ const ResultTableCell = props => {
         );
       } else {
         return (
-          <ul className={props.classes.valueList}>
-            {listItems}
-          </ul>
+          <React.Fragment>
+            {!props.expanded && !makeLink &&
+              <span>{firstValue.prefLabel} ...</span>}
+            {!props.expanded && makeLink &&
+              <a
+                target='_blank' rel='noopener noreferrer'
+                href={firstValue.dataProviderUrl}
+              >
+                {firstValue.prefLabel} ...
+              </a>
+            }
+            <Collapse in={props.expanded} timeout="auto" unmountOnExit>
+              <ul className={props.classes.valueList}>
+                {listItems}
+              </ul>
+            </Collapse>
+          </React.Fragment>
         );
       }
     } else if (makeLink) {
@@ -181,7 +195,7 @@ const ResultTableCell = props => {
   };
 
   const { data, valueType, makeLink, sortValues, numberedList, minWidth,
-    container, expanded } = props;
+    container } = props;
   let renderer = null;
   let cellStyle = minWidth == null ? {} : { minWidth: minWidth };
   switch (valueType) {
@@ -209,9 +223,6 @@ const ResultTableCell = props => {
     return(
       <TableCell style={cellStyle}>
         {renderer(data, makeLink, sortValues, numberedList)}
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          <Typography>expanded content</Typography>
-        </Collapse>
       </TableCell>
     );
   }