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

Web library from zotero.org

'use strict';

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

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

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

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

		var currentSortField = Zotero.ui.getPrioritizedVariable('order', 'title');
		var currentSortOrder = Zotero.ui.getPrioritizedVariable('sort', 'asc');
		reactInstance.setState({
			sortField: currentSortField,
			sortOrder: currentSortOrder
		});

		library.listen('chooseSortingDialog', reactInstance.openDialog, {});
	},
	getInitialState: function getInitialState() {
		return {
			sortField: '',
			sortOrder: 'asc'
		};
	},
	handleFieldChange: function handleFieldChange(evt) {
		this.setState({ sortField: evt.target.value });
	},
	handleOrderChange: function handleOrderChange(evt) {
		this.setState({ sortOrder: evt.target.value });
	},
	saveSorting: function saveSorting() {
		var library = this.props.library;
		library.trigger('changeItemSorting', { newSortField: this.state.sortField, newSortOrder: this.state.sortOrder });
		this.closeDialog();
	},
	openDialog: function openDialog() {
		this.refs.modal.open();
	},
	closeDialog: function closeDialog(evt) {
		this.refs.modal.close();
	},
	render: function render() {
		var library = this.props.library;
		var sortableOptions = library.sortableColumns.map(function (col) {
			return React.createElement(
				'option',
				{ key: col, label: Zotero.localizations.fieldMap[col], value: col },
				Zotero.localizations.fieldMap[col]
			);
		});

		return React.createElement(
			BootstrapModalWrapper,
			{ ref: 'modal' },
			React.createElement(
				'div',
				{ id: 'choose-sorting-dialog', className: 'choose-sorting-dialog', role: 'dialog', title: 'Sort Order', '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,
								'Sort Items By'
							)
						),
						React.createElement(
							'div',
							{ className: 'choose-sorting-div modal-body', 'data-role': 'content' },
							React.createElement(
								'form',
								{ className: 'form-horizontal', role: 'form' },
								React.createElement(
									'select',
									{ defaultValue: this.state.sortField, onChange: this.handleFieldChange, id: 'sort-column-select', className: 'sort-column-select form-control', name: 'sort-column-select' },
									sortableOptions
								),
								React.createElement(
									'select',
									{ defaultValue: this.state.sortOrder, onChange: this.handleOrderChange, id: 'sort-order-select', className: 'sort-order-select form-control', name: 'sort-order-select' },
									React.createElement(
										'option',
										{ label: 'Ascending', value: 'asc' },
										'Ascending'
									),
									React.createElement(
										'option',
										{ label: 'Descending', value: 'desc' },
										'Descending'
									)
								)
							)
						),
						React.createElement(
							'div',
							{ className: 'modal-footer' },
							React.createElement(
								'button',
								{ className: 'btn', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
								'Cancel'
							),
							React.createElement(
								'button',
								{ onClick: this.saveSorting, className: 'btn btn-primary saveSortButton' },
								'Save'
							)
						)
					)
				)
			)
		);
	}
});

module.exports = ChooseSortingDialog;