cspace-ui/lib/components/search/SearchForm.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactIntl = require("react-intl");

var _immutable = _interopRequireDefault(require("immutable"));

var _cspaceInput = require("cspace-input");

var _cspaceLayout = require("cspace-layout");

var _Dock = _interopRequireDefault(require("../sections/Dock"));

var _SearchButtonBar = _interopRequireDefault(require("./SearchButtonBar"));

var _AdvancedSearchBuilder = _interopRequireDefault(require("./AdvancedSearchBuilder"));

var _searchHelpers = require("../../helpers/searchHelpers");

var _PanelContainer = require("../../containers/layout/PanelContainer");

var _SearchForm = _interopRequireDefault(require("../../../styles/cspace-ui/SearchForm.css"));

var _SearchFormRecordType = _interopRequireDefault(require("../../../styles/cspace-ui/SearchFormRecordType.css"));

var _SearchFormVocab = _interopRequireDefault(require("../../../styles/cspace-ui/SearchFormVocab.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

const {
  Label,
  LineInput,
  RecordTypeInput,
  VocabularyInput
} = _cspaceInput.components;
const messages = (0, _reactIntl.defineMessages)({
  recordType: {
    "id": "searchForm.recordType",
    "defaultMessage": "Find"
  },
  vocabulary: {
    "id": "searchForm.vocabulary",
    "defaultMessage": "in vocabulary"
  },
  keyword: {
    "id": "searchForm.keyword",
    "defaultMessage": "Keywords"
  },
  fullTextSearch: {
    "id": "searchForm.fullTextSearch",
    "defaultMessage": "Full Text Search"
  }
});
const propTypes = {
  config: _propTypes.default.object,
  dockTop: _propTypes.default.number,
  intl: _reactIntl.intlShape,
  keywordValue: _propTypes.default.string,
  recordTypeValue: _propTypes.default.string,
  vocabularyValue: _propTypes.default.string,
  advancedSearchCondition: _propTypes.default.object,
  preferredAdvancedSearchBooleanOp: _propTypes.default.string,
  recordTypeInputReadOnly: _propTypes.default.bool,
  recordTypeInputRootType: _propTypes.default.string,
  recordTypeInputRecordTypes: _propTypes.default.arrayOf(_propTypes.default.string),
  recordTypeInputServiceTypes: _propTypes.default.arrayOf(_propTypes.default.string),
  showButtons: _propTypes.default.bool,
  perms: _propTypes.default.instanceOf(_immutable.default.Map),
  getAuthorityVocabCsid: _propTypes.default.func,
  onAdvancedSearchConditionCommit: _propTypes.default.func,
  onClearButtonClick: _propTypes.default.func,
  onKeywordCommit: _propTypes.default.func,
  onRecordTypeCommit: _propTypes.default.func,
  onVocabularyCommit: _propTypes.default.func,
  onSearch: _propTypes.default.func
};

class SearchForm extends _react.Component {
  constructor() {
    super();
    this.formatRecordTypeLabel = this.formatRecordTypeLabel.bind(this);
    this.formatVocabularyLabel = this.formatVocabularyLabel.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleKeywordInputCommit = this.handleKeywordInputCommit.bind(this);
    this.handleRecordTypeDropdownCommit = this.handleRecordTypeDropdownCommit.bind(this);
    this.handleVocabularyDropdownCommit = this.handleVocabularyDropdownCommit.bind(this);
  }

  formatRecordTypeLabel(name, config) {
    const {
      intl
    } = this.props;
    return intl.formatMessage(config.messages.record.collectionName) || name;
  }

  formatVocabularyLabel(name, config) {
    const {
      intl
    } = this.props;
    return intl.formatMessage(config.messages.name) || name;
  }

  handleFormSubmit(event) {
    event.preventDefault();
    const {
      onSearch
    } = this.props;

    if (onSearch) {
      onSearch();
    }
  }

  handleKeywordInputCommit(path, value) {
    const {
      onKeywordCommit
    } = this.props;

    if (onKeywordCommit) {
      onKeywordCommit(value);
    }
  }

  handleRecordTypeDropdownCommit(path, value) {
    const {
      onRecordTypeCommit
    } = this.props;

    if (onRecordTypeCommit) {
      onRecordTypeCommit(value);
    }
  }

  handleVocabularyDropdownCommit(path, value) {
    const {
      onVocabularyCommit
    } = this.props;

    if (onVocabularyCommit) {
      onVocabularyCommit(value);
    }
  }

  renderVocabularyInput(recordTypes) {
    const {
      intl,
      recordTypeValue,
      vocabularyValue
    } = this.props;

    if (!recordTypeValue || !recordTypes[recordTypeValue] || !recordTypes[recordTypeValue].vocabularies) {
      return null;
    }

    return _react.default.createElement("div", {
      className: _SearchFormVocab.default.common
    }, _react.default.createElement(Label, null, intl.formatMessage(messages.vocabulary)), _react.default.createElement(VocabularyInput, {
      recordTypes: recordTypes,
      recordType: recordTypeValue,
      value: vocabularyValue,
      formatVocabularyLabel: this.formatVocabularyLabel,
      onCommit: this.handleVocabularyDropdownCommit
    }));
  }

  render() {
    const {
      advancedSearchCondition,
      config,
      dockTop,
      intl,
      keywordValue,
      perms,
      preferredAdvancedSearchBooleanOp,
      recordTypeValue,
      recordTypeInputReadOnly,
      recordTypeInputRootType,
      recordTypeInputRecordTypes,
      recordTypeInputServiceTypes,
      showButtons,
      getAuthorityVocabCsid,
      onAdvancedSearchConditionCommit,
      onClearButtonClick
    } = this.props;

    const fullTextPanelHeader = _react.default.createElement("h3", null, _react.default.createElement(_reactIntl.FormattedMessage, messages.fullTextSearch)); // If showButtons is false, render the button bar anyway, but with height 0, so that the submit
    // button will exist on the page, invisibly. This allows pressing enter on fields to submit the
    // form.


    const topButtonBar = _react.default.createElement(_SearchButtonBar.default, {
      onClearButtonClick: onClearButtonClick
    });

    let header;

    if (showButtons) {
      header = _react.default.createElement(_Dock.default, {
        dockTop: dockTop,
        isSidebarOpen: false
      }, topButtonBar);
    } else {
      header = _react.default.createElement("div", {
        style: {
          height: '0',
          overflow: 'hidden',
          margin: '0'
        }
      }, topButtonBar);
    }

    let footer;

    if (showButtons) {
      footer = _react.default.createElement("footer", null, _react.default.createElement(_SearchButtonBar.default, {
        onClearButtonClick: onClearButtonClick
      }));
    }

    const searchableRecordTypes = (0, _searchHelpers.getSearchableRecordTypes)(getAuthorityVocabCsid, config, perms);
    let recordTypes;

    if (recordTypeInputRecordTypes) {
      recordTypes = {}; // Filter out searchable record types that are not included in the desired record types list.

      recordTypeInputRecordTypes.forEach(recordType => {
        recordTypes[recordType] = searchableRecordTypes[recordType];
      });
    } else {
      recordTypes = searchableRecordTypes;
    }

    return _react.default.createElement("form", {
      autoComplete: "off",
      className: _SearchForm.default.common,
      onSubmit: this.handleFormSubmit
    }, header, _react.default.createElement(_cspaceLayout.Panel, null, _react.default.createElement("div", {
      className: _SearchFormRecordType.default.common
    }, _react.default.createElement(RecordTypeInput, {
      label: intl.formatMessage(messages.recordType),
      recordTypes: recordTypes,
      rootType: recordTypeInputRootType,
      serviceTypes: recordTypeInputServiceTypes,
      value: recordTypeValue,
      formatRecordTypeLabel: this.formatRecordTypeLabel,
      onCommit: this.handleRecordTypeDropdownCommit,
      readOnly: recordTypeInputReadOnly
    }), this.renderVocabularyInput(recordTypes)), _react.default.createElement(_PanelContainer.ConnectedPanel, {
      collapsible: true,
      header: fullTextPanelHeader,
      name: "fullTextSearch",
      recordType: recordTypeValue
    }, _react.default.createElement(LineInput, {
      label: intl.formatMessage(messages.keyword),
      value: keywordValue,
      onCommit: this.handleKeywordInputCommit
    })), _react.default.createElement(_AdvancedSearchBuilder.default, {
      condition: advancedSearchCondition,
      config: config,
      preferredBooleanOp: preferredAdvancedSearchBooleanOp,
      recordType: recordTypeValue,
      onConditionCommit: onAdvancedSearchConditionCommit
    })), footer);
  }

}

exports.default = SearchForm;
SearchForm.propTypes = propTypes;