mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-23 20:07:40 +02:00
144 lines
4.7 KiB
JavaScript
144 lines
4.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
Select,
|
|
MenuItem,
|
|
TextField,
|
|
CircularProgress,
|
|
InputLabel,
|
|
FormControl,
|
|
Grid,
|
|
Button,
|
|
Icon,
|
|
InputAdornment,
|
|
} from '@material-ui/core';
|
|
|
|
import Autocomplete from '@material-ui/lab/Autocomplete';
|
|
|
|
function AddUserComponent({ roles, addUserToRole }) {
|
|
const [user, setUser] = useState();
|
|
const [role, setRole] = useState({});
|
|
const [options, setOptions] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (roles.length > 0) {
|
|
const regularRole = roles.find(r => r.name.toLowerCase() === 'regular');
|
|
setRole(regularRole || roles[0]);
|
|
}
|
|
}, [roles]);
|
|
|
|
const search = async q => {
|
|
if (q.length > 1) {
|
|
setLoading(true);
|
|
// TODO: Do not hard-code fetch here.
|
|
const response = await fetch(`api/admin/user-admin/search?q=${q}`);
|
|
const users = await response.json();
|
|
setOptions([...users]);
|
|
} else {
|
|
setOptions([]);
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleQueryUpdate = evt => {
|
|
const q = evt.target.value;
|
|
search(q);
|
|
};
|
|
|
|
const handleSelectUser = (evt, value) => {
|
|
setOptions([]);
|
|
setUser(value);
|
|
};
|
|
|
|
const handleRoleChange = evt => {
|
|
const roleId = +evt.target.value;
|
|
const role = roles.find(r => r.id === roleId);
|
|
setRole(role);
|
|
};
|
|
|
|
const handleSubmit = async evt => {
|
|
evt.preventDefault();
|
|
await addUserToRole(user.id, role.id);
|
|
setUser(undefined);
|
|
setOptions([]);
|
|
};
|
|
|
|
return (
|
|
<Grid container justify="center" spacing={3} alignItems="flex-end">
|
|
<Grid item>
|
|
<Autocomplete
|
|
id="add-user-component"
|
|
style={{ width: 300 }}
|
|
noOptionsText="No users found."
|
|
onChange={handleSelectUser}
|
|
autoSelect={false}
|
|
value={user || ''}
|
|
freeSolo
|
|
getOptionSelected={() => true}
|
|
filterOptions={o => o}
|
|
getOptionLabel={option => {
|
|
if (option) {
|
|
return `${option.name || '(Empty name)'} <${option.email || option.username}>`;
|
|
} else return '';
|
|
}}
|
|
options={options}
|
|
loading={loading}
|
|
renderInput={params => (
|
|
<TextField
|
|
{...params}
|
|
label="User"
|
|
name="search"
|
|
onChange={handleQueryUpdate}
|
|
InputProps={{
|
|
...params.InputProps,
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<Icon>search</Icon>
|
|
</InputAdornment>
|
|
),
|
|
endAdornment: (
|
|
<React.Fragment>
|
|
{loading ? <CircularProgress color="inherit" size={20} /> : null}
|
|
{params.InputProps.endAdornment}
|
|
</React.Fragment>
|
|
),
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<FormControl>
|
|
<InputLabel id="add-user-select-role-label">Role</InputLabel>
|
|
<Select
|
|
labelId="add-user-select-role-label"
|
|
id="add-user-select-role"
|
|
placeholder="Project role"
|
|
value={role.id || ''}
|
|
onChange={handleRoleChange}
|
|
>
|
|
{roles.map(role => (
|
|
<MenuItem key={role.id} value={role.id}>
|
|
{role.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button variant="contained" color="primary" disabled={!user} onClick={handleSubmit}>
|
|
Add user
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
AddUserComponent.propTypes = {
|
|
roles: PropTypes.array.isRequired,
|
|
addUserToRole: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default AddUserComponent;
|