From d911c20fc9dfdf85785f8fd8308db4942a5d602a Mon Sep 17 00:00:00 2001
From: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
Date: Fri, 4 Sep 2020 16:00:41 -0400
Subject: [PATCH] Change group blueprint
Change-Id: I6f0e3205f8e040e1c8b81a56659cd6d15199aa61
---
.../src/components/Drawer/Drawer.js | 6 +-
.../src/views/Groups/EditGroup.js | 101 ++++++++----------
jams-react-client/src/views/Groups/Groups.js | 35 +++---
3 files changed, 68 insertions(+), 74 deletions(-)
diff --git a/jams-react-client/src/components/Drawer/Drawer.js b/jams-react-client/src/components/Drawer/Drawer.js
index 62b80958..8849f531 100644
--- a/jams-react-client/src/components/Drawer/Drawer.js
+++ b/jams-react-client/src/components/Drawer/Drawer.js
@@ -119,10 +119,12 @@ export default function TemporaryDrawer(props) {
const addUserToGroup = (username) => {
let url = '';
- if(props.selectedBlueprint == ''){
+ console.log(props.blueprintLabel);
+
+ if(props.blueprintLabel == null){
url = api_path_put_update_group+"?groupName="+props.groupName+"&newName="+props.groupName+"&blueprintName=&groupMembers="+username;
}else{
- url = api_path_put_update_group+"?groupName="+props.groupName+"&newName="+props.groupName+"&blueprintName="+props.blueprintsOptions[props.selectedBlueprint].label+"&groupMembers="+username;
+ url = api_path_put_update_group+"?groupName="+props.groupName+"&newName="+props.groupName+"&blueprintName="+props.blueprintLabel+"&groupMembers="+username;
}
axios(configApiCall(url, 'PUT', null, null)).then((response) => {
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index d19a536e..56f024de 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -32,6 +32,9 @@ import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import EditIcon from '@material-ui/icons/Edit';
import PeopleOutlineIcon from '@material-ui/icons/PeopleOutline';
+import IconButton from '@material-ui/core/IconButton';
+import SaveIcon from '@material-ui/icons/Save';
+
import axios from "axios"
import configApiCall from "../../api"
import {
@@ -48,7 +51,7 @@ import TemporaryDrawer from "components/Drawer/Drawer"
import * as tool from "../../tools";
import auth from 'auth.js'
-const styles = ()=> ( {
+const useStyles = makeStyles((theme) => ({
...devicesStyle,
...dashboardStyle,
root: {
@@ -89,20 +92,15 @@ const styles = ()=> ( {
minWidth: '80vh',
maxWidth: '80vh'
}
-});
-
-const useStyles = makeStyles(styles);
+}));
export default function EditGroup(props) {
const classes = useStyles();
- const history = useHistory();
- const [groupExists, setGroupExists] = React.useState(false)
-
- const [name, setName] = React.useState(props.groupName)
- const [blueprint, setBlueprint] = React.useState(null)
- const [groupMembers, setGroupMembers] = React.useState([])
- const [blueprints, setBlueprints] = React.useState([])
+ const [name, setName] = React.useState(props.groupName);
+ const [newName, setNewName] = React.useState(props.groupName);
+ const [blueprint, setBlueprint] = React.useState(null);
+ const [groupMembers, setGroupMembers] = React.useState([]);
const [openDrawer, setOpenDrawer] = React.useState(false);
const getGroup = () => {
@@ -113,7 +111,8 @@ export default function EditGroup(props) {
if(group.name == props.groupName){
props.getBlueprintsOptions().forEach((blueprintOption) => {
if(blueprintOption.label === group["blueprint"]){
- setBlueprint(blueprintOption.value)
+ console.log("Group option value : " + blueprintOption.value);
+ setBlueprint(blueprintOption.value);
}
})
setGroupMembers(group["groupMembers"]);
@@ -136,9 +135,24 @@ export default function EditGroup(props) {
})
}
- React.useEffect(()=>{
- getGroup()
+ const getGroupsOptions = () => {
+ let blueprintsOptions = []
+ let index = 0
+ if(props.blueprints.length === 0)
+ blueprintsOptions.push({value: index, label: "No blueprint found"})
+ else {
+ props.blueprints.map((blueprintElement) => {
+ blueprintsOptions.push({value: index, label: blueprintElement.name});
+ index += 1
+ })
+ }
+ return blueprintsOptions
+ }
+ const blueprintsOptionsItems = tool.buildSelectMenuItems(getGroupsOptions());
+
+ React.useEffect(()=>{
+ getGroup();
}, [])
const handleUpdateGroup = (blueprintValue) => {
@@ -151,30 +165,11 @@ export default function EditGroup(props) {
}
axios(configApiCall(url, 'PUT', null, null)).then((response) => {
- getGroup()
+ setNewName(name);
+ getGroup();
}).catch((error) => {
console.log("Error updating group: " + error)
})
-
- axios(configApiCall(api_path_blueprints+"?name=*", 'GET', null, null)).then((response) => {
- console.log(blueprints);
- setBlueprints(response.data)
- }).catch((error) =>{
- console.log(error);
- if(error.response.status === 401){
- auth.authenticated = false
- history.push('/')
- }
- if(error.response.status === 500){
- setBlueprints([])
- }
- });
-
- }
-
- const handleGroupUpdate = (data) => {
- setName(data.name)
- setGroupMembers(data.groupMembers)
}
const removeUserFromGroup = (user) => {
@@ -198,26 +193,11 @@ export default function EditGroup(props) {
handleUpdateGroup(blueprintValue)
}
- const getGroupsOptions = () => {
- let blueprintsOptions = []
- let index = 0
- if(blueprints.length === 0)
- blueprintsOptions.push({value: index, label: "No blueprint found"})
- else {
- blueprints.map((blueprint) => {
- blueprintsOptions.push({value: index, label: blueprint.name});
- index += 1
- })
- }
- return blueprintsOptions
- }
-
- const blueprintsOptionsItems = tool.buildSelectMenuItems(getGroupsOptions());
const tableCellClasses = classnames(classes.tableCell);
return(
<div>
- <TemporaryDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} direction="right" addingToGroup={true} placeholder="Add user ..." groupName={name === ''?props.groupName:name} selectedBlueprint={blueprint} getGroup={getGroup} blueprintsOptions={props.getBlueprintsOptions()}/>
+ <TemporaryDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} direction="right" addingToGroup={true} placeholder="Add user ..." groupName={name === ''?props.groupName:name} blueprintLabel={ blueprint == null ? null : props.getBlueprintsOptions()[blueprint].label} getGroup={getGroup}/>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<Card profile>
@@ -226,7 +206,7 @@ export default function EditGroup(props) {
<EditIcon />
</CardIcon>
<p className={classes.cardCategory}>Edit group</p>
- <h3 className={classes.cardTitle}>{props.groupName}</h3>
+ <h3 className={classes.cardTitle}>{newName}</h3>
</CardHeader>
<CardBody profile>
<div className={classes.root}>
@@ -241,15 +221,22 @@ export default function EditGroup(props) {
<PeopleOutlineIcon />
</InputAdornment>
}
+ endAdornment={
+ <IconButton color="primary" aria-label="upload picture" component="span"
+ onClick={() => {
+ handleUpdateGroup(blueprint);
+ }}
+ disabled={props.groupNameExits}
+ >
+ <SaveIcon />
+ </IconButton>
+ }
onChange={e => {
setName(e.target.value);
props.initCheckGroupNameExists(e.target.value)
- if(!props.groupNameExits){
- handleUpdateGroup(blueprint)
- }
}}
/>
- </FormControl>
+ </FormControl>
</Grid>
<Grid item xs={12} sm={12} md={12}>
<FormControl className={classes.margin} fullWidth>
@@ -260,7 +247,7 @@ export default function EditGroup(props) {
onChange={(e) => handleBlueprintsChange(e.target.value)}
variant="outlined"
children={blueprintsOptionsItems}
- disabled={blueprints.length === 0}
+ disabled={props.blueprints.length === 0}
/>
</FormControl>
</Grid>
diff --git a/jams-react-client/src/views/Groups/Groups.js b/jams-react-client/src/views/Groups/Groups.js
index 0a2371cc..d8ed1271 100644
--- a/jams-react-client/src/views/Groups/Groups.js
+++ b/jams-react-client/src/views/Groups/Groups.js
@@ -115,6 +115,22 @@ export default function Groups() {
history.push('/admin/groups')
}
+ const loadBlueprints = () => {
+ axios(configApiCall(api_path_blueprints+"?name=*", 'GET', null, null)).then((response) => {
+ setBlueprints(response.data)
+ setSelectedBlueprint(getBlueprintsOptions()[0])
+ }).catch((error) =>{
+ console.log(error);
+ if(error.response.status === 401){
+ auth.authenticated = false
+ history.push('/')
+ }
+ if(error.response.status === 500){
+ setBlueprints([])
+ }
+ });
+ }
+
useEffect(() => {
setLoading(true)
const timer = setInterval(() => {
@@ -143,19 +159,7 @@ export default function Groups() {
history.push('/')
}
});
- axios(configApiCall(api_path_blueprints+"?name=*", 'GET', null, null)).then((response) => {
- setBlueprints(response.data)
- setSelectedBlueprint(getBlueprintsOptions()[0])
- }).catch((error) =>{
- console.log(error);
- if(error.response.status === 401){
- auth.authenticated = false
- history.push('/')
- }
- if(error.response.status === 500){
- setBlueprints([])
- }
- });
+ loadBlueprints();
return () => {
clearInterval(timer);
};
@@ -241,9 +245,10 @@ export default function Groups() {
initCheckGroupNameExists={initCheckGroupNameExists}
groupNameExits={groupNameExits}
blueprintsOptionsItems={blueprintsOptionsItems}
- selectedBlueprint={selectedBlueprint}
handleBlueprintsChange={handleBlueprintsChange}
getBlueprintsOptions={getBlueprintsOptions}
+ blueprints={blueprints}
+ disableCreate={disableCreate}
/>
</div>
)
@@ -261,7 +266,7 @@ export default function Groups() {
<DialogContentText id="alert-dialog-description">
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={12}>
- <FormControl className={classes.margin} size="medium" error={groupNameExits}>
+ <FormControl className={classes.margin} error={groupNameExits} fullWidth>
<InputLabel htmlFor="groupName">Group name</InputLabel>
<Input
id="groupName"
--
GitLab