move member invitation form to GroupInvitations

src/i18n/en_US.json

@@ -535,6 +535,7 @@
   "Group address": "Group address",
   "Group description body": "Group description body",
   "Group display name": "Group display name",
+  "Group invitation links":"Group invitation links",
   "Group invitations": "Group invitations",
   "Group members": "Group members",
   "Group name": "Group name",
@@ -706,6 +707,7 @@
   "Map": "Map",
   "Mark as resolved": "Mark as resolved",
   "Maybe the content was removed by the author or a moderator": "Maybe the content was removed by the author or a moderator",
+  "Member invitation":"Member invitation",
   "Member": "Member",
   "Members": "Members",
   "Members can see events' participants": "Members can see events' participants",

src/i18n/fr_FR.json

@@ -535,6 +535,7 @@
   "Group address": "Adresse du groupe",
   "Group description body": "Corps de la description du groupe",
   "Group display name": "Nom d'affichage du groupe",
+  "Group invitation links":"Liens d'invitation au groupe",
   "Group invitations":"Invitations de groupe",
   "Group members": "Membres du groupe",
   "Group name": "Nom du groupe",
@@ -706,6 +707,7 @@
   "Map": "Carte",
   "Mark as resolved": "Marquer comme r\u00e9solu",
   "Maybe the content was removed by the author or a moderator": "Peut-\u00eatre que le contenu a \u00e9t\u00e9 supprim\u00e9 par l'auteur\u00b7ice ou un\u00b7e mod\u00e9rateur\u00b7ice",
+  "Member invitation":"Inviter un membre",
   "Member": "Membre",
   "Members": "Membres",
   "Members can see events' participants": "Les membres peuvent voir les participants des événements",
@@ -1096,7 +1098,7 @@
   "Settings": "Param\u00e8tres",
   "Share link":"Partager le lien",
   "Share this event": "Partager l'\u00e9v\u00e9nement",
-  "Share this group invitation link":"Partager ce lien d'invitation de groupe",
+  "Share this group invitation link":"Partager ce lien d'invitation au groupe",
   "Share this group": "Partager ce groupe",
   "Share this post": "Partager ce billet",
   "Share": "Partager",

src/views/Group/GroupInvitations.vue

@@ -28,7 +28,30 @@
       ]"
     />
     <section class="container mx-auto section">
-      <h1>{{ t("Invitation links") }}</h1>
+      <h1>{{ t("Invitations") }}</h1>
+
+      <h2>{{ t("Member invitation") }}</h2>
+      <form @submit.prevent="inviteMember">
+        <o-field
+          :label="t('Invite a new member')"
+          label-for="new-member-field"
+          horizontal
+        >
+          <o-field grouped expanded size="large">
+            <o-input
+              id="new-member-field"
+              expanded
+              v-model="newMemberUsername"
+              :placeholder="t(`Ex: someone{'@'}mobilizon.org`)"
+            />
+            <o-button variant="primary" type="submit">{{
+              t("Invite member")
+            }}</o-button>
+          </o-field>
+        </o-field>
+      </form>
+
+      <h2>{{ t("Group invitation links") }}</h2>
       <o-field groupedClass="flex-wrap" grouped>
         <o-button
           variant="primary"
@@ -172,6 +195,8 @@ import { useGroup } from "@/composition/apollo/group";
 import { IInvitation } from "@/types/actor/invitation.model";
 import { useCurrentActorClient } from "@/composition/apollo/actor";
 import ShareModal from "@/components/Share/ShareModal.vue";
+import { IMember } from "@/types/actor/member.model";
+import { GROUP_MEMBERS, INVITE_MEMBER } from "@/graphql/member";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -189,7 +214,42 @@ const {
 } = useGroup(preferredUsername);
 
 // -------------------------------------------------------------
-// List invitations
+// Member invitation
+// -------------------------------------------------------------
+
+const newMemberUsername = ref("");
+
+const {
+  mutate: inviteMemberMutation,
+  onDone: onInviteMemberDone,
+  onError: onInviteMemberError,
+} = useMutation<{ inviteMember: IMember }>(INVITE_MEMBER, () => ({}));
+
+onInviteMemberError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    alert(error.graphQLErrors[0].message);
+  }
+});
+
+onInviteMemberDone(() => {
+  alert(
+    t("{username} was invited to {group}", {
+      username: newMemberUsername.value,
+      group: displayName(group.value),
+    })
+  );
+});
+
+const inviteMember = async (): Promise<void> => {
+  inviteMemberMutation({
+    groupId: group.value?.id,
+    targetActorUsername: newMemberUsername.value,
+  });
+};
+
+// -------------------------------------------------------------
+// List invitation links
 // -------------------------------------------------------------
 
 const {
@@ -212,7 +272,7 @@ watch(currentActor, () => {
 });
 
 // -------------------------------------------------------------
-// Create invitation
+// Create invitation links
 // -------------------------------------------------------------
 
 const {
@@ -232,7 +292,7 @@ onCreateGroupInvitationError((error) => {
 });
 
 // -------------------------------------------------------------
-// Update invitation
+// Update invitation links
 // -------------------------------------------------------------
 
 const updateInvitationToken = ref<string>("");
@@ -274,7 +334,7 @@ const actionUpdateGroupInvitation = () => {
 };
 
 // -------------------------------------------------------------
-// Delete invitation
+// Delete invitation links
 // -------------------------------------------------------------
 
 const {
@@ -301,7 +361,7 @@ const actionDeleteGroupInvitation = (token: string) => {
 };
 
 // -------------------------------------------------------------
-// Share invitation
+// Share invitation links
 // -------------------------------------------------------------
 
 const router = useRouter();

src/views/Group/GroupMembers.vue

@@ -26,35 +26,6 @@
       v-if="group && isCurrentActorAGroupAdmin"
     >
       <h1>{{ t("Group Members") }} ({{ group.members.total }})</h1>
-      <form @submit.prevent="inviteMember">
-        <o-field
-          :label="t('Invite a new member')"
-          custom-class="add-relay"
-          label-for="new-member-field"
-          horizontal
-        >
-          <o-field
-            grouped
-            expanded
-            size="large"
-            :type="inviteError ? 'is-danger' : null"
-            :message="inviteError"
-          >
-            <p class="control">
-              <o-input
-                id="new-member-field"
-                v-model="newMemberUsername"
-                :placeholder="t(`Ex: someone{'@'}mobilizon.org`)"
-              />
-            </p>
-            <p class="control">
-              <o-button variant="primary" type="submit">{{
-                t("Invite member")
-              }}</o-button>
-            </p>
-          </o-field>
-        </o-field>
-      </form>
       <o-field
         class="my-2"
         :label="t('Status')"
@@ -281,8 +252,6 @@ const emit = defineEmits(["sort"]);
 
 const { currentActor } = useCurrentActorClient();
 
-const newMemberUsername = ref("");
-const inviteError = ref("");
 const page = useRouteQuery("page", 1, integerTransformer);
 const roles = useRouteQuery("roles", undefined, enumTransformer(MemberRole));
 const MEMBERS_PER_PAGE = 10;
@@ -311,49 +280,6 @@ const members = computed(
   () => group.value?.members ?? { total: 0, elements: [] }
 );
 
-const {
-  mutate: inviteMemberMutation,
-  onDone: onInviteMemberDone,
-  onError: onInviteMemberError,
-} = useMutation<{ inviteMember: IMember }>(INVITE_MEMBER, () => ({
-  refetchQueries: [
-    {
-      query: GROUP_MEMBERS,
-      variables: {
-        groupName: props.preferredUsername,
-        page: page.value,
-        limit: MEMBERS_PER_PAGE,
-        roles: roles.value,
-      },
-    },
-  ],
-}));
-
-onInviteMemberError((error) => {
-  console.error(error);
-  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-    inviteError.value = error.graphQLErrors[0].message;
-  }
-});
-
-onInviteMemberDone(() => {
-  notifier?.success(
-    t("{username} was invited to {group}", {
-      username: newMemberUsername.value,
-      group: displayName(group.value),
-    })
-  );
-  newMemberUsername.value = "";
-});
-
-const inviteMember = async (): Promise<void> => {
-  inviteError.value = "";
-  inviteMemberMutation({
-    groupId: group.value?.id,
-    targetActorUsername: newMemberUsername.value,
-  });
-};
-
 const loadMoreMembers = async (): Promise<void> => {
   await fetchMoreGroupMembers({
     // New variables