@collectionspace/cspace-public-browser 1.5.1

package/src/components/detail/DetailNavBar.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import Immutable from 'immutable';
+import get from 'lodash/get';
+import config from '../../config';
+import { searchParamsToQueryString } from '../../helpers/urlHelpers';
+import styles from '../../../styles/cspace/DetailNavBar.css';
+import linkStyles from '../../../styles/cspace/Link.css';
+
+const propTypes = {
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+  prev: PropTypes.shape({
+    'ecm:name': PropTypes.string,
+  }),
+  next: PropTypes.shape({
+    'ecm:name': PropTypes.string,
+  }),
+};
+
+const defaultProps = {
+  prev: undefined,
+  next: undefined,
+};
+
+const messages = defineMessages({
+  search: {
+    id: 'detailNavBar.search',
+    defaultMessage: 'Return to search',
+  },
+  prev: {
+    id: 'detailNavBar.prev',
+    defaultMessage: 'Previous',
+  },
+  next: {
+    id: 'detailNavBar.next',
+    defaultMessage: 'Next',
+  },
+});
+
+export default function DetailNavBar(props) {
+  const {
+    params,
+    prev,
+    next,
+  } = props;
+
+  const index = params.get('index');
+  const searchParams = params.get('searchParams');
+
+  if (!searchParams || typeof index === 'undefined') {
+    return null;
+  }
+
+  const searchParamsObj = searchParams.toJS();
+  const detailPath = config.get('detailPath');
+
+  let prevLink;
+  let nextLink;
+
+  if (prev) {
+    const csid = get(prev, 'ecm:name');
+
+    prevLink = (
+      <span>
+        <Link
+          className={linkStyles.prev}
+          to={{
+            pathname: `/${detailPath}/${csid}`,
+            state: {
+              index: index - 1,
+              searchParams: searchParamsObj,
+            },
+          }}
+        >
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.prev} />
+        </Link>
+      </span>
+    );
+  }
+
+  if (next) {
+    const csid = get(next, 'ecm:name');
+
+    nextLink = (
+      <span>
+        <Link
+          className={linkStyles.next}
+          to={{
+            pathname: `/${detailPath}/${csid}`,
+            state: {
+              index: index + 1,
+              searchParams: searchParamsObj,
+            },
+          }}
+        >
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.next} />
+        </Link>
+      </span>
+    );
+  }
+
+  const queryString = searchParamsToQueryString(searchParams);
+
+  return (
+    <nav className={styles.common}>
+      <div>
+        <Link
+          className={linkStyles.back}
+          to={{
+            pathname: '/search',
+            search: `?${queryString}`,
+          }}
+        >
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.search} />
+        </Link>
+      </div>
+
+      <div>
+        {prevLink}
+        {nextLink}
+      </div>
+    </nav>
+  );
+}
+
+DetailNavBar.propTypes = propTypes;
+DetailNavBar.defaultProps = defaultProps;

package/src/components/detail/DetailPanel.jsx

@@ -0,0 +1,215 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import Immutable from 'immutable';
+import FieldList from './FieldList';
+import DetailNavBar from './DetailNavBar';
+import ImageGallery from './ImageGalleryContainer';
+import InstitutionIndex from './InstitutionIndexContainer';
+import InstitutionSection from './InstitutionSectionContainer';
+import ExhibitionSection from './ExhibitionSection';
+import config from '../../config';
+import styles from '../../../styles/cspace/DetailPanel.css';
+
+const propTypes = {
+  adjacents: PropTypes.shape({
+    prev: PropTypes.object,
+    next: PropTypes.object,
+  }),
+  data: PropTypes.shape({
+    'collectionspace_core:refName': PropTypes.string,
+    'collectionspace_denorm:title': PropTypes.string,
+    'collectionspace_denorm:exhibition': PropTypes.array,
+    'collectionobjects_common:objectHistoryNote': PropTypes.string,
+    'collectionobjects_common:ownersContributionNote': PropTypes.string,
+    'collectionobjects_common:viewersContributionNote': PropTypes.string,
+  }),
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+  readDetail: PropTypes.func,
+};
+
+const defaultProps = {
+  adjacents: {},
+  data: undefined,
+  readDetail: () => undefined,
+};
+
+export default class DetailPanel extends Component {
+  componentDidMount() {
+    this.readDetail();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      params,
+    } = this.props;
+
+    const {
+      params: prevParams,
+    } = prevProps;
+
+    if (params.get('csid') !== prevParams.get('csid')) {
+      this.readDetail();
+    }
+  }
+
+  readDetail() {
+    const {
+      readDetail,
+    } = this.props;
+
+    readDetail();
+  }
+
+  renderDescription() {
+    const {
+      data,
+    } = this.props;
+
+    const descFormatter = config.get('detailDescription');
+    const desc = descFormatter && descFormatter(data);
+
+    return <p>{desc}</p>;
+  }
+
+  renderFieldList() {
+    const {
+      data,
+    } = this.props;
+
+    return (
+      <FieldList config={config.get('detailFields')} data={data} />
+    );
+  }
+
+  renderHeader() {
+    const {
+      adjacents,
+      data,
+      params,
+    } = this.props;
+
+    const titleFormatter = config.get('detailTitle');
+    const title = titleFormatter && titleFormatter(data);
+
+    const subtitleFormatter = config.get('detailSubtitle');
+    const subtitle = subtitleFormatter && subtitleFormatter(data);
+
+    const {
+      'collectionspace_core:refName': refName,
+    } = data;
+
+    return (
+      <header>
+        <DetailNavBar params={params} prev={adjacents.prev} next={adjacents.next} />
+        {title && <h1>{title}</h1>}
+        {subtitle && <h2>{subtitle}</h2>}
+        <InstitutionIndex refName={refName} />
+      </header>
+    );
+  }
+
+  renderImageGallery() {
+    const {
+      data,
+    } = this.props;
+
+    const referenceField = config.get('referenceField');
+    const referenceValue = data[referenceField];
+
+    return (
+      <ImageGallery referenceValue={referenceValue} />
+    );
+  }
+
+  renderPageTitle() {
+    const {
+      data,
+    } = this.props;
+
+    const {
+      'collectionspace_denorm:title': title,
+    } = data;
+
+    return (
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+    );
+  }
+
+  renderInstitutions() {
+    const {
+      data,
+      params,
+    } = this.props;
+
+    const institutionsConfig = config.get('institutions');
+
+    if (!institutionsConfig) {
+      return null;
+    }
+
+    const selectedInstitutionId = params.get('#');
+
+    const referenceField = config.get('referenceField');
+    const referenceValue = data[referenceField];
+
+    return (
+      <InstitutionSection
+        config={institutionsConfig}
+        selectedInstitutionId={selectedInstitutionId}
+        referenceValue={referenceValue}
+      />
+    );
+  }
+
+  renderExhibition() {
+    const {
+      data,
+    } = this.props;
+
+    const exhibition = data['collectionspace_denorm:exhibition'];
+
+    if (exhibition && exhibition.length > 0) {
+      const historyNote = data['collectionobjects_common:objectHistoryNote'];
+      const ownerConrtibutionNote = data['collectionobjects_common:ownersContributionNote'];
+      const viewerContributionNote = data['collectionobjects_common:viewersContributionNote'];
+
+      return (
+        <ExhibitionSection
+          exhibition={exhibition[0]}
+          historyNote={historyNote}
+          ownerConrtibutionNote={ownerConrtibutionNote}
+          viewerContributionNote={viewerContributionNote}
+        />
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const {
+      data,
+    } = this.props;
+
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <div className={styles.common}>
+        {this.renderPageTitle()}
+        {this.renderHeader()}
+        {this.renderDescription()}
+        {this.renderImageGallery()}
+        {this.renderFieldList()}
+        {this.renderInstitutions()}
+        {this.renderExhibition()}
+      </div>
+    );
+  }
+}
+
+DetailPanel.propTypes = propTypes;
+DetailPanel.defaultProps = defaultProps;

package/src/components/detail/DetailPanelContainer.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import DetailPanel from './DetailPanel';
+
+import {
+  readDetail,
+} from '../../actions/detailActions';
+
+import {
+  getDetailAdjacents,
+  getDetailData,
+  getDetailError,
+  isDetailPending,
+} from '../../reducers';
+
+const mapStateToProps = (state) => ({
+  adjacents: getDetailAdjacents(state),
+  data: getDetailData(state),
+  error: getDetailError(state),
+  isPending: isDetailPending(state),
+});
+
+const mapDispatchToProps = {
+  readDetail,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DetailPanel);

package/src/components/detail/ExhibitionSection.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import styles from '../../../styles/cspace/ExhibitionSection.css';
+
+const propTypes = {
+  exhibition: PropTypes.shape({
+    title: PropTypes.string,
+    generalNote: PropTypes.string,
+    curatorialNote: PropTypes.string,
+  }),
+  historyNote: PropTypes.string,
+  ownerConrtibutionNote: PropTypes.string,
+  viewerContributionNote: PropTypes.string,
+};
+
+const defaultProps = {
+  exhibition: undefined,
+  historyNote: undefined,
+  ownerConrtibutionNote: undefined,
+  viewerContributionNote: undefined,
+};
+
+const messages = defineMessages({
+  objectStoryHeader: {
+    id: 'exhibitionSection.objectStoryHeader',
+    defaultMessage: 'Object Story',
+  },
+  donorStoryHeader: {
+    id: 'exhibitionSection.donorStoryHeader',
+    defaultMessage: 'Donor Story',
+  },
+  curatorialStoryHeader: {
+    id: 'exhibitionSection.curatorialStoryHeader',
+    defaultMessage: 'Curatorial Story',
+  },
+});
+
+export default function ExhibitionSection(props) {
+  const {
+    exhibition,
+    historyNote,
+    viewerContributionNote,
+    ownerConrtibutionNote,
+  } = props;
+
+  return (
+    <div className={styles.common}>
+      <hr />
+      <h1>{exhibition.title}</h1>
+      <div />
+
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <h2><FormattedMessage {...messages.objectStoryHeader} /></h2>
+      <div>{historyNote}</div>
+
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <h2><FormattedMessage {...messages.donorStoryHeader} /></h2>
+      <div>{ownerConrtibutionNote}</div>
+      <div>{exhibition.generalNote}</div>
+
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <h2><FormattedMessage {...messages.curatorialStoryHeader} /></h2>
+      <div>{viewerContributionNote}</div>
+      <div>{exhibition.curatorialNote}</div>
+    </div>
+  );
+}
+
+ExhibitionSection.propTypes = propTypes;
+ExhibitionSection.defaultProps = defaultProps;

package/src/components/detail/FieldList.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import styles from '../../../styles/cspace/FieldList.css';
+import groupStyles from '../../../styles/cspace/FieldListGroup.css';
+import fieldStyles from '../../../styles/cspace/FieldListField.css';
+
+const propTypes = {
+  config: PropTypes.shape({
+    fields: PropTypes.object.isRequired,
+    groups: PropTypes.object.isRequired,
+    layout: PropTypes.object.isRequired,
+  }).isRequired,
+  data: PropTypes.shape({
+    'collectionspace_core:refName': PropTypes.string,
+    'collectionspace_denorm:title': PropTypes.string,
+  }).isRequired,
+};
+
+const renderField = (id, fieldConfig, data) => {
+  const {
+    className,
+    field,
+    format,
+    label,
+    messages,
+  } = fieldConfig;
+
+  const title = messages
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ? <FormattedMessage {...messages.label} />
+    : label;
+
+  const value = data[field];
+  const formattedValue = (format && value) ? format(value, id) : value;
+
+  if (!formattedValue) {
+    return null;
+  }
+
+  if (title) {
+    const classes = classNames(fieldStyles[className]);
+    const classProp = classes ? { className: classes } : undefined;
+
+    return (
+      <React.Fragment key={id}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <div {...classProp}>{title}</div>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <div {...classProp}>{formattedValue}</div>
+      </React.Fragment>
+    );
+  }
+
+  const classes = classNames(fieldStyles.unlabeled, fieldStyles[className]);
+
+  return (
+    <div className={classes} key={id}>
+      {formattedValue}
+    </div>
+  );
+};
+
+const renderGroup = (id, groupConfig, config, data) => {
+  const {
+    className,
+    fields,
+    label,
+    messages,
+  } = groupConfig;
+
+  const title = messages
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ? <FormattedMessage {...messages.label} />
+    : label;
+
+  const fieldsConfig = config.fields;
+
+  const renderedFields = fields
+    .map((fieldId) => renderField(fieldId, fieldsConfig[fieldId], data))
+    .filter((renderedField) => !!renderedField);
+
+  if (renderedFields.length === 0) {
+    return null;
+  }
+
+  const classes = classNames(groupStyles.common, groupStyles[className]);
+
+  return (
+    <div className={classes} key={id}>
+      {title && <h3>{title}</h3>}
+      <div>
+        {renderedFields}
+      </div>
+    </div>
+  );
+};
+
+export default function FieldList(props) {
+  const {
+    config,
+    data,
+  } = props;
+
+  const {
+    groups,
+    layout,
+  } = config;
+
+  return Object.keys(layout).map((layoutId) => (
+    <div
+      className={styles.common}
+      key={layoutId}
+      style={{ gridArea: layoutId }}
+    >
+      {layout[layoutId].map((groupId) => renderGroup(groupId, groups[groupId], config, data))}
+    </div>
+  ));
+}
+
+FieldList.propTypes = propTypes;

package/src/components/detail/FieldValueList.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../../styles/cspace/FieldValueList.css';
+
+const propTypes = {
+  children: PropTypes.node,
+  inline: PropTypes.bool,
+};
+
+const defaultProps = {
+  children: undefined,
+  inline: false,
+};
+
+export default function FieldValueList(props) {
+  const {
+    children,
+    inline,
+  } = props;
+
+  const className = inline ? styles.inline : styles.common;
+
+  return (
+    <ul className={className}>
+      {children}
+    </ul>
+  );
+}
+
+FieldValueList.propTypes = propTypes;
+FieldValueList.defaultProps = defaultProps;