Merge branch 'improve-group-transations' into 'master'

Add address to group public page See merge request framasoft/mobilizon!535
2020-08-11 12:00:05 +02:00 · 2020-08-11 12:00:05 +02:00 · acafa6a27c
parent 38668f8f77 727814c6a7
commit acafa6a27c
4 changed files with 162 additions and 48 deletions
--- a/js/src/i18n/en_US.json
+++ b/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"
 }
--- a/js/src/i18n/fr_FR.json
+++ b/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"
 }
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@ -46,21 +46,52 @@
            >
          </div>
        </div>
-        <div class="block-column members">
-          <figure
-            class="image is-48x48"
-            :title="
-              $t(`@{username} ({role})`, {
-                username: usernameWithDomain(member.actor),
-                role: member.role,
-              })
-            "
-            v-for="member in group.members.elements"
-            :key="member.actor.id"
+        <div class="block-column members" v-if="isCurrentActorAGroupMember">
+          <div>
+            <figure
+              class="image is-48x48"
+              :title="
+                $t(`@{username} ({role})`, {
+                  username: usernameWithDomain(member.actor),
+                  role: member.role,
+                })
+              "
+              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
-            v-if="group.todoLists.elements.length > 0"
-            v-for="todoList in group.todoLists.elements"
-            :key="todoList.id"
-          >
-            <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
-              <h2 class="is-size-3">
-                {{
-                  $tc("{title} ({count} todos)", todoList.todos.total, {
-                    count: todoList.todos.total,
-                    title: todoList.title,
-                  })
-                }}
-              </h2>
-            </router-link>
-            <compact-todo
-              :todo="todo"
-              v-for="todo in todoList.todos.elements.slice(0, 3)"
-              :key="todo.id"
-            />
+          <div v-if="group.todoLists.elements.length > 0">
+            <div v-for="todoList in group.todoLists.elements" :key="todoList.id">
+              <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
+                <h2 class="is-size-3">
+                  {{
+                    $tc("{title} ({count} todos)", todoList.todos.total, {
+                      count: todoList.todos.total,
+                      title: todoList.title,
+                    })
+                  }}
+                </h2>
+              </router-link>
+              <compact-todo
+                :todo="todo"
+                v-for="todo in todoList.todos.elements.slice(0, 3)"
+                :key="todo.id"
+              />
+            </div>
+          </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
-            v-if="group.discussions.total > 0"
-            v-for="discussion in group.discussions.elements"
-            :key="discussion.id"
-            :discussion="discussion"
-          />
+          <div v-if="group.discussions.total > 0">
+            <discussion-list-item
+              v-for="discussion in group.discussions.elements"
+              :key="discussion.id"
+              :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;
--- a/js/src/views/Posts/Edit.vue
+++ b/js/src/views/Posts/Edit.vue
@ -53,7 +53,7 @@
            <span class="navbar-item">
              <b-button type="is-text" @click="$router.go(-1)">{{ $t("Cancel") }}</b-button>
            </span>
-            <span class="navbar-item">
+            <span class="navbar-item" v-if="this.isUpdate">
              <b-button type="is-danger is-outlined" @click="deletePost">{{
                $t("Delete post")
              }}</b-button>