@collectionspace/cspace-public-browser 1.5.1

package/src/components/search/entry/SearchQueryInput.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import SearchSubmitButton from './SearchSubmitButton';
+import styles from '../../../../styles/cspace/SearchQueryInput.css';
+
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  onCommit: PropTypes.func,
+  showSubmitButton: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+const defaultProps = {
+  onCommit: () => undefined,
+  showSubmitButton: false,
+  value: '',
+};
+
+export const messages = defineMessages({
+  label: {
+    id: 'searchQueryInput.label',
+    defaultMessage: 'Search collection',
+  },
+  placeholder: {
+    id: 'searchQueryInput.placeholder',
+    defaultMessage: 'Search collection',
+  },
+  shortLabel: {
+    id: 'searchQueryInput.shortLabel',
+    defaultMessage: 'Search',
+  },
+});
+
+class SearchQueryInput extends Component {
+  constructor() {
+    super();
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const {
+      id,
+      onCommit,
+    } = this.props;
+
+    onCommit(id, event.target.value);
+  }
+
+  commit() {
+    const {
+      id,
+      onCommit,
+    } = this.props;
+
+    if (this.inputDomNode) {
+      onCommit(id, this.inputDomNode.value);
+    }
+  }
+
+  render() {
+    const {
+      id,
+      intl,
+      showSubmitButton,
+      value,
+    } = this.props;
+
+    return (
+      <div className={styles.common}>
+        <input
+          aria-label={intl.formatMessage(messages.label)}
+          autoComplete="off"
+          autoCorrect="off"
+          name={id}
+          placeholder={intl.formatMessage(messages.placeholder)}
+          type="search"
+          value={value}
+          onChange={this.handleChange}
+        />
+
+        {showSubmitButton && <SearchSubmitButton />}
+      </div>
+    );
+  }
+}
+
+SearchQueryInput.propTypes = propTypes;
+SearchQueryInput.defaultProps = defaultProps;
+
+export default injectIntl(SearchQueryInput);

package/src/components/search/entry/SearchSubmitButton.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import styles from '../../../../styles/cspace/SearchSubmitButton.css';
+
+const messages = defineMessages({
+  submit: {
+    id: 'searchEntryForm.submit',
+    defaultMessage: 'Search',
+  },
+});
+
+export default function SearchSubmitButton() {
+  return (
+    <button
+      className={styles.common}
+      type="submit"
+    >
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormattedMessage {...messages.submit} />
+    </button>
+  );
+}

package/src/components/search/entry/SortSelect.jsx

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { defineMessages, injectIntl } from 'react-intl';
+import config from '../../../config';
+import styles from '../../../../styles/cspace/SortSelect.css';
+
+const propTypes = {
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  onCommit: PropTypes.func,
+  value: PropTypes.string,
+};
+
+const defaultProps = {
+  onCommit: () => undefined,
+  value: config.get('defaultSortOrder'),
+};
+
+const messages = defineMessages({
+  label: {
+    id: 'sortSelect.label',
+    defaultMessage: 'Sort results by',
+  },
+  bestmatch: {
+    id: 'sortSelect.bestmatch',
+    defaultMessage: 'Best match',
+  },
+  atoz: {
+    id: 'sortSelect.atoz',
+    defaultMessage: 'A to Z',
+  },
+  ztoa: {
+    id: 'sortSelect.ztoa',
+    defaultMessage: 'Z to A',
+  },
+  newest: {
+    id: 'sortSelect.newest',
+    defaultMessage: 'Newest',
+  },
+  oldest: {
+    id: 'sortSelect.oldest',
+    defaultMessage: 'Oldest',
+  },
+});
+
+class SortSelect extends Component {
+  constructor() {
+    super();
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const {
+      history,
+      onCommit,
+    } = this.props;
+
+    onCommit(history, event.target.value);
+  }
+
+  render() {
+    const {
+      intl,
+      value,
+    } = this.props;
+
+    return (
+      <label
+        htmlFor="sort-select"
+      >
+        Sort by
+        {' '}
+        <select
+          className={styles.common}
+          id="sort-select"
+          value={value}
+          onChange={this.handleChange}
+        >
+          {
+            ['bestmatch', 'atoz', 'ztoa', 'newest', 'oldest'].map((sortOrder) => (
+              <option
+                key={sortOrder}
+                value={sortOrder}
+              >
+                {intl.formatMessage(messages[sortOrder])}
+              </option>
+            ))
+          }
+        </select>
+      </label>
+    );
+  }
+}
+
+SortSelect.propTypes = propTypes;
+SortSelect.defaultProps = defaultProps;
+
+export default withRouter(injectIntl(SortSelect));

package/src/components/search/entry/SortSelectContainer.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import SortSelect from './SortSelect';
+import { applySortOrder } from '../../../actions/searchActions';
+
+const mapDispatchToProps = {
+  onCommit: applySortOrder,
+};
+
+export default connect(
+  undefined,
+  mapDispatchToProps,
+)(SortSelect);

package/src/components/search/result/ClearSearchParamsLink.jsx

@@ -0,0 +1,43 @@
+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 { SORT_ID } from '../../../constants/ids';
+import { searchParamsToQueryString } from '../../../helpers/urlHelpers';
+import styles from '../../../../styles/cspace/SearchParamLink.css';
+
+const propTypes = {
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+};
+
+const messages = defineMessages({
+  label: {
+    id: 'clearSearchParamsLink.label',
+    defaultMessage: 'Clear all',
+  },
+});
+
+export default function ClearSearchParamsLink(props) {
+  const {
+    params,
+  } = props;
+
+  const sortParam = params.filter((value, key) => (key === SORT_ID));
+  const hasNonSortParam = params.size > sortParam.size;
+
+  if (hasNonSortParam) {
+    const queryString = searchParamsToQueryString(sortParam);
+
+    return (
+      <Link className={styles.common} to={{ search: `?${queryString}` }}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <FormattedMessage {...messages.label} />
+      </Link>
+    );
+  }
+
+  return null;
+}
+
+ClearSearchParamsLink.propTypes = propTypes;

package/src/components/search/result/Filter.jsx

@@ -0,0 +1,226 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { withRouter } from 'react-router';
+import Immutable from 'immutable';
+import memoize from 'memoize-one';
+import FilterSearchInput from './FilterSearchInput';
+import Panel from '../../layout/PanelContainer';
+import styles from '../../../../styles/cspace/Filter.css';
+
+const propTypes = {
+  aggregation: PropTypes.instanceOf(Immutable.Map),
+  field: PropTypes.string.isRequired,
+  formatValue: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }).isRequired,
+  id: PropTypes.string.isRequired,
+  messages: PropTypes.shape({
+    label: PropTypes.object.isRequired,
+  }).isRequired,
+  onSearchValueCommit: PropTypes.func,
+  onValueCommit: PropTypes.func,
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+  searchValue: PropTypes.string,
+  showSearch: PropTypes.bool,
+};
+
+const defaultProps = {
+  aggregation: Immutable.Map(),
+  formatValue: undefined,
+  onSearchValueCommit: () => undefined,
+  onValueCommit: () => undefined,
+  searchValue: undefined,
+  showSearch: true,
+};
+
+const messages = defineMessages({
+  count: {
+    id: 'filter.count',
+    defaultMessage: '({count, number})',
+  },
+});
+
+const getFormattedValues = memoize((aggregation, formatValue) => {
+  if (!formatValue) {
+    return undefined;
+  }
+
+  const formattedValues = {};
+
+  aggregation.get('buckets').forEach((bucket) => {
+    const value = bucket.get('key');
+    const formattedValue = formatValue(value);
+
+    formattedValues[value] = formattedValue;
+  });
+
+  return formattedValues;
+});
+
+const handleCheckboxFocus = (event) => {
+  const {
+    target: focusedFieldElement,
+  } = event;
+
+  const fieldIndex = focusedFieldElement.getAttribute('data-number');
+  const focusedFieldLiElement = focusedFieldElement.parentElement.parentElement;
+  const focusedFieldUlElement = focusedFieldLiElement.parentElement;
+  const newScrollPosition = focusedFieldLiElement.getBoundingClientRect().height * fieldIndex;
+
+  focusedFieldUlElement.scrollTop = newScrollPosition;
+  focusedFieldUlElement.scrollIntoView({ block: 'end', behavior: 'instant' });
+};
+
+class Filter extends Component {
+  constructor() {
+    super();
+
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    this.handleSearchInputCommit = this.handleSearchInputCommit.bind(this);
+  }
+
+  handleSearchInputCommit(value) {
+    const {
+      id,
+      onSearchValueCommit,
+    } = this.props;
+
+    onSearchValueCommit(id, value);
+  }
+
+  handleCheckboxChange(event) {
+    const {
+      history,
+      id,
+      onValueCommit,
+    } = this.props;
+
+    const {
+      target: checkbox,
+    } = event;
+
+    const {
+      dataset,
+      name,
+    } = checkbox;
+
+    const { type } = dataset;
+    const value = (type === 'number') ? Number.parseInt(name, 10) : name;
+
+    onValueCommit(history, id, value, checkbox.checked);
+  }
+
+  renderBuckets() {
+    const {
+      aggregation,
+      formatValue,
+      id,
+      params,
+      searchValue,
+    } = this.props;
+
+    const formattedValues = getFormattedValues(aggregation, formatValue);
+    const buckets = aggregation.get('buckets');
+
+    let matchingBuckets = buckets;
+
+    if (searchValue) {
+      const needle = searchValue.toLowerCase();
+
+      matchingBuckets = buckets.filter((bucket) => {
+        const value = bucket.get('key');
+        const formattedValue = formattedValues ? formattedValues[value] : value;
+        const haystack = formattedValue.toLowerCase();
+
+        return haystack.includes(needle);
+      });
+    }
+
+    let selectedValues = params.get(id) || Immutable.List();
+
+    if (!Immutable.List.isList(selectedValues)) {
+      selectedValues = Immutable.List.of(selectedValues);
+    }
+
+    return matchingBuckets.map((bucket, index) => {
+      const value = bucket.get('key');
+      const type = typeof value;
+      const count = bucket.get('doc_count');
+      const isSelected = (selectedValues.indexOf(value) >= 0);
+      const formattedValue = formattedValues ? formattedValues[value] : value;
+
+      return (
+        <li key={value}>
+          {/* The linter is not figuring out that there is an input inside this label. */}
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+          <label>
+            <input
+              checked={isSelected}
+              data-type={type !== 'string' ? type : undefined}
+              data-number={index}
+              name={value}
+              type="checkbox"
+              onChange={this.handleCheckboxChange}
+              onFocus={handleCheckboxFocus}
+            />
+
+            <div>
+              <span>
+                {formattedValue}
+                {' '}
+                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                <FormattedMessage {...messages.count} values={{ count }} />
+              </span>
+            </div>
+          </label>
+        </li>
+      );
+    });
+  }
+
+  render() {
+    const {
+      aggregation,
+      id,
+      messages: filterMessages,
+      searchValue,
+      showSearch,
+    } = this.props;
+
+    const buckets = aggregation.get('buckets');
+    const isEmpty = !buckets || buckets.size === 0;
+
+    if (isEmpty) {
+      return null;
+    }
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    const title = <FormattedMessage {...filterMessages.label} />;
+
+    return (
+      <Panel id={`Filter-${id}`} title={title}>
+        <div className={styles.common}>
+          {
+            showSearch
+            && (
+              <FilterSearchInput
+                value={searchValue}
+                onCommit={this.handleSearchInputCommit}
+              />
+            )
+          }
+          <ul>
+            {this.renderBuckets(buckets)}
+          </ul>
+        </div>
+      </Panel>
+    );
+  }
+}
+
+Filter.propTypes = propTypes;
+Filter.defaultProps = defaultProps;
+
+export default withRouter(Filter);

package/src/components/search/result/FilterContainer.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import Filter from './Filter';
+import { setFilterSearchValue } from '../../../actions/filterActions';
+import { applyFilter } from '../../../actions/searchActions';
+import { getFilterSearchValue, getSearchParams } from '../../../reducers';
+
+const mapStateToProps = (state, ownProps) => ({
+  searchValue: getFilterSearchValue(state, ownProps.id),
+  params: getSearchParams(state),
+});
+
+const mapDispatchToProps = ({
+  onSearchValueCommit: setFilterSearchValue,
+  onValueCommit: applyFilter,
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Filter);

package/src/components/search/result/FilterGroup.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Immutable from 'immutable';
+import Filter from './FilterContainer';
+import styles from '../../../../styles/cspace/FilterGroup.css';
+
+const propTypes = {
+  config: PropTypes.shape({
+    fields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    label: PropTypes.string,
+    messages: PropTypes.object,
+  }).isRequired,
+  fieldsConfig: PropTypes.objectOf(PropTypes.object).isRequired,
+  id: PropTypes.string.isRequired,
+  isPending: PropTypes.bool,
+  aggregations: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  isPending: false,
+  aggregations: Immutable.Map(),
+};
+
+export default function FilterGroup(props) {
+  const {
+    aggregations,
+    config,
+    fieldsConfig,
+  } = props;
+
+  const {
+    fields,
+    label,
+    messages,
+  } = config;
+
+  const isEmpty = aggregations.isEmpty() || !fields.find((fieldId) => {
+    const buckets = aggregations.getIn([fieldId, 'buckets']);
+
+    return (buckets && buckets.size > 0);
+  });
+
+  if (isEmpty) {
+    return null;
+  }
+
+  const labelMessage = messages && messages.label;
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  const headerContent = labelMessage ? <FormattedMessage {...labelMessage} /> : label;
+
+  return (
+    <div className={styles.common}>
+      {headerContent && <h1>{headerContent}</h1>}
+      {
+        fields.map((fieldId) => {
+          const {
+            field,
+            formatValue,
+            messages: fieldMessages,
+            showSearch,
+          } = fieldsConfig[fieldId];
+
+          return (
+            <Filter
+              aggregation={aggregations.get(fieldId)}
+              id={fieldId}
+              field={field}
+              formatValue={formatValue}
+              key={fieldId}
+              messages={fieldMessages}
+              showSearch={showSearch}
+            />
+          );
+        })
+      }
+    </div>
+  );
+}
+
+FilterGroup.propTypes = propTypes;
+FilterGroup.defaultProps = defaultProps;

package/src/components/search/result/FilterList.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import FilterGroup from './FilterGroup';
+
+const propTypes = {
+  config: PropTypes.shape({
+    fields: PropTypes.object.isRequired,
+    groups: PropTypes.object.isRequired,
+    layout: PropTypes.object.isRequired,
+  }).isRequired,
+  isPending: PropTypes.bool,
+  aggregations: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  aggregations: Immutable.Map(),
+  isPending: PropTypes.bool,
+};
+
+export default function FilterList(props) {
+  const {
+    aggregations,
+    config,
+    isPending,
+  } = props;
+
+  const {
+    fields,
+    groups,
+    layout,
+  } = config;
+
+  return Object.keys(layout).map((layoutId) => (
+    <div key={layoutId}>
+      {layout[layoutId].map((groupId) => (
+        <FilterGroup
+          aggregations={aggregations}
+          config={groups[groupId]}
+          fieldsConfig={fields}
+          id={groupId}
+          isPending={isPending}
+          key={groupId}
+        />
+      ))}
+    </div>
+  ));
+}
+
+FilterList.propTypes = propTypes;
+FilterList.defaultProps = defaultProps;