eiru_automation_ui/src/components/pages/TasksList.js

import React, { Component } from 'react'
import Button from 'material-ui/Button'
import Base from '../common/Base'
import Paper from 'material-ui/Paper'
import Table, { TableHead, TableBody, TableRow, TableCell } from 'material-ui/Table'
import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog'
import TextField from 'material-ui/TextField'
import { InputLabel } from 'material-ui/Input'
import { FormControl } from 'material-ui/Form'
import Select from 'material-ui/Select'
import MenuItem from 'material-ui/Menu/MenuItem'
import Typography from 'material-ui/Typography'
import List, { ListItem, ListItemText, ListItemSecondaryAction } from 'material-ui/List'
import IconButton from 'material-ui/IconButton'
import AddIcon from '../icons/AddIcon'
import RemoveIcon from '../icons/RemoveIcon'
import { isEqual, isEmpty, union, difference, defer } from 'lodash'
import { ODOO, DOCKER, REQUEST, GIT } from '../../constants/ResourceNames'
import { post, get } from '../../actions'
import { connect } from 'react-redux'
import { withStyles } from 'material-ui/styles'

const styles = theme => ({
    gap: {
        marginTop: 25
    },
    transfer: {
        display: 'flex',
        marginTop: theme.spacing.unit * 3
    },
    transferPanels: {
        height: '100%',
        padding: 15,
        flexGrow: 1
    },
    transferModules: {
        height: 300,
        overflowY: 'auto'
    }
})

class TasksList extends Component {
    constructor(props) {
        super(props)

        this.state = {
            showDialog: null,
            isDialogValid: true,
            name: '',
            nameConfirmation: '',
            odoos: [],
            modules: [],
            selectedOdoo: '',
            modulesToInstall: []
        }
    }

    /**
     * 
     */
    componentDidMount() {
        this.props.loadData()
    }

    /**
     * 
     */
    handleShowDialog = (taskName, e) => {
        if (taskName === 'create-odoo') {
            this.showDialog(taskName)
        }

        if (taskName === 'show-modules') {
            Promise.all([
                this.props.loadContainers(),
                this.props.loadRepositories()
            ]).then(data => {   
                this.setState({
                    odoos: data[0].payload.containers,
                    modules: data[1].payload.repositories
                }, () => this.showDialog(taskName))
            })
        }
    }

    /**
     * 
     */
    showDialog = dialog => {
        this.setState({
            showDialog: dialog
        })    
    }

    /**
     * 
     */
    handleCloseDialog = taskName => {
        defer(() => {
            this.setState({
                showDialog: null
            })
        })
    }

    /**
     * 
     */
    handleChangeName = e => {
        defer(() => {
            if (isEqual(e.target.id, 'name')) {
                this.setState({
                    name: e.target.value
                }, this.handleStateChange)
            }
    
            if (isEqual(e.target.id, 'nameConfirmation')) {
                this.setState({
                    nameConfirmation: e.target.value
                }, this.handleStateChange)
            }
        })
    }

    /**
     * 
     */
    handleStateChange = () => {
        if (isEqual(this.state.name, this.state.nameConfirmation)) {
            this.setState({
                isDialogValid: true
            })
        } else {
            this.setState({
                isDialogValid: false
            })
        }
    }
    
    /**
     * 
     */
    handleChangeOdooSystem = e => {
        defer(() => {
            this.setState({
                [e.target.name]: e.target.value
            })
        })
    }

    /**
     * 
     */
    handleAcceptDialog = e => {
        // handling odoo creating
        if (this.state.showDialog === 'create-odoo') {
            const { name, nameConfirmation } = this.state
            
            if (isEmpty(name) || isEmpty(nameConfirmation)) {
                return
            }
    
            if (isEqual(name, nameConfirmation)) {
                this.props.createOdoo(name)
    
                this.setState({
                    showDialog: null,
                    name: '',
                    nameConfirmation: ''
                })
            }
        }

        // handling copying modules
        if (this.state.showDialog === 'show-modules') {
            const { selectedOdoo, modulesToInstall } = this.state

            if (isEmpty(selectedOdoo) || isEmpty(modulesToInstall)) {
                return
            }

            this.setState({
                showDialog: null,
                selectedOdoo: '',
                modulesToInstall: []
            }, () => this.props.installModules(selectedOdoo, modulesToInstall))
        }
    }

    /**
     * 
     */
    handleAddModule = (index, e) => {
        defer(() => {
            const item = this.state.modules[index]
        
            this.setState({
                modules: difference(this.state.modules, [item]),
                modulesToInstall: union(this.state.modulesToInstall, [item])
            })
        })
            
    }
    
    /**
     * 
     */
    handleRemoveModule = (index, e) => {
        defer(() => {
            const item = this.state.modulesToInstall[index]
    
            this.setState({
                modules: union(this.state.modules, [item]),
                modulesToInstall: difference(this.state.modulesToInstall, [item])
            })
        })
    }

    /**
     * 
     */
    render() {
        const { classes } = this.props
        const { isDialogValid, showDialog } = this.state

        return (
            <Base title={this.props.title}>
                <Paper>
                    <Table>
                        <TableHead>
                            <TableRow>
                                <TableCell>Nombre</TableCell>
                                <TableCell>Última ejecución</TableCell>
                                <TableCell>Usuario</TableCell>
                                <TableCell />
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow>
                                <TableCell>Crear contenedor Odoo</TableCell>
                                <TableCell>Nunca</TableCell>
                                <TableCell>Anónimo</TableCell>
                                <TableCell>
                                    <Button variant='raised' color='primary' data-action='create' onClick={e => this.handleShowDialog('create-odoo', e)}>Ejecutar</Button>
                                </TableCell>
                            </TableRow>
                            <TableRow>
                                <TableCell>Copiar/actualizar módulos de Odoo</TableCell>
                                <TableCell>Nunca</TableCell>
                                <TableCell>Anónimo</TableCell>
                                <TableCell>
                                    <Button variant='raised' color='primary' data-action='create' onClick={e => this.handleShowDialog('show-modules', e)}>Ejecutar</Button>
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </Paper>

                {/* Dialog for create odoo container */}
                <Dialog open={showDialog === 'create-odoo'} onClose={this.handleCloseDialog}>
                    <DialogTitle>Confirmar</DialogTitle>
                    <DialogContent>
                        <DialogContentText>Estás solicitando crear un nuevo contenedor Odoo. Tenga en cuenta que ésta tarea puede tardar unos instantes dependiendo del tráfico de red y del uso de los recursos del servidor</DialogContentText>
                        <TextField 
                            id='name'
                            margin='dense' 
                            label='Nombre del sistema'
                            type='text' 
                            autoComplete='off' 
                            onKeyUp={this.handleChangeName}
                            autoFocus 
                            fullWidth
                         />
                        <TextField
                            id='nameConfirmation'
                            margin='dense' 
                            label='Repita el nombre del sistema'
                            type='text' 
                            autoComplete='off' 
                            error={!isDialogValid}
                            onKeyUp={this.handleChangeName}
                            fullWidth
                         />
                    </DialogContent>
                    <DialogActions>
                        <Button color='primary' onClick={this.handleCloseDialog}>Cancelar</Button>
                        <Button color='primary' onClick={this.handleAcceptDialog}>Aceptar</Button>
                    </DialogActions>
                </Dialog>

                {/* Dialog for copy odoo modules */}
                <Dialog open={showDialog === 'show-modules'} onClose={this.handleCloseDialog} fullScreen={true}>
                    <DialogTitle>Seleccionar modulos</DialogTitle>
                    <DialogContent>
                        <DialogContentText>Seleccione los módulos que desea copiar/actualizar en un sistema desplegado.</DialogContentText>
                        <FormControl margin='normal' fullWidth={true}>
                            <InputLabel>Nombre del Sistema</InputLabel>
                            <Select 
                                value={this.state.selectedOdoo}
                                onChange={this.handleChangeOdooSystem}
                                inputProps={{
                                    name: 'selectedOdoo'
                                }}>
                                {this.state.odoos.map(o =>
                                    <MenuItem key={o.id} value={o.name}>{o.name}</MenuItem>
                                )}
                            </Select>
                        </FormControl>
                        <div className={classes.transfer}>
                            <div className={classes.transferPanels}>
                                <Typography variant='title'>Módulos disponibles</Typography>
                                <TextField type='search' placeholder='Buscar' fullWidth={true} margin='normal' />
                                <div className={classes.transferModules}>
                                    <List>
                                        {this.state.modules.map((repo, index) =>
                                            <ListItem key={index}>
                                                <ListItemText primary={repo} />
                                                <ListItemSecondaryAction onClick={e => this.handleAddModule(index, e)}>
                                                    <IconButton>
                                                        <AddIcon />
                                                    </IconButton>
                                                </ListItemSecondaryAction>
                                            </ListItem>
                                        )}
                                    </List>
                                </div>
                            </div>
                            <div className={classes.transferPanels}>
                                <Typography variant='title'>Módulos a copiar/actualizar</Typography>
                                <div className={classes.transferModules}>
                                    <List>
                                        {this.state.modulesToInstall.map((toInstall, index) => 
                                            <ListItem key={index}>
                                                <ListItemText primary={toInstall} />
                                                <ListItemSecondaryAction onClick={e => this.handleRemoveModule(index, e)}>
                                                    <IconButton>
                                                        <RemoveIcon />
                                                    </IconButton>
                                                </ListItemSecondaryAction>
                                            </ListItem>
                                        )}
                                    </List>
                                </div>
                            </div>
                        </div>
                    </DialogContent>
                    <DialogActions>
                        <Button color='primary' onClick={this.handleCloseDialog}>Cancelar</Button>
                        <Button color='primary' onClick={this.handleAcceptDialog}>Aceptar</Button>
                    </DialogActions>
                </Dialog>
            </Base>
        )
    }
}

/**
 * 
 * @param {*} state 
 * @param {*} props 
 */
const mapStateToProps = (state, props) => {
    return {
        containers: state.containers,
        repositories: state.repositories
    }
}

/**
 * 
 * @param {*} dispatch 
 * @param {*} props 
 */
const mapDispatchToProps = (dispatch, props) => ({
    /**
     * 
     */
    loadData() {
        dispatch(get(`${REQUEST}?last`))
    },
    /**
     * 
     */
    loadRepositories() {
        return dispatch(get(`${GIT}repositories/`))
    },
    /**
     * 
     */
    loadContainers() {
        return dispatch(get(`${DOCKER}container/all/`))
    },
    /**
     * 
     */
    createOdoo(name) {
        dispatch(post(`${ODOO}create/`, { name }))
    },
    /**
     * 
     * @param {*} name 
     * @param {*} modules 
     */
    installModules(system, modules) {
        dispatch(post(`${ODOO}install_modules/`, {system, modules}))
    }
})

TasksList = withStyles(styles)(TasksList)

export default connect(mapStateToProps, mapDispatchToProps)(TasksList)