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, filter, 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 => { 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 }) }) } /** * */ handleModulesSearch = e => { let value = e.target.value defer(() => { if (isEmpty(value)) { this.setState({ modules: this.props.repositories }) return } let filteredModules = filter(this.props.repositories, item => { return item.indexOf(value.toLowerCase()) !== -1 }) this.setState({ modules: filteredModules }) }) } /** * */ 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 ( Nombre Última ejecución Usuario Crear contenedor Odoo Nunca Anónimo Copiar/actualizar módulos de Odoo Nunca Anónimo
{/* Dialog for create odoo container */} Confirmar 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 {/* Dialog for copy odoo modules */} Seleccionar modulos Seleccione los módulos que desea copiar/actualizar en un sistema desplegado. Seleccionar el Sistema
Módulos disponibles
{this.state.modules.map((repo, index) => this.handleAddModule(index, e)}> )}
Módulos a copiar/actualizar
{this.state.modulesToInstall.map((toInstall, index) => this.handleRemoveModule(index, e)}> )}
) } } /** * * @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)