Start to update group settings page

assets/css/pages/groups/pages/settings.css

@@ -7,12 +7,6 @@
 .group-settings-container {
     float: none;
     margin: auto;
-    margin-top: 40px;
-}
-
-.group-settings-container .title {
-    text-align: center;
-    margin-bottom: 15px;
 }
 
 .group-settings-container .separated-block {

assets/js/components/groups/interface.js

@@ -98,15 +98,10 @@ const GroupsInterface = {
 	 * Get the settings of a group
 	 * 
 	 * @param {Number} id The ID of the target group
-	 * @param {Function} callback
+	 * @return {Promise<GroupSettings>}
 	 */
-	getSettings: function(id, callback){
+	getSettings: async function(id){
-		//Perform the request over the API
+		return await api("groups/get_settings", {id: id}, true);
-		var apiURI = "groups/get_settings";
-		var params = {
-			id: id
-		};
-		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
 	},
 
 	/**

assets/js/pages/groups/main.js

@@ -100,6 +100,10 @@ const GroupsPage = {
 					GroupMembersSection.display(group, target)
 					return;
 				
+				case "settings":
+					await GroupSettingsPage.display(group.id, target);
+					return;
+
 				default:
 					ComunicWeb.common.error.pageNotFound(null, target);
 			}

assets/js/pages/groups/pages/settings.js

@@ -4,99 +4,45 @@
  * @author Pierre HUBERT
  */
 
-ComunicWeb.pages.groups.pages.settings = {
+const GroupSettingsPage = {
-
-	/**
-	 * Open group settings page
-	 * 
-	 * @param {Number} id The ID of the settings page
-	 * @param {HTMLElement} target The target of the page
-	 */
-	open: function(id, target){
-		
-		//Create settings container
-		var settingsContainer = createElem2({
-			appendTo: target,
-			type: "div",
-			class: "group-settings-container col-md-6"
-		});
-
-		//Add backward link
-		var backwardLink = createElem2({
-			appendTo: settingsContainer,
-			type: "div",
-			class: "a",
-			innerHTML: "<i class='fa fa-arrow-left'></i> Go back to the group"
-		});
-		backwardLink.addEventListener("click", function(e){
-			openPage("groups/" + id);
-		});
-
-		//Add title
-		createElem2({
-			appendTo: settingsContainer,
-			type: "h2",
-			class: "title",
-			innerHTML: "Group settings"
-		});
-
-		//Display loading message
-		var loadingMsg = ComunicWeb.common.messages.createCalloutElem(
-			"Loading", 
-			"Please wait while we retrieve the settings of the page...", 
-			"info");
-		settingsContainer.appendChild(loadingMsg);
-		
-		//Get the settings of the page
-		ComunicWeb.components.groups.interface.getSettings(id, function(result){
-
-			//Remove loading message
-			loadingMsg.remove();
-
-			//Check for error
-			if(result.error){
-				
-				//Check if the user is not authorized to access the page
-				if(result.error.code == 401){
-					//The user is not authorized to see this page
-					settingsContainer.appendChild(ComunicWeb.common.messages.createCalloutElem(
-						"Access forbidden",
-						"You are not authorized to access these information !",
-						"danger"
-					));
-				}
-
-				//Else the page was not found
-				else {
-					settingsContainer.remove();
-					ComunicWeb.common.error.pageNotFound({}, target);
-				}
-
-			}
-
-			else {
-				//Display settings pages
-				ComunicWeb.pages.groups.pages.settings.display(id, result, settingsContainer);
-			}
-
-		});
-
-	},
 
 	/**
 	 * Display page settings
 	 * 
 	 * @param {Number} id The ID of the target page
-	 * @param {Object} settings The settings of the page
 	 * @param {HTMLElement} target The target of the page
 	 */
-	display: function(id, settings, target){
+	display: async function(id, target){
+
+
+		//Create settings container
+		const settingsPage = createElem2({
+			appendTo: target,
+			type: "div",
+			class: "group-settings-container col-md-6",
+			innerHTML: "<div class='box box-primary'><div class='box-header'><h3 class='box-title'>"+tr("Group settings")+"</h3></div><div class='box-body'></div></di>"
+		})
+		
+		const settingsBox = settingsPage.querySelector(".box-body");
+
+		//Display loading message
+		var loadingMsg = ComunicWeb.common.messages.createCalloutElem(
+			tr("Loading"), 
+			tr("Please wait while we retrieve the settings of the page..."),
+			"info"
+		);
+		settingsBox.appendChild(loadingMsg);
+
+		//Get the settings of the page
+		const settings = await GroupsInterface.getSettings(id);
+
+		loadingMsg.remove();
 
 		ComunicWeb.common.pageTitle.setTitle(settings.name + " - Settings");
 
 		//Create form container
 		var formContainer = createElem2({
-			appendTo: target,
+			appendTo: settingsBox,
 			type: "div",
 			class: "group-settings-form"
 		});
@@ -576,3 +522,5 @@ ComunicWeb.pages.groups.pages.settings = {
 		
 	}
 }
+
+ComunicWeb.pages.groups.pages.settings = GroupSettingsPage;

assets/js/typings/Group.d.ts

@@ -24,3 +24,5 @@ declare interface AdvancedGroupInfo extends Group {
     number_likes: Number,
     is_liking: Boolean
 }
+
+declare interface GroupSettings extends AdvancedGroupInfo {}

assets/templates/pages/groups/sections/GroupTabs.html

@@ -7,7 +7,7 @@
               <li v-bind:class="activePage == 'posts' ? 'active': ''"><a @click="openPage('posts')">tr("Posts")</a></li>
               <li v-bind:class="activePage == 'members' ? 'active': ''"><a @click="openPage('members')" v-if="canSeeMembers">tr("Members")</a></li>
               <li v-bind:class="activePage == 'about' ? 'active': ''"><a @click="openPage('about')">tr("About")</a></li>
-              <li class="pull-right" v-if="isAdmin" v-bind:class="activePage == 'admin' ? 'active': ''"><a  @click="openPage('admin')" class="text-muted"><i class="fa fa-gear"></i></a></li>
+              <li class="pull-right" v-if="isAdmin" v-bind:class="activePage == 'settings' ? 'active': ''"><a  @click="openPage('settings')" class="text-muted"><i class="fa fa-gear"></i></a></li>
             </ul>
     </div>
 </div>