Populate about page

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

@@ -3,3 +3,7 @@
  *
  * @author Pierre Hubert
  */
+
+.about-group-page {
+    
+}

assets/css/pages/groups/sections/tabs.css

@@ -21,5 +21,5 @@
 
 .group-page.tabs-container .nav-tabs-custom > .nav-tabs > li.active {
     border-bottom: 3px solid transparent;
-    border-top: none;
+    border-top: 3px solid transparent;
 }

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,

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

@@ -1,11 +1,24 @@
 <!-- Groups about page -->
-<div class="row group-page about-page">
+<div class="row group-page about-group-page">
     <div class="col-md-6">
-        <div class="box">
+        <div class="box box-primary">
             <div class="box-header">
                 <h3 class="box-title">tr("About") <i>{{group.name}}</i></h3>
             </div>
-            <div class="box-body"></div>
+            <div class="box-body">
+
+                <div class="props-list">
+                    
+                    <div class="prop" v-for="prop in props">
+                        <div class="title"><i v-bind:class="'fa margin-r-5 ' + prop.icon"></i> {{prop.title}}</div>
+                        <div class="value" v-if="!prop.url">{{prop.value}}</div>
+                        <div class="value" v-if="prop.url"><a v-bind:href="prop.url" target="_blank">{{prop.value}}</a></div>
+                    </div>
+
+
+                </div>
+
+            </div>
         </div>
     </div>
 </div>