@bigfishtv/cockpit/src/components/template/RedirectsIndex.js

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'

const FixedDataTableTitleCell = ({ data, rowIndex, columnKey, ...props }) => (
	<TableCell {...props}>
		<a href={'/tank/redirects/edit/' + data[rowIndex]['id']}>{data[rowIndex][columnKey]}</a>
	</TableCell>
)

const 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
 */
export default class RedirectsIndex extends Component {
	static propTypes = {
		redirectsGetUrl: PropTypes.string,
		redirectsAddUrl: PropTypes.string,
		redirectsUpdateUrl: PropTypes.string,
		redirectsDeleteUrl: PropTypes.string,
	}

	constructor() {
		super()
		this.state = {
			data: [],
			selectedIds: [],
			currentRedirectId: null,
			query: '',
			filters: [],
			loading: true,
			negativeHeight: 276,
		}
	}

	componentDidMount() {
		get({
			quietSuccess: true,
			url: this.props.redirectsGetUrl,
			subject: 'redirects',
			callback: data => this.setState({ data, loading: false }),
			callbackError: data => this.setState({ loading: false }),
		})
	}

	getSubmitUrl(data) {
		return data.id ? this.props.redirectsUpdateUrl + '/' + data.id + '.json' : this.props.redirectsAddUrl
	}

	handleQueryChange = value => {
		const query = typeof value == 'string' ? value : value.target.value
		this.setState({ query, selectedIds: [] })
	}

	handleAdd = () => {
		window.location.href = '/tank/redirects/add'
	}

	handleEdit = (oldValue, isNew = false) => {
		// window.location.href = '/tank/redirects/edit/'+oldValue.id;

		modalHandler.add({
			Component: RedirectEditModal,
			props: {
				defaultValue: oldValue,
				onSave: this.handleEditSave.bind(this, oldValue),
				onClose: () => {},
			},
		})
	}

	handleEditSave(oldRowValue, newRowValue, isNew) {
		newRowValue = newRowValue.value
		if (!deepEqual(oldRowValue, newRowValue)) {
			const tempId = newRowValue.id
			const data = isNew
				? [...this.state.data, newRowValue]
				: this.state.data.map(item => (item.id === newRowValue.id ? newRowValue : item))
			this.setState({ data })
			const url = this.getSubmitUrl({ id: isNew ? false : newRowValue.id })

			post({
				url,
				data: newRowValue,
				subject: 'redirect',
				callback: redirect => {
					const data = this.state.data.map(item => (item.id === (isNew ? tempId : oldRowValue.id) ? redirect : item))
					this.setState({ data })
				},
			})
		}
	}

	handleDelete = () => {
		const { data, selectedIds } = this.state
		showDeletePrompt({
			queryUrl: this.props.redirectsDeleteUrl,
			selectedIds,
			data: data.filter(item => selectedIds.indexOf(item.id) >= 0),
			subject: 'redirect',
			callback: deletedData => {
				const deletedIds = deletedData.map(item => item.id)
				const data = this.state.data.filter(item => deletedIds.indexOf(item.id) < 0)
				this.setState({ data, selectedIds: [] })
			},
		})
	}

	render() {
		const { data, query, selectedIds, negativeHeight, loading } = this.state

		return (
			<MainContent>
				<Bulkhead
					title="Redirects"
					Toolbar={props => <Button text="New Redirect" onClick={this.handleAdd} style="primary" size="large" />}
				/>

				<div className="finder">
					<div className="finder-content" ref="finderContent">
						<Panel
							title={<FilterInput value={query} onChange={this.handleQueryChange} />}
							PanelToolbar={props => (
								<Button text="Delete" onClick={this.handleDelete} style="error" disabled={!selectedIds.length} />
							)}>
							<Hint
								title={Hints.RedirectsIndex}
								onHide={() => this.setState({ negativeHeight: negativeHeight - 49 })}
							/>

							{loading ? (
								<div className="loader-center margin-top-xlarge">
									<Spinner spinnerName="circle" />
								</div>
							) : (
								<TableView
									data={filterDataByQueryWithFields(data, fields, query)}
									fields={fields}
									selectedIds={selectedIds}
									defaultSortField="priority"
									onSelect={this.handleEdit}
									onSelectionChange={selectedIds => this.setState({ selectedIds })}
									negativeHeight={negativeHeight}
								/>
							)}
						</Panel>
					</div>
				</div>
			</MainContent>
		)
	}
}