cspace-ui
Version:
CollectionSpace user interface for browsers
530 lines (520 loc) • 19.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _get = _interopRequireDefault(require("lodash/get"));
var _immutable = _interopRequireDefault(require("immutable"));
var _qs = _interopRequireDefault(require("qs"));
var _CheckboxInput = _interopRequireDefault(require("cspace-input/lib/components/CheckboxInput"));
var _ErrorPage = _interopRequireDefault(require("./ErrorPage"));
var _Pager = _interopRequireDefault(require("../search/Pager"));
var _SearchResultSidebar = _interopRequireDefault(require("../search/SearchResultSidebar"));
var _SearchResultSummary = _interopRequireDefault(require("../search/SearchResultSummary"));
var _SearchResultTitleBar = _interopRequireDefault(require("../search/SearchResultTitleBar"));
var _SelectBar = _interopRequireDefault(require("../search/SelectBar"));
var _WatchedSearchResultTableContainer = _interopRequireDefault(require("../../containers/search/WatchedSearchResultTableContainer"));
var _searchHelpers = require("../../helpers/searchHelpers");
var _searchNames = require("../../constants/searchNames");
var _configHelpers = require("../../helpers/configHelpers");
var _SearchResultPage = _interopRequireDefault(require("../../../styles/cspace-ui/SearchResultPage.css"));
var _PageBody = _interopRequireDefault(require("../../../styles/cspace-ui/PageBody.css"));
var _ExportResults = _interopRequireDefault(require("../search/ExportResults"));
var _RelateResults = _interopRequireDefault(require("../search/RelateResults"));
var _SortBy = _interopRequireDefault(require("../search/SortBy"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/* global window */
// const stopPropagation = (event) => {
// event.stopPropagation();
// };
const propTypes = {
isSidebarOpen: _propTypes.default.bool,
history: _propTypes.default.shape({
push: _propTypes.default.func,
replace: _propTypes.default.func
}),
location: _propTypes.default.shape({
pathname: _propTypes.default.string,
search: _propTypes.default.string,
state: _propTypes.default.object
}),
match: _propTypes.default.shape({
params: _propTypes.default.object
}),
perms: _propTypes.default.instanceOf(_immutable.default.Map),
preferredPageSize: _propTypes.default.number,
search: _propTypes.default.func,
selectedItems: _propTypes.default.instanceOf(_immutable.default.Map),
setPreferredPageSize: _propTypes.default.func,
setSearchPageAdvanced: _propTypes.default.func,
setSearchPageAdvancedSearchTerms: _propTypes.default.func,
setSearchPageAdvancedLimitBy: _propTypes.default.func,
setSearchPageKeyword: _propTypes.default.func,
setSearchPageRecordType: _propTypes.default.func,
setSearchPageVocabulary: _propTypes.default.func,
setAllItemsSelected: _propTypes.default.func,
onItemSelectChange: _propTypes.default.func
};
const defaultProps = {
isSidebarOpen: true
};
const contextTypes = {
config: _propTypes.default.shape({
recordTypes: _propTypes.default.object
}).isRequired
};
class SearchResultPage extends _react.Component {
constructor() {
super();
this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
this.handleCheckboxCommit = this.handleCheckboxCommit.bind(this);
this.handleEditSearchLinkClick = this.handleEditSearchLinkClick.bind(this);
this.handleModalCancelButtonClick = this.handleModalCancelButtonClick.bind(this);
this.handleModalCloseButtonClick = this.handleModalCloseButtonClick.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.handlePageSizeChange = this.handlePageSizeChange.bind(this);
this.handleSortChange = this.handleSortChange.bind(this);
this.renderCheckbox = this.renderCheckbox.bind(this);
this.renderFooter = this.renderFooter.bind(this);
this.renderHeader = this.renderHeader.bind(this);
this.search = this.search.bind(this);
}
componentDidMount() {
if (!this.normalizeQuery()) {
const {
location,
setPreferredPageSize
} = this.props;
if (setPreferredPageSize) {
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
setPreferredPageSize(parseInt(query.size, 10));
}
this.search();
}
}
componentDidUpdate(prevProps) {
const {
location,
match,
perms
} = this.props;
const {
location: prevLocation,
match: prevMatch,
perms: prevPerms
} = prevProps;
const {
params
} = match;
const {
params: prevParams
} = prevMatch;
if (perms !== prevPerms || params.recordType !== prevParams.recordType || params.vocabulary !== prevParams.vocabulary || params.csid !== prevParams.csid || params.subresource !== prevParams.subresource || location.search !== prevLocation.search) {
if (!this.normalizeQuery()) {
const {
setPreferredPageSize
} = this.props;
if (setPreferredPageSize) {
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
setPreferredPageSize(parseInt(query.size, 10));
}
this.search();
}
}
}
handleCheckboxClick(event) {
// DRYD-252: Elaborate workaround for Firefox. When a checkbox is a child of an a, clicking on
// the checkbox navigates to the link. So we have to handle the checkbox click, and prevent the
// default. This prevents the navigation, but also prevents the checkbox state from changing.
// So we also have to manually commit the change. The Firefox bug has been open for 17 years
// now. https://bugzilla.mozilla.org/show_bug.cgi?id=62151
event.preventDefault();
event.stopPropagation();
const checkbox = event.currentTarget.querySelector('input[type="checkbox"]');
const index = checkbox.dataset.name;
window.setTimeout(() => {
this.handleCheckboxCommit([index], !checkbox.checked);
}, 0);
}
handleCheckboxCommit(path, value) {
const index = parseInt(path[0], 10);
const selected = value;
const {
onItemSelectChange
} = this.props;
const {
config
} = this.context;
if (onItemSelectChange) {
const searchDescriptor = this.getSearchDescriptor();
const {
listType
} = (0, _searchHelpers.deriveSearchType)(config, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor);
onItemSelectChange(config, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor, listType, index, selected);
}
}
handleEditSearchLinkClick() {
// Transfer the search descriptor from this search to the search page. If this search
// originated from the search page, the original descriptor will be in the location state.
// Otherwise, build it from the URL params. If present, the search descriptor from the
// originating search page will be more complete than one constructed from the URL; for
// example, it will contain fields that are blank, which will have been removed from the
// URL, to reduce the size.
const {
location,
setSearchPageAdvanced,
setSearchPageAdvancedLimitBy,
setSearchPageAdvancedSearchTerms,
setSearchPageKeyword,
setSearchPageRecordType,
setSearchPageVocabulary
} = this.props;
const origin = (0, _get.default)(location.state, 'originSearchPage');
const searchDescriptor = origin ? _immutable.default.fromJS(origin.searchDescriptor) : this.getSearchDescriptor();
const searchQuery = searchDescriptor.get('searchQuery');
if (setSearchPageRecordType) {
setSearchPageRecordType(searchDescriptor.get('recordType'));
}
if (setSearchPageVocabulary) {
setSearchPageVocabulary(searchDescriptor.get('vocabulary'));
}
if (setSearchPageKeyword) {
setSearchPageKeyword(searchQuery.get('kw'));
}
if (setSearchPageAdvanced) {
setSearchPageAdvanced(searchQuery.get('as'));
}
if (setSearchPageAdvancedSearchTerms) {
setSearchPageAdvancedSearchTerms((0, _searchHelpers.extractAdvancedSearchGroupedTerms)(searchQuery.get('as')).searchTerms);
}
if (setSearchPageAdvancedLimitBy) {
setSearchPageAdvancedLimitBy((0, _searchHelpers.extractAdvancedSearchGroupedTerms)(searchQuery.get('as')).limitBy);
}
}
handleModalCancelButtonClick() {
this.closeModal();
}
handleModalCloseButtonClick() {
this.closeModal();
}
handlePageChange(pageNum) {
const {
history,
location
} = this.props;
const handler = (0, _searchHelpers.createPageChangeHandler)({
history,
location
});
return handler(pageNum);
}
handlePageSizeChange(pageSize) {
const {
history,
location,
setPreferredPageSize
} = this.props;
// Call setPreferredPageSize directly (not through dispatch)
if (setPreferredPageSize) {
setPreferredPageSize(pageSize);
}
// Use helper for URL navigation
const handler = (0, _searchHelpers.createPageSizeChangeHandler)({
history,
location
});
return handler(pageSize);
}
handleSortChange(sort) {
const {
history,
location
} = this.props;
if (history) {
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
query.sort = sort;
const queryString = _qs.default.stringify(query);
history.push({
pathname: location.pathname,
search: `?${queryString}`,
state: location.state
});
}
}
getSearchDescriptor() {
// FIXME: Refactor this into a wrapper component that calculates the search descriptor from
// location and params, and passes it into a child. This will eliminate the multiple calls to
// this method from the various render methods in this class.
const {
location,
match
} = this.props;
const {
params
} = match;
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
const searchQuery = {
...query,
p: parseInt(query.p, 10) - 1,
size: parseInt(query.size, 10)
};
const advancedSearchCondition = query.as;
if (advancedSearchCondition) {
searchQuery.as = JSON.parse(advancedSearchCondition);
}
const searchDescriptor = {
searchQuery
};
['recordType', 'vocabulary', 'csid', 'subresource'].forEach(param => {
const value = params[param];
if (typeof value !== 'undefined') {
searchDescriptor[param] = value;
}
});
return _immutable.default.fromJS(searchDescriptor);
}
normalizeQuery() {
const {
config
} = this.context;
const {
history,
location,
preferredPageSize
} = this.props;
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
const {
normalizedQuery,
changed
} = (0, _searchHelpers.normalizeSearchQueryParams)(query, preferredPageSize, config.defaultSearchPageSize);
if (history && changed) {
const queryString = _qs.default.stringify(normalizedQuery);
history.replace({
pathname: location.pathname,
search: `?${queryString}`,
state: location.state
});
return true;
}
return false;
}
search() {
const {
search
} = this.props;
const {
config
} = this.context;
const searchDescriptor = this.getSearchDescriptor();
const searchQuery = searchDescriptor.get('searchQuery');
// Don't send the query if the provided page size and/or number are invalid.
// The search will be repeated with a valid descriptor once normalizeQuery
// has set them to the defaults.
if (!Number.isNaN(searchQuery.get('p')) && !Number.isNaN(searchQuery.get('size')) && search) {
search(config, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor);
}
}
renderCheckbox({
rowData,
rowIndex
}) {
const {
selectedItems
} = this.props;
const itemCsid = rowData.get('csid');
const selected = selectedItems ? selectedItems.has(itemCsid) : false;
return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
embedded: true,
name: `${rowIndex}`,
value: selected
// DRYD-252: Elaborate workaround for Firefox, part II. Use this onClick instead of the
// onCommit and onClick below.
,
onClick: this.handleCheckboxClick
// onCommit={this.handleCheckboxCommit}
// Prevent clicking on the checkbox from selecting the record.
// onClick={stopPropagation}
});
}
renderHeader({
searchError,
searchResult
}) {
const {
history,
location,
selectedItems,
setAllItemsSelected,
perms
} = this.props;
const {
config
} = this.context;
const searchDescriptor = this.getSearchDescriptor();
const {
listType
} = (0, _searchHelpers.deriveSearchType)(config, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor);
let selectBar;
if (!searchError) {
const relateButton = /*#__PURE__*/_react.default.createElement(_RelateResults.default, {
config: config,
selectedItems: selectedItems,
searchDescriptor: searchDescriptor,
perms: perms,
disabled: false,
key: "relate"
});
const exportButton = /*#__PURE__*/_react.default.createElement(_ExportResults.default, {
config: config,
selectedItems: selectedItems,
searchDescriptor: searchDescriptor
});
selectBar = /*#__PURE__*/_react.default.createElement(_SelectBar.default, {
buttons: [relateButton, exportButton],
config: config,
listType: listType,
searchDescriptor: searchDescriptor,
searchName: _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME,
searchResult: searchResult,
selectedItems: selectedItems,
setAllItemsSelected: setAllItemsSelected
});
}
const {
search
} = location;
const query = _qs.default.parse(search.substring(1));
const sortChangeHandler = (0, _searchHelpers.createSortByHandler)({
history,
location
});
const sortDirChangeHandler = (0, _searchHelpers.createSortDirHandler)({
history,
location
});
const renderSortBy = () => /*#__PURE__*/_react.default.createElement(_SortBy.default, {
onSortChange: sortChangeHandler,
onSortDirChange: sortDirChangeHandler,
sort: query === null || query === void 0 ? void 0 : query.sort,
recordType: searchDescriptor.get('recordType')
});
return /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement(_SearchResultSummary.default, {
config: config,
listType: listType,
searchName: _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME,
searchDescriptor: searchDescriptor,
onEditSearchLinkClick: this.handleEditSearchLinkClick,
onPageSizeChange: this.handlePageSizeChange,
renderSortBy: () => renderSortBy()
}), selectBar);
}
renderFooter({
searchResult
}) {
if (searchResult) {
const {
config
} = this.context;
const listType = (0, _searchHelpers.getListTypeFromResult)(config, searchResult);
const listTypeConfig = config.listTypes[listType];
const {
listNodeName
} = listTypeConfig;
const list = searchResult.get(listNodeName);
const totalItems = parseInt(list.get('totalItems'), 10);
const pageNum = parseInt(list.get('pageNum'), 10);
const pageSize = parseInt(list.get('pageSize'), 10);
const lastPage = Math.max(0, Number.isNaN(totalItems) ? 0 : Math.ceil(totalItems / pageSize) - 1);
return /*#__PURE__*/_react.default.createElement("footer", null, /*#__PURE__*/_react.default.createElement(_Pager.default, {
currentPage: pageNum,
lastPage: lastPage,
pageSize: pageSize,
onPageChange: this.handlePageChange,
onPageSizeChange: this.handlePageSizeChange
}));
}
return null;
}
render() {
const {
location,
history,
isSidebarOpen
} = this.props;
const {
config
} = this.context;
const searchDescriptor = this.getSearchDescriptor();
const {
listType
} = (0, _searchHelpers.deriveSearchType)(config, _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME, searchDescriptor);
const recordType = searchDescriptor.get('recordType');
const vocabulary = searchDescriptor.get('vocabulary');
const csid = searchDescriptor.get('csid');
const subresource = searchDescriptor.get('subresource');
const validation = (0, _configHelpers.validateLocation)(config, {
recordType,
vocabulary,
csid,
subresource
});
if (validation.error) {
return /*#__PURE__*/_react.default.createElement(_ErrorPage.default, {
error: validation.error
});
}
return /*#__PURE__*/_react.default.createElement("div", {
className: _SearchResultPage.default.common
}, /*#__PURE__*/_react.default.createElement(_SearchResultTitleBar.default, {
config: config,
searchDescriptor: searchDescriptor,
searchName: _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME,
updateDocumentTitle: true
}), /*#__PURE__*/_react.default.createElement("div", {
className: isSidebarOpen ? _PageBody.default.common : _PageBody.default.full
}, /*#__PURE__*/_react.default.createElement(_WatchedSearchResultTableContainer.default, {
config: config,
history: history,
linkState: {
originSearchPage: (0, _get.default)(location, ['state', 'originSearchPage'])
},
listType: listType,
searchName: _searchNames.SEARCH_RESULT_PAGE_SEARCH_NAME,
searchDescriptor: searchDescriptor,
recordType: recordType,
showCheckboxColumn: true,
renderCheckbox: this.renderCheckbox,
renderHeader: this.renderHeader,
renderFooter: this.renderFooter,
onSortChange: this.handleSortChange,
search: this.search
}), /*#__PURE__*/_react.default.createElement(_SearchResultSidebar.default, {
config: config,
history: history,
isOpen: isSidebarOpen,
recordType: recordType
})));
}
}
exports.default = SearchResultPage;
SearchResultPage.propTypes = propTypes;
SearchResultPage.defaultProps = defaultProps;
SearchResultPage.contextTypes = contextTypes;