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,6 +230,7 @@ export default class GroupMembers extends Vue {
   }
 
   async inviteMember(): Promise<void> {
+    try {
       await this.$apollo.mutate<{ inviteMember: IMember }>({
         mutation: INVITE_MEMBER,
         variables: {
@@ -250,6 +263,12 @@ export default class GroupMembers extends Vue {
         },
       });
       this.newMemberUsername = "";
+    } catch (error) {
+      console.error(error);
+      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+        this.inviteError = error.graphQLErrors[0].message;
+      }
+    }
   }
 
   @Watch("page")
@@ -319,6 +338,7 @@ export default class GroupMembers extends Vue {
   }
 
   async updateMember(memberId: string, role: MemberRole): Promise<void> {
+    try {
       await this.$apollo.mutate<{ updateMember: IMember }>({
         mutation: UPDATE_MEMBER,
         variables: {
@@ -326,6 +346,12 @@ export default class GroupMembers extends Vue {
           role,
         },
       });
+    } catch (error) {
+      console.error(error);
+      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+        this.$notifier.error(error.graphQLErrors[0].message);
+      }
+    }
   }
 }
 </script>