Improve member adding and excluding flow

Allow to exclude a member

Send emails to the member when it's excluded

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

js/src/components/Group/InvitationCard.vue

@@ -2,13 +2,9 @@
   <div class="media">
     <div class="media-content">
       <div class="content">
-        <p>
-          {{
-            $t("You have been invited by {invitedBy} to the following group:", {
-              invitedBy: member.invitedBy.name,
-            })
-          }}
-        </p>
+        <i18n tag="p" path="You have been invited by {invitedBy} to the following group:">
+          <b slot="invitedBy">{{ member.invitedBy.name }}</b>
+        </i18n>
       </div>
       <div class="media subfield">
         <div class="media-left">
@@ -43,7 +39,7 @@
                 </b-button>
               </div>
               <div class="level-item">
-                <b-button type="is-danger" @click="$emit('decline', member.id)">
+                <b-button type="is-danger" @click="$emit('reject', member.id)">
                   {{ $t("Decline") }}
                 </b-button>
               </div>

js/src/components/Group/Invitations.vue

@@ -0,0 +1,50 @@
+<template>
+  <section v-if="invitations && invitations.length > 0">
+    <InvitationCard
+      v-for="member in invitations"
+      :key="member.id"
+      :member="member"
+      @accept="acceptInvitation"
+      @reject="rejectInvitation"
+    />
+  </section>
+</template>
+<script lang="ts">
+import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
+import { IMember } from "@/types/actor";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import InvitationCard from "@/components/Group/InvitationCard.vue";
+
+@Component({
+  components: {
+    InvitationCard,
+  },
+})
+export default class Invitations extends Vue {
+  @Prop({ required: true, type: Array }) invitations!: IMember;
+
+  async acceptInvitation(id: string) {
+    const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>({
+      mutation: ACCEPT_INVITATION,
+      variables: {
+        id,
+      },
+    });
+    if (data) {
+      this.$emit("acceptInvitation", data.acceptInvitation);
+    }
+  }
+
+  async rejectInvitation(id: string) {
+    const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>({
+      mutation: REJECT_INVITATION,
+      variables: {
+        id,
+      },
+    });
+    if (data) {
+      this.$emit("rejectInvitation", data.rejectInvitation);
+    }
+  }
+}
+</script>