Merge branch 'enhance_serverselection' into 'develop'

Enhance serverselection

See merge request !6

src/components/ServerModelSelector.js

 import React from 'react';
-import { TextField, MenuItem, Divider, InputAdornment, IconButton } from '@material-ui/core';
+import {
+  TextField,
+  MenuItem,
+  Divider,
+  InputAdornment,
+  IconButton,
+  Select,
+  Chip
+ } from '@material-ui/core';
 import CachedIcon from '@material-ui/icons/Cached';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -11,7 +19,12 @@ class ServerModelSelector extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      servermodelselected: []
+    };
+
     this.handleServermodelRefreshClick = this.handleServermodelRefreshClick.bind(this);
+    this.handleSelectedChange = this.handleSelectedChange.bind(this);
   }
 
   componentDidMount() {
@@ -20,34 +33,72 @@ class ServerModelSelector extends React.Component {
     if (isStaled) this.props.dispatch(servermodelActions.list());
   }
 
+  handleSelectedChange(event) {
+    console.log(this.state)
+    console.log(this.props)
+
+    let joined = this.state.servermodelselected.concat(event.target.value);
+    console.log(joined)
+    this.setState({ servermodelselected: joined })
+
+
+
+  }
   render() {
     // eslint-disable-next-line
-    const { classes, servermodelGroups, lastRefresh, ...otherProps } = this.props;
-    return (
-      <TextField {...otherProps} select
-        SelectProps={{
-          MenuProps: {
-            className: classes.menu,
-          },
-        }}
-        InputProps={{
-          endAdornment:
-          <InputAdornment position="end">
-            <IconButton disabled={otherProps.disabled}
-              onClick={this.handleServermodelRefreshClick}>
-              <CachedIcon />
-            </IconButton>
-          </InputAdornment>
-        }}
-        disabled={otherProps.disabled}
-        dispatch={null} classes={null}>
+    const { classes, servermodelGroups, lastRefresh, multi, ...otherProps } = this.props;
+    const {servermodelselected} = this.state;
+    if (multi === 'true') {
+      return (
+        <Select
+        {...otherProps}
+          multiple
+          value={servermodelselected}
+          onChange={this.handleSelectedChange}
+          renderValue={selected => (
+            <div>
+              {selected.map(value => (
+                <Chip key={value} label={value}  />
+              ))}
+            </div>
+          )}
+        >
         {
           Object.keys(servermodelGroups).map(groupName => {
             return [...this.renderServerModelsGroup(groupName, servermodelGroups[groupName]), <Divider key={`divider-${groupName}`} />];
           })
         }
-      </TextField>
-    );
+        </Select>
+      )
+    }else {
+      return (
+        <TextField {...otherProps} select
+          SelectProps={{
+            MenuProps: {
+              className: classes.menu,
+            },
+          }}
+          InputProps={{
+            endAdornment:
+            <InputAdornment position="end">
+              <IconButton disabled={otherProps.disabled}
+                onClick={this.handleServermodelRefreshClick}>
+                <CachedIcon />
+              </IconButton>
+            </InputAdornment>
+          }}
+          disabled={otherProps.disabled}
+         >
+          {
+            Object.keys(servermodelGroups).map(groupName => {
+              return [...this.renderServerModelsGroup(groupName, servermodelGroups[groupName]), <Divider key={`divider-${groupName}`} />];
+            })
+          }
+        </TextField>
+      );
+    }
+
+
   }
 
   renderServerModelsGroup(groupName, servermodels) {

src/components/ServerPicker.js

@@ -55,19 +55,18 @@ class ServerPicker extends React.Component {
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle1">Serveurs Disponibles</Typography>
           <Infinite
-          preloadBatchSize= {this.props.containerHeight * 0.5}
           containerHeight={400}
           elementHeight={57}>
-            <ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxOne} allItems={srv} />
+            <ItemList dense={true} classes={classes} handleevent={this.handleEvent} items={this.state.boxOne} allItems={srv} />
           </Infinite>
         </Grid>
         <Grid item xs={12} sm={6}>
           <Typography variant="subtitle1">Serveurs de la sélection</Typography>
           <Infinite
-          preloadBatchSize= {this.props.containerHeight * 0.5}
+
           containerHeight={400}
           elementHeight={57}>
-            <ItemList dense={true} handleEvent={this.handleEvent} items={this.state.boxTwo} allItems={srv} />
+            <ItemList dense={true} classes={classes} handleevent={this.handleEvent} items={this.state.boxTwo} allItems={srv} />
           </Infinite>
         </Grid>
       </React.Fragment>
@@ -80,7 +79,8 @@ class ItemList extends React.Component{
    render() {
      let itemArr = this.props.allItems;
      let myItems = this.props.items;
-     let handleEvent = this.props.handleEvent;
+     let handleEvent = this.props.handleevent;
+
 
      let listItems = itemArr.map((server) => {
         if (!myItems.includes(server.serverid)) return null;
@@ -92,7 +92,7 @@ class ItemList extends React.Component{
                 />
      });
      return (
-      <List dense={true} handleEvent={this.handleEvent}>
+      <List dense={true} handleevent={this.handleEvent}>
             {listItems}
       </List>
      );

src/pages/ServerSelectionsPage/ServerSelectionForm.js

@@ -3,22 +3,28 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { withRouter } from 'react-router-dom';
-
 import {
   Grid,
   TextField,
   CircularProgress,
+  Typography,
+  ExpansionPanel,
+  ExpansionPanelSummary,
+  ExpansionPanelDetails,
+  InputLabel
 } from '@material-ui/core';
 
 import {
-  Check as CheckIcon
+  Check as CheckIcon,
+  ExpandMore
 } from '@material-ui/icons';
 
 import {
   Page,
   ResponsiveButton,
   withForm,
-  ServerPicker
+  ServerPicker,
+  ServerModelSelector
 } from '../../components';
 
 import {
@@ -88,8 +94,7 @@ class ServerSelectionForm extends React.Component {
       requete: ''
     };
     history.listen((location, action) => {
-        console.log("POUEEEEEET")
-        this.setState({ dismount: true })
+      this.setState({ dismount: true })
     });
 
     return (
@@ -133,8 +138,40 @@ class ServerSelectionForm extends React.Component {
                   fullWidth
                 />
               </Grid>
-              {!dismount && <ServerPicker handleSrvList={this.handleSrvList} />}
             </Grid>
+            {/* Work in progress
+             <ExpansionPanel style={{margin: '20px 10px'}}>
+                <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+                  <Typography variant='subtitle1'>Filtres serveurs</Typography>
+                </ExpansionPanelSummary>
+                  <ExpansionPanelDetails>
+                    <Grid item xs={12} sm={6}>
+                        <InputLabel htmlFor="serverfilter">Filtre de serveur</InputLabel>
+                        <TextField
+                            name="serverfilter"
+                            className={classes.textField}
+                            onChange={form.onChange}
+                            disabled={isLoading || isSaving}
+                            fullWidth
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <InputLabel htmlFor="servermodelefilter">Modèle de serveur</InputLabel>
+                        <ServerModelSelector
+                            fullWidth
+                            multi='true'
+                            name="servermodelefilter"
+                            label="Filtre de modèles de serveur"
+                            className={classes.textField}
+                         />
+                    </Grid>
+
+                  </ExpansionPanelDetails>
+
+              </ExpansionPanel>*/}
+              <Grid container spacing={theme.spacing.unit * 2}>
+              {!dismount && <ServerPicker handleSrvList={this.handleSrvList} />}
+              </Grid>
 
             <ResponsiveButton
               sm={sm}
@@ -197,7 +234,6 @@ const styles = theme => ({
 });
 
 ServerSelectionForm.propTypes = {
-  classes: PropTypes.object.isRequired,
   theme: PropTypes.object.isRequired,
   form: PropTypes.object.isRequired,
   serverselection: PropTypes.object

src/pages/ServerSelectionsPage/ServerSelectionUsersList.js

@@ -109,7 +109,7 @@ import { serverselectionActions } from '../../actions';
                   <Button onClick={this.handleDeleteUserDialogCloseClick.bind(this)}>
                     Annuler
                   </Button>
-                  <Button onClick={this.handleConfirmDeleteUserClick.bind(this)} style={{color: theme.palette.error.main }}  autoFocus>
+                  <Button onClick={this.handleConfirmDeleteUserClick.bind(this)}  autoFocus>
                     Retirer
                   </Button>
                 </DialogActions>
@@ -142,6 +142,7 @@ import { serverselectionActions } from '../../actions';
                       name: 'selrole',
                       id: 'selrole',
                     }}
+                    classes={{classes}}
                   >
                     <MenuItem value='admin'>Admin</MenuItem>
                     <MenuItem value='manager'>Manager</MenuItem>
@@ -152,7 +153,7 @@ import { serverselectionActions } from '../../actions';
                 <Button onClick={this.handleEditUserDialogCloseClick.bind(this)}>
                   Annuler
                 </Button>
-                <Button onClick={this.handleConfirmEditUserClick.bind(this)} style={{color: theme.palette.error.main }}  autoFocus>
+                <Button onClick={this.handleConfirmEditUserClick.bind(this)} autoFocus>
                   Modifier
                 </Button>
               </DialogActions>

src/pages/ServerSelectionsPage/ServerSelectionsDetail.js

@@ -163,7 +163,7 @@ class ServerSelectionsDetail extends React.Component {
                   Utilisateurs
                 </Typography>
                 {Object.keys(serverselection.serverselectionusers).map(user =>
-                  <ServerSelectionUsersList key={`${user}-user`} user={user} role={serverselection.serverselectionusers[user]} serverselection={serverselection} />
+                  <ServerSelectionUsersList key={`${user}-user`} user={user}  role={serverselection.serverselectionusers[user]} serverselection={serverselection} />
                 )}
                 <ResponsiveButton
                   sm={sm}
@@ -202,7 +202,7 @@ class ServerSelectionsDetail extends React.Component {
         </Dialog>
         <Dialog
           fullScreen={fullScreen}
-          maxWidth='sd'
+          maxWidth='sm'
           open={this.state.adduserDialogOpen}
           onClose={this.handleAddUserDialogCloseClick.bind(this)}
           aria-labelledby="responsive-dialog-title-adduser"
@@ -234,6 +234,7 @@ class ServerSelectionsDetail extends React.Component {
                 name: 'selrole',
                 id: 'selrole',
               }}
+              classes={classes}
             >
               <MenuItem value='admin'>Admin</MenuItem>
               <MenuItem value='manager'>Manager</MenuItem>

src/pages/ServersPage/ServerDetail.js

@@ -19,8 +19,6 @@ import {
   GridList,
   GridListTile
 } from '@material-ui/core';
-
-
 import {
   Edit as EditIcon,
   Delete as DeleteIcon,
@@ -75,6 +73,7 @@ class ServerDetail extends React.Component {
   render(){
     const { classes, theme, fullScreen, inner, sm, availableApps, isLoading, server, servermodel } = this.props;
     const prevServerSelection = this.props.location.serverselection;
+    console.log(classes)
     const back = (prevServerSelection && "/serverselections/"+prevServerSelection) || `/servers`
     return (
       <Page

src/pages/ServersPage/ServersListItem.js

@@ -126,8 +126,7 @@ class ServersListItem extends React.Component {
           <ListItem
             divider
             onClick={this.props.onClick}
-            key={`serverListItem-${server.serverid}`}
-            activeClassName={classes.activeLink}>
+            key={`serverListItem-${server.serverid}`}>
             <ServerAvatar
               server={server}
               iconProps={{ classes: { icon: classes.icon }}}