From 51a413a3fc8eaa209790f8fbd2c3854552436d21 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 18 Aug 2020 15:50:50 +0200
Subject: [PATCH] Adapt for Buefy 0.9 <b-table> scope changes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Admin/Followers.vue  |  63 +++++++------
 js/src/components/Admin/Followings.vue |  63 +++++++------
 js/src/i18n/en_US.json                 |   4 +-
 js/src/i18n/fr_FR.json                 |   4 +-
 js/src/views/Admin/AdminProfile.vue    |  36 ++++---
 js/src/views/Admin/Profiles.vue        |  46 ++++-----
 js/src/views/Admin/Users.vue           |  60 ++++++------
 js/src/views/Event/Participants.vue    | 126 ++++++++++++-------------
 js/src/views/Group/GroupMembers.vue    | 104 ++++++++++----------
 9 files changed, 260 insertions(+), 246 deletions(-)

diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue
index 6b491fc24..16a29fd2a 100644
--- a/js/src/components/Admin/Followers.vue
+++ b/js/src/components/Admin/Followers.vue
@@ -16,39 +16,44 @@
       checkable
       checkbox-position="left"
     >
-      <template slot-scope="props">
-        <b-table-column field="actor.id" label="ID" width="40" numeric>{{
-          props.row.actor.id
-        }}</b-table-column>
+      <b-table-column field="actor.id" label="ID" width="40" numeric v-slot="props">{{
+        props.row.actor.id
+      }}</b-table-column>
 
-        <b-table-column field="actor.type" :label="$t('Type')" width="80">
-          <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
-          <b-icon icon="account-circle" v-else />
-        </b-table-column>
+      <b-table-column field="actor.type" :label="$t('Type')" width="80" v-slot="props">
+        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
+        <b-icon icon="account-circle" v-else />
+      </b-table-column>
 
-        <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
-          <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
-            props.row.approved ? $t("Accepted") : $t("Pending")
-          }}</span>
-        </b-table-column>
+      <b-table-column
+        field="approved"
+        :label="$t('Status')"
+        width="100"
+        sortable
+        centered
+        v-slot="props"
+      >
+        <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
+          props.row.approved ? $t("Accepted") : $t("Pending")
+        }}</span>
+      </b-table-column>
 
-        <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
-          <template>
-            <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
-              props.row.actor.domain
-            }}</a>
-            <a @click="toggle(props.row)" v-else>{{
-              `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
-            }}</a>
-          </template>
-        </b-table-column>
+      <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
+        <template v-slot:default="props">
+          <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
+            props.row.actor.domain
+          }}</a>
+          <a @click="toggle(props.row)" v-else>{{
+            `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
+          }}</a>
+        </template>
+      </b-table-column>
 
-        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
-          <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-            timeago(props.row.updatedAt)
-          }}</span></b-table-column
-        >
-      </template>
+      <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
+        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+          timeago(props.row.updatedAt)
+        }}</span></b-table-column
+      >
 
       <template slot="detail" slot-scope="props">
         <article>
diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue
index 985898227..b39d897c6 100644
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@@ -29,39 +29,44 @@
       checkable
       checkbox-position="left"
     >
-      <template slot-scope="props">
-        <b-table-column field="targetActor.id" label="ID" width="40" numeric>{{
-          props.row.targetActor.id
-        }}</b-table-column>
+      <b-table-column field="targetActor.id" label="ID" width="40" numeric v-slot="props">{{
+        props.row.targetActor.id
+      }}</b-table-column>
 
-        <b-table-column field="targetActor.type" :label="$t('Type')" width="80">
-          <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
-          <b-icon icon="account-circle" v-else />
-        </b-table-column>
+      <b-table-column field="targetActor.type" :label="$t('Type')" width="80" v-slot="props">
+        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
+        <b-icon icon="account-circle" v-else />
+      </b-table-column>
 
-        <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
-          <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
-            props.row.approved ? $t("Accepted") : $t("Pending")
-          }}</span>
-        </b-table-column>
+      <b-table-column
+        field="approved"
+        :label="$t('Status')"
+        width="100"
+        sortable
+        centered
+        v-slot="props"
+      >
+        <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
+          props.row.approved ? $t("Accepted") : $t("Pending")
+        }}</span>
+      </b-table-column>
 
-        <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
-          <template>
-            <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
-              props.row.targetActor.domain
-            }}</a>
-            <a @click="toggle(props.row)" v-else>{{
-              `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
-            }}</a>
-          </template>
-        </b-table-column>
+      <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
+        <template v-slot:default="props">
+          <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
+            props.row.targetActor.domain
+          }}</a>
+          <a @click="toggle(props.row)" v-else>{{
+            `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
+          }}</a>
+        </template>
+      </b-table-column>
 
-        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
-          <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-            timeago(props.row.updatedAt)
-          }}</span></b-table-column
-        >
-      </template>
+      <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
+        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+          timeago(props.row.updatedAt)
+        }}</span></b-table-column
+      >
 
       <template slot="detail" slot-scope="props">
         <article>
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 6fbe6f0dc..404246474 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -760,5 +760,7 @@
   "You have been removed from this group's members.": "You have been removed from this group's members.",
   "Since you are a new member, private content can take a few minutes to appear.": "Since you are a new member, private content can take a few minutes to appear.",
   "Leave group": "Leave group",
-  "Remove": "Remove"
+  "Remove": "Remove",
+  "Update": "Update",
+  "Search…": "Search…"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index f02a5eedd..ea55d361a 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -761,5 +761,7 @@
   "You have been removed from this group's members.": "Vous avez été exclu des membres de ce groupe.",
   "Since you are a new member, private content can take a few minutes to appear.": "Étant donné que vous êtes un·e nouveau·elle membre, le contenu privé peut mettre quelques minutes à arriver.",
   "Leave group": "Quitter le groupe",
-  "Remove": "Exclure"
+  "Remove": "Exclure",
+  "Update": "Éditer",
+  "Search…": "Rechercher…"
 }
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 8683a27a5..41be242c1 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -71,16 +71,14 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <template slot-scope="props">
-          <b-table-column field="beginsOn" :label="$t('Begins on')">
-            {{ props.row.beginsOn | formatDateTimeString }}
-          </b-table-column>
-          <b-table-column field="title" :label="$t('Title')">
-            <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
-              {{ props.row.title }}
-            </router-link>
-          </b-table-column>
-        </template>
+        <b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
+          {{ props.row.beginsOn | formatDateTimeString }}
+        </b-table-column>
+        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+          <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
+            {{ props.row.title }}
+          </router-link>
+        </b-table-column>
         <template slot="empty">
           <section class="section">
             <div class="content has-text-grey has-text-centered">
@@ -107,16 +105,14 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onParticipationsPageChange"
       >
-        <template slot-scope="props">
-          <b-table-column field="beginsOn" :label="$t('Begins on')">
-            {{ props.row.beginsOn | formatDateTimeString }}
-          </b-table-column>
-          <b-table-column field="title" :label="$t('Title')">
-            <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
-              {{ props.row.title }}
-            </router-link>
-          </b-table-column>
-        </template>
+        <b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
+          {{ props.row.beginsOn | formatDateTimeString }}
+        </b-table-column>
+        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+          <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
+            {{ props.row.title }}
+          </router-link>
+        </b-table-column>
         <template slot="empty">
           <section class="section">
             <div class="content has-text-grey has-text-centered">
diff --git a/js/src/views/Admin/Profiles.vue b/js/src/views/Admin/Profiles.vue
index 083ba156d..47eb44985 100644
--- a/js/src/views/Admin/Profiles.vue
+++ b/js/src/views/Admin/Profiles.vue
@@ -24,16 +24,16 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <template slot-scope="props">
-          <b-table-column field="preferredUsername" :label="$t('Username')" searchable>
-            <template slot="searchable" slot-scope="props">
-              <b-input
-                v-model="props.filters.preferredUsername"
-                placeholder="Search..."
-                icon="magnify"
-                size="is-small"
-              />
-            </template>
+        <b-table-column field="preferredUsername" :label="$t('Username')" searchable>
+          <template slot="searchable" slot-scope="props">
+            <b-input
+              v-model="props.filters.preferredUsername"
+              placeholder="Search..."
+              icon="magnify"
+              size="is-small"
+            />
+          </template>
+          <template v-slot:default="props">
             <router-link
               class="profile"
               :to="{ name: RouteName.ADMIN_PROFILE, params: { id: props.row.id } }"
@@ -53,20 +53,22 @@
                 </div>
               </article>
             </router-link>
-          </b-table-column>
+          </template>
+        </b-table-column>
 
-          <b-table-column field="domain" :label="$t('Domain')" searchable>
-            <template slot="searchable" slot-scope="props">
-              <b-input
-                v-model="props.filters.domain"
-                placeholder="Search..."
-                icon="magnify"
-                size="is-small"
-              />
-            </template>
+        <b-table-column field="domain" :label="$t('Domain')" searchable>
+          <template slot="searchable" slot-scope="props">
+            <b-input
+              v-model="props.filters.domain"
+              placeholder="Search..."
+              icon="magnify"
+              size="is-small"
+            />
+          </template>
+          <template v-slot:default="props">
             {{ props.row.domain }}
-          </b-table-column>
-        </template>
+          </template>
+        </b-table-column>
         <template slot="empty">
           <section class="section">
             <div class="content has-text-grey has-text-centered">
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index 2f0100f4a..6d1d06381 100644
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -25,19 +25,19 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <template slot-scope="props">
-          <b-table-column field="id" width="40" numeric>
-            {{ props.row.id }}
-          </b-table-column>
-          <b-table-column field="email" :label="$t('Email')" searchable>
-            <template slot="searchable" slot-scope="props">
-              <b-input
-                v-model="props.filters.email"
-                placeholder="Search..."
-                icon="magnify"
-                size="is-small"
-              />
-            </template>
+        <b-table-column field="id" width="40" numeric v-slot="props">
+          {{ props.row.id }}
+        </b-table-column>
+        <b-table-column field="email" :label="$t('Email')" searchable>
+          <template slot="searchable" slot-scope="props">
+            <b-input
+              v-model="props.filters.email"
+              :placeholder="$t('Search…')"
+              icon="magnify"
+              size="is-small"
+            />
+          </template>
+          <template v-slot:default="props">
             <router-link
               class="user-profile"
               :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: props.row.id } }"
@@ -45,19 +45,24 @@
             >
               {{ props.row.email }}
             </router-link>
-          </b-table-column>
-          <b-table-column field="confirmedAt" :label="$t('Confirmed at')" :centered="true">
-            <template v-if="props.row.confirmedAt">
-              {{ props.row.confirmedAt | formatDateTimeString }}
-            </template>
-            <template v-else>
-              {{ $t("Not confirmed") }}
-            </template>
-          </b-table-column>
-          <b-table-column field="locale" :label="$t('Language')" :centered="true">
-            {{ props.row.locale }}
-          </b-table-column>
-        </template>
+          </template>
+        </b-table-column>
+        <b-table-column
+          field="confirmedAt"
+          :label="$t('Confirmed at')"
+          :centered="true"
+          v-slot="props"
+        >
+          <template v-if="props.row.confirmedAt">
+            {{ props.row.confirmedAt | formatDateTimeString }}
+          </template>
+          <template v-else>
+            {{ $t("Not confirmed") }}
+          </template>
+        </b-table-column>
+        <b-table-column field="locale" :label="$t('Language')" :centered="true" v-slot="props">
+          {{ props.row.locale }}
+        </b-table-column>
 
         <template slot="detail" slot-scope="props">
           <router-link
@@ -68,9 +73,10 @@
           >
             <article class="media">
               <figure class="media-left">
-                <p class="image is-64x64">
+                <p class="image is-32x32" v-if="actor.avatar">
                   <img :src="actor.avatar.url" />
                 </p>
+                <b-icon v-else size="is-medium" icon="account-circle" />
               </figure>
               <div class="media-content">
                 <div class="content">
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index c68357a6b..86a57ce84 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -72,71 +72,69 @@
         @page-change="(newPage) => (page = newPage)"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <template slot-scope="props">
-          <b-table-column field="actor.preferredUsername" :label="$t('Participant')">
-            <article class="media">
-              <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-                <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
-              </figure>
-              <b-icon
-                class="media-left"
-                v-else-if="props.row.actor.preferredUsername === 'anonymous'"
-                size="is-large"
-                icon="incognito"
-              />
-              <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-              <div class="media-content">
-                <div class="content">
-                  <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
-                    <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
-                    ><br />
-                    <span class="is-size-7 has-text-grey"
-                      >@{{ usernameWithDomain(props.row.actor) }}</span
-                    >
-                  </span>
-                  <span v-else>
-                    {{ $t("Anonymous participant") }}
-                  </span>
-                </div>
+        <b-table-column field="actor.preferredUsername" :label="$t('Participant')" v-slot="props">
+          <article class="media">
+            <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
+              <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+            </figure>
+            <b-icon
+              class="media-left"
+              v-else-if="props.row.actor.preferredUsername === 'anonymous'"
+              size="is-large"
+              icon="incognito"
+            />
+            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <div class="media-content">
+              <div class="content">
+                <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
+                  <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
+                  ><br />
+                  <span class="is-size-7 has-text-grey"
+                    >@{{ usernameWithDomain(props.row.actor) }}</span
+                  >
+                </span>
+                <span v-else>
+                  {{ $t("Anonymous participant") }}
+                </span>
               </div>
-            </article>
-          </b-table-column>
-          <b-table-column field="role" :label="$t('Role')">
-            <b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
-              {{ $t("Organizer") }}
-            </b-tag>
-            <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
-              {{ $t("Participant") }}
-            </b-tag>
-            <b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
-              {{ $t("Not approved") }}
-            </b-tag>
-            <b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
-              {{ $t("Rejected") }}
-            </b-tag>
-          </b-table-column>
-          <b-table-column field="metadata.message" :label="$t('Message')">
-            <span
-              @click="toggleQueueDetails(props.row)"
-              :class="{
-                'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
-              }"
-              v-if="props.row.metadata && props.row.metadata.message"
-            >
-              {{ props.row.metadata.message | ellipsize }}
-            </span>
-            <span v-else class="has-text-grey">
-              {{ $t("No message") }}
-            </span>
-          </b-table-column>
-          <b-table-column field="insertedAt" :label="$t('Date')">
-            <span class="has-text-centered">
-              {{ props.row.insertedAt | formatDateString }}<br />{{
-                props.row.insertedAt | formatTimeString
-              }}
-            </span>
-          </b-table-column>
-        </template>
+            </div>
+          </article>
+        </b-table-column>
+        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+          <b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
+            {{ $t("Organizer") }}
+          </b-tag>
+          <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+            {{ $t("Participant") }}
+          </b-tag>
+          <b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
+            {{ $t("Not approved") }}
+          </b-tag>
+          <b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
+            {{ $t("Rejected") }}
+          </b-tag>
+        </b-table-column>
+        <b-table-column field="metadata.message" :label="$t('Message')" v-slot="props">
+          <span
+            @click="toggleQueueDetails(props.row)"
+            :class="{
+              'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+            }"
+            v-if="props.row.metadata && props.row.metadata.message"
+          >
+            {{ props.row.metadata.message | ellipsize }}
+          </span>
+          <span v-else class="has-text-grey">
+            {{ $t("No message") }}
+          </span>
+        </b-table-column>
+        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          <span class="has-text-centered">
+            {{ props.row.insertedAt | formatDateString }}<br />{{
+              props.row.insertedAt | formatTimeString
+            }}
+          </span>
+        </b-table-column>
         <template slot="detail" slot-scope="props">
           <article v-html="nl2br(props.row.metadata.message)" />
         </template>
diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue
index 756a730e8..9996a9444 100644
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -89,60 +89,58 @@
         @page-change="(newPage) => (page = newPage)"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <template slot-scope="props">
-          <b-table-column field="actor.preferredUsername" :label="$t('Member')">
-            <article class="media">
-              <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-                <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
-              </figure>
-              <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-              <div class="media-content">
-                <div class="content">
-                  <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
-                  ><br />
-                  <span class="is-size-7 has-text-grey"
-                    >@{{ usernameWithDomain(props.row.actor) }}</span
-                  >
-                </div>
+        <b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
+          <article class="media">
+            <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
+              <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+            </figure>
+            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <div class="media-content">
+              <div class="content">
+                <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
+                ><br />
+                <span class="is-size-7 has-text-grey"
+                  >@{{ usernameWithDomain(props.row.actor) }}</span
+                >
               </div>
-            </article>
-          </b-table-column>
-          <b-table-column field="role" :label="$t('Role')">
-            <b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
-              {{ $t("Administrator") }}
-            </b-tag>
-            <b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
-              {{ $t("Moderator") }}
-            </b-tag>
-            <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
-              {{ $t("Member") }}
-            </b-tag>
-            <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
-              {{ $t("Not approved") }}
-            </b-tag>
-            <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">
-              {{ $t("Invited") }}
-            </b-tag>
-          </b-table-column>
-          <b-table-column field="insertedAt" :label="$t('Date')">
-            <span class="has-text-centered">
-              {{ props.row.insertedAt | formatDateString }}<br />{{
-                props.row.insertedAt | formatTimeString
-              }}
-            </span>
-          </b-table-column>
-          <b-table-column field="actions" :label="$t('Actions')">
-            <b-button
-              v-if="props.row.role === MemberRole.MEMBER"
-              @click="removeMember(props.row.id)"
-              type="is-danger"
-              >{{ $t("Remove") }}</b-button
-            >
-          </b-table-column>
-        </template>
+            </div>
+          </article>
+        </b-table-column>
+        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+          <b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
+            {{ $t("Administrator") }}
+          </b-tag>
+          <b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
+            {{ $t("Moderator") }}
+          </b-tag>
+          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+            {{ $t("Member") }}
+          </b-tag>
+          <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
+            {{ $t("Not approved") }}
+          </b-tag>
+          <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">
+            {{ $t("Invited") }}
+          </b-tag>
+        </b-table-column>
+        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          <span class="has-text-centered">
+            {{ props.row.insertedAt | formatDateString }}<br />{{
+              props.row.insertedAt | formatTimeString
+            }}
+          </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
+          >
+        </b-table-column>
         <template slot="empty">
           <section class="section">
             <div class="content has-text-grey has-text-centered">