Skip to content

feat: Include "count" CLP option #1180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 24, 2019
Merged

feat: Include "count" CLP option #1180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 44 additions & 25 deletions src/components/PermissionsDialog/PermissionsDialog.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@ import {
let origin = new Position(0, 0);

function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
let get = perms.get('get').get(rowId) || perms.get('get').get('*');
let find = perms.get('find').get(rowId) || perms.get('find').get('*');
const get = perms.get('get').get(rowId) || perms.get('get').get('*');
const find = perms.get('find').get(rowId) || perms.get('find').get('*');
const count = perms.get('count').get(rowId) || perms.get('count').get('*');

let create = perms.get('create').get(rowId) || perms.get('create').get('*');
let update = perms.get('update').get(rowId) || perms.get('update').get('*');
let del = perms.get('delete').get(rowId) || perms.get('delete').get('*');
const create = perms.get('create').get(rowId) || perms.get('create').get('*');
const update = perms.get('update').get(rowId) || perms.get('update').get('*');
const del = perms.get('delete').get(rowId) || perms.get('delete').get('*');

if (advanced) {
return [
Expand All @@ -50,30 +51,38 @@ function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
<Icon name='check' width={20} height={20} />}
</div>,
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
{!perms.get('count').get('*') || rowId === '*' ?
<Checkbox
label='Count'
checked={perms.get('count').get(rowId)}
onChange={(value) => onChange(rowId, 'count', value)} /> :
<Icon name='check' width={20} height={20} />}
</div>,
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
{!perms.get('create').get('*') || rowId === '*' ?
<Checkbox
label='Create'
checked={perms.get('create').get(rowId)}
onChange={(value) => onChange(rowId, 'create', value)} /> :
<Icon name='check' width={20} height={20} />}
</div>,
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
{!perms.get('update').get('*') || rowId === '*' ?
<Checkbox
label='Update'
checked={perms.get('update').get(rowId)}
onChange={(value) => onChange(rowId, 'update', value)} /> :
<Icon name='check' width={20} height={20} />}
</div>,
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
{!perms.get('delete').get('*') || rowId === '*' ?
<Checkbox
label='Delete'
checked={perms.get('delete').get(rowId)}
onChange={(value) => onChange(rowId, 'delete', value)} /> :
<Icon name='check' width={20} height={20} />}
</div>,
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
<div key='eighth' className={[styles.check, styles.eighth].join(' ')}>
{!perms.get('addField').get('*') || rowId === '*' ?
<Checkbox
label='Add field'
Expand All @@ -84,19 +93,19 @@ function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
];
}

let read = get || find;
let write = create || update || del;
let readChecked = get && find;
let writeChecked = create && update && del;
const read = get || find || count;
const write = create || update || del;
const readChecked = get && find && count;
const writeChecked = create && update && del;

return [
<div key='second' className={[styles.check, styles.second].join(' ')}>
{!(perms.get('get').get('*') && perms.get('find').get('*')) || rowId === '*' ?
{!(perms.get('get').get('*') && perms.get('find').get('*') && perms.get('count').get('*')) || rowId === '*' ?
<Checkbox
label='Read'
checked={readChecked}
indeterminate={!readChecked && read}
onChange={(value) => onChange(rowId, ['get', 'find'], value)} /> :
onChange={(value) => onChange(rowId, ['get', 'find', 'count'], value)} /> :
<Icon name='check' width={20} height={20} />}
</div>,
<div key='third' className={[styles.check, styles.third].join(' ')}>
Expand Down Expand Up @@ -135,11 +144,13 @@ function renderSimpleCheckboxes(rowId, perms, onChange) {
}

function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onChange) {
let publicRead = publicPerms.get('get').get('*') && publicPerms.get('find').get('*');
let publicWrite = publicPerms.get('create').get('*') &&
publicPerms.get('update').get('*') &&
publicPerms.get('delete').get('*') &&
publicPerms.get('addField').get('*');
const publicRead = publicPerms.get('get').get('*') &&
publicPerms.get('find').get('*') &&
publicPerms.get('count').get('*')
const publicWrite = publicPerms.get('create').get('*') &&
publicPerms.get('update').get('*') &&
publicPerms.get('delete').get('*') &&
publicPerms.get('addField').get('*');

if (!advanced) {
return [
Expand Down Expand Up @@ -173,12 +184,17 @@ function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onC
<Icon name='check' width={20} height={20} />
</div>
);
cols.push(
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
<Icon name='check' width={20} height={20} />
</div>
);
} else {
cols.push(
<div key='read' className={styles.pointerRead}>
<div className={styles.checkboxWrap}>
<Checkbox
label='Get and Find'
label='Get, Find and Count'
checked={pointerPerms.get('read')}
onChange={(value) => onChange(rowId, 'read', value)} />
</div>
Expand All @@ -187,22 +203,22 @@ function renderPointerCheckboxes(rowId, publicPerms, pointerPerms, advanced, onC
}
if (publicWrite) {
cols.push(
<div key='fourth' className={[styles.check, styles.fourth].join(' ')}>
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
<Icon name='check' width={20} height={20} />
</div>
);
cols.push(
<div key='fifth' className={[styles.check, styles.fifth].join(' ')}>
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
<Icon name='check' width={20} height={20} />
</div>
);
cols.push(
<div key='sixth' className={[styles.check, styles.sixth].join(' ')}>
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
<Icon name='check' width={20} height={20} />
</div>
);
cols.push(
<div key='seventh' className={[styles.check, styles.seventh].join(' ')}>
<div key='eighth' className={[styles.check, styles.eighth].join(' ')}>
<Icon name='check' width={20} height={20} />
</div>
);
Expand Down Expand Up @@ -244,6 +260,7 @@ export default class PermissionsDialog extends React.Component {
// Fill any missing fields
perms.get = perms.get || Map();
perms.find = perms.find || Map();
perms.count = perms.count || Map();
perms.create = perms.create || Map();
perms.update = perms.update || Map();
perms.delete = perms.delete || Map();
Expand Down Expand Up @@ -329,6 +346,7 @@ export default class PermissionsDialog extends React.Component {
if (this.props.advanced) {
nextPerms = nextPerms.setIn(['get', id], true);
nextPerms = nextPerms.setIn(['find', id], true);
nextPerms = nextPerms.setIn(['count', id], true);
nextPerms = nextPerms.setIn(['create', id], true);
nextPerms = nextPerms.setIn(['update', id], true);
nextPerms = nextPerms.setIn(['delete', id], true);
Expand Down Expand Up @@ -398,6 +416,7 @@ export default class PermissionsDialog extends React.Component {
newPerms = newPerms
.deleteIn(['get', key])
.deleteIn(['find', key])
.deleteIn(['count', key])
.deleteIn(['create', key])
.deleteIn(['update', key])
.deleteIn(['delete', key])
Expand Down Expand Up @@ -431,7 +450,7 @@ export default class PermissionsDialog extends React.Component {
let output = {};
let fields = [ 'read', 'write' ];
if (this.props.advanced) {
fields = [ 'get', 'find', 'create', 'update', 'delete', 'addField' ];
fields = [ 'get', 'find', 'count', 'create', 'update', 'delete', 'addField' ];
}

fields.forEach((field) => {
Expand Down
67 changes: 35 additions & 32 deletions src/components/PermissionsDialog/PermissionsDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,24 @@
*/
@import 'stylesheets/globals.scss';

$labelWidth: 330px;
$colWidth: 82px;
$writeColWidth: 92px;
$addFieldColWidth: 118px;
$deleteColWidth: 44px;

$sumReadColsWidth: calc(3 * #{$colWidth});
$sumWriteColsWidth: calc(3 * #{$writeColWidth});

$permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
$permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});

.dialog {
@include modalAnimation();
position: absolute;
top: 50%;
left: 50%;
width: 540px;
width: $permissionsDialogWidth;
background: white;
border-radius: 5px;
overflow: hidden;
Expand Down Expand Up @@ -54,7 +66,7 @@

.level {
height: 50px;
width: 540px;
width: $permissionsDialogWidth;
background: #0E69A1;
position: relative;
color: white;
Expand Down Expand Up @@ -82,26 +94,17 @@
overflow-x: hidden;
}

.second {
width: 82px;
}
.third {
width: 82px;
.second, .third, .fourth {
width: $colWidth;
}
.fourth {
width: 92px;
}
.fifth {
width: 92px;
}
.sixth {
width: 92px;
}
.seventh {
width: 118px;
.fifth, .sixth, .seventh {
width: $writeColWidth;
}
.eighth {
width: 44px;
width: $addFieldColWidth;
}
.nineth {
width: $deleteColWidth;
}

.table {
Expand All @@ -116,16 +119,16 @@
background: rgba(0,0,40,0.03);

&.second {
left: 330px;
left: $labelWidth;
}
&.fourth {
left: 494px;
left: calc(#{$labelWidth} + (2 * #{$colWidth}));
}
&.sixth {
left: 678px;
left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$writeColWidth});
}
&.eighth {
left: 888px;
left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth});
}
}
}
Expand Down Expand Up @@ -159,7 +162,7 @@
transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
background: #56AEE3;
height: 0;
padding-left: 330px;
padding-left: $labelWidth;
text-align: center;
color: white;
font-size: 12px;
Expand All @@ -174,23 +177,23 @@
}

.readHeader {
width: 164px;
width: $sumReadColsWidth;
}

.writeHeader {
width: 276px;
width: $sumWriteColsWidth;
}

.addHeader {
width: 118px;
width: $addFieldColWidth;
border-right: 1px solid white;
}

.advanced {
width: 930px;
width: $permissionsDialogMaxWidth;

.level {
width: 930px;
width: $permissionsDialogMaxWidth;
}

.headers {
Expand Down Expand Up @@ -218,7 +221,7 @@

.label {
display: inline-block;
width: 330px;
width: $labelWidth;
padding: 0 20px;
}
.check {
Expand All @@ -233,12 +236,12 @@

.pointerRead {
display: inline-block;
width: 164px;
width: $sumReadColsWidth;
padding: 5px 10px;
}
.pointerWrite {
display: inline-block;
width: 394px;
width: calc(#{$sumWriteColsWidth} + #{$addFieldColWidth});
padding: 5px 10px;
}

Expand Down