Fix and improve group page edition

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

js/src/i18n/en_US.json

@@ -967,5 +967,6 @@
   "You posted a comment on the event {event}.": "You posted a comment on the event {event}.",
   "{profile} posted a comment on the event {event}.": "{profile} posted a comment on the event {event}.",
   "You replied to a comment on the event {event}.": "You replied to a comment on the event {event}.",
-  "{profile} replied to a comment on the event {event}.": "{profile} replied to a comment on the event {event}."
+  "{profile} replied to a comment on the event {event}.": "{profile} replied to a comment on the event {event}.",
+  "New post": "New post"
 }

js/src/i18n/fr_FR.json

@@ -1061,5 +1061,6 @@
   "You posted a comment on the event {event}.": "Vous avez posté un commentaire sur l'événement {event}.",
   "{profile} posted a comment on the event {event}.": "{profile} a posté un commentaire sur l'événement {event}.",
   "You replied to a comment on the event {event}.": "Vous avez répondu à un commentaire sur l'événement {event}.",
-  "{profile} replied to a comment on the event {event}.": "{profile} a répondu à un commentaire sur l'événement {event}."
+  "{profile} replied to a comment on the event {event}.": "{profile} a répondu à un commentaire sur l'événement {event}.",
+  "New post": "Nouveau billet"
 }

js/src/mixins/group.ts

@@ -34,7 +34,7 @@ import { Component, Vue } from "vue-property-decorator";
       variables() {
         return {
           id: this.currentActor.id,
-          group: this.$route.params.preferredUsername,
+          group: this.group.preferredUsername,
         };
       },
       subscribeToMore: {
@@ -42,14 +42,14 @@ import { Component, Vue } from "vue-property-decorator";
         variables() {
           return {
             actorId: this.currentActor.id,
-            group: this.$route.params.preferredUsername,
+            group: this.group.preferredUsername,
           };
         },
         skip() {
           return (
             !this.currentActor ||
             !this.currentActor.id ||
-            !this.$route.params.preferredUsername
+            !this.group.preferredUsername
           );
         },
       },
@@ -57,7 +57,7 @@ import { Component, Vue } from "vue-property-decorator";
         return (
           !this.currentActor ||
           !this.currentActor.id ||
-          !this.$route.params.preferredUsername
+          !this.group.preferredUsername
         );
       },
     },

js/src/views/Posts/Edit.vue

@@ -2,6 +2,43 @@
   <div>
     <form @submit.prevent="publish(false)" v-if="isCurrentActorAGroupModerator">
       <div class="container section">
+        <nav class="breadcrumb" aria-label="breadcrumbs" v-if="actualGroup">
+          <ul>
+            <li>
+              <router-link
+                v-if="actualGroup"
+                :to="{
+                  name: RouteName.GROUP,
+                  params: {
+                    preferredUsername: usernameWithDomain(actualGroup),
+                  },
+                }"
+                >{{
+                  actualGroup.name || actualGroup.preferredUsername
+                }}</router-link
+              >
+              <b-skeleton v-else :animated="true"></b-skeleton>
+            </li>
+            <li>
+              <router-link
+                v-if="actualGroup"
+                :to="{
+                  name: RouteName.POSTS,
+                  params: {
+                    preferredUsername: usernameWithDomain(actualGroup),
+                  },
+                }"
+                >{{ $t("Posts") }}</router-link
+              >
+              <b-skeleton v-else :animated="true"></b-skeleton>
+            </li>
+            <li class="is-active">
+              <span v-if="preferredUsername">{{ $t("New post") }}</span>
+              <span v-else-if="slug">{{ $t("Edit post") }}</span>
+              <b-skeleton v-else :animated="true"></b-skeleton>
+            </li>
+          </ul>
+        </nav>
         <h1 class="title" v-if="isUpdate === true">
           {{ $t("Edit post") }}
         </h1>
@@ -111,7 +148,6 @@
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import { mixins } from "vue-class-component";
-import { FETCH_GROUP } from "@/graphql/group";
 import {
   buildFileFromIMedia,
   buildFileVariable,
@@ -135,11 +171,24 @@ import TagInput from "../../components/Event/TagInput.vue";
 import RouteName from "../../router/name";
 import Subtitle from "../../components/Utils/Subtitle.vue";
 import PictureUpload from "../../components/PictureUpload.vue";
+import { PERSON_MEMBERSHIP_GROUP } from "@/graphql/actor";
+import { FETCH_GROUP } from "@/graphql/group";
 
 @Component({
   apollo: {
     tags: TAGS,
     config: CONFIG,
+    group: {
+      query: FETCH_GROUP,
+      variables() {
+        return {
+          name: this.preferredUsername,
+        };
+      },
+      skip() {
+        return !this.preferredUsername;
+      },
+    },
     post: {
       query: FETCH_POST,
       fetchPolicy: "cache-and-network",
@@ -152,15 +201,17 @@ import PictureUpload from "../../components/PictureUpload.vue";
         return !this.slug;
       },
     },
-    group: {
+    person: {
-      query: FETCH_GROUP,
+      query: PERSON_MEMBERSHIP_GROUP,
+      fetchPolicy: "cache-and-network",
       variables() {
         return {
-          name: this.preferredUsername,
+          id: this.currentActor.id,
+          group: this.actualGroup.preferredUsername,
         };
       },
       skip() {
-        return !this.preferredUsername;
+        return !this.currentActor?.id || !this.actualGroup?.preferredUsername;
       },
     },
   },
@@ -206,6 +257,10 @@ export default class EditPost extends mixins(GroupMixin) {
 
   errors: Record<string, unknown> = {};
 
+  RouteName = RouteName;
+
+  usernameWithDomain = usernameWithDomain;
+
   async mounted(): Promise<void> {
     this.pictureFile = await buildFileFromIMedia(this.post.picture);
   }
@@ -331,18 +386,6 @@ export default class EditPost extends mixins(GroupMixin) {
     }
     return this.group;
   }
-
-  hasCurrentActorThisRole(givenRole: string | string[]): boolean {
-    const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
-    return (
-      this.person &&
-      this.actualGroup &&
-      this.person.memberships.elements.some(
-        ({ parent: { id }, role }) =>
-          id === this.actualGroup.id && roles.includes(role)
-      )
-    );
-  }
 }
 </script>
 <style lang="scss" scoped>
@@ -360,4 +403,8 @@ form {
     }
   }
 }
+
+.breadcrumb li.is-active > span {
+  padding: 0 0.75em;
+}
 </style>