Created groups members table.

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;
+}

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
 				 */

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);
+	}
 };

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;
+
+	}
+
+}

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

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: "<i class='fa fa-arrow-left'></i> 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)
+			});
+		});
+	}
+}

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: '<i class="fa fa-clock-o"></i> Created '+ComunicWeb.common.date.timeDiffToStr(info.time_create)+' ago'
         });
 
         //Add number of members
-        var joinDate = createElem2({
+        var members = createElem2({
             appendTo: thirdColumn,
             type: "div",
             innerHTML: '<i class="fa fa-group"></i> '+ 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",

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