Introduce group basic federation, event new page and notifications

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

js/src/views/Group/GroupMembers.vue

@@ -0,0 +1,62 @@
+<template>
+  <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">
+          <p class="control">
+            <b-input v-model="newMemberUsername" :placeholder="$t('Ex: someone@mobilizon.org')" />
+          </p>
+          <p class="control">
+            <b-button type="is-primary" native-type="submit">{{ $t("Invite member") }}</b-button>
+          </p>
+        </b-field>
+      </b-field>
+    </form>
+    <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
+    <pre>{{ group.members }}</pre>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import RouteName from "../../router/name";
+import { FETCH_GROUP } from "../../graphql/actor";
+import { INVITE_MEMBER } from "../../graphql/member";
+import { IGroup } from "../../types/actor";
+import { IMember } from "../../types/actor/group.model";
+
+@Component({
+  apollo: {
+    group: {
+      query: FETCH_GROUP,
+      variables() {
+        return {
+          name: this.$route.params.preferredUsername,
+        };
+      },
+      skip() {
+        return !this.$route.params.preferredUsername;
+      },
+    },
+  },
+})
+export default class GroupMembers extends Vue {
+  group!: IGroup;
+
+  loading = true;
+
+  RouteName = RouteName;
+
+  newMemberUsername = "";
+
+  async inviteMember() {
+    await this.$apollo.mutate<{ inviteMember: IMember }>({
+      mutation: INVITE_MEMBER,
+      variables: {
+        groupId: this.group.id,
+        targetActorUsername: this.newMemberUsername,
+      },
+    });
+  }
+}
+</script>