diff --git a/jams-react-client/src/components/Drawer/Drawer.js b/jams-react-client/src/components/Drawer/Drawer.js
index c9cef1cc481ac10588a5697d9c7be33a116e2d8a..97ce6c8658819d991b139e7e793a6a1313e93602 100644
--- a/jams-react-client/src/components/Drawer/Drawer.js
+++ b/jams-react-client/src/components/Drawer/Drawer.js
@@ -15,13 +15,14 @@ import MailIcon from '@material-ui/icons/Mail';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import LinearProgress from '@material-ui/core/LinearProgress';
-import {api_path_get_user_directory_search, api_path_get_auth_contacts} from 'globalUrls'
+import {api_path_get_user_directory_search, api_path_get_auth_contacts, api_path_put_update_group} from 'globalUrls'
import { useHistory } from 'react-router-dom';
import axios from "axios";
import configApiCall from "api.js";
import auth from 'auth.js'
import { debounce } from "lodash";
+import {api_path_get_list_group} from "../../globalUrls";
const useStyles = makeStyles({
list: {
@@ -40,17 +41,19 @@ const useStyles = makeStyles({
});
export default function TemporaryDrawer(props) {
- const classes = useStyles();
- const history = useHistory();
- const [direction, setDirection] = React.useState(props.direction);
- const [contacts, setContacts] = React.useState([]);
+ const classes = useStyles();
+ const history = useHistory();
+ const [direction, setDirection] = React.useState(props.direction);
+ const [users, setUsers] = React.useState([]);
+ const [userAdded, setUserAdded] = React.useState(false);
+ let addingToGroup = props.addingToGroup;
- useEffect(() => {
+ useEffect(() => {
/**
- * Get contact list to pass to the drawer to add contacts to user
+ * Get users list to pass to the drawer to add contacts to user or users to group
*/
axios(configApiCall(api_path_get_user_directory_search, 'GET', {"queryString":"*"}, null)).then((response)=>{
- setContacts(response.data)
+ setUsers(response.data)
}).catch((error) =>{
console.log(error);
if(error.response.status == 401){
@@ -58,83 +61,103 @@ export default function TemporaryDrawer(props) {
history.push('/')
}
});
- }, [])
+ }, [userAdded])
- const addContact = (jamiId) => {
+ const addContactToUser = (jamiId) => {
axios(configApiCall(api_path_get_auth_contacts, 'PUT', {"uri": "jami://" + jamiId}, null)).then((response)=>{
props.setOpenDrawer(false)
- props.getAllContacts()
+ props.getAllUsers()
}).catch((error) =>{
console.log("Error adding user: " + error)
props.setOpenDrawer(false)
});
- }
+ }
+
+ const addUserToGroup = (username) => {
+ axios(configApiCall(api_path_put_update_group+"?newName="+props.groupName+"&groupMembers="+username, 'PUT', null, null)).then((response)=>{
+ setUserAdded(true);
+ props.setOpenDrawer(false)
+ props.getAllUsers()
+ }).catch((error) =>{
+ console.log("Error adding user: " + error)
+ props.setOpenDrawer(false)
+ });
+ }
+
- const searchContacts = (value) => {
- axios(configApiCall(api_path_get_user_directory_search, 'GET', {"queryString": value ? value : "*"}, null)).then((response)=>{
- setContacts(response.data)
- }).catch((error) =>{
- console.log(error);
- setContacts([])
- if(error.response.status == 401){
- auth.authenticated = false
- history.push('/')
- }
- });
+ const searchUsers = (value) => {
+ axios(configApiCall(api_path_get_user_directory_search, 'GET', {"queryString": value ? value : "*"}, null)).then((response)=>{
+ setUsers(response.data)
+ }).catch((error) =>{
+ console.log(error);
+ setUsers([])
+ if(error.response.status == 401){
+ auth.authenticated = false
+ history.push('/')
+ }
+ });
- }
+ }
- const listContacts = () => (
+ const listUsers = () => (
<List>
- {contacts.map((contact) => (
- <ListItem button key={contact.username} onClick={() => {addContact(contact.jamiId)}} >
- <AddCircleOutlineIcon style={{ marginRight: "10px"}} /><ListItemText primary={contact.username} />
- </ListItem>
- ))}
+ {users.map((user) => (
+ addingToGroup
+ ?
+ <ListItem button key={user.username} onClick={() => {addUserToGroup(user.username)}} >
+ <AddCircleOutlineIcon style={{ marginRight: "10px"}} /><ListItemText primary={user.username} />
+ </ListItem>
+ :
+ <ListItem button key={user.username} onClick={() => {addContactToUser(user.jamiId)}} >
+ <AddCircleOutlineIcon style={{ marginRight: "10px"}} /><ListItemText primary={user.username} />
+ </ListItem>
+
+ ))
+ }
</List>
- );
-
- const initSearchContacts = useCallback(debounce((searchValue) => searchContacts(searchValue), 500), [])
-
- const handleSearchContacts = (e) => {
- const searchValue = e.target.value;
- initSearchContacts(searchValue)
- }
-
-
- return (
- <div>
- <React.Fragment key={props.direction}>
- <Drawer
- anchor="right"
- open={props.openDrawer}
- onClose={() => {props.setOpenDrawer(false)}}>
- <div
- className={clsx(classes.list, {
- [classes.fullList]: direction === 'top' || direction === 'bottom',
- })}
- role="presentation"
+ );
+
+ const initSearchUsers = useCallback(debounce((searchValue) => searchUsers(searchValue), 500), [])
+
+ const handleSearchUsers = (e) => {
+ const searchValue = e.target.value;
+ initSearchUsers(searchValue)
+ }
+
+
+ return (
+ <div>
+ <React.Fragment key={props.direction}>
+ <Drawer
+ anchor="right"
+ open={props.openDrawer}
+ onClose={() => {props.setOpenDrawer(false)}}>
+ <div
+ className={clsx(classes.list, {
+ [classes.fullList]: direction === 'top' || direction === 'bottom',
+ })}
+ role="presentation"
>
- <div className={classes.searchWrapper}>
- <CustomInput
- formControlProps={{
- className: classes.margin + " " + classes.search
- }}
- inputProps={{
- placeholder: "Add a contact ...",
- inputProps: {
- "aria-label": "Add a contact"
- },
- onKeyUp: handleSearchContacts,
- }}
- />
+ <div className={classes.searchWrapper}>
+ <CustomInput
+ formControlProps={{
+ className: classes.margin + " " + classes.search
+ }}
+ inputProps={{
+ placeholder: "Add a contact ...",
+ inputProps: {
+ "aria-label": "Add a contact"
+ },
+ onKeyUp: handleSearchUsers,
+ }}
+ />
+ </div>
+ <Divider />
+ {listUsers()}
</div>
- <Divider />
- {listContacts()}
- </div>
- </Drawer>
- </React.Fragment>
- </div>
- );
+ </Drawer>
+ </React.Fragment>
+ </div>
+ );
}
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index 0881b3444343c955154a73a57a23b4c8c6f4637d..b6f415823d01934d423e4cd118120224aef9d6d3 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -107,11 +107,19 @@ export default function EditGroup(props) {
*/
axios(configApiCall(api_path_get_list_group+"?groupName="+props.groupName, 'GET', null, null)).then((response) => {
- response.data.map((group) => {
- if(group.name == props.groupName){
- setGroupMembers(group["groupMembers"])
+ let groups=response.data;
+ if(groups.length > 1){
+ groups.map((group) => {
+ if(group.name == props.groupName){
+ setGroupMembers(group["groupMembers"]);
+ }
+ })
+ }
+ else{
+ if(groups.name == props.groupName){
+ setGroupMembers(groups["groupMembers"]);
}
- })
+ }
}).catch((error) => {
console.log("Error fetching group members of: " + props.groupName + " " + error)
})
@@ -120,24 +128,28 @@ export default function EditGroup(props) {
React.useEffect(()=>{
setName(props.groupName)
axios(configApiCall(api_path_get_list_group+"?groupName="+props.groupName, 'GET', null, null)).then((response) => {
- response.data.map((group) => {
- if(group.name == props.groupName){
- setGroupMembers(group["groupMembers"])
+ let groups=response.data;
+ if(groups.length > 1){
+ groups.map((group) => {
+ if(group.name == props.groupName){
+ setGroupMembers(group["groupMembers"]);
+ }
+ })
+ }
+ else{
+ if(groups.name == props.groupName){
+ setGroupMembers(groups["groupMembers"])
}
- })
+ }
+
}).catch((error) => {
console.log("Error fetching group members of: " + props.groupName + " " + error)
})
- }, [])
-
-
- // const getUserDetails = () => {
- // axio
- // }
+ }, [openDrawer])
const handleGroupUpdate = (data) => {
- props.setName(data.name)
- props.setGroupMembers(data.groupMembers)
+ setName(data.name)
+ setGroupMembers(data.groupMembers)
}
const handleUpdateGroup = () => {
@@ -147,7 +159,7 @@ export default function EditGroup(props) {
}
//TODO: Add blueprint to data to update the blueprint using the blueprintName
- axios(configApiCall(api_path_put_update_group+"?groupName="+name, 'PUT', null, null)).then((response) => {
+ axios(configApiCall(api_path_put_update_group+"?groupName="+name+"&groupMembers="+groupMembers, 'PUT', null, null)).then((response) => {
handleGroupUpdate(data);
}).catch((error) => {
console.log("Error updating group: " + error)
@@ -158,7 +170,7 @@ export default function EditGroup(props) {
return(
<div>
- <TemporaryDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} getAllContacts={getAllGroupMembers} direction="right"/>
+ <TemporaryDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} getAllUsers={getAllGroupMembers} direction="right" addingToGroup={true} groupName={name === ''?props.groupName:name} />
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<Card profile>
@@ -220,15 +232,15 @@ export default function EditGroup(props) {
</TableHead>
<TableBody>
{groupMembers.map(user =>
- <TableRow key={user} className={classes.tableRow}>
- <TableCell className={tableCellClasses}>
- {user}
- </TableCell>
- <TableCell align="right" className={classes.tableActions}>
- <Button color="primary">Remove user</Button>
- </TableCell>
- </TableRow>
- ) }
+ <TableRow key={user} className={classes.tableRow}>
+ <TableCell className={tableCellClasses}>
+ {user}
+ </TableCell>
+ <TableCell align="right" className={classes.tableActions}>
+ <Button color="primary">Remove user</Button>
+ </TableCell>
+ </TableRow>
+ ) }
</TableBody>
</Table>
</GridItem>