zotero-web-library/lib/libraryUi/widgets/UpdateCollectionDialog.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:updateCollectionDialog');

var React = require('react');
var BootstrapModalWrapper = require('./BootstrapModalWrapper.js');

var UpdateCollectionDialog = React.createClass({
	displayName: 'UpdateCollectionDialog',

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var library = this.props.library;
		library.listen('updateCollectionDialog', function () {
			var currentCollectionKey = Zotero.state.getUrlVar('collectionKey');
			var currentCollection = library.collections.getCollection(currentCollectionKey);
			var parent = '';
			var name = '';
			if (currentCollection) {
				parent = currentCollection.get('parentCollection');
				name = currentCollection.get('name');
			}
			reactInstance.setState({
				collectionName: name,
				parentCollection: parent
			});
			reactInstance.openDialog();
		}, {});
	},
	getInitialState: function getInitialState() {
		return {
			collectionName: '',
			parentCollection: ''
		};
	},
	handleCollectionChange: function handleCollectionChange(evt) {
		this.setState({ 'parentCollection': evt.target.value });
	},
	handleNameChange: function handleNameChange(evt) {
		this.setState({ 'collectionName': evt.target.value });
	},
	openDialog: function openDialog() {
		this.refs.modal.open();
	},
	closeDialog: function closeDialog(evt) {
		this.refs.modal.close();
	},
	saveCollection: function saveCollection(evt) {
		var reactInstance = this;
		var library = this.props.library;
		var parentKey = this.state.parentCollection;
		var name = this.state.collectionName;
		if (name == '') {
			name = 'Untitled';
		}

		var currentCollectionKey = Zotero.state.getUrlVar('collectionKey');
		var collection = library.collections.getCollection(currentCollectionKey);

		if (!collection) {
			Zotero.ui.jsNotificationMessage('Selected collection not found', 'error');
			return false;
		}
		log.debug('updating collection: ' + parentKey + ': ' + name);
		collection.update(name, parentKey).then(function (response) {
			Zotero.ui.jsNotificationMessage('Collection Saved', 'confirm');
			library.collections.dirty = true;
			library.collections.initSecondaryData();
			library.trigger('libraryCollectionsUpdated');
			Zotero.state.pushState(true);
			reactInstance.closeDialog();
		}).catch(Zotero.catchPromiseError);
	},
	render: function render() {
		var library = this.props.library;
		var ncollections = library.collections.nestedOrderingArray();

		var collectionOptions = ncollections.map(function (collection, index) {
			return React.createElement(
				'option',
				{ key: collection.get('key'), value: collection.get('key') },
				'-'.repeat(collection.nestingDepth),
				' ',
				collection.get('name')
			);
		});
		collectionOptions.unshift(React.createElement(
			'option',
			{ key: 'emptyvalue', value: '' },
			'None'
		));

		return React.createElement(
			BootstrapModalWrapper,
			{ ref: 'modal' },
			React.createElement(
				'div',
				{ id: 'update-collection-dialog', className: 'update-collection-dialog', role: 'dialog', title: 'Update Collection', 'data-keyboard': 'true' },
				React.createElement(
					'div',
					{ className: 'modal-dialog' },
					React.createElement(
						'div',
						{ className: 'modal-content' },
						React.createElement(
							'div',
							{ className: 'modal-header' },
							React.createElement(
								'button',
								{ type: 'button', className: 'close', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'×'
							),
							React.createElement(
								'h3',
								null,
								'Update Collection'
							)
						),
						React.createElement(
							'div',
							{ className: 'update-collection-div modal-body' },
							React.createElement(
								'form',
								{ method: 'POST', className: 'zform' },
								React.createElement(
									'ol',
									null,
									React.createElement(
										'li',
										null,
										React.createElement(
											'label',
											{ htmlFor: 'updated-collection-title-input' },
											'Rename Collection'
										),
										React.createElement('input', { value: this.state.collectionName, onChange: this.handleNameChange, id: 'updated-collection-title-input', className: 'updated-collection-title-input form-control' })
									),
									React.createElement(
										'li',
										null,
										React.createElement(
											'label',
											{ htmlFor: 'update-collection-parent-select' },
											'Parent Collection'
										),
										React.createElement(
											'select',
											{ value: this.state.parentCollection, onChange: this.handleCollectionChange, className: 'collectionKey-select update-collection-parent form-control' },
											collectionOptions
										)
									)
								)
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-footer' },
							React.createElement(
								'button',
								{ className: 'btn', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'Close'
							),
							React.createElement(
								'button',
								{ onClick: this.saveCollection, className: 'btn btn-primary updateButton' },
								'Update'
							)
						)
					)
				)
			)
		);
	}
});

module.exports = UpdateCollectionDialog;