Skip to content

Commit

Permalink
chore(accounts): account editing based on role hierarchy
Browse files Browse the repository at this point in the history
  • Loading branch information
@polonel
polonel committed Mar 2, 2019
1 parent 00b37eb commit 30cabd4
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 34 deletions.
8 changes: 7 additions & 1 deletion src/client/components/MultiSelect/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ class MultiSelect extends React.Component {
$select.multiSelect('select', this.props.initialSelected)
$select.multiSelect('refresh')
}

if (this.props.disabled) {
$select.attr('disabled', 'disabled')
$select.multiSelect('refresh')
}
}

getSelected () {
Expand Down Expand Up @@ -59,7 +64,8 @@ MultiSelect.propTypes = {
id: PropTypes.string,
items: PropTypes.array.isRequired,
initialSelected: PropTypes.array,
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
disabled: PropTypes.bool
}

export default MultiSelect
2 changes: 2 additions & 0 deletions src/client/containers/Accounts/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ class AccountsContainer extends React.Component {

onEditAccountClicked (e, user) {
e.preventDefault(e)
const canEditAccount = helpers.hasHierarchyOverRole(user.getIn(['role', '_id']))
this.props.showModal('EDIT_ACCOUNT', {
edit: canEditAccount,
user: user.toJS(),
roles: this.props.common.roles,
groups: this.props.common.groups
Expand Down
88 changes: 61 additions & 27 deletions src/client/containers/Modals/EditAccountModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ class EditAccountModal extends React.Component {

onSubmitSaveAccount (e) {
e.preventDefault()
if (!this.props.edit) return
const data = {
aUsername: this.props.user.username,
aFullname: this.name,
Expand All @@ -102,9 +103,10 @@ class EditAccountModal extends React.Component {
}

render () {
const { user } = this.props
const { user, edit } = this.props
const profilePicture = user.image || 'defaultProfile.jpg'
const roles = this.props.common.roles.map(role => {
const parsedRoles = helpers.getRolesByHierarchy()
const roles = parsedRoles.map(role => {
return { text: role.name, value: role._id }
})
const groups = this.props.common.groups.map(group => {
Expand All @@ -115,28 +117,39 @@ class EditAccountModal extends React.Component {
<div className='user-heading' style={{ minHeight: '130px', background: '#1976d2', padding: '24px' }}>
<div className='uk-width-1-1'>
<div style={{ width: '82px', height: '82px', float: 'left', marginRight: '24px', position: 'relative' }}>
<form className={'form nomargin'} encType={'multipart/form-data'}>
{edit && (
<form className={'form nomargin'} encType={'multipart/form-data'}>
<div className='mediumProfilePic' style={{ position: 'relative' }}>
<input name={'_id'} type='hidden' value={user._id} readOnly={true} />
<input name={'username'} type='hidden' value={user.username} readOnly={true} />
<input
type='file'
style={{ display: 'none' }}
ref={r => (this.uploadImageInput = r)}
onChange={e => this.onImageUploadChanged(e)}
/>
<img
src={`/uploads/users/${profilePicture}`}
alt='Profile Picture'
ref={r => (this.uploadProfileImage = r)}
/>
</div>
<div className='profile-picture-controls'>
<span className='btn-file' onClick={e => this.onFileBtnClick(e)}>
<i className='material-icons'>file_upload</i>
</span>
</div>
</form>
)}
{!edit && (
<div className='mediumProfilePic' style={{ position: 'relative' }}>
<input name={'_id'} type='hidden' value={user._id} readOnly={true} />
<input name={'username'} type='hidden' value={user.username} readOnly={true} />
<input
type='file'
style={{ display: 'none' }}
ref={r => (this.uploadImageInput = r)}
onChange={e => this.onImageUploadChanged(e)}
/>
<img
src={`/uploads/users/${profilePicture}`}
alt='Profile Picture'
ref={r => (this.uploadProfileImage = r)}
/>
</div>
<div className='profile-picture-controls'>
<span className='btn-file' onClick={e => this.onFileBtnClick(e)}>
<i className='material-icons'>file_upload</i>
</span>
</div>
</form>
)}
</div>
<div className='user-heading-content'>
<h2>
Expand All @@ -156,6 +169,7 @@ class EditAccountModal extends React.Component {
className={'md-input'}
value={this.name}
onChange={e => this.onInputChanged(e, 'name')}
disabled={!edit}
/>
</div>
<div className='uk-float-left uk-width-1-2'>
Expand All @@ -165,26 +179,32 @@ class EditAccountModal extends React.Component {
className={'md-input'}
value={this.title}
onChange={e => this.onInputChanged(e, 'title')}
disabled={!edit}
/>
</div>
</div>
<div className='uk-margin-medium-bottom uk-clearfix'>
<div className='uk-float-left' style={{ width: '50%', paddingRight: '20px' }}>
<label className={'uk-form-label'}>Password</label>
<input type='password' className={'md-input'} />
</div>
<div className='uk-float-left uk-width-1-2'>
<label className={'uk-form-label'}>Confirm Password</label>
<input type='password' className={'md-input'} />
{edit && (
<div>
<div className='uk-margin-medium-bottom uk-clearfix'>
<div className='uk-float-left' style={{ width: '50%', paddingRight: '20px' }}>
<label className={'uk-form-label'}>Password</label>
<input type='password' className={'md-input'} />
</div>
<div className='uk-float-left uk-width-1-2'>
<label className={'uk-form-label'}>Confirm Password</label>
<input type='password' className={'md-input'} />
</div>
</div>
</div>
</div>
)}
<div className='uk-margin-medium-bottom'>
<label className='uk-form-label'>Email</label>
<input
type='email'
className={'md-input'}
value={this.email}
onChange={e => this.onInputChanged(e, 'email')}
disabled={!edit}
/>
</div>
<div className='uk-margin-medium-bottom'>
Expand All @@ -195,6 +215,7 @@ class EditAccountModal extends React.Component {
showTextbox={false}
defaultValue={user.role._id}
onSelectChange={e => this.onRoleSelectChange(e)}
disabled={!edit}
/>
</div>
<div className='uk-margin-medium-bottom'>
Expand All @@ -204,11 +225,19 @@ class EditAccountModal extends React.Component {
initialSelected={user.groups.map(i => i._id)}
onChange={() => {}}
ref={r => (this.groupSelect = r)}
disabled={!edit}
/>
</div>
<div className='uk-modal-footer uk-text-right'>
<Button text={'Close'} flat={true} waves={true} extraClass={'uk-modal-close'} />
<Button text={'Save Account'} flat={true} waves={true} style={'primary'} type={'submit'} />
<Button
text={'Save Account'}
flat={true}
waves={true}
style={'primary'}
type={'submit'}
disabled={!edit}
/>
</div>
</form>
</div>
Expand All @@ -218,11 +247,16 @@ class EditAccountModal extends React.Component {
}

EditAccountModal.propTypes = {
edit: PropTypes.bool.isRequired,
user: PropTypes.object.isRequired,
common: PropTypes.object.isRequired,
saveEditAccount: PropTypes.func.isRequired
}

EditAccountModal.defaultProps = {
edit: false
}

const mapStateToProps = state => ({
common: state.common
})
Expand Down
30 changes: 30 additions & 0 deletions src/public/js/modules/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1649,6 +1649,36 @@ define([
return _.rest(roleOrder, idx)
}

helpers.getLoggedInRoleHierarchy = function () {
var loggedInRole = window.trudeskSessionService.getUser().role
return helpers.parseRoleHierarchy(loggedInRole._id)
}

helpers.getRolesByHierarchy = function () {
var roleOrder = helpers.getLoggedInRoleHierarchy()
var roles = window.trudeskSessionService.getRoles()
var returnedRoles = []
_.each(roles, function (r) {
var idx = _.findIndex(roleOrder, function (i) {
return i.toString() === r._id.toString()
})
if (idx !== -1) returnedRoles.push(roles[idx])
})

return returnedRoles
}

helpers.hasHierarchyOverRole = function (roleToCheck) {
var loggedInRole = window.trudeskSessionService.getUser().role
var roleOrder = helpers.parseRoleHierarchy(loggedInRole._id)
if (roleOrder.length < 1) return false
var idx = _.findIndex(roleOrder, function (i) {
return i.toString() === roleToCheck.toString()
})

return idx !== -1
}

helpers.hasPermOverRole = function (ownerRole, extRole, action, adminOverride) {
if (action && !helpers.canUser(action)) return false
if (!extRole) extRole = window.trudeskSessionService.getUser().role._id
Expand Down
8 changes: 2 additions & 6 deletions src/public/js/pages/pageloader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ define('pages/pageloader', ['async', 'jquery'], function (async, $) {
'pages/dashboard',
'pages/messages',
'pages/tickets',
'pages/accounts',
'pages/accountsImport',
'pages/groups',
'pages/profile',
Expand All @@ -54,7 +53,7 @@ define('pages/pageloader', ['async', 'jquery'], function (async, $) {

'modules/ajaximgupload',
'modules/attachmentUpload'
], function (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s) {
], function (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r) {
async.parallel(
[
function (done) {
Expand Down Expand Up @@ -106,11 +105,8 @@ define('pages/pageloader', ['async', 'jquery'], function (async, $) {
p.init(done)
},
function (done) {
q.init(done)
},
function (done) {
q.init()
r.init()
s.init()

return done()
}
Expand Down

0 comments on commit 30cabd4

Please sign in to comment.