@natlibfi/melinda-merge-ui-commons
Version:
Common modules for Melinda Merge UI application
283 lines (249 loc) • 24.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DraggableSubrecordMergePanelContainer = exports.SubrecordMergePanel = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var _reactDnd = require('react-dnd');
var _reactDndHtml5Backend = require('react-dnd-html5-backend');
var _reactDndHtml5Backend2 = _interopRequireDefault(_reactDndHtml5Backend);
var _constants = require('../../constants');
var _subrecordActionButton = require('./subrecord-action-button');
var _subrecordMergePanelRow = require('./subrecord-merge-panel-row');
var _subrecordMergePanelNewRow = require('./subrecord-merge-panel-new-row');
require('../../../styles/components/subrecord-merge-panel.scss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
*
* @licstart The following is the entire license notice for the JavaScript code in this file.
*
* UI for merging MARC records
*
* Copyright (C) 2015-2019 University Of Helsinki (The National Library Of Finland)
*
* This file is part of marc-merge-ui
*
* marc-merge-ui program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* marc-merge-ui is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @licend The above is the entire license notice
* for the JavaScript code in this file.
*
*/
var SubrecordMergePanel = exports.SubrecordMergePanel = function (_React$Component) {
_inherits(SubrecordMergePanel, _React$Component);
function SubrecordMergePanel(props) {
_classCallCheck(this, SubrecordMergePanel);
var _this = _possibleConstructorReturn(this, (SubrecordMergePanel.__proto__ || Object.getPrototypeOf(SubrecordMergePanel)).call(this, props));
_this.onChangeRow = _this.onChangeRow.bind(_this);
_this.onExpandRow = _this.onExpandRow.bind(_this);
_this.onCompressRow = _this.onCompressRow.bind(_this);
_this.onRemoveRow = _this.onRemoveRow.bind(_this);
return _this;
}
_createClass(SubrecordMergePanel, [{
key: 'renderSubrecordList',
value: function renderSubrecordList() {
var _this2 = this;
var subrecords = this.props.subrecords;
var totalRows = subrecords.length;
var items = subrecords.map(function (subrecord, i) {
var rowId = subrecord.rowId,
sourceRecord = subrecord.sourceRecord,
targetRecord = subrecord.targetRecord,
mergedRecord = subrecord.mergedRecord,
selectedAction = subrecord.selectedAction,
isExpanded = subrecord.isExpanded,
mergeError = subrecord.mergeError,
saveStatus = subrecord.saveStatus,
saveRecordError = subrecord.saveRecordError,
isCompacted = subrecord.isCompacted,
isMergeActionAvailable = subrecord.isMergeActionAvailable,
isCopyActionAvailable = subrecord.isCopyActionAvailable,
isSwapped = subrecord.isSwapped;
return _react2.default.createElement(_subrecordMergePanelRow.DragDropSubrecordMergePanelRow, {
key: rowId,
rowIndex: i,
rowId: rowId,
currentRow: i + 1,
totalRows: totalRows,
isExpanded: isExpanded,
actionsEnabled: _this2.props.actionsEnabled,
swappingEnabled: _this2.props.swappingEnabled,
selectedAction: selectedAction,
sourceRecord: sourceRecord,
targetRecord: targetRecord,
mergedRecord: mergedRecord,
onChangeAction: _this2.props.onChangeSubrecordAction,
onSwapSubrecordRow: _this2.props.onSwapSubrecordRow,
onChangeRow: _this2.onChangeRow,
onChangeSourceRow: _this2.props.onChangeSourceSubrecordRow,
onChangeTargetRow: _this2.props.onChangeTargetSubrecordRow,
onExpandRow: _this2.onExpandRow,
onCompressRow: _this2.onCompressRow,
onRemoveRow: _this2.onRemoveRow,
onSourceFieldClick: _this2.handleFieldClick.bind(_this2),
onMergedFieldClick: _this2.handleMergedFieldClick.bind(_this2),
onMergedRecordUpdate: _this2.props.onEditMergedSubrecord,
saveButtonVisible: _this2.props.saveButtonVisible,
onSaveRecord: _this2.props.onSaveSubrecord,
recordState: saveStatus,
saveRecordError: saveRecordError,
mergeError: mergeError,
isCompacted: isCompacted,
isSwapped: isSwapped,
isMergeActionAvailable: isMergeActionAvailable,
isCopyActionAvailable: isCopyActionAvailable
});
});
return items.reduce(function (acc, item, i) {
return _lodash2.default.concat(acc, item, _this2.renderAddNewRowElement(i + 1));
}, [this.renderAddNewRowElement(0)]);
}
}, {
key: 'renderMergeActionButton',
value: function renderMergeActionButton(rowIndex, mergedRecord) {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_subrecordActionButton.SubrecordActionButtonContainer, { rowIndex: rowIndex }),
this.renderSubrecordPanel(mergedRecord, _constants.ItemTypes.MERGED_SUBRECORD, rowIndex)
);
}
}, {
key: 'renderAddNewRowElement',
value: function renderAddNewRowElement(key) {
return _react2.default.createElement(_subrecordMergePanelNewRow.SubrecordMergePanelNewRow, { key: key, onClick: this.onAddRow(key), enabled: this.props.actionsEnabled });
}
}, {
key: 'onAddRow',
value: function onAddRow(rowIndex) {
return function () {
if (this.props.actionsEnabled) {
this.props.onInsertSubrecordRow(rowIndex);
}
}.bind(this);
}
}, {
key: 'isControlField',
value: function isControlField(field) {
return field.subfields === undefined;
}
}, {
key: 'handleFieldClick',
value: function handleFieldClick(rowId, field) {
if (!this.isControlField(field)) {
this.props.onToggleSourceSubrecordFieldSelection(rowId, field);
}
}
}, {
key: 'handleMergedFieldClick',
value: function handleMergedFieldClick(rowId, field) {
if (field.fromOther && !this.isControlField(field)) {
this.props.onToggleSourceSubrecordFieldSelection(rowId, field);
}
}
}, {
key: 'onRemoveRow',
value: function onRemoveRow(rowId) {
this.props.onRemoveSubrecordRow(rowId);
}
}, {
key: 'onExpandRow',
value: function onExpandRow(rowId) {
this.props.onExpandSubrecordRow(rowId);
}
}, {
key: 'onCompressRow',
value: function onCompressRow(rowId) {
this.props.onCompressSubrecordRow(rowId);
}
}, {
key: 'onChangeRow',
value: function onChangeRow(fromIndex, toIndex) {
this.props.onChangeSubrecordRow(fromIndex, toIndex);
}
}, {
key: 'render',
value: function render() {
var otherSubrecordCount = this.props.subrecords.filter(function (row) {
return row.sourceRecord;
}).length;
var preferredSubrecordCount = this.props.subrecords.filter(function (row) {
return row.targetRecord;
}).length;
return _react2.default.createElement(
'table',
{ className: 'bordered subrecord-merge-panel' },
_react2.default.createElement(
'thead',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
otherSubrecordCount,
' osakohdetta'
),
_react2.default.createElement(
'td',
null,
preferredSubrecordCount,
' osakohdetta'
),
_react2.default.createElement('td', null)
)
),
_react2.default.createElement(
'tbody',
null,
this.renderSubrecordList()
)
);
}
}]);
return SubrecordMergePanel;
}(_react2.default.Component);
SubrecordMergePanel.propTypes = {
subrecords: _propTypes2.default.array.isRequired,
onInsertSubrecordRow: _propTypes2.default.func.isRequired,
onRemoveSubrecordRow: _propTypes2.default.func.isRequired,
onChangeSubrecordAction: _propTypes2.default.func.isRequired,
onChangeSubrecordRow: _propTypes2.default.func.isRequired,
onChangeSourceSubrecordRow: _propTypes2.default.func.isRequired,
onChangeTargetSubrecordRow: _propTypes2.default.func.isRequired,
onExpandSubrecordRow: _propTypes2.default.func.isRequired,
onCompressSubrecordRow: _propTypes2.default.func.isRequired,
onEditMergedSubrecord: _propTypes2.default.func.isRequired,
onToggleSourceSubrecordFieldSelection: _propTypes2.default.func.isRequired,
onSaveSubrecord: _propTypes2.default.func.isRequired,
saveButtonVisible: _propTypes2.default.bool.isRequired,
actionsEnabled: _propTypes2.default.bool.isRequired,
swappingEnabled: _propTypes2.default.bool,
onSwapSubrecordRow: _propTypes2.default.func
};
SubrecordMergePanel.defaultProps = {
swappingEnabled: false
};
var DraggableSubrecordMergePanelContainer = exports.DraggableSubrecordMergePanelContainer = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend2.default)(SubrecordMergePanel);
//# sourceMappingURL=subrecord-merge-panel.js.map