[ADD] modules searcher

src/components/pages/TasksList.js

@@ -14,7 +14,7 @@ import List, { ListItem, ListItemText, ListItemSecondaryAction } from 'material-
 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 { 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'
@@ -107,19 +107,17 @@ class TasksList extends Component {
      * 
      */
     handleChangeName = e => {
-        defer(() => {
-            if (isEqual(e.target.id, 'name')) {
-                this.setState({
-                    name: e.target.value
-                }, this.handleStateChange)
-            }
+        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)
-            }
-        })
+        if (isEqual(e.target.id, 'nameConfirmation')) {
+            this.setState({
+                nameConfirmation: e.target.value
+            }, this.handleStateChange)
+        }
     }
 
     /**
@@ -148,6 +146,31 @@ class TasksList extends Component {
         })
     }
 
+    /**
+     * 
+     */
+    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
+            })
+        })
+    }
+
     /**
      * 
      */
@@ -294,7 +317,7 @@ class TasksList extends Component {
                     <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>
+                            <InputLabel>Seleccionar el Sistema</InputLabel>
                             <Select 
                                 value={this.state.selectedOdoo}
                                 onChange={this.handleChangeOdooSystem}
@@ -309,7 +332,7 @@ class TasksList extends Component {
                         <div className={classes.transfer}>
                             <div className={classes.transferPanels}>
                                 <Typography variant='title'>Módulos disponibles</Typography>
-                                <TextField type='search' placeholder='Buscar' fullWidth={true} margin='normal' />
+                                <TextField type='search' placeholder='Buscar' fullWidth={true} margin='normal' onKeyUp={this.handleModulesSearch} />
                                 <div className={classes.transferModules}>
                                     <List>
                                         {this.state.modules.map((repo, index) =>