[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

build/viewer/view/group/view.twig

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

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,

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;

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){
+		// {1} On rédige la requête //
-			var prefix  = e.target.getData('cluster')[0];
+		var request        = {};
-			var cluster = e.target.getData('cluster').slice(1);
+		request.path       = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink';
+		request.id_cluster = cluster;
 
-			// {1} On rédige la requête //
+		if( prefix == 'u' ) request.id_user    = e.target.getData('member');
-			var request        = {};
+		else                request.id_machine = e.target.getData('member');
-			request.path       = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink';
-			request.id_cluster = cluster;
 
-			if( prefix == 'u' ) request.id_user    = e.target.getData('member');
+		// {2} On envoie la requête //
-			else                request.id_machine = e.target.getData('member');
+		api.send(request, function(response){
 
-			// {2} On envoie la requête //
+			// {3} Si erreur, on ne fait rien //
-			api.send(request, function(response){
+			if( response.error != 0 )
+				return false;
 
-				// {3} Si erreur, on ne fait rien //
+			// {4} Si tout s'est bien passé //
-				if( response.error != 0 )
+			e.target.parentNode.parentNode.removeChild( e.target.parentNode );
-					return false;
+		});
 
-				// {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') ];
+			/* (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);
 
@@ -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);
-
-	}
-
-	
-
 
 }