Ready to implement about page

assets/css/pages/groups/pages/about.css

@@ -0,0 +1,5 @@
+/**
+ * About group page
+ *
+ * @author Pierre Hubert
+ */

assets/js/pages/groups/main.js

@@ -97,7 +97,11 @@ const GroupsPage = {
 					return;
 
 				case "members":
-					GroupMembersSection.display(group, target)
+					GroupMembersPage.display(group, target)
+					return;
+				
+				case "about":
+					await GroupAboutPage.display(group, target);
 					return;
 
 				case "settings":
@@ -116,22 +120,6 @@ const GroupsPage = {
 				"danger"
 			))
 		}
-		
-		
-		/*//Check which page to open
-		if(page == "group")
-			ComunicWeb.pages.groups.pages.group.open(groupID, target);
-		
-		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
-		else
-			ComunicWeb.common.error.pageNotFound(args, target);*/
 	}
 	
 };

assets/js/pages/groups/pages/about.js

@@ -0,0 +1,32 @@
+/**
+ * Groups about page
+ * 
+ * @author Pierre Huber
+ */
+
+const GroupAboutPage = {
+    /**
+     * @param {AdvancedGroupInfo} group 
+     * @param {HTMLElement} target 
+     */
+    display: async function(group, target) {
+        // Load template
+		const tpl = await Page.loadHTMLTemplate("pages/groups/pages/about.html");
+		const el = document.createElement("div")
+		el.innerHTML = tpl;
+		target.appendChild(el);
+
+        Vue.createApp({
+            
+            data: () => {
+                return {
+                    group: group
+                }
+            },
+
+            methods: {
+            }
+
+        }).mount(el);
+    }
+};

assets/js/pages/groups/pages/members.js

@@ -4,7 +4,7 @@
  * @author Pierre HubERT
  */
 
-const GroupMembersSection = {
+const GroupMembersPage = {
 
 	/**
 	 * Apply group information
@@ -43,8 +43,8 @@ const GroupMembersSection = {
 		 * Load the page components
 		 */
 		var loadComponents = () => {
-			GroupMembersSection.addInviteForm(info, inviteFormTarget, inviteFormCallback);
+			GroupMembersPage.addInviteForm(info, inviteFormTarget, inviteFormCallback);
-			GroupMembersSection.refreshMembersList(info.id, info, membersList);
+			GroupMembersPage.refreshMembersList(info.id, info, membersList);
 		}
 
 		/**
@@ -474,4 +474,4 @@ const GroupMembersSection = {
 	}
 }
 
-ComunicWeb.pages.groups.pages.members = GroupMembersSection;
+ComunicWeb.pages.groups.pages.members = GroupMembersPage;

assets/js/pages/groups/sections/header.js

@@ -97,6 +97,17 @@ const GroupSectionHeader = {
         if(signed_in() && ComunicWeb.components.groups.utils.isGroupMember(info))
             ComunicWeb.pages.groups.sections.followBlock.display(info, thirdColumn);
 
+        ComunicWeb.components.like.button.display(
+            "group",
+            info.id,
+            info.number_likes,
+            info.is_liking,
+            createElem2({
+                appendTo: thirdColumn,
+                type: "div"
+            })
+        );
+
     },
 
 };

assets/templates/pages/groups/pages/about.html

@@ -0,0 +1,11 @@
+<!-- Groups about page -->
+<div class="row group-page about-page">
+    <div class="col-md-6">
+        <div class="box">
+            <div class="box-header">
+                <h3 class="box-title">tr("About") <i>{{group.name}}</i></h3>
+            </div>
+            <div class="box-body"></div>
+        </div>
+    </div>
+</div>

system/config/dev.config.php

@@ -270,6 +270,7 @@ class Dev {
 				"css/pages/groups/pages/settings.css",
 				"css/pages/groups/pages/members.css",
 				"css/pages/groups/pages/forbidden.css",
+				"css/pages/groups/pages/about.css",
 
 				//Groups sections
 				"css/pages/groups/sections/header.css",
@@ -534,6 +535,7 @@ class Dev {
 				"js/pages/groups/pages/settings.js",
 				"js/pages/groups/pages/members.js",
 				"js/pages/groups/pages/forbidden.js",
+				"js/pages/groups/pages/about.js",
 
 				//Groups sections
 				"js/pages/groups/sections/header.js",