cspace-ui/lib/components/search/table/SearchTable.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactIntl = require("react-intl");
var _reactRedux = require("react-redux");
var _get = _interopRequireDefault(require("lodash/get"));
var _immutable = _interopRequireDefault(require("immutable"));
var _SearchResultTableHeader = _interopRequireDefault(require("./SearchResultTableHeader"));
var _searchResultHelpers = require("../searchResultHelpers");
var _reducers = require("../../../reducers");
var _searchNames = require("../../../constants/searchNames");
var _ConfigProvider = require("../../config/ConfigProvider");
var _SearchTable = _interopRequireDefault(require("../../../../styles/cspace-ui/SearchTable.css"));
var _SearchResultTableRow = _interopRequireDefault(require("./SearchResultTableRow"));
var _searchHelpers = require("../../../helpers/searchHelpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const propTypes = {
  searchDescriptor: _propTypes.default.instanceOf(_immutable.default.Map),
  intl: _propTypes.default.object
};
const messages = (0, _reactIntl.defineMessages)({
  selectHeader: {
    "id": "searchTable.selectHeaderAll",
    "defaultMessage": "Selected"
  }
});
function getSortDir(searchDescriptor) {
  const searchQuery = searchDescriptor.get('searchQuery');
  const sortSpec = searchQuery.get('sort');
  let sortDir;
  let sortColumnName;
  if (sortSpec) {
    [sortColumnName, sortDir] = sortSpec.split(' ');
    if (!sortDir) {
      sortDir = 'asc';
    }
  }
  return {
    sortColumnName,
    sortDir
  };
}

/**
 * Displays search results as a table. This uses the search descriptor to get the
 * record type in order to read the configuration for what headers and fields need
 * to be displayed.
 *
 * Once complete this should replace the older SearchResultTable component
 *
 * todo: parity with other search result table
 *   - aria-labels + general wcag compliance
 *   - figure out hrefs
 *   - ???
 */
function SearchResultTable({
  searchDescriptor,
  intl
}) {
  const config = (0, _ConfigProvider.useConfig)();
  const results = (0, _reactRedux.useSelector)(state => (0, _reducers.getSearchResult)(state, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor));
  const selectedItems = (0, _reactRedux.useSelector)(state => (0, _reducers.getSearchSelectedItems)(state, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME));
  const listType = (0, _searchHelpers.getListTypeFromResult)(config, results);
  const {
    list,
    items
  } = (0, _searchResultHelpers.readListItems)(config, listType, results);
  if (!items) {
    return null;
  }

  // Might move this into the SearchResultTableHeader
  const {
    sortColumnName,
    sortDir
  } = getSortDir(searchDescriptor);

  // read headers
  const columnConfig = (0, _searchResultHelpers.getColumnConfig)(config, searchDescriptor, 'default');

  // todo: dataKey is for ucb support. basically it allows multiple fields to be used
  // in the event one is missing. See cspace-ui-plugin-profile-pahma.js
  const columns = Object.keys(columnConfig).filter(name => !columnConfig[name].disabled).sort((nameA, nameB) => {
    const orderA = columnConfig[nameA].order;
    const orderB = columnConfig[nameB].order;
    return orderA - orderB;
  }).map(name => {
    const column = columnConfig[name];
    return {
      dataKey: column.dataKey || name,
      formatValue: data => {
        if (column.formatValue) {
          const formatterContext = {
            intl,
            config,
            data
          };
          return column.formatValue(data, formatterContext);
        }
        return data;
      },
      label: () => {
        const message = (0, _get.default)(column, ['messages', 'label']);
        return message ? intl.formatMessage(message) : '';
      }
    };
  });
  const renderContext = {
    listType,
    searchDescriptor,
    selectedItems,
    columns
  };
  const totalItems = parseInt(list.get('totalItems'), 10);
  const selectLabel = intl.formatMessage(messages.selectHeader);

  // todo: showCheckbox prop
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _SearchTable.default.results
  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
    className: _SearchTable.default.checkbox,
    "aria-label": selectLabel
  }), columns.map(column => sortColumnName === column.dataKey ? /*#__PURE__*/_react.default.createElement(_SearchResultTableHeader.default, {
    key: column.dataKey,
    column: column,
    sort: sortDir
  }) : /*#__PURE__*/_react.default.createElement(_SearchResultTableHeader.default, {
    key: column.dataKey,
    column: column
  })))), /*#__PURE__*/_react.default.createElement("tbody", null, items.map((item, index) => /*#__PURE__*/_react.default.createElement(_SearchResultTableRow.default, {
    key: item.get('csid'),
    item: item,
    index: index,
    totalItems: totalItems,
    renderContext: renderContext
  })))));
}
SearchResultTable.propTypes = propTypes;
var _default = exports.default = (0, _reactIntl.injectIntl)(SearchResultTable);