@bigfishtv/cockpit/es5/components/template/RolesIndex.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _fixedDataTable = require('fixed-data-table');

var _promptUtils = require('../../utils/promptUtils');

var _tableUtils = require('../../utils/tableUtils');

var _xhrUtils = require('../../api/xhrUtils');

var _Table = require('../table/Table');

var _Table2 = _interopRequireDefault(_Table);

var _FixedDataTableDateCell = require('../table/cell/FixedDataTableDateCell');

var _FixedDataTableDateCell2 = _interopRequireDefault(_FixedDataTableDateCell);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _MainContent = require('../container/MainContent');

var _MainContent2 = _interopRequireDefault(_MainContent);

var _Panel = require('../container/panel/Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _Bulkhead = require('../page/Bulkhead');

var _Bulkhead2 = _interopRequireDefault(_Bulkhead);

var _SearchInput = require('../input/SearchInput');

var _SearchInput2 = _interopRequireDefault(_SearchInput);

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

	return _react2.default.createElement(
		_fixedDataTable.Cell,
		props,
		_react2.default.createElement(
			'a',
			{ href: '/tank/roles/edit/' + data[rowIndex]['id'] },
			data[rowIndex][columnKey]
		)
	);
};

var fields = [{
	key: 'title',
	width: 300,
	Cell: FixedDataTableTitleCell
}, {
	key: 'modified',
	value: 'Last Modified',
	width: 130,
	Cell: _FixedDataTableDateCell2.default
}, {
	key: 'created',
	value: 'Date Created',
	width: 130,
	Cell: _FixedDataTableDateCell2.default
}];

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

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

		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/roles/add';
		};

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

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

			(0, _promptUtils.showDeletePrompt)({
				subject: 'role',
				selectedIds: selectedIds,
				data: data.filter(function (item) {
					return selectedIds.indexOf(item.id) >= 0;
				}),
				queryUrl: _this.props.rolesDeleteUrl,
				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: [],
			currentuserId: null,
			query: '',
			loading: true,
			negativeHeight: 182
		};
		return _this;
	}

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

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

	RolesIndex.prototype.getSubmitUrl = function getSubmitUrl(data) {
		return data.id ? this.props.rolesUpdateUrl + '/' + data.id + '.json' : this.props.rolesAddUrl;
	};

	RolesIndex.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 _react2.default.createElement(
			_MainContent2.default,
			null,
			_react2.default.createElement(_Bulkhead2.default, {
				title: 'Roles',
				Toolbar: function Toolbar() {
					return _react2.default.createElement(_Button2.default, { text: 'New Role', onClick: _this3.handleAdd, style: 'primary', size: 'large' });
				}
			}),
			_react2.default.createElement(
				'div',
				{ className: 'finder' },
				_react2.default.createElement(
					'div',
					{ className: 'finder-content', ref: 'finderContent' },
					_react2.default.createElement(
						_Panel2.default,
						{
							title: _react2.default.createElement(_SearchInput2.default, { value: query, onChange: this.handleQueryChange }),
							PanelToolbar: function PanelToolbar() {
								return _react2.default.createElement(_Button2.default, { text: 'Delete', onClick: _this3.handleDelete, style: 'error', disabled: !selectedIds.length });
							} },
						loading ? _react2.default.createElement(
							'div',
							{ className: 'loader-center margin-top-xlarge' },
							_react2.default.createElement(_Spinner2.default, { spinnerName: 'circle' })
						) : _react2.default.createElement(_Table2.default, {
							data: (0, _tableUtils.filterDataByQueryWithFields)(data, fields, query),
							fields: fields,
							selectedIds: selectedIds,
							onSelect: this.handleEdit,
							onSelectionChange: function onSelectionChange(selectedIds) {
								return _this3.setState({ selectedIds: selectedIds });
							},
							negativeHeight: negativeHeight
						})
					)
				)
			)
		);
	};

	return RolesIndex;
}(_react.Component), _class.propTypes = {
	rolesGetUrl: _propTypes2.default.string,
	rolesAddUrl: _propTypes2.default.string,
	rolesUpdateUrl: _propTypes2.default.string
}, _temp);
exports.default = RolesIndex;