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

Web library from zotero.org

'use strict';

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

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

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

	componentWillMount: function componentWillMount() {
		var reactInstance = this;
		var library = this.props.library;
		library.listen('createItem', function (evt) {
			var itemType = evt.data.itemType;
			reactInstance.setState({ itemType: itemType });
			reactInstance.openDialog();
		}, {});
	},
	getInitialState: function getInitialState() {
		return {
			title: '',
			itemType: 'document'
		};
	},
	handleTitleChange: function handleTitleChange(evt) {
		this.setState({ 'title': evt.target.value });
	},
	createItem: function createItem(evt) {
		evt.preventDefault();
		var reactInstance = this;
		var library = this.props.library;
		var itemType = this.state.itemType;
		var currentCollectionKey = Zotero.state.getUrlVar('collectionKey');
		var title = reactInstance.state.title;
		if (title == '') {
			title = 'Untitled';
		}

		var item = new Zotero.Item();
		item.initEmpty(itemType).then(function () {
			item.associateWithLibrary(library);
			item.set('title', title);
			if (currentCollectionKey) {
				item.addToCollection(currentCollectionKey);
			}
			return Zotero.ui.saveItem(item);
		}).then(function (responses) {
			var itemKey = item.get('key');
			Zotero.state.setUrlVar('itemKey', itemKey);
			Zotero.state.pushState();
			library.trigger('displayedItemsChanged');
			reactInstance.closeDialog();
		}).catch(function (error) {
			log.error(error);
			Zotero.ui.jsNotificationMessage('There was an error creating the item.', 'error');
			reactInstance.closeDialog();
		});
	},
	openDialog: function openDialog() {
		this.refs.modal.open();
	},
	closeDialog: function closeDialog(evt) {
		this.refs.modal.close();
	},
	render: function render() {
		return React.createElement(
			BootstrapModalWrapper,
			{ ref: 'modal' },
			React.createElement(
				'div',
				{ id: 'create-item-dialog', className: 'create-item-dialog', role: 'dialog', title: 'Create Item', '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 Item'
							)
						),
						React.createElement(
							'div',
							{ className: 'new-item-div modal-body', 'data-role': 'content' },
							React.createElement(
								'form',
								{ onSubmit: this.createItem, method: 'POST' },
								React.createElement(
									'div',
									{ 'data-role': 'fieldcontain' },
									React.createElement(
										'label',
										{ htmlFor: 'new-item-title-input' },
										'Title'
									),
									React.createElement('input', { onChange: this.handleTitleChange, id: 'new-item-title-input', className: 'new-item-title-input form-control', type: 'text' })
								)
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-footer' },
							React.createElement(
								'button',
								{ className: 'btn', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'Close'
							),
							React.createElement(
								'button',
								{ onClick: this.createItem, className: 'btn btn-primary createButton' },
								'Create'
							)
						)
					)
				)
			)
		);
	}
});

module.exports = CreateItemDialog;