From e805dda4fb22ded56e7502634f88213533a71601 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Sat, 7 Jul 2018 15:27:27 +0200 Subject: [PATCH] Created groups members table. --- assets/css/pages/groups/pages/members.css | 34 +++++ assets/js/common/functionsSchema.js | 13 ++ assets/js/components/groups/interface.js | 14 ++ assets/js/components/groups/utils.js | 28 ++++ assets/js/pages/groups/main.js | 3 + assets/js/pages/groups/pages/members.js | 162 ++++++++++++++++++++++ assets/js/pages/groups/sections/header.js | 17 ++- system/config/dev.config.php | 3 + 8 files changed, 272 insertions(+), 2 deletions(-) create mode 100644 assets/css/pages/groups/pages/members.css create mode 100644 assets/js/components/groups/utils.js create mode 100644 assets/js/pages/groups/pages/members.js diff --git a/assets/css/pages/groups/pages/members.css b/assets/css/pages/groups/pages/members.css new file mode 100644 index 00000000..5911bd15 --- /dev/null +++ b/assets/css/pages/groups/pages/members.css @@ -0,0 +1,34 @@ +/** + * Groups members page stylesheet + * + * @author Pierre HUBERT + */ + +.group-members-page { + float: none; + margin: auto; + margin-top: 40px; +} + +.group-members-page .backward-link { + margin-bottom: 10px; +} + +.group-members-page .title { + text-align: center; +} + +.group-members-page .member { + margin-bottom: 10px; +} + +.group-members-page .member .user-image { + border-radius: 50%; + max-width: 50px; + height: auto; +} + +.group-members-page .member .member-name { + margin-left: 5px; + font-weight: bold; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index 9cb93aaf..c4ead3dc 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -1007,6 +1007,12 @@ var ComunicWeb = { //TODO : implement }, + /** + * Groups utilities + */ + utils: { + //TODO : implement + }, }, }, @@ -1226,6 +1232,13 @@ var ComunicWeb = { //TODO : implement }, + /** + * Group members page + */ + members: { + //TODO : implement + }, + /** * Access to group forbidden page */ diff --git a/assets/js/components/groups/interface.js b/assets/js/components/groups/interface.js index b63381d1..e0719af0 100644 --- a/assets/js/components/groups/interface.js +++ b/assets/js/components/groups/interface.js @@ -160,4 +160,18 @@ ComunicWeb.components.groups.interface = { ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); }, + /** + * Get the members of a group + * + * @param {Number} id The ID of the target group + * @param {Function} callback + */ + getMembers: function(id, callback){ + //Perform the request over the API + var apiURI = "groups/get_members"; + var params = { + id: id + }; + ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); + } }; \ No newline at end of file diff --git a/assets/js/components/groups/utils.js b/assets/js/components/groups/utils.js new file mode 100644 index 00000000..02fc15c6 --- /dev/null +++ b/assets/js/components/groups/utils.js @@ -0,0 +1,28 @@ +/** + * Groups utilities + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.groups.utils = { + + /** + * Extract users ids from members list + * + * @param {Array} list The list of members to process + * @return {Array} The list of the IDs of the members of group + */ + getMembersIDs: function(list){ + + var IDs = []; + + //Process the list of IDs + list.forEach(function(member){ + IDs.push(member.user_id); + }); + + return IDs; + + } + +} \ No newline at end of file diff --git a/assets/js/pages/groups/main.js b/assets/js/pages/groups/main.js index dee13698..36453a23 100644 --- a/assets/js/pages/groups/main.js +++ b/assets/js/pages/groups/main.js @@ -61,6 +61,9 @@ ComunicWeb.pages.groups.main = { else if(page == "settings") ComunicWeb.pages.groups.pages.settings.open(groupID, target); + + else if(page == "members") + ComunicWeb.pages.groups.pages.members.open(groupID, target); //Unrecognized page diff --git a/assets/js/pages/groups/pages/members.js b/assets/js/pages/groups/pages/members.js new file mode 100644 index 00000000..9306cbe9 --- /dev/null +++ b/assets/js/pages/groups/pages/members.js @@ -0,0 +1,162 @@ +/** + * Group members page + * + * @author Pierre HubERT + */ + +ComunicWeb.pages.groups.pages.members = { + + /** + * Open member settings page + * + * @param {Number} id The ID of group + * @param {HTMLElement} target The target of the page + */ + open: function(id, target){ + + //Create container + var membersContainer = createElem2({ + appendTo: target, + type: "div", + class: "col-md-6 group-members-page" + }); + + //Add backward link + var backwardLink = createElem2({ + appendTo: membersContainer, + type: "div", + class: "a backward-link", + innerHTML: " Go back to the group" + }); + backwardLink.addEventListener("click", function(e){ + openPage("groups/" + id); + }); + + //Loading message + var loadingMsg = ComunicWeb.common.messages.createCalloutElem( + "Loading", + "Please wait while we load a few information...", + "info" + ); + membersContainer.appendChild(loadingMsg); + + //Get information about the group + ComunicWeb.components.groups.interface.getInfo(id, function(info){ + + //Check for errors + if(info.error){ + loadingMsg.remove(); + membersContainer.appendChild( + ComunicWeb.common.messages.createCalloutElem( + "Error", + "Could not get group information !", + "danger" + ) + ); + return; + } + + //Get the list of members of the group + ComunicWeb.components.groups.interface.getMembers(id, function(members){ + + //Check for errors + if(members.error){ + loadingMsg.remove(); + membersContainer.appendChild( + ComunicWeb.common.messages.createCalloutElem( + "Error", + "Could not get group members !", + "danger" + ) + ); + return; + } + + //Get the ID of the members of the group + var membersIDs = ComunicWeb.components.groups.utils.getMembersIDs(members); + + //Get information about the members of the group + ComunicWeb.user.userInfos.getMultipleUsersInfos(membersIDs, function(users){ + + //Check for errors + if(users.error){ + loadingMsg.remove(); + membersContainer.appendChild( + ComunicWeb.common.messages.createCalloutElem( + "Error", + "Could not get group members information !", + "danger" + ) + ); + return; + } + + //Remove loading message + loadingMsg.remove(); + + //Display the members list + ComunicWeb.pages.groups.pages.members.displayList(info, members, users, membersContainer); + + }); + + + }); + + + }); + }, + + /** + * Display the list of members of the group + * + * @param {Object} info Information about the group + * @param {Array} list The list of members of the group + * @param {Object} users The list of users of the group + * @param {HTMLElement} target The target for the list + */ + displayList: function(info, list, users, target){ + + //Append the title of the group + createElem2({ + appendTo: target, + type: "h2", + class: "title", + innerHTML: "Members of " + info.name + }); + + //Process the list of the members + var membersList = createElem2({ + appendTo: target, + type: "div", + class: "members-list" + }); + + list.forEach(function(member){ + + //Fetch user information + var userInfo = users["user-" + member.user_id]; + + //Create member container + var memberContainer = createElem2({ + appendTo: membersList, + type: "div", + class: "member" + }); + + //User account image and name + createElem2({ + appendTo: memberContainer, + type: "img", + class: "user-image", + src: userInfo.accountImage + }); + + createElem2({ + appendTo: memberContainer, + type: "span", + class: "member-name", + innerHTML: userFullName(userInfo) + }); + }); + } +} \ No newline at end of file diff --git a/assets/js/pages/groups/sections/header.js b/assets/js/pages/groups/sections/header.js index ac000545..d3dbae9f 100644 --- a/assets/js/pages/groups/sections/header.js +++ b/assets/js/pages/groups/sections/header.js @@ -69,19 +69,32 @@ ComunicWeb.pages.groups.sections.header = { }); //Add join date - var joinDate = createElem2({ + createElem2({ appendTo: thirdColumn, type: "div", innerHTML: ' Created '+ComunicWeb.common.date.timeDiffToStr(info.time_create)+' ago' }); //Add number of members - var joinDate = createElem2({ + var members = createElem2({ appendTo: thirdColumn, type: "div", innerHTML: ' '+ info.number_members+' members' }); + //Check if the user is a moderator or an admin + if(info.membership == "administrator" || info.membership == "moderator"){ + + //Turn members information into a link + members.className = "a"; + + members.addEventListener("click", function(e){ + + openPage("groups/" + info.id + "/members"); + + }); + } + //Group visibility var visibility = { open: "Open group", diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 28b44c41..127e1c65 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -222,6 +222,7 @@ class Dev { "css/pages/groups/pages/create.css", "css/pages/groups/pages/group.css", "css/pages/groups/pages/settings.css", + "css/pages/groups/pages/members.css", "css/pages/groups/pages/forbidden.css", //Groups sections @@ -389,6 +390,7 @@ class Dev { //Groups component "js/components/groups/interface.js", + "js/components/groups/utils.js", //User scripts "js/user/loginTokens.js", @@ -429,6 +431,7 @@ class Dev { "js/pages/groups/pages/create.js", "js/pages/groups/pages/group.js", "js/pages/groups/pages/settings.js", + "js/pages/groups/pages/members.js", "js/pages/groups/pages/forbidden.js", //Groups sections