Improve and activate groups

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

js/src/components/Group/GroupMemberCard.vue

@@ -1,32 +1,52 @@
 <template>
   <div class="card">
     <div class="card-content">
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
-          </figure>
+      <div>
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48" v-if="member.parent.avatar">
+              <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
+            </figure>
+            <b-icon v-else size="is-large" icon="account-group" />
+          </div>
+          <div class="media-content">
+            <router-link
+              :to="{
+                name: RouteName.GROUP,
+                params: { preferredUsername: usernameWithDomain(member.parent) },
+              }"
+            >
+              <h3>{{ member.parent.name }}</h3>
+              <p class="is-6 has-text-grey">
+                <span v-if="member.parent.domain">{{
+                  `@${member.parent.preferredUsername}@${member.parent.domain}`
+                }}</span>
+                <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+                <b-taglist>
+                  <b-tag type="is-info" v-if="member.role === MemberRole.ADMINISTRATOR">{{
+                    $t("Administrator")
+                  }}</b-tag>
+                  <b-tag type="is-info" v-else-if="member.role === MemberRole.MODERATOR">{{
+                    $t("Moderator")
+                  }}</b-tag>
+                </b-taglist>
+              </p>
+            </router-link>
+          </div>
         </div>
-        <div class="media-content">
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(member.parent) },
-            }"
-          >
-            <h3>{{ member.parent.name }}</h3>
-            <p class="is-6 has-text-grey">
-              <span v-if="member.parent.domain">{{
-                `@${member.parent.preferredUsername}@${member.parent.domain}`
-              }}</span>
-              <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
-            </p>
-            <b-tag type="is-info">{{ member.role }}</b-tag>
-          </router-link>
+        <div class="content" v-if="member.parent.summary">
+          <p>{{ member.parent.summary }}</p>
         </div>
       </div>
-      <div class="content">
-        <p>{{ member.parent.summary }}</p>
+      <div>
+        <b-dropdown aria-role="list" position="is-bottom-left">
+          <b-icon icon="dots-horizontal" slot="trigger" />
+
+          <b-dropdown-item aria-role="listitem" @click="$emit('leave')">
+            <b-icon icon="exit-to-app" />
+            {{ $t("Leave") }}
+          </b-dropdown-item>
+        </b-dropdown>
       </div>
     </div>
   </div>
@@ -34,7 +54,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IMember, usernameWithDomain } from "@/types/actor";
+import { IMember, MemberRole, usernameWithDomain } from "@/types/actor";
 import RouteName from "../../router/name";
 
 @Component
@@ -44,5 +64,21 @@ export default class GroupMemberCard extends Vue {
   RouteName = RouteName;
 
   usernameWithDomain = usernameWithDomain;
+
+  MemberRole = MemberRole;
 }
 </script>
+<style lang="scss" scoped>
+.card-content {
+  display: flex;
+  align-items: center;
+
+  & > div:first-child {
+    flex: 1;
+  }
+
+  & > div:last-child {
+    cursor: pointer;
+  }
+}
+</style>