@bigfishtv/cockpit
Version:
256 lines (203 loc) • 7.97 kB
JavaScript
;
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 _FixedDataTableCheckboxCell = require('../table/cell/FixedDataTableCheckboxCell');
var _FixedDataTableCheckboxCell2 = _interopRequireDefault(_FixedDataTableCheckboxCell);
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/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: _FixedDataTableCheckboxCell2.default
}, {
key: 'modified',
value: 'Last Modified',
width: 130,
Cell: _FixedDataTableDateCell2.default
}, {
key: 'created',
value: 'Date Created',
width: 130,
Cell: _FixedDataTableDateCell2.default
}];
/**
* 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;
(0, _promptUtils.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;
(0, _xhrUtils.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 _react2.default.createElement(
_MainContent2.default,
null,
_react2.default.createElement(_Bulkhead2.default, {
title: 'Users',
Toolbar: function Toolbar() {
return _react2.default.createElement(_Button2.default, { text: 'New User', 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 UsersIndex;
}(_react.Component), _class.propTypes = {
usersGetUrl: _propTypes2.default.string,
usersAddUrl: _propTypes2.default.string,
usersUpdateUrl: _propTypes2.default.string,
usersDeleteUrl: _propTypes2.default.string
}, _temp);
exports.default = UsersIndex;