logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[Upgrade] New system to add members view:groups/view[+button]" 

[Todo] Propagate to view:users/group[Todo] Propagate to view:machines/group[Todo] Propagate to view:groups/permissions
This commit is contained in:
xdrm-brackets 2017-02-18 14:42:10 +01:00
parent b1ca22d9b5
commit 2034cb76e0
4 changed files with 234 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/viewer/view/group/view.twig
View File

@ -24,12 +24,14 @@
<span class='groups'> <span class='groups'>
{{ p_icon.group | raw }} {{ p_icon.group | raw }}
<span class='ignore'>
{% for user in f_members(user_cluster.id_user_cluster, 0) %} {% for user in f_members(user_cluster.id_user_cluster, 0) %}
<span> <span>
{{ user.username }} {{ user.username }}
<span class='rem-member' data-member='{{ user.id_user }}' data-cluster='{{ id_user_cluster }}'></span> <span class='rem-member' data-member='{{ user.id_user }}' data-cluster='{{ id_user_cluster }}'></span>
</span> </span>
{% endfor %} {% endfor %}
</span>
<span class='add-member' data-cluster='{{ id_user_cluster }}'>+</span> <span class='add-member' data-cluster='{{ id_user_cluster }}'>+</span>
</span> </span>
@ -60,12 +62,14 @@
<span class='groups'> <span class='groups'>
{{ p_icon.group | raw }} {{ p_icon.group | raw }}
<span class='ignore'>
{% for machine in f_members(machine_cluster.id_machine_cluster,1) %} {% for machine in f_members(machine_cluster.id_machine_cluster,1) %}
<span> <span>
{{ machine.name }} {{ machine.name }}
<span class='rem-member' data-member='{{ machine.id_machine }}' data-cluster='{{ id_machine_cluster }}'></span> <span class='rem-member' data-member='{{ machine.id_machine }}' data-cluster='{{ id_machine_cluster }}'></span>
</span> </span>
{% endfor %} {% endfor %}
</span>
<span class='add-member' data-cluster='{{ id_machine_cluster }}'>+</span> <span class='add-member' data-cluster='{{ id_machine_cluster }}'>+</span>
</span> </span>

49
public_html/css/container.scss
View File

@ -190,7 +190,8 @@
} }
} }
& > span{ & > span:not(.ignore),
& > span.ignore > span{
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: .1em .5em; padding: .1em .5em;
@ -213,6 +214,52 @@
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
& > div.dropdown{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex: 100%;
justify-content: space-between;
position: absolute;
top: calc( 100% + 5px );
left: 0;
width: 12em;
height: 500%;
border-radius: 3px;
overflow: hidden;
overflow-y: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
z-index: 100;
& > span{
padding: .5em;
padding-left: 1em;
flex: 2em 1 1;
cursor: pointer;
&:hover{
background-color: #F8F8F8;
}
}
}
} }
& > span.rem-group, & > span.rem-group,

34
public_html/css/min/container.css
View File

@ -132,7 +132,7 @@
#WRAPPER > #CONTAINER > section > .inline-box .groups svg path, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path { #WRAPPER > #CONTAINER > section > .inline-box .groups svg path, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path {
fill: #333 !important; fill: #333 !important;
pointer-events: none; } pointer-events: none; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span { #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore), #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span {
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: .1em .5em; padding: .1em .5em;
@ -144,10 +144,34 @@
background-color: #f9f9f9; background-color: #f9f9f9;
color: #333; color: #333;
cursor: default; } cursor: default; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-member { #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member {
border-radius: 3px; border-radius: 3px;
cursor: pointer; } cursor: pointer; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member { #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex: 100%;
justify-content: space-between;
position: absolute;
top: calc( 100% + 5px );
left: 0;
width: 12em;
height: 500%;
border-radius: 3px;
overflow: hidden;
overflow-y: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
z-index: 100; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span {
padding: .5em;
padding-left: 1em;
flex: 2em 1 1;
cursor: pointer; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span.add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore).add-member > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-permission > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-group > div.dropdown > span:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span.add-member > div.dropdown > span:hover {
background-color: #F8F8F8; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member {
display: block; display: block;
position: absolute; position: absolute;
top: -1px; top: -1px;
@ -163,9 +187,9 @@
background-color: #f9f9f9; background-color: #f9f9f9;
color: inherit; color: inherit;
cursor: pointer; } cursor: pointer; }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member:hover { #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.rem-member:hover {
background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); } background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); }
#WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.icon-permission:hover { #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.ignore > span > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span:not(.ignore) > span.icon-permission:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.ignore > span > span.icon-permission:hover {
border-color: #ddd; border-color: #ddd;
background-color: #eee; background-color: #eee;
cursor: default; cursor: default;

147
public_html/view/js/groups.js
View File

@ -128,9 +128,7 @@ if( section.view.element != null ){
} }
/* (6) On gere la "suppression" d'un groupe */ /* (6) On gere la "suppression" d'un groupe */
for( i = 0 ; i < section.view.group.rem.length ; i++ ){ section.view.group.remfunc = function(e){
section.view.group.rem[i].addEventListener('click', function(e){
var prefix = e.target.getData('cluster')[0]; var prefix = e.target.getData('cluster')[0];
var cluster = e.target.getData('cluster').slice(1); var cluster = e.target.getData('cluster').slice(1);
@ -153,17 +151,138 @@ if( section.view.element != null ){
e.target.parentNode.parentNode.removeChild( e.target.parentNode ); e.target.parentNode.parentNode.removeChild( e.target.parentNode );
}); });
}, false); };
for( i = 0 ; i < section.view.group.rem.length ; i++ )
section.view.group.rem[i].addEventListener('click', section.view.group.remfunc, false);
}
/* (7) On gere la "modification" des membres d'un groupe */ /* (7) On gere la "modification" des membres d'un groupe */
for( i = 0 ; i < section.view.group.add.length ; i++ ){ for( i = 0 ; i < section.view.group.add.length ; i++ ){
section.view.group.add[i].addEventListener('mouseup', function(e){ section.view.group.add[i].addEventListener('mouseup', function(e){
pageManager.vars = [ 'members', e.target.getData('cluster') ]; /* (1) Check if already opened */
pageManager.refresh(); var opened = e.target.innerHTML != '+';
/* (2) Hide all dropdowns */
for( j = 0 ; j < section.view.group.add.length ; j++ )
section.view.group.add[j].innerHTML = '+';
/* (3) Try to show dropdown if not already */
if( !opened ){
/* (1) Get the group id/type */
if( !/^(u|m)(\d+)$/.test(e.target.parentNode.parentNode.id) )
return;
var cluster_id = parseInt(RegExp.$2);
var path = (RegExp.$1 == 'u') ? 'userDefault/getAll' : 'machineDefault/getAll';
/* (2) Get already members ids */
var brothers = e.target.parentNode.children[1].children;
var already = []; // will contain already ids
for( j = 0 ; j < brothers.length ; j++ )
already += parseInt( brothers[j].children[0].getData('member') );
/* (3) Call list of members */
api.send({path: path}, function(response){
// Manage error
if( response.error != 0 ){
console.warn('error loading list of members');
return;
}
// remove already members
var members = (path == 'userDefault/getAll') ? response.users : response.machines;
/* (4) Build dropdown content without already members */
dropdown = "<div class='dropdown'>";
for( j = 0 ; j < members.length ; j++ ){
if( path == 'userDefault/getAll' && already.indexOf(members[j].id_user) > -1 )
continue;
if( path == 'machineDefault/getAll' && already.indexOf(members[j].id_machine) > -1 )
continue;
if( path == 'userDefault/getAll' )
dropdown += "<span data-memberid='"+members[j].id_user+"'>"+members[j].username+"</span>";
else
dropdown += "<span data-memberid='"+members[j].id_machine+"'>"+members[j].name+"</span>";
}
dropdown += "</div>";
e.target.innerHTML = '+'+dropdown;
/* (5) Attach events to dropdown elements */
var dropdownElements = e.target.children[0].children;
for( j = 0 ; j < dropdownElements.length ; j++ )
dropdownElements[j].addEventListener('mousedown', function(e2){
// {1} Get member id/username //
var request = { id_cluster: cluster_id };
var memberid = e2.target.getData('memberid');
var username = e2.target.innerHTML;
// manage error
if( memberid === false )
return;
// {2} Add member to group //
if( path == 'userDefault/getAll' ){
request.path = 'userDefault/link';
request.id_user = memberid;
}else{
request.path = 'machineDefault/link';
request.id_machine = memberid;
}
// {3} Call link //
api.send(request, function(response2){
// manage error
if( response2.error != 0 ){
console.warn('cannot link user to group');
return;
}
// {4} Update display //
var newMemberRemoveIcon = document.createElement('span');
newMemberRemoveIcon.setAttribute('class', 'rem-member');
newMemberRemoveIcon.setAttribute('data-member', memberid);
newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster'));
newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false);
var newMember = document.createElement('span');
newMember.appendChild( document.createTextNode(username) );
newMember.appendChild(newMemberRemoveIcon);
e.target.parentNode.children[1].appendChild(newMember);
});
}, false);
});
}
/* LAST */
// pageManager.vars = [ 'members', e.target.getData('cluster') ];
// pageManager.refresh();
}, false); }, false);
@ -172,20 +291,6 @@ if( section.view.element != null ){
/* (8) On gere la "modification" des membres d'une permission */
for( i = 0 ; i < section.view.group.add.length ; i++ ){
section.view.group.add[i].addEventListener('mouseup', function(e){
pageManager.vars = [ 'permissions', e.target.getData('cluster') ];
pageManager.refresh();
}, false);
}
} }