mirror of
				https://github.com/pierre42100/ComunicWeb
				synced 2025-11-03 19:54:14 +00:00 
			
		
		
		
	Upgraded search component to include groups suppport.
This commit is contained in:
		@@ -79,84 +79,50 @@ ComunicWeb.components.search.form = {
 | 
			
		||||
		footerLink.setAttribute("data-searchValue", textInput.value);
 | 
			
		||||
 | 
			
		||||
		//Perform a request on the server
 | 
			
		||||
		apiURI = "search/user";
 | 
			
		||||
		params = {
 | 
			
		||||
			query: textInput.value,
 | 
			
		||||
		};
 | 
			
		||||
		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, function(response){
 | 
			
		||||
		ComunicWeb.components.search.interface.global(textInput.value, function(results){
 | 
			
		||||
			
 | 
			
		||||
			//Continue only in case of success
 | 
			
		||||
			if(response.error)
 | 
			
		||||
			if(results.error)
 | 
			
		||||
				return false;
 | 
			
		||||
			
 | 
			
		||||
			//Preload users informations
 | 
			
		||||
			ComunicWeb.user.userInfos.getMultipleUsersInfos(response, function(usersInfos){
 | 
			
		||||
			//Get information about related groups and users
 | 
			
		||||
			getMultipleUsersInfos(ComunicWeb.components.search.utils.getUsersId(results), function(usersInfo){
 | 
			
		||||
 | 
			
		||||
				//Remove any remainging element in searchResultBox
 | 
			
		||||
				emptyElem(searchBoxContainer);
 | 
			
		||||
				//Check for errors
 | 
			
		||||
				if(usersInfo.error)
 | 
			
		||||
					return;
 | 
			
		||||
				
 | 
			
		||||
				getInfoMultipleGroups(ComunicWeb.components.search.utils.getGroupsId(results), function(groupsInfo){
 | 
			
		||||
 | 
			
		||||
				//Create menu list
 | 
			
		||||
				var menuList = createElem("ul", searchBoxContainer);
 | 
			
		||||
				menuList.className = "menu";
 | 
			
		||||
					//Remove any remainging element in searchResultBox
 | 
			
		||||
					emptyElem(searchBoxContainer);
 | 
			
		||||
 | 
			
		||||
				//Process each result
 | 
			
		||||
				for(i in response){
 | 
			
		||||
					//Create menu list
 | 
			
		||||
					var menuList = createElem("ul", searchBoxContainer);
 | 
			
		||||
					menuList.className = "menu";
 | 
			
		||||
 | 
			
		||||
					//Retrieve userID
 | 
			
		||||
					var userID = response[i];
 | 
			
		||||
					
 | 
			
		||||
					//We show user only if we have informations about him
 | 
			
		||||
					if(usersInfos["user-"+userID])
 | 
			
		||||
						//Display user informations
 | 
			
		||||
						ComunicWeb.components.search.form.displayUser(usersInfos["user-"+userID], menuList);
 | 
			
		||||
					if(groupsInfo.error)
 | 
			
		||||
						return;
 | 
			
		||||
 | 
			
		||||
				}
 | 
			
		||||
					//Process the list of results
 | 
			
		||||
					results.forEach(function(result){
 | 
			
		||||
						ComunicWeb.components.search.ui.display(result, usersInfo, groupsInfo, function(){
 | 
			
		||||
							ComunicWeb.components.search.form.close();
 | 
			
		||||
						}, menuList);
 | 
			
		||||
					});
 | 
			
		||||
 | 
			
		||||
				//Enable slimscroll
 | 
			
		||||
				$(menuList).slimScroll({
 | 
			
		||||
					height: '100%'
 | 
			
		||||
					//Enable slimscroll
 | 
			
		||||
					$(menuList).slimScroll({
 | 
			
		||||
						height: '100%'
 | 
			
		||||
					});
 | 
			
		||||
				});
 | 
			
		||||
 | 
			
		||||
			});
 | 
			
		||||
			
 | 
			
		||||
		});
 | 
			
		||||
		
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Display a user on the result list
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {Integer} userInfos Informations about the user
 | 
			
		||||
	 * @param {HTMLElement} menuList The target list menu
 | 
			
		||||
	 * @return {Boolean} True for a success
 | 
			
		||||
	 */
 | 
			
		||||
	displayUser: function(userInfos, menuList){
 | 
			
		||||
		//Create user element
 | 
			
		||||
		var userListElement = createElem("li", menuList);
 | 
			
		||||
		var userLinkElement = createElem("a", userListElement);
 | 
			
		||||
		
 | 
			
		||||
		//User account image
 | 
			
		||||
		var userAccountImageContainer = createElem("div", userLinkElement);
 | 
			
		||||
		userAccountImageContainer.className = "pull-left";
 | 
			
		||||
 | 
			
		||||
		var userImage = createElem("img", userAccountImageContainer);
 | 
			
		||||
		userImage.className = "img-circle";
 | 
			
		||||
		userImage.alt = "User image";
 | 
			
		||||
		userImage.src = path_assets("img/defaultAvatar.png");
 | 
			
		||||
 | 
			
		||||
		//User name
 | 
			
		||||
		var usernameElem = createElem("h4", userLinkElement);
 | 
			
		||||
		usernameElem.innerHTML = "Loading...";
 | 
			
		||||
			
 | 
			
		||||
		//Apply user informations
 | 
			
		||||
		userImage.src = userInfos.accountImage;
 | 
			
		||||
		usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
 | 
			
		||||
 | 
			
		||||
		//Make user link element live
 | 
			
		||||
		userLinkElement.onclick = function() {
 | 
			
		||||
			ComunicWeb.components.search.form.close();
 | 
			
		||||
			openUserPage(userInfos);
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Close and clear the search form
 | 
			
		||||
	 */
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										26
									
								
								assets/js/components/search/interface.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								assets/js/components/search/interface.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,26 @@
 | 
			
		||||
/**
 | 
			
		||||
 * Search interface
 | 
			
		||||
 * 
 | 
			
		||||
 * @author Pierre HUBERT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
ComunicWeb.components.search.interface = {
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Make a global search (search for users & forms)
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {String} query The search query
 | 
			
		||||
	 * @param {Function} callback
 | 
			
		||||
	 */
 | 
			
		||||
	global: function(query, callback){
 | 
			
		||||
		ComunicWeb.common.api.makeAPIrequest(
 | 
			
		||||
			"search/global",
 | 
			
		||||
			{
 | 
			
		||||
				query: query
 | 
			
		||||
			},
 | 
			
		||||
			true,
 | 
			
		||||
			callback
 | 
			
		||||
		);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										81
									
								
								assets/js/components/search/ui.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										81
									
								
								assets/js/components/search/ui.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,81 @@
 | 
			
		||||
/**
 | 
			
		||||
 * Search users UI
 | 
			
		||||
 * 
 | 
			
		||||
 * @author Pierre HUBERT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
ComunicWeb.components.search.ui = {
 | 
			
		||||
	
 | 
			
		||||
	/**
 | 
			
		||||
	 * Display search result
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {Object} info Information about the result to display
 | 
			
		||||
	 * @param {Object} usersInfo Information about related users
 | 
			
		||||
	 * @param {Object} groupsInfo Information about related groups
 | 
			
		||||
	 * @param {Function} callback Additionnal function to call when the
 | 
			
		||||
	 * user has selected an option (can be null)
 | 
			
		||||
	 * @param {HTMLElement} target
 | 
			
		||||
	 */
 | 
			
		||||
	display: function(info, usersInfo, groupsInfo, callback, target){
 | 
			
		||||
 | 
			
		||||
		//Create user element
 | 
			
		||||
		var resultListEl = createElem("li", target);
 | 
			
		||||
		var resultLinkElement = createElem("a", resultListEl);
 | 
			
		||||
		
 | 
			
		||||
		//User account image
 | 
			
		||||
		var resultImageContainer = createElem2({
 | 
			
		||||
			appendTo: resultLinkElement,
 | 
			
		||||
			type: "div",
 | 
			
		||||
			class: "pull-left"
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
		var resultImage = createElem2({
 | 
			
		||||
			appendTo: resultImageContainer,
 | 
			
		||||
			type: "img",
 | 
			
		||||
			class: "img-circle"
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
		//User name
 | 
			
		||||
		var resultName = createElem2({
 | 
			
		||||
			appendTo: resultLinkElement,
 | 
			
		||||
			type: "h4",
 | 
			
		||||
			innerHTML: "Loading..."
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
		//Get information about the result
 | 
			
		||||
		if(info.kind == "user"){
 | 
			
		||||
 | 
			
		||||
			var userInfo = usersInfo["user-"+info.id];
 | 
			
		||||
			
 | 
			
		||||
			resultImage.src = userInfo.accountImage;
 | 
			
		||||
			resultName.innerHTML = userFullName(userInfo);
 | 
			
		||||
			
 | 
			
		||||
			resultLinkElement.addEventListener("click", function(){
 | 
			
		||||
				openUserPage(userInfo);
 | 
			
		||||
			});
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		if(info.kind == "group"){
 | 
			
		||||
 | 
			
		||||
			var groupInfo = groupsInfo[info.id];
 | 
			
		||||
			
 | 
			
		||||
			resultImage.src = groupInfo.icon_url;
 | 
			
		||||
			resultName.innerHTML = groupInfo.name;
 | 
			
		||||
 | 
			
		||||
			resultLinkElement.addEventListener("click", function(){
 | 
			
		||||
				openGroupPage(groupInfo);
 | 
			
		||||
			})
 | 
			
		||||
		}
 | 
			
		||||
			
 | 
			
		||||
 | 
			
		||||
		//Make user link element live
 | 
			
		||||
		resultLinkElement.addEventListener("click", function() {
 | 
			
		||||
			
 | 
			
		||||
			if(callback)
 | 
			
		||||
				callback();
 | 
			
		||||
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										57
									
								
								assets/js/components/search/utils.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								assets/js/components/search/utils.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,57 @@
 | 
			
		||||
/**
 | 
			
		||||
 * Search utilities
 | 
			
		||||
 * 
 | 
			
		||||
 * @author Pierre HUBERT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
ComunicWeb.components.search.utils = {
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Extract related users ID to a list of search results
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {Array} list The list of results to parse
 | 
			
		||||
	 * @return {Array} The list of related users ID
 | 
			
		||||
	 */
 | 
			
		||||
	getUsersId: function(list){
 | 
			
		||||
		
 | 
			
		||||
		var IDs = [];
 | 
			
		||||
 | 
			
		||||
		list.forEach(function(result){
 | 
			
		||||
 | 
			
		||||
			if(result.kind == "user"){
 | 
			
		||||
 | 
			
		||||
				if(!IDs.includes(result.id))
 | 
			
		||||
					IDs.push(result.id);
 | 
			
		||||
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
		return IDs;
 | 
			
		||||
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Extract related groups ID to a list of search results
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {Array} list The list of results to parse
 | 
			
		||||
	 * @return {Array} The list of related groups ID
 | 
			
		||||
	 */
 | 
			
		||||
	getGroupsId: function(list){
 | 
			
		||||
		
 | 
			
		||||
		var IDs = [];
 | 
			
		||||
 | 
			
		||||
		list.forEach(function(result){
 | 
			
		||||
 | 
			
		||||
			if(result.kind == "group"){
 | 
			
		||||
				if(!IDs.includes(result.id))
 | 
			
		||||
					IDs.push(result.id);
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
		return IDs;
 | 
			
		||||
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user