1134 lines
26 KiB
JavaScript
1134 lines
26 KiB
JavaScript
;(function () {
|
|
|
|
'use strict';
|
|
|
|
BX.namespace('BX.UI');
|
|
|
|
BX.UI.AccessRights.ColumnItem = function(options) {
|
|
this.grid = options.grid ? options.grid : null;
|
|
this.id = options.id ? options.id : null;
|
|
this.type = options.type ? options.type : null;
|
|
this.text = options.text ? options.text : null;
|
|
this.hint = options.hint ? options.hint : null;
|
|
this.variables = options.variables ? options.variables : [];
|
|
this.userGroup = options.userGroup;
|
|
this.access = options.access ? options.access : null;
|
|
this.currentParam = options.currentParam;
|
|
this.controller = options.controller ? options.controller : null;
|
|
this.openPopupEvent = options.openPopupEvent;
|
|
this.popupContainer = options.popupContainer;
|
|
this.accessCodes = options.accessCodes ? options.accessCodes : [];
|
|
this.isModify = false;
|
|
this.popupHelper = null;
|
|
this.popupHint = null;
|
|
this.popupTimer = null;
|
|
this.popupConfirm = null;
|
|
this.popupUsers = null;
|
|
this.identificator = 'col-' + Math.random();
|
|
this.updatedUsers = [];
|
|
|
|
this.layout = {
|
|
container: null,
|
|
variablesValue: null,
|
|
role: null,
|
|
roleInput: null,
|
|
roleValue: null,
|
|
changer: null,
|
|
switcher: null,
|
|
controller: null,
|
|
controllerMenu: null,
|
|
controllerLink: null,
|
|
addUserToRole: null,
|
|
members: null
|
|
};
|
|
|
|
this.column = options.column;
|
|
this.popupMenu = null;
|
|
this.switcher = null;
|
|
|
|
this.bindEvents();
|
|
};
|
|
|
|
|
|
|
|
BX.UI.AccessRights.ColumnItem.prototype = {
|
|
bindEvents: function()
|
|
{
|
|
if(this.type === 'role')
|
|
{
|
|
BX.bind(window, 'click', function(ev) {
|
|
if(ev.target === this.layout.role ||
|
|
BX.findParent(ev.target, {
|
|
className: 'ui-access-rights-role'
|
|
}))
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.updateRole();
|
|
this.offRoleEditMode();
|
|
}.bind(this));
|
|
}
|
|
|
|
if(this.type === 'toggler')
|
|
{
|
|
BX.addCustomEvent('BX.UI.AccessRights:reset', this.offChanger.bind(this));
|
|
BX.addCustomEvent('BX.UI.AccessRights:refresh', this.refreshStatus.bind(this));
|
|
}
|
|
|
|
if(this.type === 'members')
|
|
{
|
|
BX.addCustomEvent('BX.UI.AccessRights:addToAccessCodes', this.addToAccessCodes.bind(this));
|
|
BX.addCustomEvent('BX.UI.AccessRights:removeFromAccessCodes', this.removeFromAccessCodes.bind(this));
|
|
BX.addCustomEvent('BX.UI.AccessRights:reset', this.resetNewMembers.bind(this));
|
|
BX.addCustomEvent('BX.UI.AccessRights:refresh', this.resetNewMembers.bind(this));
|
|
}
|
|
},
|
|
|
|
getTextNode: function()
|
|
{
|
|
return BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-text',
|
|
},
|
|
attrs: {
|
|
'data-id': this.id
|
|
},
|
|
text: this.text,
|
|
events: {
|
|
mouseenter: function()
|
|
{
|
|
if(this.type === 'title')
|
|
{
|
|
this.adjustPopupHelper();
|
|
}
|
|
}.bind(this),
|
|
mouseleave: function()
|
|
{
|
|
if(this.popupHelper)
|
|
{
|
|
this.popupHelper.close();
|
|
}
|
|
|
|
if(this.popupTimer)
|
|
{
|
|
clearTimeout(this.popupTimer);
|
|
}
|
|
}.bind(this)
|
|
}
|
|
});
|
|
},
|
|
|
|
getHint: function()
|
|
{
|
|
if(!this.layout.hint && this.hint)
|
|
{
|
|
this.popupHint = BX.PopupWindowManager.create(null, null, {
|
|
className: 'ui-access-rights-popup-pointer-events',
|
|
autoHide: true,
|
|
darkMode: true,
|
|
content: this.hint,
|
|
maxWidth: 280,
|
|
offsetTop: 0,
|
|
offsetLeft: 8,
|
|
angle: true,
|
|
animation: 'fading-slide'
|
|
});
|
|
|
|
this.layout.hint = new BX.create('a', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-notify'
|
|
},
|
|
events: {
|
|
mouseover: function () {
|
|
this.popupHint.setBindElement(this.layout.hint);
|
|
this.popupHint.show();
|
|
}.bind(this),
|
|
mouseleave: function () {
|
|
this.popupHint.close();
|
|
}.bind(this)
|
|
}
|
|
});
|
|
}
|
|
|
|
return this.layout.hint;
|
|
},
|
|
|
|
getChanger: function()
|
|
{
|
|
if(!this.layout.changer)
|
|
{
|
|
this.layout.changer = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-changer'
|
|
}
|
|
})
|
|
}
|
|
|
|
return this.layout.changer;
|
|
},
|
|
|
|
adjustChanger: function()
|
|
{
|
|
if(!this.isModify)
|
|
{
|
|
this.isModify = true;
|
|
}
|
|
else
|
|
{
|
|
this.isModify = false;
|
|
}
|
|
|
|
if(this.layout.changer)
|
|
{
|
|
this.layout.changer.classList.toggle('ui-access-rights-column-item-changer-on');
|
|
}
|
|
},
|
|
|
|
refreshStatus: function()
|
|
{
|
|
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
|
|
},
|
|
|
|
offChanger: function()
|
|
{
|
|
if(this.isModify)
|
|
{
|
|
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
|
|
|
|
if(this.isModify)
|
|
{
|
|
this.switcher.isChecked() ? this.switcher.check(false) : this.switcher.check(true);
|
|
}
|
|
|
|
setTimeout(function()
|
|
{
|
|
this.layout.changer.classList.remove('ui-access-rights-column-item-changer-on');
|
|
}.bind(this))
|
|
}
|
|
},
|
|
|
|
addToAccessCodes: function(event)
|
|
{
|
|
var params = event.data;
|
|
|
|
if(params.columnId !== this.identificator)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var key = Object.keys(params.accessCodes)[0];
|
|
var type = params.accessCodes[key].toUpperCase();
|
|
this.userGroup.accessCodes = Object.keys(this.accessCodes);
|
|
|
|
var item = params.item;
|
|
|
|
if(typeof item !== 'undefined' && Object.keys(item).length)
|
|
{
|
|
this.userGroup.members[key] = {
|
|
id: item.entityId,
|
|
name: item.name,
|
|
avatar: item.avatar,
|
|
url: '',
|
|
new: true,
|
|
type: type.toLowerCase()
|
|
};
|
|
|
|
this.updateMembers();
|
|
}
|
|
|
|
this.userGroup.accessCodes = [];
|
|
|
|
for(var key in this.userGroup.members)
|
|
{
|
|
this.userGroup.accessCodes[key] = this.userGroup.members[key].type;
|
|
}
|
|
},
|
|
|
|
removeFromAccessCodes: function(event)
|
|
{
|
|
var params = event.data;
|
|
|
|
if(params.columnId !== this.identificator)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var key = Object.keys(params.accessCodes)[0];
|
|
|
|
delete this.userGroup.members[key];
|
|
this.updateMembers();
|
|
|
|
this.userGroup.accessCodes = [];
|
|
|
|
for(var key in this.userGroup.members)
|
|
{
|
|
this.userGroup.accessCodes[key] = this.userGroup.members[key].type;
|
|
}
|
|
},
|
|
|
|
getToggler: function()
|
|
{
|
|
if(!this.switcher)
|
|
{
|
|
var item = this;
|
|
|
|
this.switcher = new BX.UI.Switcher(
|
|
{
|
|
size: 'small',
|
|
checked: this.currentParam === '1',
|
|
handlers: {
|
|
checked: function()
|
|
{
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:accessOn', item);
|
|
},
|
|
unchecked: function()
|
|
{
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:accessOff', item);
|
|
},
|
|
toggled: function()
|
|
{
|
|
this.adjustChanger();
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', item);
|
|
}.bind(this)
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
return this.switcher.getNode();
|
|
},
|
|
|
|
getVariables: function()
|
|
{
|
|
if(!this.layout.variablesValue)
|
|
{
|
|
this.layout.variablesValue = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-text-link'
|
|
},
|
|
text: this.variables[0].title,
|
|
events: {
|
|
click: this.showVariablesPopup.bind(this)
|
|
}
|
|
})
|
|
}
|
|
|
|
return this.layout.variablesValue;
|
|
},
|
|
|
|
getController: function()
|
|
{
|
|
if(!this.layout.controller)
|
|
{
|
|
this.layout.controller = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-controller'
|
|
},
|
|
children: [
|
|
this.layout.controllerLink = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-controller-link'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_CREATE_ROLE')
|
|
}),
|
|
// or arrow for link 'ui-access-rights-column-item-controller-menu'
|
|
this.layout.controllerMenu = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item-controller-link'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_COPY_ROLE'),
|
|
events: {
|
|
click: function() {
|
|
this.getPopupMenu(this.grid.getUserGroups()).show();
|
|
}.bind(this)
|
|
}
|
|
})
|
|
],
|
|
});
|
|
|
|
this.layout.controllerLink.addEventListener('click', function() {
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:addRole', [
|
|
{
|
|
id: '0',
|
|
title: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME'),
|
|
accessRights: [],
|
|
members: [],
|
|
accessCodes: [],
|
|
type: 'role'
|
|
}
|
|
]);
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', this);
|
|
this.grid.lock();
|
|
}.bind(this));
|
|
}
|
|
|
|
return this.layout.controller;
|
|
},
|
|
|
|
getPopupMenu: function(options)
|
|
{
|
|
if(!options)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var menuItems = [];
|
|
|
|
options.map(function(data) {
|
|
menuItems.push({
|
|
text: BX.util.htmlspecialchars(data.title),
|
|
onclick: function() {
|
|
var accessRightsCopy = Object.assign([], data.accessRights);
|
|
var accessCodesCopy = Object.assign([], data.accessCodes);
|
|
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:copyRole', [
|
|
{
|
|
id: '0',
|
|
title: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME'),
|
|
accessRights: accessRightsCopy,
|
|
accessCodes: accessCodesCopy,
|
|
type: 'role',
|
|
members: data.members
|
|
}
|
|
]);
|
|
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:update', this);
|
|
this.popupMenu.destroy();
|
|
}.bind(this)
|
|
});
|
|
}.bind(this));
|
|
|
|
return this.popupMenu = new BX.PopupMenuWindow(
|
|
null,
|
|
this.layout.controllerMenu,
|
|
menuItems,
|
|
{
|
|
events: {
|
|
onPopupClose: function() {
|
|
this.popupMenu.destroy();
|
|
this.popupMenu = null;
|
|
}.bind(this)
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
showVariablesPopup: function()
|
|
{
|
|
var menuItems = [];
|
|
|
|
this.variables.map(function(data) {
|
|
menuItems.push({
|
|
id: data.id,
|
|
text: data.title
|
|
});
|
|
});
|
|
|
|
BX.PopupMenu.show(
|
|
'ui-access-rights-column-item-popup-variables',
|
|
this.layout.variablesValue,
|
|
menuItems,
|
|
{
|
|
autoHide: true,
|
|
events : {
|
|
onPopupClose: function() {
|
|
BX.PopupMenu.destroy('ui-access-rights-column-item-popup-variables');
|
|
}.bind(this)
|
|
}
|
|
}
|
|
);
|
|
},
|
|
|
|
getRole: function()
|
|
{
|
|
if(!this.layout.role)
|
|
{
|
|
BX.addCustomEvent('BX.UI.AccessRights:preservation', this.updateRole.bind(this));
|
|
BX.addCustomEvent('BX.UI.AccessRights:preservation', this.offRoleEditMode.bind(this));
|
|
|
|
this.layout.role = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-role'
|
|
},
|
|
children: [
|
|
this.layout.roleInput = BX.create('input', {
|
|
props: {
|
|
type: 'text',
|
|
className: 'ui-access-rights-role-input',
|
|
value: this.text,
|
|
placeholder: BX.message('JS_UI_ACCESSRIGHTS_ROLE_NAME')
|
|
},
|
|
events: {
|
|
keydown: function(ev) {
|
|
// Enter = keyCode 13
|
|
if(ev.keyCode === 13)
|
|
{
|
|
this.updateRole();
|
|
this.offRoleEditMode();
|
|
}
|
|
}.bind(this),
|
|
input: function() {
|
|
this.grid.getButtonPanel().show();
|
|
}.bind(this)
|
|
}
|
|
}),
|
|
this.layout.roleValue = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-role-value',
|
|
innerText: this.text
|
|
},
|
|
}),
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-role-controls'
|
|
},
|
|
children: [
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-role-edit'
|
|
},
|
|
events: {
|
|
click: this.onRoleEditMode.bind(this)
|
|
}
|
|
}),
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-role-remove'
|
|
},
|
|
events: {
|
|
click: this.showPopupConfirm.bind(this)
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
}
|
|
|
|
return this.layout.role;
|
|
},
|
|
|
|
showPopupConfirm: function()
|
|
{
|
|
var self = this;
|
|
|
|
if(!this.popupConfirm)
|
|
{
|
|
|
|
this.popupConfirm = BX.PopupWindowManager.create(null, this.layout.container, {
|
|
width: 250,
|
|
overlay: true,
|
|
contentPadding: 10,
|
|
content: BX.message('JS_UI_ACCESSRIGHTS_POPUP_REMOVE_THIS_ROLE'),
|
|
animation: 'fading-slide'
|
|
});
|
|
|
|
this.popupConfirm.setButtons([
|
|
new BX.PopupWindowCustomButton({
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_POPUP_REMOVE'),
|
|
className: 'ui-btn ui-btn-sm ui-btn-primary',
|
|
events: {
|
|
click: function() {
|
|
self.popupConfirm.close();
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:removeRole', self);
|
|
}
|
|
}
|
|
}),
|
|
new BX.PopupWindowCustomButton({
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_POPUP_CANCEL'),
|
|
className: 'ui-btn ui-btn-sm ui-btn-link',
|
|
events: {
|
|
click: function() {
|
|
self.popupConfirm.close();
|
|
}
|
|
}
|
|
})
|
|
]);
|
|
}
|
|
|
|
this.popupConfirm.show();
|
|
},
|
|
|
|
onRoleEditMode: function()
|
|
{
|
|
this.layout.role.classList.add('ui-access-rights-role-edit-mode');
|
|
this.layout.roleInput.focus();
|
|
},
|
|
|
|
updateRole: function()
|
|
{
|
|
if(
|
|
this.layout.roleValue.innerHTML === this.layout.roleInput.value ||
|
|
this.layout.roleInput.value === '')
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.text = this.layout.roleInput.value;
|
|
this.userGroup = this.column.getUserGroup();
|
|
|
|
this.layout.roleValue.innerText = this.layout.roleInput.value;
|
|
BX.onCustomEvent(window, 'BX.UI.AccessRights.ColumnItem:updateRole', this);
|
|
},
|
|
|
|
offRoleEditMode: function()
|
|
{
|
|
this.layout.role.classList.remove('ui-access-rights-role-edit-mode');
|
|
},
|
|
|
|
validateVariables: function()
|
|
{
|
|
if(typeof this.userGroup.accessCodes === 'undefined')
|
|
{
|
|
this.userGroup.accessCodes = [];
|
|
}
|
|
},
|
|
|
|
getMembers: function()
|
|
{
|
|
if(!this.layout.members)
|
|
{
|
|
var members = this.userGroup.members || {};
|
|
var membersFragment = document.createDocumentFragment();
|
|
var counter = 0;
|
|
this.validateVariables();
|
|
|
|
Object.keys(members).reverse().forEach(function(item) {
|
|
counter++;
|
|
if(counter < 7)
|
|
{
|
|
var user = members[item];
|
|
|
|
var classNew = user.new ? ' ui-access-rights-members-item-new' : '';
|
|
var avatarClass = ' ui-icon-common-user';
|
|
|
|
if(user.type === 'groups')
|
|
{
|
|
avatarClass = ' ui-icon-common-user-group';
|
|
}
|
|
|
|
if(user.type === 'sonetgroups')
|
|
{
|
|
avatarClass = ' ui-icon-common-company';
|
|
}
|
|
|
|
if(user.type === 'usergroups')
|
|
{
|
|
avatarClass = ' ui-icon-common-user-group';
|
|
}
|
|
|
|
membersFragment.appendChild(BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-members-item' + classNew
|
|
},
|
|
children: [
|
|
user.avatar ? BX.create('a', {
|
|
props: {
|
|
className: 'ui-access-rights-members-item-avatar',
|
|
title: user.name
|
|
},
|
|
style: {
|
|
backgroundImage: 'url(' + encodeURI(user.avatar) + ')',
|
|
backgroundSize: 'cover'
|
|
}
|
|
}) : null,
|
|
!user.avatar ? BX.create('a', {
|
|
props: {
|
|
className: 'ui-icon ui-icon-xs' + avatarClass,
|
|
title: user.name,
|
|
innerHTML: '<i></i>'
|
|
},
|
|
}) : null,
|
|
]
|
|
}));
|
|
}
|
|
});
|
|
|
|
this.getAddUserToRole();
|
|
|
|
membersFragment.appendChild(this.layout.addUserToRole);
|
|
|
|
this.layout.members = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-members'
|
|
},
|
|
children: [
|
|
membersFragment
|
|
],
|
|
events: {
|
|
click: this.adjustPopupUserControl.bind(this)
|
|
}
|
|
});
|
|
}
|
|
|
|
return this.layout.members;
|
|
},
|
|
|
|
resetNewMembers: function()
|
|
{
|
|
var newMembers = this.layout.members.querySelectorAll('.ui-access-rights-members-item-new');
|
|
|
|
newMembers.forEach(function(item) {
|
|
item.classList.remove('ui-access-rights-members-item-new');
|
|
})
|
|
},
|
|
|
|
adjustPopupUserControl: function()
|
|
{
|
|
var users = [];
|
|
var groups = [];
|
|
var departments = [];
|
|
var sonetgroups = [];
|
|
|
|
for (var item in this.userGroup.members)
|
|
{
|
|
this.userGroup.members[item].key = item;
|
|
|
|
if (this.userGroup.members[item].type === 'users')
|
|
{
|
|
users.push(this.userGroup.members[item]);
|
|
}
|
|
|
|
if (this.userGroup.members[item].type === 'groups')
|
|
{
|
|
groups.push(this.userGroup.members[item]);
|
|
}
|
|
|
|
if (this.userGroup.members[item].type === 'usergroups')
|
|
{
|
|
groups.push(this.userGroup.members[item]);
|
|
}
|
|
|
|
if (this.userGroup.members[item].type === 'departments')
|
|
{
|
|
departments.push(this.userGroup.members[item]);
|
|
}
|
|
|
|
if (this.userGroup.members[item].type === 'sonetgroups')
|
|
{
|
|
sonetgroups.push(this.userGroup.members[item]);
|
|
}
|
|
}
|
|
|
|
var counterUsers = [];
|
|
|
|
for(var key in this.userGroup.members)
|
|
{
|
|
counterUsers.push(this.userGroup.members[key])
|
|
}
|
|
|
|
if (counterUsers.length === 0)
|
|
{
|
|
this.showUserSelectorPopup();
|
|
return;
|
|
}
|
|
|
|
this.getUserPopup(users, groups, departments, sonetgroups).show();
|
|
},
|
|
|
|
getAddUserToRole: function()
|
|
{
|
|
if(!this.layout.addUserToRole)
|
|
{
|
|
this.layout.addUserToRole = BX.create('span', {
|
|
props: {
|
|
className: 'ui-access-rights-members-item ui-access-rights-members-item-add',
|
|
},
|
|
attrs: { 'bx-data-column-id': this.identificator }
|
|
});
|
|
}
|
|
|
|
return this.layout.addUserToRole;
|
|
},
|
|
|
|
updateMembers: function()
|
|
{
|
|
this.layout.members.parentNode.removeChild(this.layout.members);
|
|
this.layout.members = null;
|
|
|
|
this.layout.container.appendChild(this.getMembers());
|
|
this.grid.getButtonPanel().show();
|
|
},
|
|
|
|
getUserPopupTogglerGroup: function(array, type)
|
|
{
|
|
var node = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content ui-access-rights-popup-toggler-content-' + type
|
|
}
|
|
});
|
|
|
|
var self = this;
|
|
|
|
var iconClass = '';
|
|
|
|
if(type === 'users')
|
|
{
|
|
iconClass = 'ui-icon-common-user';
|
|
}
|
|
|
|
if(type === 'groups')
|
|
{
|
|
iconClass = 'ui-icon-common-user-group';
|
|
}
|
|
|
|
if(type === 'sonetgroups' || type === 'departments')
|
|
{
|
|
iconClass = ' ui-icon-common-company';
|
|
}
|
|
|
|
array.forEach(function(item) {
|
|
node.appendChild(BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content-item'
|
|
},
|
|
children: [
|
|
item.avatar ? BX.create('a', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content-item-userpic',
|
|
title: item.name
|
|
},
|
|
style: {
|
|
backgroundImage: 'url(' + encodeURI(item.avatar) + ')',
|
|
backgroundSize: 'cover'
|
|
}
|
|
}) : null,
|
|
!item.avatar ? BX.create('a', {
|
|
props: {
|
|
className: 'ui-icon ui-icon-sm ' + iconClass,
|
|
title: item.name,
|
|
innerHTML: '<i></i>'
|
|
},
|
|
style: {
|
|
margin: '5px 10px'
|
|
}
|
|
}) : null,
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content-item-name'
|
|
},
|
|
text: item.name
|
|
}),
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content-item-remove'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_REMOVE'),
|
|
events: {
|
|
click: function() {
|
|
self.userGroup.accessCodes.splice(self.userGroup.accessCodes.indexOf(item.key), 1);
|
|
|
|
delete self.userGroup.accessCodes[item.key];
|
|
delete self.userGroup.members[item.key];
|
|
|
|
var parent = BX.findParent(this, {
|
|
className: 'ui-access-rights-popup-toggler-content'
|
|
});
|
|
|
|
parent.removeChild(this.parentNode);
|
|
self.updateMembers();
|
|
|
|
self.grid.getButtonPanel().show();
|
|
}
|
|
}
|
|
})
|
|
]
|
|
}))
|
|
});
|
|
|
|
return node;
|
|
},
|
|
|
|
getUserPopup: function(users, groups, departments, sonetgroups)
|
|
{
|
|
if(!this.popupUsers)
|
|
{
|
|
users = users || [];
|
|
groups = groups || [];
|
|
departments = departments || [];
|
|
sonetgroups = sonetgroups || [];
|
|
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-content-item'
|
|
}
|
|
});
|
|
|
|
var content = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler'
|
|
},
|
|
children: [
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title'
|
|
},
|
|
children: [
|
|
groups.length > 0 ?
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title-item ui-access-rights-popup-toggler-title-item-active',
|
|
},
|
|
attrs: {
|
|
'data-role': 'ui-access-rights-popup-toggler-content-groups'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_USER_GROUPS'),
|
|
events: {
|
|
click: function() {
|
|
activate(this);
|
|
adjustSlicker(this);
|
|
}
|
|
}
|
|
}) : null,
|
|
departments.length > 0 ?
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title-item',
|
|
},
|
|
attrs: {
|
|
'data-role': 'ui-access-rights-popup-toggler-content-departments'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_DEPARTMENTS'),
|
|
events: {
|
|
click: function() {
|
|
activate(this);
|
|
adjustSlicker(this);
|
|
}
|
|
}
|
|
}) : null,
|
|
users.length > 0 ?
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title-item',
|
|
},
|
|
attrs: {
|
|
'data-role': 'ui-access-rights-popup-toggler-content-users'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_STAFF'),
|
|
events: {
|
|
click: function() {
|
|
activate(this);
|
|
adjustSlicker(this);
|
|
}
|
|
}
|
|
}) : null,
|
|
sonetgroups.length > 0 ?
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title-item',
|
|
},
|
|
attrs: {
|
|
'data-role': 'ui-access-rights-popup-toggler-content-sonetgroups'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_SOCNETGROUP'),
|
|
events: {
|
|
click: function() {
|
|
activate(this);
|
|
adjustSlicker(this);
|
|
}
|
|
}
|
|
}) : null,
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-title-slicker'
|
|
}
|
|
}),
|
|
]
|
|
}),
|
|
groups.length > 0 ? this.getUserPopupTogglerGroup(groups, 'groups') : null,
|
|
departments.length > 0 ? this.getUserPopupTogglerGroup(departments, 'departments') : null,
|
|
users.length > 0 ? this.getUserPopupTogglerGroup(users, 'users') : null,
|
|
sonetgroups.length > 0 ? this.getUserPopupTogglerGroup(sonetgroups, 'sonetgroups') : null,
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-footer'
|
|
},
|
|
children: [
|
|
BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-popup-toggler-footer-link'
|
|
},
|
|
text: BX.message('JS_UI_ACCESSRIGHTS_ADD'),
|
|
events: {
|
|
click: function(ev) {
|
|
this.popupUsers.close();
|
|
this.showUserSelectorPopup();
|
|
BX.PreventDefault(ev);
|
|
}.bind(this)
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
|
|
var adjustSlicker = function(node) {
|
|
if(!BX.type.isDomNode(node))
|
|
{
|
|
node = content.querySelector('.ui-access-rights-popup-toggler-title-item-active');
|
|
};
|
|
var slicker = content.querySelector('.ui-access-rights-popup-toggler-title-slicker');
|
|
slicker.style.left = node.offsetLeft + 'px';
|
|
slicker.style.width = node.offsetWidth + 'px';
|
|
};
|
|
|
|
var activate = function(node) {
|
|
var titles = content.querySelectorAll('.ui-access-rights-popup-toggler-title-item');
|
|
var contents = content.querySelectorAll('.ui-access-rights-popup-toggler-content');
|
|
|
|
var target = content.querySelector('.' + node.getAttribute('data-role'));
|
|
|
|
titles.forEach(function(item) {
|
|
item.classList.remove('ui-access-rights-popup-toggler-title-item-active')
|
|
});
|
|
|
|
contents.forEach(function(item) {
|
|
item.style.display = 'none';
|
|
});
|
|
|
|
target.style.display = 'block';
|
|
node.classList.add('ui-access-rights-popup-toggler-title-item-active')
|
|
};
|
|
|
|
this.popupUsers = BX.PopupWindowManager.create(null, this.layout.addUserToRole, {
|
|
// width: 400,
|
|
contentPadding: 10,
|
|
animation: 'fading-slide',
|
|
content: content,
|
|
padding: 0,
|
|
offsetTop: 5,
|
|
angle: {
|
|
position: 'top',
|
|
offset: 35,
|
|
},
|
|
autoHide: true,
|
|
closeEsc: true,
|
|
events: {
|
|
onPopupShow: function() {
|
|
setTimeout(function() {
|
|
var firstActiveNode = content.querySelector('.ui-access-rights-popup-toggler-title-item');
|
|
|
|
if(!firstActiveNode)
|
|
{
|
|
return;
|
|
}
|
|
|
|
firstActiveNode.classList.add('ui-access-rights-popup-toggler-title-item-active');
|
|
adjustSlicker(firstActiveNode);
|
|
});
|
|
},
|
|
onPopupClose: function() {
|
|
this.popupUsers.destroy();
|
|
this.popupUsers = null;
|
|
}.bind(this)
|
|
}
|
|
});
|
|
}
|
|
|
|
return this.popupUsers;
|
|
},
|
|
|
|
showUserSelectorPopup: function()
|
|
{
|
|
var selectorInstance = BX.Main
|
|
.selectorManagerV2.controls[this.popupContainer].selectorInstance;
|
|
|
|
selectorInstance.itemsSelected = {};
|
|
|
|
BX.onCustomEvent(this.openPopupEvent, [{
|
|
id: this.popupContainer,
|
|
bindNode: this.layout.addUserToRole
|
|
}]);
|
|
|
|
BX.onCustomEvent('BX.Main.SelectorV2:reInitDialog', [{
|
|
selectorId: this.popupContainer,
|
|
selectedItems: this.userGroup.accessCodes
|
|
}]);
|
|
},
|
|
|
|
adjustPopupHelper: function()
|
|
{
|
|
var set = this.layout.container.cloneNode(true);
|
|
|
|
set.style.position = 'absolute';
|
|
set.style.display = 'inline';
|
|
set.style.height = '0';
|
|
|
|
document.body.appendChild(set);
|
|
setTimeout(function() {
|
|
set.parentNode.removeChild(set);
|
|
});
|
|
|
|
if(set.offsetWidth > this.layout.container.offsetWidth)
|
|
{
|
|
this.getPopupHelper().show();
|
|
}
|
|
},
|
|
|
|
getPopupHelper: function()
|
|
{
|
|
if(!this.popupHelper)
|
|
{
|
|
this.popupHelper = BX.PopupWindowManager.create(null, this.layout.container, {
|
|
autoHide: true,
|
|
darkMode: true,
|
|
content: this.text,
|
|
maxWidth: this.layout.container.offsetWidth,
|
|
offsetTop: -9,
|
|
offsetLeft: 5,
|
|
animation: 'fading-slide'
|
|
});
|
|
}
|
|
|
|
return this.popupHelper;
|
|
},
|
|
|
|
render: function()
|
|
{
|
|
var changerNode = this.getChanger();
|
|
var controlNode;
|
|
|
|
if(this.type === 'toggler')
|
|
{
|
|
controlNode = this.getToggler();
|
|
changerNode.appendChild(controlNode);
|
|
}
|
|
|
|
if(this.type === 'variables')
|
|
{
|
|
controlNode = this.getVariables();
|
|
changerNode.appendChild(controlNode);
|
|
}
|
|
|
|
if(!this.layout.container)
|
|
{
|
|
this.layout.container = BX.create('div', {
|
|
props: {
|
|
className: 'ui-access-rights-column-item'
|
|
},
|
|
children: [
|
|
this.type === 'role' ? this.getRole() : null,
|
|
this.type === 'members' ? this.getMembers() : null,
|
|
this.type === 'title' ? this.getTextNode() : null,
|
|
this.hint ? this.getHint() : null,
|
|
this.type === 'userGroupTitle' ? this.getTextNode() : null,
|
|
this.controller ? this.getController() : null,
|
|
this.type === 'variables' || this.type === 'toggler' ? changerNode : null
|
|
]
|
|
})
|
|
}
|
|
|
|
if(this.type === 'role' && this.column.newColumn)
|
|
{
|
|
setTimeout(function() {
|
|
this.onRoleEditMode();
|
|
this.layout.roleInput.value = '';
|
|
}.bind(this));
|
|
}
|
|
|
|
return this.layout.container;
|
|
}
|
|
};
|
|
})();
|