diff --git a/assets/css/pages/groups/pages/main.css b/assets/css/pages/groups/pages/main.css index 1aeed25a..3c3e85b6 100644 --- a/assets/css/pages/groups/pages/main.css +++ b/assets/css/pages/groups/pages/main.css @@ -9,4 +9,22 @@ margin: auto; text-align: center; padding-top: 50px; -} \ No newline at end of file +} + +.groups-main-page .group-item { + text-align: justify; + margin-top: 10px; +} + +.groups-main-page .group-item .group-icon { + max-width: 50px; + margin-right: 10px; +} + +.groups-main-page .group-item div { + display: inline-block; +} + +.groups-main-page .group-item .group-name { + width: 180px; +} \ No newline at end of file diff --git a/assets/js/components/groups/interface.js b/assets/js/components/groups/interface.js index 48ad8ce5..102f758e 100644 --- a/assets/js/components/groups/interface.js +++ b/assets/js/components/groups/interface.js @@ -22,6 +22,18 @@ ComunicWeb.components.groups.interface = { ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); }, + /** + * Get the list of groups of the user + * + * @param {Function} callback + */ + getListUser: function(callback){ + //Perform a request over the API + var apiURI = "groups/get_my_list"; + var params = {}; + ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); + }, + /** * Get information about a group * diff --git a/assets/js/pages/groups/pages/main.js b/assets/js/pages/groups/pages/main.js index 0f0e36e0..07f60589 100644 --- a/assets/js/pages/groups/pages/main.js +++ b/assets/js/pages/groups/pages/main.js @@ -31,6 +31,74 @@ ComunicWeb.pages.groups.pages.main = { openPage("groups/create"); }); + //Add loading message + var message = ComunicWeb.common.messages.createCalloutElem( + "Loading", + "Please wait while we retrieve the list of your groups...", + "info"); + pageContainer.appendChild(message); + + //Get the list of groups of the user + ComunicWeb.components.groups.interface.getListUser(function(list){ + + message.remove(); + + //Check for errors + if(list.error) + return pageContainer.appendChild( + ComunicWeb.common.messages.createCalloutElem( + "Error", + "An error occurred while retrieving the list of groups of the user!", + "danger" + ) + ); + + //Display the list of the groups of the user + ComunicWeb.pages.groups.pages.main._display_list(pageContainer, list); + }); }, + /** + * Display the list of groups of the user + * + * @param {HTMLElement} target The target for the lsit + * @param {Object} list The list to apply + */ + _display_list: function(target, list){ + + //Process the list of groups + list.forEach(function(group){ + + //Create group item + var groupItem = createElem2({ + appendTo: target, + type: "div", + class: "group-item" + }); + + //Display group information + createElem2({ + appendTo: groupItem, + type: "img", + class: "group-icon", + src: group.icon_url + }); + + var groupName = createElem2({ + appendTo: groupItem, + type: "div", + class: "group-name a", + innerHTML: group.name + }); + + groupName.addEventListener("click", function(e){ + openPage("groups/" + group.id); + }); + + //Display membership status + ComunicWeb.pages.groups.sections.membershipBlock.display(group, groupItem); + }); + + } + } \ No newline at end of file