Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit c42de20

Browse files
create role
1 parent 2f03e11 commit c42de20

File tree

8 files changed

+167
-56
lines changed

8 files changed

+167
-56
lines changed

‎package-lock.json

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react-router-dom": "^4.3.1",
3232
"react-router-redux": "^4.0.8",
3333
"react-scripts": "1.1.4",
34+
"react-select": "^1.2.1",
3435
"react-table": "^6.8.6",
3536
"react-test-renderer": "^16.4.0",
3637
"reactstrap": "^6.1.0",

‎src/containers/App/Backend/Access/Permissions/agent.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { requests } from 'utils/requests';
22

3+
const initialRequestObj = {
4+
page: 0,
5+
orderBy: '',
6+
sortBy: '',
7+
};
38
const Permission = {
4-
list: requestObj =>
9+
list: (requestObj=initialRequestObj) =>
510
requests.get(
611
`/permissions?page=${requestObj.page + 1}&orderBy=${
712
requestObj.orderBy

‎src/containers/App/Backend/Access/Roles/Form.js

Lines changed: 124 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
// https://github.com/JedWatson/react-select/issues/1129#issuecomment-248240544
12
import React, { Component } from 'react';
23
import { connect } from 'react-redux';
3-
import userAgent from './agent';
4+
import { compose } from 'redux';
5+
46
import {
57
ROLE_CREATE,
68
ROLE_FORM_PAGE_LOADED,
@@ -26,19 +28,16 @@ import ListErrors from 'components/ListErrors';
2628

2729
import { Field, reduxForm } from 'redux-form';
2830
import { Link } from 'react-router-dom';
31+
import { postRole, onFormLoad, onFormUnLoad } from './actions';
32+
import { onLoadAction as onLoadPermissionsAction } from '../Permissions/actions';
33+
import injectReducer from 'utils/injectReducer';
34+
import reducer from './reducer';
35+
import Select from 'react-select';
2936

3037
let data = {
31-
id: null,
32-
first_name: '',
33-
last_name: '',
34-
email: '',
35-
password: '',
36-
password_confirmation: '',
37-
confirmed: true,
38-
status: true,
39-
confirmation_email: false,
40-
assignees_roles: '3',
41-
permissions: [1],
38+
name: '',
39+
sort: null,
40+
permissions: null,
4241
};
4342

4443
const roleMap = {
@@ -48,46 +47,50 @@ const roleMap = {
4847
};
4948

5049
class Form extends Component {
51-
constructor(props) {
52-
super(props);
53-
54-
if (this.props.match.params.id) {
55-
return this.props.onLoad(userAgent.get(this.props.match.params.id));
56-
}
57-
this.props.onLoad(null);
58-
}
50+
state = {
51+
permissions: [],
52+
};
5953

6054
componentWillReceiveProps(nextProps) {
6155
if (this.props.match.params.id !== nextProps.match.params.id) {
6256
if (nextProps.match.params.id) {
6357
this.props.onUnload();
64-
return this.props.onLoad(userAgent.get(this.props.match.params.id));
58+
return this.props.onFormLoad(this.props.match.params.id);
6559
}
6660
this.props.onLoad(null);
6761
}
6862
}
6963

64+
componentDidMount() {
65+
this.props.onLoadPermissionsAction();
66+
67+
if (this.props.match.params.id) {
68+
return this.props.onFormLoad(this.props.match.params.id);
69+
}
70+
}
71+
7072
componentWillUnmount() {
71-
this.props.onUnload();
73+
this.props.onFormUnLoad();
7274
}
7375

7476
render() {
7577
const { handleSubmit } = this.props;
7678
const { invalid } = this.props;
77-
const { user } = this.props;
78-
const isEditMode = user ? true : false;
79+
const { role, permissions } = this.props;
80+
const isEditMode = role ? true : false;
7981
const { errors } = this.props;
8082

81-
if (user) {
82-
data.first_name = user.first_name;
83-
data.id = user.id;
84-
data.last_name = user.last_name;
85-
data.email = user.email;
86-
data.confirmed = user.confirmed;
87-
data.status = user.status;
88-
data.confirmation_email = user.confirmation_email;
89-
data.assignees_roles = roleMap[user.role];
83+
if (role) {
84+
data.name = role.name;
85+
data.sort = role.sort;
86+
data.status = role.status;
87+
data.permissions = role.permissions;
9088
}
89+
90+
// if(permissions.length) {
91+
// this.setState({permissions: permissions});
92+
// }
93+
9194
if (this.props.match.params.id && errors) {
9295
this.props.history.push('/access/role');
9396
}
@@ -96,7 +99,7 @@ class Form extends Component {
9699
<Row>
97100
<Col xs="12">
98101
<form
99-
onSubmit={handleSubmit(this.props.onSubmit.bind(this))}
102+
onSubmit={handleSubmit(this.props.postRole.bind(this))}
100103
className="form-horizontal"
101104
>
102105
<Card>
@@ -135,6 +138,79 @@ class Form extends Component {
135138
</InputGroup>
136139
</Col>
137140
</FormGroup>
141+
142+
<FormGroup row>
143+
<Label
144+
className="col-md-3 col-form-label"
145+
htmlFor="sort"
146+
>
147+
Sort*
148+
</Label>
149+
<Col md="9">
150+
<InputGroup>
151+
<Field
152+
className="form-control"
153+
component="input"
154+
type="number"
155+
id="sort"
156+
name="sort"
157+
placeholder="Enter Sort..."
158+
required
159+
/>
160+
<InputGroupAddon addonType="append">
161+
<InputGroupText>
162+
<i className="fa fa-sort-numeric-desc" />
163+
</InputGroupText>
164+
</InputGroupAddon>
165+
</InputGroup>
166+
</Col>
167+
</FormGroup>
168+
<FormGroup row>
169+
<Label
170+
className="col-md-3 col-form-label"
171+
htmlFor="status"
172+
>
173+
Active
174+
</Label>
175+
<Col md="9">
176+
<Field
177+
type="checkbox"
178+
id="status"
179+
name="status"
180+
component="input"
181+
className="centered-checkbox"
182+
/>
183+
</Col>
184+
</FormGroup>
185+
<FormGroup row>
186+
<Label
187+
className="col-md-3 col-form-label"
188+
htmlFor="status"
189+
>
190+
Active
191+
</Label>
192+
<Col md="9">
193+
<Field
194+
name="permissions"
195+
component={props => (
196+
<Select
197+
labelKey="display_name"
198+
valueKey="id"
199+
multi={true}
200+
value={props.input.value}
201+
onChange={props.input.onChange}
202+
onBlur={() =>
203+
props.input.onBlur(props.input.value)
204+
}
205+
options={permissions}
206+
placeholder="Select"
207+
simpleValue
208+
closeOnSelect={false}
209+
/>
210+
)}
211+
/>
212+
</Col>
213+
</FormGroup>
138214
</Col>
139215
</Row>
140216
</CardBody>
@@ -170,24 +246,20 @@ const mapStateToProps = state => ({
170246
...state.roles,
171247
});
172248

173-
const mapDispatchToProps = dispatch => ({
174-
onSubmit: values => {
175-
if (values.id) {
176-
dispatch({ type: ROLE_UPDATE, payload: userAgent.update(values) });
177-
} else {
178-
dispatch({ type: ROLE_CREATE, payload: userAgent.create(values) });
179-
}
180-
},
181-
onLoad: payload => dispatch({ type: ROLE_FORM_PAGE_LOADED, payload }),
182-
onUnload: () => dispatch({ type: ROLE_FORM_PAGE_UNLOADED }),
183-
});
184-
185-
export default reduxForm({
249+
const withreduxForm = reduxForm({
186250
form: 'CreateRoleForm',
187251
initialValues: data,
188-
})(
189-
connect(
190-
mapStateToProps,
191-
mapDispatchToProps
192-
)(Form)
252+
});
253+
254+
const withReducer = injectReducer({ key: 'roles', reducer });
255+
256+
const withConnect = connect(
257+
mapStateToProps,
258+
{ postRole, onFormLoad, onFormUnLoad, onLoadPermissionsAction }
193259
);
260+
261+
export default compose(
262+
withReducer,
263+
withreduxForm,
264+
withConnect
265+
)(Form);

‎src/containers/App/Backend/Access/Roles/actions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const onViewUnload = () => {
5252
};
5353
};
5454

55-
export const postUser = values => {
55+
export const postRole = values => {
5656
if (values.id) {
5757
return { type: ROLE_UPDATE, payload: agent.update(values) };
5858
} else {

‎src/containers/App/Backend/Access/Roles/agent.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ const Role = {
1010
get: id => requests.get(`/roles/${id}`),
1111
del: id => requests.del(`/roles/${id}`),
1212
create: ({ ...values }) => {
13-
values.assignees_roles = [values.assignees_roles];
13+
values.permissions = values.permissions.split(',');
14+
values.permissions.forEach((value, index) => {
15+
values[`permissions[${value}]`] = value;
16+
});
17+
values.permissions = 1;
18+
values.associated_permissions = 'custom';
1419
return requests.post('/roles', values);
1520
},
1621
update: ({ ...values }) => {

‎src/containers/App/Backend/Access/Roles/reducer.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import {
1111
ROLE_DELETE,
1212
} from './constants';
1313

14-
const initialState = { roles: [], meta: { last_page: 1 } };
14+
import { PERMISSION_LIST_PAGE_LOADED } from '../Permissions/constants';
15+
16+
const initialState = { roles: [], meta: { last_page: 1 }, permissions: [] };
1517

1618
export default (state = initialState, action) => {
1719
switch (action.type) {
@@ -20,6 +22,12 @@ export default (state = initialState, action) => {
2022
...state,
2123
inProgress: true,
2224
};
25+
case PERMISSION_LIST_PAGE_LOADED:
26+
return {
27+
...state,
28+
permissions: action.payload.data,
29+
errors: action.error ? action.payload.error : null,
30+
};
2331
case ROLE_LIST_PAGE_LOADED:
2432
return {
2533
...state,

‎src/containers/App/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import 'simple-line-icons/css/simple-line-icons.css';
2424
// Import Main styles for this application
2525
import 'scss/style.css';
2626
import 'react-table/react-table.css';
27+
import 'react-select/dist/react-select.css';
28+
2729
import { setToken } from 'utils/requests';
2830
import authAgent from './Backend/Auth/agent';
2931

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /