@natlibfi/melinda-merge-ui-commons
Version:
Common modules for Melinda Merge UI application
529 lines (460 loc) • 32.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DragDropSubrecordMergePanelRow = exports.SubrecordMergePanelRow = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _constants = require('../../constants');
var _droppableSubrecordEmptyPanel = require('./droppable-subrecord-empty-panel');
var _draggableSubrecordPanel = require('./draggable-subrecord-panel');
var _subrecordPanel = require('./subrecord-panel');
var _subrecordActionButton = require('./subrecord-action-button');
var _reactDnd = require('react-dnd');
var _mergeValidationErrorMessagePanel = require('../merge-validation-error-message-panel');
require('../../../styles/components/subrecord-merge-panel-row.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 SubrecordMergePanelRow = exports.SubrecordMergePanelRow = function (_React$Component) {
_inherits(SubrecordMergePanelRow, _React$Component);
function SubrecordMergePanelRow() {
_classCallCheck(this, SubrecordMergePanelRow);
var _this = _possibleConstructorReturn(this, (SubrecordMergePanelRow.__proto__ || Object.getPrototypeOf(SubrecordMergePanelRow)).call(this));
_this.state = { editMode: false };
return _this;
}
_createClass(SubrecordMergePanelRow, [{
key: 'isSwapped',
value: function isSwapped() {
var _props = this.props,
isSwapped = _props.isSwapped,
swappingEnabled = _props.swappingEnabled;
return swappingEnabled && isSwapped;
}
}, {
key: 'handleEditModeChange',
value: function handleEditModeChange(event) {
event.preventDefault();
this.setState({ editMode: !this.state.editMode });
}
}, {
key: 'handleSourceFieldClick',
value: function handleSourceFieldClick(field) {
if (this.props.onSourceFieldClick) {
this.props.onSourceFieldClick(this.props.rowId, field);
}
}
}, {
key: 'handleMergedFieldClick',
value: function handleMergedFieldClick(field) {
if (this.props.onMergedFieldClick) {
this.props.onMergedFieldClick(this.props.rowId, field);
}
}
}, {
key: 'handleRecordUpdate',
value: function handleRecordUpdate(record) {
this.props.onMergedRecordUpdate(this.props.rowId, record);
}
}, {
key: 'handleRecordSave',
value: function handleRecordSave(recordId, record) {
this.props.onSaveRecord(this.props.rowId, recordId, record);
}
}, {
key: 'handleSwapRecords',
value: function handleSwapRecords() {
this.props.onSwapSubrecordRow(this.props.rowId);
}
}, {
key: 'renderSubrecordPanel',
value: function renderSubrecordPanel(record, type, dragType, rowId, isExpanded, dragEnabled) {
var _props2 = this.props,
isCompacted = _props2.isCompacted,
onChangeSourceRow = _props2.onChangeSourceRow,
onChangeTargetRow = _props2.onChangeTargetRow;
if (record) {
var recordHeader = _react2.default.createElement(
'div',
{ className: 'row title-row-card' },
_react2.default.createElement(
'div',
{ className: 'title-wrapper col 11s' },
_react2.default.createElement(
'ul',
null,
_react2.default.createElement(
'li',
{ className: 'title' },
type === _constants.ItemTypes.SOURCE_SUBRECORD ? 'Poistuva tietue' : 'Säilyvä tietue'
)
)
)
);
var fieldClickHandler = type === _constants.ItemTypes.SOURCE_SUBRECORD ? this.handleSourceFieldClick.bind(this) : undefined;
return _react2.default.createElement(_draggableSubrecordPanel.DraggableSubRecordPanel, {
isCompacted: isCompacted,
isExpanded: isExpanded,
dragEnabled: dragEnabled,
record: record,
type: type,
dragType: dragType,
rowId: rowId,
onFieldClick: fieldClickHandler,
recordHeader: recordHeader,
showHeader: true
});
}
return _react2.default.createElement(_droppableSubrecordEmptyPanel.DropTargetEmptySubRecordPanel, {
type: type,
dragType: dragType,
rowId: rowId,
onChangeSourceRow: onChangeSourceRow,
onChangeTargetRow: onChangeTargetRow
});
}
}, {
key: 'mergeHeader',
value: function mergeHeader() {
var _this2 = this;
var record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var editButtonClasses = (0, _classnames2.default)({
disabled: !record,
active: this.state.editMode
});
return _react2.default.createElement(
'div',
{ className: 'row title-row-card' },
_react2.default.createElement(
'div',
{ className: 'title-wrapper col 11s' },
_react2.default.createElement(
'ul',
{ ref: function ref(c) {
return _this2._tabs = c;
} },
_react2.default.createElement(
'li',
{ className: 'title' },
'Yhdistetty'
),
_react2.default.createElement(
'li',
{ className: 'button tooltip', title: 'Muokkaa' },
_react2.default.createElement(
'a',
{ className: editButtonClasses, href: '#', onClick: function onClick(e) {
return _this2.handleEditModeChange(e);
} },
_react2.default.createElement(
'i',
{ className: 'material-icons' },
'edit'
)
)
)
)
)
);
}
}, {
key: 'renderMergedSubrecordPanel',
value: function renderMergedSubrecordPanel(mergedSubrecord, rowId, isExpanded, mergeError, opts) {
var isCompacted = this.props.isCompacted;
if (mergeError) {
return _react2.default.createElement(
'div',
{ className: 'fill-height' },
_react2.default.createElement(_subrecordActionButton.SubrecordActionButton, _extends({ onChangeAction: this.props.onChangeAction, rowId: rowId }, opts)),
_react2.default.createElement(_mergeValidationErrorMessagePanel.MergeValidationErrorMessagePanel, { error: mergeError })
);
}
if (mergedSubrecord) {
return _react2.default.createElement(
'div',
{ className: 'fill-height' },
isCompacted ? null : _react2.default.createElement(_subrecordActionButton.SubrecordActionButton, _extends({ onChangeAction: this.props.onChangeAction, rowId: rowId }, opts)),
_react2.default.createElement(_subrecordPanel.SubRecordPanel, {
isExpanded: isExpanded,
isCompacted: isCompacted,
record: mergedSubrecord,
type: 'MERGED',
onFieldClick: this.handleMergedFieldClick.bind(this),
onRecordUpdate: this.handleRecordUpdate.bind(this),
onSaveRecord: this.handleRecordSave.bind(this),
error: mergeError,
saveRecordError: this.props.saveRecordError,
recordState: this.props.recordState,
saveButtonVisible: this.props.saveButtonVisible,
showHeader: true,
editable: this.state.editMode,
recordHeader: this.mergeHeader(mergedSubrecord)
})
);
}
return _react2.default.createElement(_subrecordActionButton.SubrecordActionButton, _extends({ onChangeAction: this.props.onChangeAction, rowId: rowId }, opts));
}
}, {
key: 'renderRemoveRowButton',
value: function renderRemoveRowButton(rowId) {
var _this3 = this;
return _react2.default.createElement(
'button',
{ onClick: function onClick() {
return _this3.props.onRemoveRow(rowId);
}, className: 'btn-floating btn-hover-opaque btn-small waves-effect waves-light black remove-fab remove-fab-emptyrow' },
_react2.default.createElement(
'i',
{ className: 'material-icons' },
'clear'
)
);
}
}, {
key: 'renderExpandToggleButton',
value: function renderExpandToggleButton(rowId, isEmptyRow, isExpanded) {
if (isEmptyRow) {
return null;
}
return isExpanded ? this.renderCompressRowButton(rowId) : this.renderExpandRowButton(rowId);
}
}, {
key: 'renderExpandRowButton',
value: function renderExpandRowButton(rowId) {
var _this4 = this;
return _react2.default.createElement(
'button',
{ onClick: function onClick() {
return _this4.props.onExpandRow(rowId);
}, className: 'btn-floating btn-hover-opaque btn-small waves-effect waves-light black remove-fab remove-fab-emptyrow' },
_react2.default.createElement(
'i',
{ className: 'material-icons' },
'expand_more'
)
);
}
}, {
key: 'renderCompressRowButton',
value: function renderCompressRowButton(rowId) {
var _this5 = this;
return _react2.default.createElement(
'button',
{ onClick: function onClick() {
return _this5.props.onCompressRow(rowId);
}, className: 'btn-floating btn-hover-opaque btn-small waves-effect waves-light black remove-fab remove-fab-emptyrow' },
_react2.default.createElement(
'i',
{ className: 'material-icons' },
'expand_less'
)
);
}
}, {
key: 'renderSubrecordSwapButton',
value: function renderSubrecordSwapButton() {
var _props3 = this.props,
actionsEnabled = _props3.actionsEnabled,
isSwapped = _props3.isSwapped;
var containerClasses = (0, _classnames2.default)('subrecord-row-swap-button-container', {
'fixed-action-btn': actionsEnabled,
'horizontal': actionsEnabled
});
var iconClasses = (0, _classnames2.default)('btn-floating', 'btn-small', 'waves-light', 'subrecord-row-swap-button', 'blue', {
'disabled': !actionsEnabled,
'waves-effect': actionsEnabled,
'active': isSwapped,
'lighten-2': !isSwapped
});
return _react2.default.createElement(
'div',
{ className: containerClasses },
_react2.default.createElement(
'a',
{ className: iconClasses, onClick: this.handleSwapRecords.bind(this) },
_react2.default.createElement(
'i',
{ className: 'large material-icons' },
'swap_horiz'
)
)
);
}
}, {
key: 'render',
value: function render() {
var _props4 = this.props,
rowId = _props4.rowId,
mergedRecord = _props4.mergedRecord,
sourceRecord = _props4.sourceRecord,
targetRecord = _props4.targetRecord,
selectedAction = _props4.selectedAction,
connectDragSource = _props4.connectDragSource,
connectDropTarget = _props4.connectDropTarget,
isOver = _props4.isOver,
isExpanded = _props4.isExpanded,
mergeError = _props4.mergeError,
actionsEnabled = _props4.actionsEnabled,
swappingEnabled = _props4.swappingEnabled,
isCompacted = _props4.isCompacted,
isMergeActionAvailable = _props4.isMergeActionAvailable,
isCopyActionAvailable = _props4.isCopyActionAvailable,
currentRow = _props4.currentRow,
totalRows = _props4.totalRows;
var isEmptyRow = sourceRecord === undefined && targetRecord === undefined;
var rowClasses = (0, _classnames2.default)({
'to-merge': selectedAction === _constants.SubrecordActionTypes.MERGE,
'to-result': selectedAction === _constants.SubrecordActionTypes.COPY && sourceRecord !== undefined,
'to-remove-source': selectedAction === _constants.SubrecordActionTypes.BLOCK && sourceRecord !== undefined,
'to-remove-target': selectedAction === _constants.SubrecordActionTypes.BLOCK && targetRecord !== undefined,
'is-over': isOver,
'is-compacted': isCompacted
});
var isSwapped = this.isSwapped();
return connectDragSource(connectDropTarget(_react2.default.createElement(
'tr',
{ className: rowClasses },
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
'div',
{ className: 'row-indicator' },
currentRow,
'/',
totalRows
),
this.renderSubrecordPanel(isSwapped ? targetRecord : sourceRecord, _constants.ItemTypes.SOURCE_SUBRECORD, isSwapped ? _constants.ItemTypes.TARGET_SUBRECORD : _constants.ItemTypes.SOURCE_SUBRECORD, rowId, isExpanded, actionsEnabled)
),
_react2.default.createElement(
'td',
null,
swappingEnabled ? this.renderSubrecordSwapButton() : null,
this.renderSubrecordPanel(isSwapped ? sourceRecord : targetRecord, _constants.ItemTypes.TARGET_SUBRECORD, isSwapped ? _constants.ItemTypes.SOURCE_SUBRECORD : _constants.ItemTypes.TARGET_SUBRECORD, rowId, isExpanded, actionsEnabled)
),
_react2.default.createElement(
'td',
null,
isEmptyRow ? this.renderRemoveRowButton(rowId) : this.renderMergedSubrecordPanel(mergedRecord, rowId, isExpanded, mergeError, { isMergeActionAvailable: isMergeActionAvailable, isCopyActionAvailable: isCopyActionAvailable, selectedAction: selectedAction, actionsEnabled: actionsEnabled }),
isCompacted ? null : this.renderExpandToggleButton(rowId, isEmptyRow, isExpanded)
)
)));
}
}]);
return SubrecordMergePanelRow;
}(_react2.default.Component);
SubrecordMergePanelRow.propTypes = {
rowId: _propTypes2.default.string.isRequired,
sourceRecord: _propTypes2.default.object,
targetRecord: _propTypes2.default.object,
mergedRecord: _propTypes2.default.object,
selectedAction: _propTypes2.default.string,
rowIndex: _propTypes2.default.number.isRequired,
currentRow: _propTypes2.default.number.isRequired,
totalRows: _propTypes2.default.number.isRequired,
isExpanded: _propTypes2.default.bool,
actionsEnabled: _propTypes2.default.bool,
onRemoveRow: _propTypes2.default.func.isRequired,
onExpandRow: _propTypes2.default.func.isRequired,
onCompressRow: _propTypes2.default.func.isRequired,
onChangeRow: _propTypes2.default.func.isRequired,
onChangeSourceRow: _propTypes2.default.func.isRequired,
onChangeTargetRow: _propTypes2.default.func.isRequired,
onChangeAction: _propTypes2.default.func.isRequired,
connectDragSource: _propTypes2.default.func.isRequired,
connectDropTarget: _propTypes2.default.func.isRequired,
onSourceFieldClick: _propTypes2.default.func,
onMergedFieldClick: _propTypes2.default.func,
onSaveRecord: _propTypes2.default.func.isRequired,
onMergedRecordUpdate: _propTypes2.default.func.isRequired,
isOver: _propTypes2.default.bool.isRequired,
mergeError: _propTypes2.default.instanceOf(Error),
saveRecordError: _propTypes2.default.instanceOf(Error),
recordState: _propTypes2.default.string,
saveButtonVisible: _propTypes2.default.bool.isRequired,
isCompacted: _propTypes2.default.bool.isRequired,
isMergeActionAvailable: _propTypes2.default.bool.isRequired,
isCopyActionAvailable: _propTypes2.default.bool.isRequired,
isSwapped: _propTypes2.default.bool,
swappingEnabled: _propTypes2.default.bool,
onSwapSubrecordRow: _propTypes2.default.func
};
SubrecordMergePanelRow.defaultProps = {
isSwapped: false,
swappingEnabled: false
};
var rowSource = {
beginDrag: function beginDrag(props) {
var rowIndex = props.rowIndex;
return { rowIndex: rowIndex };
},
canDrag: function canDrag(props) {
if (props && props.isExpanded) {
return false;
}
if (props && props.isCompacted) {
return false;
}
if (props && props.actionsEnabled !== true) {
return false;
}
return true;
}
};
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
};
}
var rowTarget = {
drop: function drop(props, monitor) {
var item = monitor.getItem();
var fromRow = item.rowIndex;
var toRow = props.rowIndex;
props.onChangeRow(fromRow, toRow);
}
};
var collectTarget = function collectTarget(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
};
var dragSourceComponent = (0, _reactDnd.DragSource)(_constants.ItemTypes.SUBRECORD_ROW, rowSource, collect)(SubrecordMergePanelRow);
var DragDropSubrecordMergePanelRow = exports.DragDropSubrecordMergePanelRow = (0, _reactDnd.DropTarget)(_constants.ItemTypes.SUBRECORD_ROW, rowTarget, collectTarget)(dragSourceComponent);
//# sourceMappingURL=subrecord-merge-panel-row.js.map