Populate about page

assets/js/components/groups/GroupsList.js

@@ -6,15 +6,35 @@
 
 class Group {
 	constructor(info){
+
+		/** @type {Number} */
 		this.id = info.id;
+
+		/** @type {Boolean} */
 		this.following = info.following;
+
+		/** @type {String} */
 		this.icon_url = info.icon_url;
+
+		/** @type {"administrator"|"moderator"|"member"|"invited"|"pending"|"visitor"} */
 		this.membership = info.membership;
+
+		/** @type {String} */
 		this.name = info.name;
+
+		/** @type {Number} */
 		this.number_members = info.number_members;
+		
+		/** @type {"moderators"|"members"} */
 		this.posts_level = info.posts_level;
+
+		/** @type {"open"|"moderated"|"closed"} */
 		this.registration_level = info.registration_level;
+
+		/** @type {String} */
 		this.virtual_directory = info.virtual_directory;
+
+		/** @type {"open"|"private"|"secrete"} */
 		this.visibility = info.visibility;
 	}
 

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

@@ -16,11 +16,59 @@ const GroupAboutPage = {
 		el.innerHTML = tpl;
 		target.appendChild(el);
 
+        const props = [
+            {
+                title: tr("Created"),
+                value: timeDiffToStr(group.time_create),
+                icon: "fa-clock-o"
+            },
+
+            {
+                title: tr("Members"),
+                value: tr("%1% members", {"1": group.number_members}),
+                icon: "fa-users"
+            },
+
+            {
+                title: tr("Who can create posts"),
+                value: group.posts_level == "members" ? tr("Every members") : tr("Only moderators and administrators"),
+                icon: "fa-plus"
+            },
+
+            {
+                title: tr("Registration process"),
+                value: group.registration_level == "closed" ? tr("Only one invitation") : (group.registration_level == "moderated" ? tr("By requesting memberships") : tr("Anyone can join without approval the group")),
+                icon: "fa-sign-in"
+            },
+
+            {
+                title: tr("Visibility"),
+                icon: "fa-eye",
+                value: group.visibility == "secrete" ? tr("Secrete group") : (group.visibility == "open" ? tr("Open group") : tr("Private group"))
+            }
+        ];
+
+        if (group.description && group.description != null && group.description != "" && group.description != "null")
+            props.unshift({
+                title: tr("Description"),
+                value: group.description,
+                icon: "fa-sticky-note-o"
+            })
+        
+        if (group.url && group.url != null && group.url != "" && group.url != "null")
+            props.unshift({
+                title: tr("URL"),
+                value: group.url,
+                icon: "fa-link",
+                url: group.url
+            })
+
         Vue.createApp({
             
             data: () => {
                 return {
-                    group: group
+                    group: group,
+                    props: props
                 }
             },
 

assets/js/typings/Group.d.ts

@@ -4,19 +4,6 @@
  * @author Pierre Hubert
  */
 
-declare interface Group {
-    id: Number,
-    name: String,
-    icon_url: String,
-    number_members: Number,
-    visibility: "open"|"private"|"secrete",
-    registration_level: "open"|"moderated"|"closed",
-    posts_level: "moderators"|"members",
-    virtual_directory: String,
-    membership: "administrator"|"moderator"|"member"|"invited"|"pending"|"visitor",
-    following: Boolean,
-}
-
 declare interface AdvancedGroupInfo extends Group {
     time_create: Number,
     description: String,