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

Web library from zotero.org

'use strict';

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

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

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

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var library = this.props.library;

		library.listen('createCollectionDialog', function () {
			reactInstance.forceUpdate();
			reactInstance.openDialog();
		}, {});
	},
	getInitialState: function getInitialState() {
		return {
			collectionName: '',
			parentCollection: null
		};
	},
	handleCollectionChange: function handleCollectionChange(evt) {
		log.debug(evt);
		log.debug(evt.target.value);
		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();
	},
	createCollection: function createCollection() {
		log.debug('react createCollection');
		var reactInstance = this;
		var library = this.props.library;
		var parentKey = this.state.parentCollection;
		var name = this.state.collectionName;
		if (name == '') {
			name = 'Untitled';
		}

		library.addCollection(name, parentKey).then(function (responses) {
			library.collections.initSecondaryData();
			library.trigger('libraryCollectionsUpdated');
			Zotero.state.pushState();
			reactInstance.closeDialog();
			Zotero.ui.jsNotificationMessage('Collection Created', 'success');
		}).catch(function (error) {
			Zotero.ui.jsNotificationMessage('There was an error creating the collection.', 'error');
			reactInstance.closeDialog();
		});
	},
	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: 'create-collection-dialog', className: 'create-collection-dialog', role: 'dialog', title: 'Create 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,
								'Create Collection'
							)
						),
						React.createElement(
							'div',
							{ className: 'new-collection-div modal-body', 'data-role': 'content' },
							React.createElement(
								'form',
								{ method: 'POST' },
								React.createElement(
									'div',
									{ 'data-role': 'fieldcontain' },
									React.createElement(
										'label',
										{ htmlFor: 'new-collection-title-input' },
										'Collection Name'
									),
									React.createElement('input', { onChange: this.handleNameChange, className: 'new-collection-title-input form-control', type: 'text' })
								),
								React.createElement(
									'div',
									{ 'data-role': 'fieldcontain' },
									React.createElement(
										'label',
										{ htmlFor: 'new-collection-parent' },
										'Parent Collection'
									),
									React.createElement(
										'select',
										{ onChange: this.handleCollectionChange, className: 'collectionKey-select new-collection-parent form-control', defaultValue: '' },
										collectionOptions
									)
								)
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-footer' },
							React.createElement(
								'button',
								{ onClick: this.closeDialog, className: 'btn', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'Close'
							),
							React.createElement(
								'button',
								{ onClick: this.createCollection, className: 'btn btn-primary createButton' },
								'Create'
							)
						)
					)
				)
			)
		);
	}
});

module.exports = CreateCollectionDialog;