mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-26 13:59:23 +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: {
|
interface: {
|
||||||
//TODO : implement
|
//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);
|
footerLink.setAttribute("data-searchValue", textInput.value);
|
||||||
|
|
||||||
//Perform a request on the server
|
//Perform a request on the server
|
||||||
apiURI = "search/user";
|
ComunicWeb.components.search.interface.global(textInput.value, function(results){
|
||||||
params = {
|
|
||||||
query: textInput.value,
|
|
||||||
};
|
|
||||||
ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, function(response){
|
|
||||||
|
|
||||||
//Continue only in case of success
|
//Continue only in case of success
|
||||||
if(response.error)
|
if(results.error)
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
//Preload users informations
|
//Get information about related groups and users
|
||||||
ComunicWeb.user.userInfos.getMultipleUsersInfos(response, function(usersInfos){
|
getMultipleUsersInfos(ComunicWeb.components.search.utils.getUsersId(results), function(usersInfo){
|
||||||
|
|
||||||
//Remove any remainging element in searchResultBox
|
//Check for errors
|
||||||
emptyElem(searchBoxContainer);
|
if(usersInfo.error)
|
||||||
|
return;
|
||||||
|
|
||||||
//Create menu list
|
getInfoMultipleGroups(ComunicWeb.components.search.utils.getGroupsId(results), function(groupsInfo){
|
||||||
var menuList = createElem("ul", searchBoxContainer);
|
|
||||||
menuList.className = "menu";
|
|
||||||
|
|
||||||
//Process each result
|
//Remove any remainging element in searchResultBox
|
||||||
for(i in response){
|
emptyElem(searchBoxContainer);
|
||||||
|
|
||||||
//Retrieve userID
|
//Create menu list
|
||||||
var userID = response[i];
|
var menuList = createElem("ul", searchBoxContainer);
|
||||||
|
menuList.className = "menu";
|
||||||
|
|
||||||
//We show user only if we have informations about him
|
if(groupsInfo.error)
|
||||||
if(usersInfos["user-"+userID])
|
return;
|
||||||
//Display user informations
|
|
||||||
ComunicWeb.components.search.form.displayUser(usersInfos["user-"+userID], menuList);
|
|
||||||
|
|
||||||
}
|
//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
|
//Enable slimscroll
|
||||||
$(menuList).slimScroll({
|
$(menuList).slimScroll({
|
||||||
height: '100%'
|
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
|
* 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
|
//Search form
|
||||||
"js/components/search/interface.js",
|
"js/components/search/interface.js",
|
||||||
"js/components/search/form.js",
|
"js/components/search/form.js",
|
||||||
|
"js/components/search/ui.js",
|
||||||
|
"js/components/search/utils.js",
|
||||||
|
|
||||||
//Settings
|
//Settings
|
||||||
"js/components/settings/interface.js",
|
"js/components/settings/interface.js",
|
||||||
|
Loading…
Reference in New Issue
Block a user