@bigfishtv/cockpit/es/components/template/RedirectsIndex.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 deepEqual from 'deep-equal';
import { Cell as TableCell } from 'fixed-data-table';

import Hints from '../../constants/Hints';
import { showDeletePrompt } from '../../utils/promptUtils';
import { filterDataByQueryWithFields } from '../../utils/tableUtils';
import { get, post } from '../../api/xhrUtils';
import { modalHandler } from '../modal/ModalHost';

import RedirectEditModal from '../modal/RedirectEditModal';
import TableView from '../table/Table';
import FixedDataTableDateCell from '../table/cell/FixedDataTableDateCell';
import FixedDataTableStatusCell from '../table/cell/FixedDataTableStatusCell';

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

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/redirects/edit/' + data[rowIndex]['id'] },
			data[rowIndex][columnKey]
		)
	);
};

var fields = [{
	key: 'enabled',
	value: ' ',
	width: 30,
	Cell: FixedDataTableStatusCell
}, {
	key: 'pattern',
	width: 350,
	Cell: FixedDataTableTitleCell
}, {
	key: 'url',
	width: 350
}, {
	key: 'comment',
	width: 350
}, {
	key: 'priority',
	width: 60,
	sortType: 'numeric'
}, {
	key: 'modified',
	value: 'Last Modified',
	width: 130,
	Cell: FixedDataTableDateCell
}, {
	key: 'created',
	value: 'Date Created',
	width: 130,
	Cell: FixedDataTableDateCell
}];

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

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

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

		_this.handleEdit = function (oldValue) {
			var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

			// window.location.href = '/tank/redirects/edit/'+oldValue.id;

			modalHandler.add({
				Component: RedirectEditModal,
				props: {
					defaultValue: oldValue,
					onSave: _this.handleEditSave.bind(_this, oldValue),
					onClose: function onClose() {}
				}
			});
		};

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

			showDeletePrompt({
				queryUrl: _this.props.redirectsDeleteUrl,
				selectedIds: selectedIds,
				data: data.filter(function (item) {
					return selectedIds.indexOf(item.id) >= 0;
				}),
				subject: 'redirect',
				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: [],
			currentRedirectId: null,
			query: '',
			filters: [],
			loading: true,
			negativeHeight: 276
		};
		return _this;
	}

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

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

	RedirectsIndex.prototype.getSubmitUrl = function getSubmitUrl(data) {
		return data.id ? this.props.redirectsUpdateUrl + '/' + data.id + '.json' : this.props.redirectsAddUrl;
	};

	RedirectsIndex.prototype.handleEditSave = function handleEditSave(oldRowValue, newRowValue, isNew) {
		var _this3 = this;

		newRowValue = newRowValue.value;
		if (!deepEqual(oldRowValue, newRowValue)) {
			var tempId = newRowValue.id;
			var data = isNew ? [].concat(this.state.data, [newRowValue]) : this.state.data.map(function (item) {
				return item.id === newRowValue.id ? newRowValue : item;
			});
			this.setState({ data: data });
			var url = this.getSubmitUrl({ id: isNew ? false : newRowValue.id });

			post({
				url: url,
				data: newRowValue,
				subject: 'redirect',
				callback: function callback(redirect) {
					var data = _this3.state.data.map(function (item) {
						return item.id === (isNew ? tempId : oldRowValue.id) ? redirect : item;
					});
					_this3.setState({ data: data });
				}
			});
		}
	};

	RedirectsIndex.prototype.render = function render() {
		var _this4 = 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: 'Redirects',
				Toolbar: function Toolbar(props) {
					return React.createElement(Button, { text: 'New Redirect', onClick: _this4.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(props) {
								return React.createElement(Button, { text: 'Delete', onClick: _this4.handleDelete, style: 'error', disabled: !selectedIds.length });
							} },
						React.createElement(Hint, {
							title: Hints.RedirectsIndex,
							onHide: function onHide() {
								return _this4.setState({ negativeHeight: negativeHeight - 49 });
							}
						}),
						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,
							defaultSortField: 'priority',
							onSelect: this.handleEdit,
							onSelectionChange: function onSelectionChange(selectedIds) {
								return _this4.setState({ selectedIds: selectedIds });
							},
							negativeHeight: negativeHeight
						})
					)
				)
			)
		);
	};

	return RedirectsIndex;
}(Component), _class.propTypes = {
	redirectsGetUrl: PropTypes.string,
	redirectsAddUrl: PropTypes.string,
	redirectsUpdateUrl: PropTypes.string,
	redirectsDeleteUrl: PropTypes.string
}, _temp);
export { RedirectsIndex as default };