diff --git a/build/viewer/view/group/view.twig b/build/viewer/view/group/view.twig
index 1eab31c..be431d4 100755
--- a/build/viewer/view/group/view.twig
+++ b/build/viewer/view/group/view.twig
@@ -24,12 +24,14 @@
{{ p_icon.group | raw }}
- {% for user in f_members(user_cluster.id_user_cluster, 0) %}
-
- {{ user.username }}
-
-
- {% endfor %}
+
+ {% for user in f_members(user_cluster.id_user_cluster, 0) %}
+
+ {{ user.username }}
+
+
+ {% endfor %}
+
+
@@ -60,12 +62,14 @@
{{ p_icon.group | raw }}
- {% for machine in f_members(machine_cluster.id_machine_cluster,1) %}
-
- {{ machine.name }}
-
-
- {% endfor %}
+
+ {% for machine in f_members(machine_cluster.id_machine_cluster,1) %}
+
+ {{ machine.name }}
+
+
+ {% endfor %}
+
+
diff --git a/public_html/css/container.scss b/public_html/css/container.scss
index 8601e66..dcc85c7 100755
--- a/public_html/css/container.scss
+++ b/public_html/css/container.scss
@@ -190,7 +190,8 @@
}
}
- & > span{
+ & > span:not(.ignore),
+ & > span.ignore > span{
display: inline-block;
position: relative;
padding: .1em .5em;
@@ -213,6 +214,52 @@
border-radius: 3px;
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,
diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css
index 19f51fc..7c654e5 100755
--- a/public_html/css/min/container.css
+++ b/public_html/css/min/container.css
@@ -132,7 +132,7 @@
#WRAPPER > #CONTAINER > section > .inline-box .groups svg path, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path {
fill: #333 !important;
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;
position: relative;
padding: .1em .5em;
@@ -144,10 +144,34 @@
background-color: #f9f9f9;
color: #333;
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;
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;
position: absolute;
top: -1px;
@@ -163,9 +187,9 @@
background-color: #f9f9f9;
color: inherit;
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"); }
- #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;
background-color: #eee;
cursor: default;
diff --git a/public_html/view/js/groups.js b/public_html/view/js/groups.js
index 082a420..462ef4e 100755
--- a/public_html/view/js/groups.js
+++ b/public_html/view/js/groups.js
@@ -128,42 +128,161 @@ if( section.view.element != null ){
}
/* (6) On gere la "suppression" d'un groupe */
- for( i = 0 ; i < section.view.group.rem.length ; i++ ){
+ section.view.group.remfunc = function(e){
+ var prefix = e.target.getData('cluster')[0];
+ var cluster = e.target.getData('cluster').slice(1);
- section.view.group.rem[i].addEventListener('click', function(e){
- var prefix = e.target.getData('cluster')[0];
- var cluster = e.target.getData('cluster').slice(1);
+ // {1} On rédige la requête //
+ var request = {};
+ request.path = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink';
+ request.id_cluster = cluster;
- // {1} On rédige la requête //
- var request = {};
- request.path = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink';
- request.id_cluster = cluster;
+ if( prefix == 'u' ) request.id_user = e.target.getData('member');
+ else request.id_machine = e.target.getData('member');
- if( prefix == 'u' ) request.id_user = e.target.getData('member');
- else request.id_machine = e.target.getData('member');
+ // {2} On envoie la requête //
+ api.send(request, function(response){
- // {2} On envoie la requête //
- api.send(request, function(response){
+ // {3} Si erreur, on ne fait rien //
+ if( response.error != 0 )
+ return false;
- // {3} Si erreur, on ne fait rien //
- if( response.error != 0 )
- return false;
+ // {4} Si tout s'est bien passé //
+ e.target.parentNode.parentNode.removeChild( e.target.parentNode );
+ });
- // {4} Si tout s'est bien passé //
- 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 */
for( i = 0 ; i < section.view.group.add.length ; i++ ){
section.view.group.add[i].addEventListener('mouseup', function(e){
- pageManager.vars = [ 'members', e.target.getData('cluster') ];
- pageManager.refresh();
+ /* (1) Check if already opened */
+ 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 = "";
+
+ 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 += ""+members[j].username+"";
+ else
+ dropdown += ""+members[j].name+"";
+
+ }
+
+ dropdown += "
";
+
+ 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);
@@ -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);
-
- }
-
-
-
}