- [x] [container.scss] Gestion de l'affichage responsive

- [x] [container.scss] Gestion de l'affichage retour a la ligne
- [x] [container.scss] Gestion de l'affichage info ne depassent plus
- [x] [view/js/users]    Recherche instantanee

css/container.scss

@@ -18,7 +18,8 @@
 	& > section.active.list{
 		display: flex;
 		flex-direction: row;
-		justify-content: space-around;
+		align-items: flex-start;
+		justify-content: flex-start;
 		flex-wrap: wrap;
 
 		.inline-box{
@@ -29,7 +30,9 @@
 		.searchbar{
 			display: inline-block;
 			position: relative;
-				width: calc( 100% - 2*1em - 2*1em );
+				// width: calc( 100% - 2*1em - 2*1em );
+				flex: calc( 100% - 2*1em - 2*1em );
+				height: 1em;
 			margin: 1em;
 			padding: .5em 1em;
 			padding-left: 2em;
@@ -75,7 +78,8 @@
 	& > section > .inline-box{
 		display: inline-block;
 		position: relative;
-			width: calc( 50% - 2*1em - 2*1em );
+			// width: calc( 50% - 2*1em - 2*1em );
+			flex: calc( 50% - 2*1em - 2*1em );
 			margin: 1em;
 			padding: 1em;
 
@@ -84,6 +88,11 @@
 
 			background-color: #fff;
 
+			// Lors de la recherche, quand on veut en masquer
+			&.hidden{
+				display: none;
+			}
+
 			a{
 				text-decoration: none;
 				color: inherit;
@@ -97,6 +106,7 @@
 				font-weight: bold;
 
 				color: darken($theme-color, 10);
+				white-space: nowrap;
 
 				& > span{
 					font-size: .8em;
@@ -111,6 +121,7 @@
 				display: block;
 				margin: 1em;
 				color: #333;
+				white-space: nowrap;
 				
 				// svg (icone)
 				svg{
@@ -140,6 +151,7 @@
 				display: block;
 				margin: 1em;
 				color: #333;
+				white-space: nowrap;
 				
 				// svg (icone)
 				svg{

todo.md

@@ -7,16 +7,17 @@
 ############
 # EN COURS #
 ############
-
-
 - [ ] [view/js/machines] Recherche instantanee
-- [ ] [view/js/users]    Recherche instantanee
 
 
 
 ########
 # FAIT #
 ########
+- [x] [container.scss] Gestion de l'affichage responsive
+- [x] [container.scss] Gestion de l'affichage retour a la ligne
+- [x] [container.scss] Gestion de l'affichage info ne depassent plus
+- [x] [view/js/users]    Recherche instantanee
 - [x] [machineDefaut][machineRepo] Gestion des parametres optionnels pour la modification
 - [x] [userDefault][userRepo] Gestion des parametres optionnels pour la modification
 - [x] [machines.js][machineDefault][machineRepo] Gestion de la nouvelle modification (avec recherche)

view/js/users.js

@@ -2,7 +2,8 @@
 var section = {
 	view: {
 		text:    '#CONTAINER > section[data-sublink="view"] ',
-		element: document.querySelector('#CONTAINER > section[data-sublink="view"]')
+		element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
+		searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar')
 	},
 
 	create: {
@@ -29,16 +30,51 @@ var section = {
 
 /* [1] view -> AFFICHAGE DES UTILISATEURS
 =========================================================*/
-
 if( section.view.element != null ){
 
-	// On recupere tous les liens
+	/* (1) On recupere tous les liens */
 	section.view.link = {
 		edit:   document.querySelectorAll(section.view.text + '.link_edit[data-user]'),
 		remove: document.querySelectorAll(section.view.text + '.link_remove[data-user]')
 	};
 
-	// On gere la "redirection" vers la modification
+
+	/* (2) Gestion de la recherche instantannee */
+	section.view.searchbar.addEventListener('keyup', function(e){
+
+		var search = {
+			path: 'userDefault/search',
+			data: [section.view.searchbar.value]
+		};
+
+		// On envoie la requete
+		api.send(search, function(result){
+			if( result.ModuleError == 0 && result.users.length > 0 ){ // si on a trouve qqch
+				
+				// On enregistre tous les UID dans un tableau
+				var uid_list = [];
+				for( var i = 0 ; i < result.users.length ; i++ )
+					uid_list.push( result.users[i].id_user);
+
+				// On recupere la liste des elements correspondants aux utilisateurs
+				var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
+
+				for( var i = 0 ; i < user_list.length ; i++ ){
+					console.log( user_list[i] instanceof Element );
+					// Si doit etre visible
+					if( uid_list.indexOf(user_list[i].id) > -1 )
+						user_list[i].remClass('hidden');
+					// Si ne doit pas etre visible
+					else
+						user_list[i].addClass('hidden');
+				}
+			}
+		});
+
+	}, false);
+
+
+	/* (3) On gere la "redirection" vers la modification */
 	for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
 
 		section.view.link.edit[i].addEventListener('click', function(e){
@@ -49,7 +85,7 @@ if( section.view.element != null ){
 
 	}
 
-	// On gere la "redirection" vers la suppression
+	/* (4) On gere la "redirection" vers la suppression */
 	for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
 
 		section.view.link.remove[i].addEventListener('click', function(e){

view/users.php

@@ -80,7 +80,7 @@
 				$clusters = new Repo('user/getClusters', array($user['id_user']));
 				$clusters = $clusters->answer();
 
-				echo "<article class='inline-box'>";
+				echo "<article class='inline-box' id='".$user['id_user']."'>";
 
 					// Prenom Nom 
 					echo "<span class='title'>".$user['firstname']." ".$user['lastname']." <span>#".$user['username']."</span></span>";