Allow to update a member role

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

js/src/graphql/member.ts

@@ -81,6 +81,15 @@ export const GROUP_MEMBERS = gql`
   }
 `;
 
+export const UPDATE_MEMBER = gql`
+  mutation UpdateMember($memberId: ID!, $role: MemberRoleEnum!) {
+    updateMember(memberId: $memberId, role: $role) {
+      id
+      role
+    }
+  }
+`;
+
 export const REMOVE_MEMBER = gql`
   mutation RemoveMember($groupId: ID!, $memberId: ID!) {
     removeMember(groupId: $groupId, memberId: $memberId) {

js/src/i18n/en_US.json

@@ -764,5 +764,7 @@
   "Update": "Update",
   "Search…": "Search…",
   "Edited {ago}": "Edited {ago}",
-  "[This comment has been deleted by it's author]": "[This comment has been deleted by it's author]"
+  "[This comment has been deleted by it's author]": "[This comment has been deleted by it's author]",
+  "Promote": "Promote",
+  "Demote": "Demote"
 }

js/src/i18n/fr_FR.json

@@ -765,5 +765,7 @@
   "Update": "Éditer",
   "Search…": "Rechercher…",
   "Edited {ago}": "Édité {ago}",
-  "[This comment has been deleted by it's author]": "[Ce commentaire a été supprimé par son auteur]"
+  "[This comment has been deleted by it's author]": "[Ce commentaire a été supprimé par son auteur]",
+  "Promote": "Promouvoir",
+  "Demote": "Rétrograder"
 }

js/src/views/Group/GroupMembers.vue

@@ -134,12 +134,24 @@
           </span>
         </b-table-column>
         <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
-          <b-button
-            v-if="props.row.role === MemberRole.MEMBER"
-            @click="removeMember(props.row.id)"
-            type="is-danger"
-            >{{ $t("Remove") }}</b-button
-          >
+          <div class="buttons">
+            <b-button
+              v-if="props.row.role === MemberRole.MEMBER"
+              @click="promoteMember(props.row.id)"
+              >{{ $t("Promote") }}</b-button
+            >
+            <b-button
+              v-if="props.row.role === MemberRole.ADMINISTRATOR"
+              @click="demoteMember(props.row.id)"
+              >{{ $t("Demote") }}</b-button
+            >
+            <b-button
+              v-if="props.row.role === MemberRole.MEMBER"
+              @click="removeMember(props.row.id)"
+              type="is-danger"
+              >{{ $t("Remove") }}</b-button
+            >
+          </div>
         </b-table-column>
         <template slot="empty">
           <section class="section">
@@ -156,7 +168,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import RouteName from "../../router/name";
-import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER } from "../../graphql/member";
+import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
 import { IGroup, usernameWithDomain } from "../../types/actor";
 import { IMember, MemberRole } from "../../types/actor/group.model";
 
@@ -297,5 +309,23 @@ export default class GroupMembers extends Vue {
       },
     });
   }
+
+  promoteMember(memberId: string) {
+    return this.updateMember(memberId, MemberRole.ADMINISTRATOR);
+  }
+
+  demoteMember(memberId: string) {
+    return this.updateMember(memberId, MemberRole.MEMBER);
+  }
+
+  async updateMember(memberId: string, role: MemberRole) {
+    await this.$apollo.mutate<{ updateMember: IMember }>({
+      mutation: UPDATE_MEMBER,
+      variables: {
+        memberId,
+        role,
+      },
+    });
+  }
 }
 </script>