Add address to public group page and handle empty collections

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/i18n/en_US.json

@@ -516,7 +516,6 @@
   "Resources": "Resources",
   "View all resources": "View all resources",
   "Public page": "Public page",
-  "Followed by {count} persons": "Followed by {count} persons",
   "Post a public message": "Post a public message",
   "View all todos": "View all todos",
   "Discussions": "Discussions",
@@ -749,5 +748,13 @@
   "Group address": "Group address",
   "Events tagged with {tag}": "Events tagged with {tag}",
   "Explore events": "Explore events",
-  "#{tag}": "#{tag}"
+  "#{tag}": "#{tag}",
+  "{count} team members": "{count} team members",
+  "View all events": "View all events",
+  "No resources yet": "No resources yet",
+  "No posts yet": "No posts yet",
+  "No ongoing todos": "No ongoing todos",
+  "No discussions yet": "No discussions yet",
+  "Add / Remove…": "Add / Remove…",
+  "No public posts": "No public posts"
 }

js/src/i18n/fr_FR.json

@@ -749,5 +749,13 @@
   "Group address": "Adresse du groupe",
   "Events tagged with {tag}": "Événements taggés avec {tag}",
   "Explore events": "Explorer les événements",
-  "#{tag}": "#{tag}"
+  "#{tag}": "#{tag}",
+  "{count} team members": "{count} membres d'équipe",
+  "View all events": "Voir tous les événements",
+  "No resources yet": "Pas encore de ressources",
+  "No posts yet": "Pas encore de billets",
+  "No ongoing todos": "Pas de todos en cours",
+  "No discussions yet": "Pas encore de discussions",
+  "Add / Remove…": "Ajouter / Supprimer…",
+  "No public posts": "Pas de billets publics"
 }

js/src/views/Group/Group.vue

@@ -46,21 +46,52 @@
             >
           </div>
         </div>
-        <div class="block-column members">
+        <div class="block-column members" v-if="isCurrentActorAGroupMember">
-          <figure
+          <div>
-            class="image is-48x48"
+            <figure
-            :title="
+              class="image is-48x48"
-              $t(`@{username} ({role})`, {
+              :title="
-                username: usernameWithDomain(member.actor),
+                $t(`@{username} ({role})`, {
-                role: member.role,
+                  username: usernameWithDomain(member.actor),
-              })
+                  role: member.role,
-            "
+                })
-            v-for="member in group.members.elements"
+              "
-            :key="member.actor.id"
+              v-for="member in group.members.elements"
+              :key="member.actor.id"
+            >
+              <img
+                class="is-rounded"
+                :src="member.actor.avatar.url"
+                v-if="member.actor.avatar"
+                alt
+              />
+              <b-icon v-else size="is-large" icon="account-circle" />
+            </figure>
+          </div>
+          <p>
+            {{ $t("{count} team members", { count: group.members.total }) }}
+            <router-link
+              :to="{
+                name: RouteName.GROUP_MEMBERS_SETTINGS,
+                params: { preferredUsername: usernameWithDomain(group) },
+              }"
+              >{{ $t("Add / Remove…") }}</router-link
+            >
+          </p>
+        </div>
+        <div class="block-column address" v-else-if="physicalAddress">
+          <address>
+            <p class="addressDescription" :title="physicalAddress.poiInfos.name">
+              {{ physicalAddress.poiInfos.name }}
+            </p>
+            <p>{{ physicalAddress.poiInfos.alternativeName }}</p>
+          </address>
+          <span
+            class="map-show-button"
+            @click="showMap = !showMap"
+            v-if="physicalAddress && physicalAddress.geom"
+            >{{ $t("Show map") }}</span
           >
-            <img class="is-rounded" :src="member.actor.avatar.url" v-if="member.actor.avatar" alt />
-            <b-icon v-else size="is-large" icon="account-circle" />
-          </figure>
         </div>
       </header>
     </div>
@@ -68,7 +99,7 @@
       <div class="block-column">
         <section>
           <subtitle>{{ $t("Upcoming events") }}</subtitle>
-          <div class="organized-events-wrapper" v-if="group.organizedEvents.total > 0">
+          <div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
             <EventMinimalistCard
               v-for="event in group.organizedEvents.elements"
               :event="event"
@@ -76,7 +107,11 @@
               class="organized-event"
             />
           </div>
-          <router-link :to="{}">{{ $t("View all upcoming events") }}</router-link>
+          <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <p>{{ $t("No public upcoming events") }}</p>
+          </div>
+          <b-skeleton animated v-else></b-skeleton>
+          <router-link :to="{}">{{ $t("View all events") }}</router-link>
         </section>
         <section>
           <subtitle>{{ $t("Resources") }}</subtitle>
@@ -90,6 +125,9 @@
               <folder-item :resource="resource" :group="group" v-else :inline="true" />
             </div>
           </div>
+          <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <p>{{ $t("No resources yet") }}</p>
+          </div>
           <router-link
             :to="{
               name: RouteName.RESOURCE_FOLDER_ROOT,
@@ -102,10 +140,12 @@
       <div class="block-column">
         <section>
           <subtitle>{{ $t("Public page") }}</subtitle>
-          <p>{{ $t("Followed by {count} persons", { count: group.members.total }) }}</p>
           <div v-if="group.posts.total > 0" class="posts-wrapper">
             <post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" />
           </div>
+          <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <p>{{ $t("No posts yet") }}</p>
+          </div>
           <router-link
             :to="{
               name: RouteName.POST_CREATE,
@@ -117,37 +157,42 @@
         </section>
         <section>
           <subtitle>{{ $t("Ongoing tasks") }}</subtitle>
-          <div
+          <div v-if="group.todoLists.elements.length > 0">
-            v-if="group.todoLists.elements.length > 0"
+            <div v-for="todoList in group.todoLists.elements" :key="todoList.id">
-            v-for="todoList in group.todoLists.elements"
+              <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
-            :key="todoList.id"
+                <h2 class="is-size-3">
-          >
+                  {{
-            <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
+                    $tc("{title} ({count} todos)", todoList.todos.total, {
-              <h2 class="is-size-3">
+                      count: todoList.todos.total,
-                {{
+                      title: todoList.title,
-                  $tc("{title} ({count} todos)", todoList.todos.total, {
+                    })
-                    count: todoList.todos.total,
+                  }}
-                    title: todoList.title,
+                </h2>
-                  })
+              </router-link>
-                }}
+              <compact-todo
-              </h2>
+                :todo="todo"
-            </router-link>
+                v-for="todo in todoList.todos.elements.slice(0, 3)"
-            <compact-todo
+                :key="todo.id"
-              :todo="todo"
+              />
-              v-for="todo in todoList.todos.elements.slice(0, 3)"
+            </div>
-              :key="todo.id"
+          </div>
-            />
+          <div v-else class="content has-text-grey has-text-centered">
+            <p>{{ $t("No ongoing todos") }}</p>
           </div>
           <router-link :to="{ name: RouteName.TODO_LISTS }">{{ $t("View all todos") }}</router-link>
         </section>
         <section>
           <subtitle>{{ $t("Discussions") }}</subtitle>
-          <discussion-list-item
+          <div v-if="group.discussions.total > 0">
-            v-if="group.discussions.total > 0"
+            <discussion-list-item
-            v-for="discussion in group.discussions.elements"
+              v-for="discussion in group.discussions.elements"
-            :key="discussion.id"
+              :key="discussion.id"
-            :discussion="discussion"
+              :discussion="discussion"
-          />
+            />
+          </div>
+          <div v-else class="content has-text-grey has-text-centered">
+            <p>{{ $t("No discussions yet") }}</p>
+          </div>
           <router-link
             :to="{
               name: RouteName.DISCUSSION_LIST,
@@ -179,7 +224,7 @@
       <!--            {{ group }}-->
       <section>
         <subtitle>{{ $t("Latest posts") }}</subtitle>
-        <div v-if="group && group.posts.elements">
+        <div v-if="group && group.posts.total > 0">
           <router-link
             v-for="post in group.posts.elements"
             :key="post.id"
@@ -188,8 +233,20 @@
             {{ post.title }}
           </router-link>
         </div>
+        <span v-else-if="group">{{ $t("No public posts") }}</span>
         <b-skeleton animated v-else></b-skeleton>
       </section>
+      <b-modal v-if="physicalAddress && physicalAddress.geom" :active.sync="showMap">
+        <div class="map">
+          <map-leaflet
+            :coords="physicalAddress.geom"
+            :marker="{
+              text: physicalAddress.fullName,
+              icon: physicalAddress.poiInfos.poiIcon.icon,
+            }"
+          />
+        </div>
+      </b-modal>
     </div>
   </div>
 </template>
@@ -214,6 +271,7 @@ import PostListItem from "@/components/Post/PostListItem.vue";
 import ResourceItem from "@/components/Resource/ResourceItem.vue";
 import FolderItem from "@/components/Resource/FolderItem.vue";
 import RouteName from "../../router/name";
+import { Address } from "@/types/address.model";
 
 @Component({
   apollo: {
@@ -247,6 +305,7 @@ import RouteName from "../../router/name";
     EventCard,
     FolderItem,
     ResourceItem,
+    "map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
   },
   metaInfo() {
     return {
@@ -277,6 +336,8 @@ export default class Group extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
+  showMap = false;
+
   @Watch("currentActor")
   watchCurrentActor(currentActor: IActor, oldActor: IActor) {
     if (currentActor.id && oldActor && currentActor.id !== oldActor.id) {
@@ -311,6 +372,11 @@ export default class Group extends Vue {
       )
     );
   }
+
+  get physicalAddress(): Address | null {
+    if (!this.group.physicalAddress) return null;
+    return new Address(this.group.physicalAddress);
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -349,12 +415,45 @@ div.container {
 
     .members {
       display: flex;
+      flex-direction: column;
+
+      div {
+        display: flex;
+      }
 
       figure:not(:first-child) {
         margin-left: -10px;
       }
     }
 
+    div.address {
+      flex: 1;
+      text-align: right;
+
+      .map-show-button {
+        cursor: pointer;
+      }
+
+      address {
+        font-style: normal;
+
+        span.addressDescription {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1 0 auto;
+          min-width: 100%;
+          max-width: 4rem;
+          overflow: hidden;
+        }
+
+        :not(.addressDescription) {
+          color: rgba(46, 62, 72, 0.6);
+          flex: 1;
+          min-width: 100%;
+        }
+      }
+    }
+
     .block-column {
       flex: 1;
       margin: 0 2rem;