mirror of
				https://github.com/pierre42100/ComunicWeb
				synced 2025-11-04 04:04:20 +00:00 
			
		
		
		
	User select functionnal
This commit is contained in:
		
							
								
								
									
										10
									
								
								assets/css/components/userSelect/userSelect.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								assets/css/components/userSelect/userSelect.css
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,10 @@
 | 
			
		||||
/**
 | 
			
		||||
 * Users select
 | 
			
		||||
 *
 | 
			
		||||
 * @author Pierre HUBERT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
.user-select-image {
 | 
			
		||||
	border-radius: 50%;
 | 
			
		||||
	width: 25px;
 | 
			
		||||
}
 | 
			
		||||
@@ -502,6 +502,13 @@ var ComunicWeb = {
 | 
			
		||||
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		/**
 | 
			
		||||
		 * User selector
 | 
			
		||||
		 */
 | 
			
		||||
		userSelect:{
 | 
			
		||||
			//TODO : implement
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										78
									
								
								assets/js/components/userSelect/userSelect.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										78
									
								
								assets/js/components/userSelect/userSelect.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,78 @@
 | 
			
		||||
/**
 | 
			
		||||
 * User selector (using select2)
 | 
			
		||||
 * 
 | 
			
		||||
 * @author Pierre HUBERT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
ComunicWeb.components.userSelect = {
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Initialize user selector for an element of the page
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {HTMLElement} inputSelect The target select input
 | 
			
		||||
	 * @return {Boolean} True for a success
 | 
			
		||||
	 */
 | 
			
		||||
	init: function(inputSelect){
 | 
			
		||||
 | 
			
		||||
		//Log action
 | 
			
		||||
		ComunicWeb.debug.logMessage("INFO : Initialize user selector");
 | 
			
		||||
 | 
			
		||||
		$(inputSelect).select2({
 | 
			
		||||
			ajax: {
 | 
			
		||||
				transport: function(params, success, failure){
 | 
			
		||||
 | 
			
		||||
					//Check if some data were passed or not
 | 
			
		||||
					if(!params.data.term)
 | 
			
		||||
						return false;
 | 
			
		||||
 | 
			
		||||
					//Retrive users list
 | 
			
		||||
					ComunicWeb.user.userInfos.search(params.data.term, function(usersInfos){
 | 
			
		||||
 | 
			
		||||
						if(usersInfos.error)
 | 
			
		||||
							return; // Doesn't do anything failure();
 | 
			
		||||
						else{
 | 
			
		||||
							//Prepare results processing
 | 
			
		||||
							returnData = {
 | 
			
		||||
								results: []
 | 
			
		||||
							}
 | 
			
		||||
							
 | 
			
		||||
							//Processing results
 | 
			
		||||
							for(i in usersInfos){
 | 
			
		||||
								returnData.results.push({
 | 
			
		||||
									id: usersInfos[i].userID,
 | 
			
		||||
									text: usersInfos[i].firstName + " " + usersInfos[i].lastName,
 | 
			
		||||
									accountImage: usersInfos[i].accountImage, 
 | 
			
		||||
								});
 | 
			
		||||
							}
 | 
			
		||||
							
 | 
			
		||||
							//Return result
 | 
			
		||||
							success(returnData);
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
 | 
			
		||||
				},
 | 
			
		||||
				delay: 250,
 | 
			
		||||
			},
 | 
			
		||||
 | 
			
		||||
			//Format result displaying
 | 
			
		||||
			templateResult: ComunicWeb.components.userSelect.formatUser,
 | 
			
		||||
		});
 | 
			
		||||
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * Format the display of a user
 | 
			
		||||
	 * 
 | 
			
		||||
	 * @param {Object} infos Informations about the user
 | 
			
		||||
	 * @return {String} The formated informations
 | 
			
		||||
	 */
 | 
			
		||||
	formatUser: function(infos){
 | 
			
		||||
		console.log(infos);
 | 
			
		||||
 | 
			
		||||
		if(!infos.id)
 | 
			
		||||
			return infos.id;
 | 
			
		||||
		
 | 
			
		||||
		return $("<img src='"+infos.accountImage+"' class='user-select-image' /> <span>" + infos.text + "</span>");
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
};
 | 
			
		||||
@@ -27,6 +27,18 @@ ComunicWeb.pages.home.home = {
 | 
			
		||||
            });
 | 
			
		||||
            loginButton.innerHTML="Logout";
 | 
			
		||||
            targetElement.appendChild(loginButton);
 | 
			
		||||
 | 
			
		||||
            //Create select user element
 | 
			
		||||
            var formGroup = createElem("div", targetElement);
 | 
			
		||||
            formGroup.className = "form-group";
 | 
			
		||||
            var selectElement = createElem("select", formGroup);
 | 
			
		||||
            selectElement.className = "form-control select2";
 | 
			
		||||
            selectElement.setAttribute("multiple", "multiple");
 | 
			
		||||
            selectElement.setAttribute("data-placeholder", "Select users");
 | 
			
		||||
 | 
			
		||||
            //Initialize user selector
 | 
			
		||||
            ComunicWeb.components.userSelect.init(selectElement);
 | 
			
		||||
 | 
			
		||||
        }
 | 
			
		||||
        else{
 | 
			
		||||
            //Display landing page
 | 
			
		||||
 
 | 
			
		||||
@@ -16,6 +16,7 @@ $config['CSSfiles'] = array(
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/ionicons/css/ionicons.min.css",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/square/blue.css",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/flat/blue.css",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/select2/select2.min.css",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/dist/css/AdminLTE.min.css",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/dist/css/skins/_all-skins.min.css",
 | 
			
		||||
 | 
			
		||||
@@ -29,6 +30,7 @@ $config['CSSfiles'] = array(
 | 
			
		||||
    "%PATH_ASSETS%css/components/friends/friendsBar.css",
 | 
			
		||||
    "%PATH_ASSETS%css/components/discussions/manager.css",
 | 
			
		||||
    "%PATH_ASSETS%css/components/discussions/windows.css",
 | 
			
		||||
    "%PATH_ASSETS%css/components/userSelect/userSelect.css",
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
//JS files to include (at the end of the page)
 | 
			
		||||
@@ -39,6 +41,7 @@ $config['JSfiles'] = array(
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/jquery-ui/jquery-ui.min.js",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/icheck.min.js",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js",
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/plugins/select2/select2.js", //remove .min to debug
 | 
			
		||||
    "%PATH_ASSETS%3rdparty/adminLTE/dist/js/app.min.js",
 | 
			
		||||
 | 
			
		||||
    //Bootstrap notify
 | 
			
		||||
@@ -78,6 +81,7 @@ $config['JSfiles'] = array(
 | 
			
		||||
    "%PATH_ASSETS%js/components/discussions/manager.js",
 | 
			
		||||
    "%PATH_ASSETS%js/components/discussions/list.js",
 | 
			
		||||
    "%PATH_ASSETS%js/components/discussions/windows.js",
 | 
			
		||||
    "%PATH_ASSETS%js/components/userSelect/userSelect.js",
 | 
			
		||||
 | 
			
		||||
    //User scripts
 | 
			
		||||
    "%PATH_ASSETS%js/user/loginTokens.js",
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user