@bigfishtv/cockpit/es/components/template/UsersIndex.js

var _class, _temp;

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; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Cell as TableCell } from 'fixed-data-table';

import { showDeletePrompt } from '../../utils/promptUtils';
import { filterDataByQueryWithFields } from '../../utils/tableUtils';
import { get } from '../../api/xhrUtils';

import TableView from '../table/Table';
import FixedDataTableDateCell from '../table/cell/FixedDataTableDateCell';
import FixedDataTableCheckboxCell from '../table/cell/FixedDataTableCheckboxCell';

import Spinner from '../Spinner';
import MainContent from '../container/MainContent';
import Panel from '../container/panel/Panel';
import Bulkhead from '../page/Bulkhead';
import FilterInput from '../input/SearchInput';
import Button from '../button/Button';

var FixedDataTableTitleCell = function FixedDataTableTitleCell(_ref) {
	var data = _ref.data,
	    rowIndex = _ref.rowIndex,
	    columnKey = _ref.columnKey,
	    props = _objectWithoutProperties(_ref, ['data', 'rowIndex', 'columnKey']);

	return React.createElement(
		TableCell,
		props,
		React.createElement(
			'a',
			{ href: '/tank/users/edit/' + data[rowIndex]['id'] },
			data[rowIndex][columnKey]
		)
	);
};

var fields = [{
	key: 'first_name',
	width: 150,
	Cell: FixedDataTableTitleCell
}, {
	key: 'last_name',
	width: 150,
	Cell: FixedDataTableTitleCell
}, {
	key: 'email',
	width: 250
}, {
	key: 'admin',
	value: 'Admin',
	width: 60,
	Cell: FixedDataTableCheckboxCell
}, {
	key: 'modified',
	value: 'Last Modified',
	width: 130,
	Cell: FixedDataTableDateCell
}, {
	key: 'created',
	value: 'Date Created',
	width: 130,
	Cell: FixedDataTableDateCell
}];

/**
 * Users index page template
 */
var UsersIndex = (_temp = _class = function (_Component) {
	_inherits(UsersIndex, _Component);

	function UsersIndex() {
		_classCallCheck(this, UsersIndex);

		var _this = _possibleConstructorReturn(this, _Component.call(this));

		_this.handleQueryChange = function (value) {
			var query = typeof value == 'string' ? value : value.target.value;
			_this.setState({ query: query, selectedIds: [] });
		};

		_this.handleAdd = function () {
			window.location.href = '/tank/users/add';
		};

		_this.handleEdit = function (user) {
			window.location.href = '/tank/users/edit/' + user.id;
		};

		_this.handleDelete = function () {
			var _this$state = _this.state,
			    data = _this$state.data,
			    selectedIds = _this$state.selectedIds;

			showDeletePrompt({
				subject: 'user',
				selectedIds: selectedIds,
				data: data.filter(function (item) {
					return selectedIds.indexOf(item.id) >= 0;
				}),
				renderListItem: function renderListItem(item) {
					return (item.first_name ? item.first_name + ' ' : '') + (item.last_name ? item.last_name : '');
				},
				queryUrl: _this.props.usersDeleteUrl,
				callback: function callback(deletedData) {
					var deletedIds = deletedData.map(function (item) {
						return item.id;
					});
					var data = _this.state.data.filter(function (item) {
						return deletedIds.indexOf(item.id) < 0;
					});
					_this.setState({ data: data, selectedIds: [] });
				}
			});
		};

		_this.state = {
			data: [],
			selectedIds: [],
			query: '',
			loading: true,
			negativeHeight: 182
		};
		return _this;
	}

	UsersIndex.prototype.componentDidMount = function componentDidMount() {
		var _this2 = this;

		get({
			quietSuccess: true,
			url: this.props.usersGetUrl,
			subject: 'users',
			callback: function callback(data) {
				return _this2.setState({ data: data, loading: false });
			},
			callbackError: function callbackError() {
				return _this2.setState({ loading: false });
			}
		});
	};

	UsersIndex.prototype.getSubmitUrl = function getSubmitUrl(data) {
		return data.id ? this.props.usersUpdateUrl + '/' + data.id + '.json' : this.props.usersAddUrl;
	};

	UsersIndex.prototype.render = function render() {
		var _this3 = this;

		var _state = this.state,
		    data = _state.data,
		    query = _state.query,
		    selectedIds = _state.selectedIds,
		    negativeHeight = _state.negativeHeight,
		    loading = _state.loading;


		return React.createElement(
			MainContent,
			null,
			React.createElement(Bulkhead, {
				title: 'Users',
				Toolbar: function Toolbar() {
					return React.createElement(Button, { text: 'New User', onClick: _this3.handleAdd, style: 'primary', size: 'large' });
				}
			}),
			React.createElement(
				'div',
				{ className: 'finder' },
				React.createElement(
					'div',
					{ className: 'finder-content', ref: 'finderContent' },
					React.createElement(
						Panel,
						{
							title: React.createElement(FilterInput, { value: query, onChange: this.handleQueryChange }),
							PanelToolbar: function PanelToolbar() {
								return React.createElement(Button, { text: 'Delete', onClick: _this3.handleDelete, style: 'error', disabled: !selectedIds.length });
							} },
						loading ? React.createElement(
							'div',
							{ className: 'loader-center margin-top-xlarge' },
							React.createElement(Spinner, { spinnerName: 'circle' })
						) : React.createElement(TableView, {
							data: filterDataByQueryWithFields(data, fields, query),
							fields: fields,
							selectedIds: selectedIds,
							onSelect: this.handleEdit,
							onSelectionChange: function onSelectionChange(selectedIds) {
								return _this3.setState({ selectedIds: selectedIds });
							},
							negativeHeight: negativeHeight
						})
					)
				)
			)
		);
	};

	return UsersIndex;
}(Component), _class.propTypes = {
	usersGetUrl: PropTypes.string,
	usersAddUrl: PropTypes.string,
	usersUpdateUrl: PropTypes.string,
	usersDeleteUrl: PropTypes.string
}, _temp);
export { UsersIndex as default };