mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-22 12:09:21 +00:00
Upgraded search component to include groups suppport.
This commit is contained in:
parent
fc8abc6d56
commit
0692a689f1
@ -621,7 +621,21 @@ var ComunicWeb = {
|
||||
*/
|
||||
interface: {
|
||||
//TODO : implement
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Search results UI
|
||||
*/
|
||||
ui: {
|
||||
//TODO : implement
|
||||
},
|
||||
|
||||
/**
|
||||
* Search utilities
|
||||
*/
|
||||
utils: {
|
||||
//TODO : implement
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
@ -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;
|
||||
|
||||
},
|
||||
|
||||
}
|
@ -308,6 +308,8 @@ class Dev {
|
||||
//Search form
|
||||
"js/components/search/interface.js",
|
||||
"js/components/search/form.js",
|
||||
"js/components/search/ui.js",
|
||||
"js/components/search/utils.js",
|
||||
|
||||
//Settings
|
||||
"js/components/settings/interface.js",
|
||||
|
Loading…
Reference in New Issue
Block a user