[ADD] first screen for module installing

src/components/icons/AddIcon.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import SvgIcon from 'material-ui/SvgIcon'
+import { withStyles } from 'material-ui/styles'
+
+class AddIcon extends Component {
+    render() {
+        return (
+            <SvgIcon>
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                <path d="M0 0h24v24H0z" fill="none" />
+            </SvgIcon>
+        )
+    }
+}
+
+export default withStyles(null, { withTheme: true })(AddIcon)

src/components/icons/LeftArrow.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import SvgIcon from 'material-ui/SvgIcon'
+import { withStyles } from 'material-ui/styles'
+
+class LeftArrow extends Component {
+    render() {
+        return (
+            <SvgIcon>
+                <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
+                <path d="M0-.5h24v24H0z" fill="none"/>
+            </SvgIcon>
+        )
+    }
+}
+
+export default withStyles(null, { withTheme: true })(LeftArrow)

src/components/icons/RemoveIcon.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import SvgIcon from 'material-ui/SvgIcon'
+import { withStyles } from 'material-ui/styles'
+
+class RemoveIcon extends Component {
+    render() {
+        return (
+            <SvgIcon>
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                <path d="M0 0h24v24H0z" fill="none" />
+            </SvgIcon>
+        )
+    }
+}
+
+export default withStyles(null, { withTheme: true })(RemoveIcon)

src/components/icons/RightArrow.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import SvgIcon from 'material-ui/SvgIcon'
+import { withStyles } from 'material-ui/styles'
+
+class RigthArrow extends Component {
+    render() {
+        return (
+            <SvgIcon>
+                <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" />
+                <path d="M0-.25h24v24H0z" fill="none" />
+            </SvgIcon>
+        )
+    }
+}
+
+export default withStyles(null, { withTheme: true })(RigthArrow)

src/components/pages/TasksList.js

@@ -5,6 +5,12 @@ 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 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 } from 'lodash'
 import { ODOO, REQUEST } from '../../constants/ResourceNames'
 import { post, get } from '../../actions'
@@ -14,6 +20,15 @@ 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
     }
 })
 
@@ -22,7 +37,7 @@ class TasksList extends Component {
         super(props)
 
         this.state = {
-            isDialogOpened: false,
+            showDialog: null,
             isDialogValid: true,
             name: '',
             nameConfirmation: ''
@@ -39,27 +54,24 @@ class TasksList extends Component {
     /**
      * 
      */
-    handleOpenDialog = e => {
+    handleShowDialog = (taskName, e) => {
         this.setState({
-            isDialogOpened: true
+            showDialog: taskName
         })
     }
 
     /**
      * 
      */
-    handleCloseDialog = e => {
+    handleCloseDialog = taskName => {
         this.setState({
-            isDialogOpened: false,
-            isDialogValid: true,
-            name: '',
-            nameConfirmation: ''
+            showDialog: null
         })
     }
-    
+
     /**
-    * 
-    */
+     * 
+     */
     handleChangeName = e => {
         if (isEqual(e.target.id, 'name')) {
             this.setState({
@@ -107,7 +119,6 @@ class TasksList extends Component {
                 name: '',
                 nameConfirmation: ''
             })
-
         }
     }
 
@@ -115,7 +126,8 @@ class TasksList extends Component {
      * 
      */
     render() {
-        const { isDialogOpened, isDialogValid } = this.state
+        const { classes } = this.props
+        const { isDialogValid, showDialog } = this.state
 
         return (
             <Base title={this.props.title}>
@@ -135,13 +147,22 @@ class TasksList extends Component {
                                 <TableCell>Nunca</TableCell>
                                 <TableCell>Anónimo</TableCell>
                                 <TableCell>
-                                    <Button variant='raised' color='primary' data-action='create' onClick={this.handleOpenDialog}>Ejecutar</Button>
+                                    <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 open={isDialogOpened} onClose={this.handleCloseDialog}>
+                {/* 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>
@@ -167,10 +188,71 @@ class TasksList extends Component {
                          />
                     </DialogContent>
                     <DialogActions>
-                        <Button color='primary' onClick={this.handleCloseDialog}>Cancelar</Button>
+                        <Button color='primary'>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>
+                        <TextField label='Nombre del Sistema' fullWidth={true} margin='normal'>
+                            <MenuItem value='sistema1'>Sistema 1</MenuItem>
+                            <MenuItem value='sistema2'>Sistema 2</MenuItem>
+                            <MenuItem value='sistema3'>Sistema 3</MenuItem>
+                        </TextField>
+                        <div className={classes.transfer}>
+                            <div className={classes.transferPanels}>
+                                <Typography variant='title'>Módulos disponibles</Typography>
+                                <TextField type='search' placeholder='Buscar' fullWidth={true} margin='normal' />
+                                <List>
+                                    <ListItem>
+                                        <ListItemText primary='Módulo 1' />
+                                        <ListItemSecondaryAction>
+                                            <IconButton>
+                                                <AddIcon />
+                                            </IconButton>
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemText primary='Módulo 2' />
+                                        <ListItemSecondaryAction>
+                                            <IconButton>
+                                                <AddIcon />
+                                            </IconButton>
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemText primary='Módulo 3' />
+                                        <ListItemSecondaryAction>
+                                            <IconButton>
+                                                <AddIcon />
+                                            </IconButton>
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                </List>
+                            </div>
+                            <div className={classes.transferPanels}>
+                                <Typography variant='title'>Módulos a instalar</Typography>
+                                <List>
+                                    <ListItem>
+                                        <ListItemText primary='Módulo 4' />
+                                        <ListItemSecondaryAction>
+                                            <IconButton>
+                                                <RemoveIcon />
+                                            </IconButton>
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                </List>
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button color='primary' onClick={this.handleCloseDialog}>Cancelar</Button>
+                        <Button color='primary'>Aceptar</Button>
+                    </DialogActions>
+                </Dialog>
             </Base>
         )
     }