Skip to content

Commit 7ba4990

Browse files
douglasmuraokadavimacedo
douglasmuraoka
authored and
davimacedo
committed
feat: Include count CLP option (#1180)
1 parent eb0800e commit 7ba4990

File tree

2 files changed

+79
-57
lines changed

2 files changed

+79
-57
lines changed

‎src/components/PermissionsDialog/PermissionsDialog.react.js

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,13 @@ import {
2424
let origin = new Position(0, 0);
2525

2626
function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
27-
let get = perms.get('get').get(rowId) || perms.get('get').get('*');
28-
let find = perms.get('find').get(rowId) || perms.get('find').get('*');
27+
const get = perms.get('get').get(rowId) || perms.get('get').get('*');
28+
const find = perms.get('find').get(rowId) || perms.get('find').get('*');
29+
const count = perms.get('count').get(rowId) || perms.get('count').get('*');
2930

30-
let create = perms.get('create').get(rowId) || perms.get('create').get('*');
31-
let update = perms.get('update').get(rowId) || perms.get('update').get('*');
32-
let del = perms.get('delete').get(rowId) || perms.get('delete').get('*');
31+
const create = perms.get('create').get(rowId) || perms.get('create').get('*');
32+
const update = perms.get('update').get(rowId) || perms.get('update').get('*');
33+
const del = perms.get('delete').get(rowId) || perms.get('delete').get('*');
3334

3435
if (advanced) {
3536
return [
@@ -50,30 +51,38 @@ function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
5051
<Icon name='check' width={20} height={20} />}
5152
</div>,
5253
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
54+
{!perms.get('count').get('*') || rowId === '*' ?
55+
<Checkbox
56+
label='Count'
57+
checked={perms.get('count').get(rowId)}
58+
onChange={(value) => onChange(rowId, 'count', value)} /> :
59+
<Icon name='check' width={20} height={20} />}
60+
</div>,
61+
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
5362
{!perms.get('create').get('*') || rowId === '*' ?
5463
<Checkbox
5564
label='Create'
5665
checked={perms.get('create').get(rowId)}
5766
onChange={(value) => onChange(rowId, 'create', value)} /> :
5867
<Icon name='check' width={20} height={20} />}
5968
</div>,
60-
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
69+
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
6170
{!perms.get('update').get('*') || rowId === '*' ?
6271
<Checkbox
6372
label='Update'
6473
checked={perms.get('update').get(rowId)}
6574
onChange={(value) => onChange(rowId, 'update', value)} /> :
6675
<Icon name='check' width={20} height={20} />}
6776
</div>,
68-
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
77+
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
6978
{!perms.get('delete').get('*') || rowId === '*' ?
7079
<Checkbox
7180
label='Delete'
7281
checked={perms.get('delete').get(rowId)}
7382
onChange={(value) => onChange(rowId, 'delete', value)} /> :
7483
<Icon name='check' width={20} height={20} />}
7584
</div>,
76-
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
85+
<div key='eighth' className={[styles.check, styles.eighth].join(' ')}>
7786
{!perms.get('addField').get('*') || rowId === '*' ?
7887
<Checkbox
7988
label='Add field'
@@ -84,19 +93,19 @@ function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
8493
];
8594
}
8695

87-
let read = get || find;
88-
let write = create || update || del;
89-
let readChecked = get && find;
90-
let writeChecked = create && update && del;
96+
const read = get || find || count;
97+
const write = create || update || del;
98+
const readChecked = get && find && count;
99+
const writeChecked = create && update && del;
91100

92101
return [
93102
<div key='second' className={[styles.check, styles.second].join(' ')}>
94-
{!(perms.get('get').get('*') && perms.get('find').get('*')) || rowId === '*' ?
103+
{!(perms.get('get').get('*') && perms.get('find').get('*') && perms.get('count').get('*')) || rowId === '*' ?
95104
<Checkbox
96105
label='Read'
97106
checked={readChecked}
98107
indeterminate={!readChecked && read}
99-
onChange={(value) => onChange(rowId, ['get', 'find'], value)} /> :
108+
onChange={(value) => onChange(rowId, ['get', 'find', 'count'], value)} /> :
100109
<Icon name='check' width={20} height={20} />}
101110
</div>,
102111
<div key='third' className={[styles.check, styles.third].join(' ')}>
@@ -135,11 +144,13 @@ function renderSimpleCheckboxes(rowId, perms, onChange) {
135144
}
136145

137146
function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onChange) {
138-
let publicRead = publicPerms.get('get').get('*') && publicPerms.get('find').get('*');
139-
let publicWrite = publicPerms.get('create').get('*') &&
140-
publicPerms.get('update').get('*') &&
141-
publicPerms.get('delete').get('*') &&
142-
publicPerms.get('addField').get('*');
147+
const publicRead = publicPerms.get('get').get('*') &&
148+
publicPerms.get('find').get('*') &&
149+
publicPerms.get('count').get('*')
150+
const publicWrite = publicPerms.get('create').get('*') &&
151+
publicPerms.get('update').get('*') &&
152+
publicPerms.get('delete').get('*') &&
153+
publicPerms.get('addField').get('*');
143154

144155
if (!advanced) {
145156
return [
@@ -173,12 +184,17 @@ function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onC
173184
<Icon name='check' width={20} height={20} />
174185
</div>
175186
);
187+
cols.push(
188+
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
189+
<Icon name='check' width={20} height={20} />
190+
</div>
191+
);
176192
} else {
177193
cols.push(
178194
<div key='read' className={styles.pointerRead}>
179195
<div className={styles.checkboxWrap}>
180196
<Checkbox
181-
label='Get and Find'
197+
label='Get, Find and Count'
182198
checked={pointerPerms.get('read')}
183199
onChange={(value) => onChange(rowId, 'read', value)} />
184200
</div>
@@ -187,22 +203,22 @@ function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onC
187203
}
188204
if (publicWrite) {
189205
cols.push(
190-
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
206+
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
191207
<Icon name='check' width={20} height={20} />
192208
</div>
193209
);
194210
cols.push(
195-
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
211+
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
196212
<Icon name='check' width={20} height={20} />
197213
</div>
198214
);
199215
cols.push(
200-
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
216+
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
201217
<Icon name='check' width={20} height={20} />
202218
</div>
203219
);
204220
cols.push(
205-
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
221+
<div key='eighth' className={[styles.check, styles.eighth].join(' ')}>
206222
<Icon name='check' width={20} height={20} />
207223
</div>
208224
);
@@ -244,6 +260,7 @@ export default class PermissionsDialog extends React.Component {
244260
// Fill any missing fields
245261
perms.get = perms.get || Map();
246262
perms.find = perms.find || Map();
263+
perms.count = perms.count || Map();
247264
perms.create = perms.create || Map();
248265
perms.update = perms.update || Map();
249266
perms.delete = perms.delete || Map();
@@ -329,6 +346,7 @@ export default class PermissionsDialog extends React.Component {
329346
if (this.props.advanced) {
330347
nextPerms = nextPerms.setIn(['get', id], true);
331348
nextPerms = nextPerms.setIn(['find', id], true);
349+
nextPerms = nextPerms.setIn(['count', id], true);
332350
nextPerms = nextPerms.setIn(['create', id], true);
333351
nextPerms = nextPerms.setIn(['update', id], true);
334352
nextPerms = nextPerms.setIn(['delete', id], true);
@@ -398,6 +416,7 @@ export default class PermissionsDialog extends React.Component {
398416
newPerms = newPerms
399417
.deleteIn(['get', key])
400418
.deleteIn(['find', key])
419+
.deleteIn(['count', key])
401420
.deleteIn(['create', key])
402421
.deleteIn(['update', key])
403422
.deleteIn(['delete', key])
@@ -431,7 +450,7 @@ export default class PermissionsDialog extends React.Component {
431450
let output = {};
432451
let fields = [ 'read', 'write' ];
433452
if (this.props.advanced) {
434-
fields = [ 'get', 'find', 'create', 'update', 'delete', 'addField' ];
453+
fields = [ 'get', 'find', 'count', 'create', 'update', 'delete', 'addField' ];
435454
}
436455

437456
fields.forEach((field) => {

‎src/components/PermissionsDialog/PermissionsDialog.scss

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,24 @@
77
*/
88
@import 'stylesheets/globals.scss';
99

10+
$labelWidth: 330px;
11+
$colWidth: 82px;
12+
$writeColWidth: 92px;
13+
$addFieldColWidth: 118px;
14+
$deleteColWidth: 44px;
15+
16+
$sumReadColsWidth: calc(3 * #{$colWidth});
17+
$sumWriteColsWidth: calc(3 * #{$writeColWidth});
18+
19+
$permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
20+
$permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});
21+
1022
.dialog {
1123
@include modalAnimation();
1224
position: absolute;
1325
top: 50%;
1426
left: 50%;
15-
width: 540px;
27+
width: $permissionsDialogWidth;
1628
background: white;
1729
border-radius: 5px;
1830
overflow: hidden;
@@ -54,7 +66,7 @@
5466

5567
.level {
5668
height: 50px;
57-
width: 540px;
69+
width: $permissionsDialogWidth;
5870
background: #0E69A1;
5971
position: relative;
6072
color: white;
@@ -82,26 +94,17 @@
8294
overflow-x: hidden;
8395
}
8496

85-
.second {
86-
width: 82px;
87-
}
88-
.third {
89-
width: 82px;
97+
.second, .third, .fourth {
98+
width: $colWidth;
9099
}
91-
.fourth {
92-
width: 92px;
93-
}
94-
.fifth {
95-
width: 92px;
96-
}
97-
.sixth {
98-
width: 92px;
99-
}
100-
.seventh {
101-
width: 118px;
100+
.fifth, .sixth, .seventh {
101+
width: $writeColWidth;
102102
}
103103
.eighth {
104-
width: 44px;
104+
width: $addFieldColWidth;
105+
}
106+
.nineth {
107+
width: $deleteColWidth;
105108
}
106109

107110
.table {
@@ -116,16 +119,16 @@
116119
background: rgba(0,0,40,0.03);
117120

118121
&.second {
119-
left: 330px;
122+
left: $labelWidth;
120123
}
121124
&.fourth {
122-
left: 494px;
125+
left: calc(#{$labelWidth} + (2 * #{$colWidth}));
123126
}
124127
&.sixth {
125-
left: 678px;
128+
left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$writeColWidth});
126129
}
127130
&.eighth {
128-
left: 888px;
131+
left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth});
129132
}
130133
}
131134
}
@@ -159,7 +162,7 @@
159162
transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
160163
background: #56AEE3;
161164
height: 0;
162-
padding-left: 330px;
165+
padding-left: $labelWidth;
163166
text-align: center;
164167
color: white;
165168
font-size: 12px;
@@ -174,23 +177,23 @@
174177
}
175178

176179
.readHeader {
177-
width: 164px;
180+
width: $sumReadColsWidth;
178181
}
179182

180183
.writeHeader {
181-
width: 276px;
184+
width: $sumWriteColsWidth;
182185
}
183186

184187
.addHeader {
185-
width: 118px;
188+
width: $addFieldColWidth;
186189
border-right: 1px solid white;
187190
}
188191

189192
.advanced {
190-
width: 930px;
193+
width: $permissionsDialogMaxWidth;
191194

192195
.level {
193-
width: 930px;
196+
width: $permissionsDialogMaxWidth;
194197
}
195198

196199
.headers {
@@ -218,7 +221,7 @@
218221

219222
.label {
220223
display: inline-block;
221-
width: 330px;
224+
width: $labelWidth;
222225
padding: 0 20px;
223226
}
224227
.check {
@@ -233,12 +236,12 @@
233236

234237
.pointerRead {
235238
display: inline-block;
236-
width: 164px;
239+
width: $sumReadColsWidth;
237240
padding: 5px 10px;
238241
}
239242
.pointerWrite {
240243
display: inline-block;
241-
width: 394px;
244+
width: calc(#{$sumWriteColsWidth} + #{$addFieldColWidth});
242245
padding: 5px 10px;
243246
}
244247

0 commit comments

Comments
 (0)