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
|
import $ from 'jquery';
import _ from 'underscore';
import React from 'react';
import Permissions from './permissions';
import PermissionsFooter from './permissions-footer';
import Search from './search';
import ApplyTemplateView from './apply-template-view';
const PERMISSIONS_ORDER = ['user', 'codeviewer', 'issueadmin', 'admin'];
export default React.createClass({
propTypes: {
permissionTemplates: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
},
getInitialState() {
return { permissions: [], projects: [], total: 0 };
},
componentDidMount() {
this.requestPermissions();
},
sortPermissions(permissions) {
return _.sortBy(permissions, p => PERMISSIONS_ORDER.indexOf(p.key));
},
mergePermissionsToProjects(projects, basePermissions) {
return projects.map(project => {
// it's important to keep the order of the project permissions the same as the order of base permissions
let permissions = basePermissions.map(basePermission => {
let projectPermission = _.findWhere(project.permissions, { key: basePermission.key });
return _.extend({ usersCount: 0, groupsCount: 0 }, basePermission, projectPermission);
});
return _.extend({}, project, { permissions: permissions });
});
},
requestPermissions(page = 1, query = '') {
let url = `${window.baseUrl}/api/permissions/search_project_permissions`;
let data = { p: page, q: query };
if (this.props.componentId) {
data = { projectId: this.props.componentId };
}
$.get(url, data).done(r => {
let permissions = this.sortPermissions(r.permissions);
let projects = this.mergePermissionsToProjects(r.projects, permissions);
if (page > 1) {
projects = [].concat(this.state.projects, projects);
}
this.setState({
projects: projects,
permissions: permissions,
total: r.paging.total,
page: r.paging.pageIndex,
query: query
});
});
},
loadMore() {
this.requestPermissions(this.state.page + 1, this.state.query);
},
search(query) {
this.requestPermissions(1, query);
},
refresh() {
this.requestPermissions(1, this.state.query);
},
bulkApplyTemplate(e) {
e.preventDefault();
new ApplyTemplateView({
projects: this.state.projects,
permissionTemplates: this.props.permissionTemplates,
refresh: this.requestPermissions
}).render();
},
renderBulkApplyButton() {
if (this.props.componentId) {
return null;
}
return (
<button onClick={this.bulkApplyTemplate} className="js-bulk-apply-template">Bulk Apply Template</button>
);
},
render() {
return (
<div className="page">
<header id="project-permissions-header" className="page-header">
<h1 className="page-title">{window.t('roles.page')}</h1>
<div className="page-actions">
{this.renderBulkApplyButton()}
</div>
<p className="page-description">{window.t('roles.page.description2')}</p>
</header>
<Search {...this.props}
search={this.search}/>
<Permissions
projects={this.state.projects}
permissions={this.state.permissions}
permissionTemplates={this.props.permissionTemplates}
refresh={this.refresh}/>
<PermissionsFooter {...this.props}
count={this.state.projects.length}
total={this.state.total}
loadMore={this.loadMore}/>
</div>
);
}
});
|
