1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import React from 'react';
import { Query, Mutation } from 'react-apollo';
import styled from 'styled-components';
import { BarLoader } from 'react-spinners';
import { perPage } from '../config';
import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/index';
import Error from './ErrorMessage';
import Form from './styles/Form';
import SickButton from './styles/SickButton';
const PermissionsBox = styled.div`
border: 1px solid ${props => props.theme.offWhite};
box-shadow: ${props => props.theme.bs};
margin-bottom: 5rem;
padding: 2rem;
label {
cursor: pointer;
span {
transition: all 0.1s;
padding: 0 1rem;
display: block;
border: 1px solid ${props => props.theme.offWhite};
border-left-width: 20px;
}
input {
display: none;
}
input:checked + span {
border-color: red;
}
margin-right: 1rem;
margin-bottom: 1rem;
}
.labels {
display: flex;
flex-wrap: wrap;
& > * {
flex: 0 1 auto;
}
}
`;
class User extends React.Component {
state = {
permissions: this.props.user.permissions,
};
handlePermissionsChange = e => {
const checkbox = e.target;
let updatedPermissions = [...this.state.permissions];
if (checkbox.checked) {
// add it in
updatedPermissions.push(checkbox.value);
} else {
updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value);
}
this.setState({ permissions: updatedPermissions });
};
render() {
const { user } = this.props;
return (
<Mutation mutation={UPDATE_PERMISSIONS_MUTATION}>
{(updatePermissions, { loading, error }) => (
<PermissionsBox key={user.id} className="user">
<BarLoader className="barLoader" width="100%" height={5} color="red" loading={loading} />
<Error error={error} />
<h2>
{user.name} -- {user.email}
</h2>
<div className="labels">
{[
'ADMIN',
'USER',
'ITEMCREATE',
'ITEMUPDATE',
'ITEMDELETE',
'PERMISSIONUPDATE',
'NUKE',
].map(permission => (
<label key={permission} htmlFor={`${user.id}-permission-${permission}`}>
<input
type="checkbox"
checked={this.state.permissions.includes(permission)}
name={`permission-${permission}`}
id={`${user.id}-permission-${permission}`}
onChange={this.handlePermissionsChange}
value={permission}
/>
<span>{permission}</span>
</label>
))}
</div>
<SickButton
type="button"
onClick={async () => {
const res = await updatePermissions({
variables: {
permissions: this.state.permissions,
userId: this.props.user.id,
},
});
console.log(res);
}}
>
Update Permissions
</SickButton>
</PermissionsBox>
)}
</Mutation>
);
}
}
const Permissions = () => (
<Query query={ALL_USERS_QUERY}>
{({ data, error, loading }) => {
if (loading) return <div>Loading</div>;
if (error) return <Error error={error} />;
return (
<div>
<h1>Manage User Permissions</h1>
{data.users.map(user => <User key={user.id} user={user} />)}
</div>
);
}}
</Query>
);
export default Permissions;
|
