Better handle group invitation

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

js/src/views/Group/GroupMembers.vue

@@ -34,7 +34,13 @@
     <section class="container section" v-if="group">
       <form @submit.prevent="inviteMember">
         <b-field :label="$t('Invite a new member')" custom-class="add-relay" horizontal>
-          <b-field grouped expanded size="is-large">
+          <b-field
+            grouped
+            expanded
+            size="is-large"
+            :type="inviteError ? 'is-danger' : null"
+            :message="inviteError"
+          >
             <p class="control">
               <b-input v-model="newMemberUsername" :placeholder="$t('Ex: someone@mobilizon.org')" />
             </p>
@@ -122,7 +128,7 @@
           <b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
             {{ $t("Rejected") }}
           </b-tag>
-          <b-tag type="is-danger" v-else-if="props.row.role === MemberRole.INVITED">
+          <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.INVITED">
             {{ $t("Invited") }}
           </b-tag>
         </b-table-column>
@@ -134,7 +140,7 @@
           </span>
         </b-table-column>
         <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
-          <div class="buttons">
+          <div class="buttons" v-if="props.row.actor.id !== currentActor.id">
             <b-button
               v-if="props.row.role === MemberRole.MEMBER"
               @click="promoteMember(props.row.id)"
@@ -167,13 +173,15 @@
 
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import RouteName from "../../router/name";
 import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 import { IMember, MemberRole } from "../../types/actor/group.model";
 
 @Component({
   apollo: {
+    currentActor: CURRENT_ACTOR_CLIENT,
     group: {
       query: GROUP_MEMBERS,
       fetchPolicy: "network-only",
@@ -194,16 +202,20 @@ import { IMember, MemberRole } from "../../types/actor/group.model";
 export default class GroupMembers extends Vue {
   group!: IGroup;
 
+  currentActor!: IPerson;
+
   loading = true;
 
-  RouteName = RouteName;
-
   newMemberUsername = "";
 
+  inviteError = "";
+
   MemberRole = MemberRole;
 
   roles: MemberRole | "" = "";
 
+  RouteName = RouteName;
+
   page = 1;
 
   MEMBERS_PER_PAGE = 10;
@@ -218,38 +230,45 @@ export default class GroupMembers extends Vue {
   }
 
   async inviteMember(): Promise<void> {
-    await this.$apollo.mutate<{ inviteMember: IMember }>({
+    try {
-      mutation: INVITE_MEMBER,
+      await this.$apollo.mutate<{ inviteMember: IMember }>({
-      variables: {
+        mutation: INVITE_MEMBER,
-        groupId: this.group.id,
+        variables: {
-        targetActorUsername: this.newMemberUsername,
+          groupId: this.group.id,
-      },
+          targetActorUsername: this.newMemberUsername,
-      update: (store, { data }) => {
+        },
-        if (data == null) return;
+        update: (store, { data }) => {
-        const query = {
+          if (data == null) return;
-          query: GROUP_MEMBERS,
+          const query = {
-          variables: {
+            query: GROUP_MEMBERS,
-            name: this.$route.params.preferredUsername,
+            variables: {
-            page: 1,
+              name: this.$route.params.preferredUsername,
-            limit: this.MEMBERS_PER_PAGE,
+              page: 1,
-            roles: this.roles,
+              limit: this.MEMBERS_PER_PAGE,
-          },
+              roles: this.roles,
-        };
+            },
-        const memberData: IMember = data.inviteMember;
+          };
-        const groupData = store.readQuery<{ group: IGroup }>(query);
+          const memberData: IMember = data.inviteMember;
-        if (!groupData) return;
+          const groupData = store.readQuery<{ group: IGroup }>(query);
-        const { group } = groupData;
+          if (!groupData) return;
-        const index = group.members.elements.findIndex((m) => m.actor.id === memberData.actor.id);
+          const { group } = groupData;
-        if (index === -1) {
+          const index = group.members.elements.findIndex((m) => m.actor.id === memberData.actor.id);
-          group.members.elements.push(memberData);
+          if (index === -1) {
-          group.members.total += 1;
+            group.members.elements.push(memberData);
-        } else {
+            group.members.total += 1;
-          group.members.elements.splice(index, 1, memberData);
+          } else {
-        }
+            group.members.elements.splice(index, 1, memberData);
-        store.writeQuery({ ...query, data: { group } });
+          }
-      },
+          store.writeQuery({ ...query, data: { group } });
-    });
+        },
-    this.newMemberUsername = "";
+      });
+      this.newMemberUsername = "";
+    } catch (error) {
+      console.error(error);
+      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+        this.inviteError = error.graphQLErrors[0].message;
+      }
+    }
   }
 
   @Watch("page")
@@ -319,13 +338,20 @@ export default class GroupMembers extends Vue {
   }
 
   async updateMember(memberId: string, role: MemberRole): Promise<void> {
-    await this.$apollo.mutate<{ updateMember: IMember }>({
+    try {
-      mutation: UPDATE_MEMBER,
+      await this.$apollo.mutate<{ updateMember: IMember }>({
-      variables: {
+        mutation: UPDATE_MEMBER,
-        memberId,
+        variables: {
-        role,
+          memberId,
-      },
+          role,
-    });
+        },
+      });
+    } catch (error) {
+      console.error(error);
+      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+        this.$notifier.error(error.graphQLErrors[0].message);
+      }
+    }
   }
 }
 </script>