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

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'

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

const 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
 */
export default class UsersIndex extends Component {
	static propTypes = {
		usersGetUrl: PropTypes.string,
		usersAddUrl: PropTypes.string,
		usersUpdateUrl: PropTypes.string,
		usersDeleteUrl: PropTypes.string,
	}

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

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

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

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

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

	handleEdit = user => {
		window.location.href = '/tank/users/edit/' + user.id
	}

	handleDelete = () => {
		const { data, selectedIds } = this.state
		showDeletePrompt({
			subject: 'user',
			selectedIds,
			data: data.filter(item => selectedIds.indexOf(item.id) >= 0),
			renderListItem: item => (item.first_name ? item.first_name + ' ' : '') + (item.last_name ? item.last_name : ''),
			queryUrl: this.props.usersDeleteUrl,
			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="Users"
					Toolbar={() => <Button text="New User" 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={() => (
								<Button text="Delete" onClick={this.handleDelete} style="error" disabled={!selectedIds.length} />
							)}>
							{loading ? (
								<div className="loader-center margin-top-xlarge">
									<Spinner spinnerName="circle" />
								</div>
							) : (
								<TableView
									data={filterDataByQueryWithFields(data, fields, query)}
									fields={fields}
									selectedIds={selectedIds}
									onSelect={this.handleEdit}
									onSelectionChange={selectedIds => this.setState({ selectedIds })}
									negativeHeight={negativeHeight}
								/>
							)}
						</Panel>
					</div>
				</div>
			</MainContent>
		)
	}
}