Commit 6e2b7249 authored by Lionel Morin's avatar Lionel Morin
Browse files

Merge branch 'enhance_serverselection' into 'develop'

Enhance serverselection

See merge request !6
parents 224b9cfe 73e526c8
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) {
......
......@@ -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>
);
......
......@@ -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
......
......@@ -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>
......
......@@ -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>
......
......@@ -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
......
......@@ -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 }}}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment