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

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { withFormValue } from '@bigfishtv/react-forms'
import { connect } from 'react-redux'

import MainContent from '../container/MainContent'
import Bulkhead from '../page/Bulkhead'
import Button from '../button/Button'
import Panel from '../container/panel/Panel'
import Breadcrumb from '../breadcrumb/Breadcrumb'
import Field from '../form/Field'
import EditForm from '../form/EditForm'
import Checkbox from '../input/Checkbox'

import { notifySuccess, notifyFailure } from '../../actions/notifications'

function getTitle(user) {
	return [user.first_name, user.last_name].filter(v => v).join(' ')
}

/**
 * User edit page template
 */
@connect(({ viewer }) => ({ viewer }))
export default class UserEdit extends Component {
	getSubmitUrl(data) {
		if (data.id) {
			return '/tank/users/edit/' + data.id + '.json'
		} else {
			return '/tank/users/add.json'
		}
	}

	handleSubmitSuccess = data => {
		this.props.dispatch(notifySuccess('The user has been saved.'))
		history.replaceState(null, null, '/tank/users/edit/' + data.id)
	}

	handleSubmitError = () => {
		this.props.dispatch(notifyFailure('The user could not be saved.'))
	}

	render() {
		return (
			<MainContent>
				<EditForm
					{...this.props}
					submitUrl={this.getSubmitUrl}
					onSubmitSuccess={this.handleSubmitSuccess}
					onSubmitError={this.handleSubmitError}
					Sidebar={null /*UserEditSidebar*/}
					Header={withFormValue(props => (
						<Bulkhead
							title={getTitle(props.formValue.value) || 'New User'}
							Toolbar={() => <Button type="submit" text="Save" style="secondary" size="large" />}
						/>
					))}>
					<Breadcrumb title="Users" url="/tank/users">
						<UserDetailsPanel />
						<UserRolesPanel {...this.props} />
					</Breadcrumb>
				</EditForm>
			</MainContent>
		)
	}
}

const UserDetailsPanel = withFormValue(() => (
	<Panel title="User Details" uncontrolled>
		<Field select="first_name" label="First Name" />
		<Field select="last_name" label="Last Name" />
		<Field select="email" label="Email Address" />
		<Field select="password" label="Password" placeholder="Set a new password" type="password" />
	</Panel>
))

class RolesCheckboxes extends Component {
	static propTypes = {
		roles: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, title: PropTypes.string })),
	}

	handleChange(rolesId, value) {
		const field = this.props.formValue.select('roles')
		if (value == true) {
			// add to array
			const list = field.value || []
			list.push({ id: rolesId })
			field.update(list)
		} else {
			// remove from array
			field.update(field.value.filter(role => role.id != rolesId))
		}
	}

	render() {
		const { roles } = this.props.formValue.value
		const rolesIds = roles && roles.map(role => role.id)
		return (
			<div>
				{this.props.roles.map(role => (
					<Checkbox
						key={role.id}
						text={role.title}
						value={rolesIds && rolesIds.indexOf(role.id) >= 0}
						onChange={value => this.handleChange(role.id, value)}
					/>
				))}
			</div>
		)
	}
}

const UserRolesPanel = withFormValue(props =>
	props.viewer.id != props.formValue.value.id ? (
		<Panel title="Roles" uncontrolled>
			<Field select="admin" label={false}>
				<Checkbox text="Administrator" />
			</Field>
			{!props.formValue.value.admin && (
				<div>
					<hr />
					<RolesCheckboxes {...props} />
				</div>
			)}
		</Panel>
	) : (
		<div />
	)
)