Object list: custom component for events

src/client/components/facet_results/ObjectListCollapsible.js

@@ -5,6 +5,7 @@ import Collapse from '@material-ui/core/Collapse';
 import { ISOStringToDate } from './Dates';
 import { orderBy, has } from 'lodash';
 import ObjectListItem from './ObjectListItem';
+import ObjectListItemEvent from './ObjectListItemEvent';
 
 const styles = () => ({
   valueList: {
@@ -24,6 +25,9 @@ const styles = () => ({
 
 const ObjectList = props => {
 
+  const { sortValues, makeLink, externalLink, linkAsButton, columnId } = props;
+  let { data } = props;
+
   const sortList = data => {
     if (has(props, 'columnId') && props.columnId.endsWith('Timespan')) {
       data = sortValues
@@ -43,8 +47,33 @@ const ObjectList = props => {
     return data;
   };
 
-  const { sortValues, makeLink, externalLink, linkAsButton } = props;
-  let { data } = props;
+  const renderItem = ({ collapsed, itemData, isFirstValue = false }) => {
+    if (columnId === 'event') {
+      return (
+        <React.Fragment>
+          <ObjectListItemEvent
+            data={itemData}
+            isFirstValue={isFirstValue}
+          />
+          {collapsed && <span> ...</span>}
+        </React.Fragment>
+
+      );
+    } else {
+      return(
+        <React.Fragment>
+          <ObjectListItem
+            data={itemData}
+            makeLink={makeLink}
+            externalLink={externalLink}
+            linkAsButton={linkAsButton}
+          />
+          {collapsed && <span> ...</span>}
+        </React.Fragment>
+      );
+    }
+  };
+
   if (data == null || data === '-') {
     return '-';
   }
@@ -52,26 +81,12 @@ const ObjectList = props => {
     data = sortList(data);
     return (
       <React.Fragment>
-        {!props.expanded &&
-          <ObjectListItem
-            data={data[0]}
-            makeLink={makeLink}
-            externalLink={externalLink}
-            linkAsButton={linkAsButton}
-            collapsed={true}
-          />
-        }
+        {!props.expanded && renderItem({ collapsed: true, itemData: data[0], isFirstValue: true })}
         <Collapse in={props.expanded} timeout="auto" unmountOnExit>
           <ul className={props.classes.valueList}>
             {data.map(item =>
               <li key={item.id}>
-                <ObjectListItem
-                  data={item}
-                  makeLink={makeLink}
-                  externalLink={externalLink}
-                  linkAsButton={linkAsButton}
-                  collapsed={false}
-                />
+                {renderItem({ collapsed: false, itemData: item })}
               </li>
             )}
           </ul>
@@ -79,15 +94,7 @@ const ObjectList = props => {
       </React.Fragment>
     );
   } else {
-    return (
-      <ObjectListItem
-        data={data}
-        makeLink={makeLink}
-        externalLink={externalLink}
-        linkAsButton={linkAsButton}
-        collapsed={false}
-      />
-    );
+    return renderItem({ collapsed: false, itemData: data, isFirstValue: true });
   }
 };
 

src/client/components/facet_results/ObjectListItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ObjectListItemLink from './ObjectListItemLink';
 
 const ObjectListItem = props => {
-  const { data, makeLink, externalLink, linkAsButton, collapsed } = props;
+  const { data, makeLink, externalLink, linkAsButton } = props;
   let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
   return (
     <React.Fragment>
@@ -16,7 +16,6 @@ const ObjectListItem = props => {
           linkAsButton={linkAsButton}
         />
       }
-      {collapsed && ' ...'}
     </React.Fragment>
   );
 };
@@ -26,7 +25,6 @@ ObjectListItem.propTypes = {
   makeLink: PropTypes.bool.isRequired,
   externalLink: PropTypes.bool.isRequired,
   linkAsButton: PropTypes.bool,
-  collapsed: PropTypes.bool.isRequired
 };
 
 export default ObjectListItem;

src/client/components/facet_results/ObjectListItemEvent.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
 import ObjectListItemLink from './ObjectListItemLink';
 
+
+const styles = () => ({
+  dateContainer: {
+    width: 180,
+    display: 'inline-block'
+  }
+});
+
 const ObjectListItemEvent = props => {
-  const { data, collapsed } = props;
+  const { data, isFirstValue } = props;
   let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
   return (
     <React.Fragment>
+      <span className={isFirstValue ? null : props.classes.dateContainer}>
+        {data.date == null ? 'No date ' : `${data.date} `}
+      </span>
       <ObjectListItemLink
         data={data}
         label={label}
+        externalLink={false}
       />
       {data.observedOwner &&
         <React.Fragment>
           {': '}
-          {data.observedOwner}
+          <ObjectListItemLink
+            data={data.observedOwner}
+            label={data.observedOwner.prefLabel}
+            externalLink={false}
+          />
         </React.Fragment>
       }
-      {collapsed && ' ...'}
     </React.Fragment>
   );
 };
 
-ObjectListItemEvent.PropTypes = {
-  data: PropTypes.bool.isRequired,
-  collapsed: PropTypes.bool.isRequired
+ObjectListItemEvent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  isFirstValue: PropTypes.bool.isRequired
 };
 
-export default ObjectListItemEvent;
+export default withStyles(styles)(ObjectListItemEvent);

src/client/components/facet_results/StringList.js

@@ -2,10 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
-// import Button from '@material-ui/core/Button';
-// import { ISOStringToDate } from './Dates';
-// import { Link } from 'react-router-dom';
-// import { orderBy, has } from 'lodash';
 
 const styles = () => ({
   valueList: {
@@ -16,13 +12,6 @@ const styles = () => ({
   valueListNoBullets: {
     listStyle: 'none',
     paddingLeft: 0
-  },
-  noDate: {
-    marginRight: 20
-  },
-  stringContainer: {
-    maxHeight: 200,
-    overflow: 'auto'
   }
 });