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>

js/src/components/Group/GroupPicker.vue

@@ -7,7 +7,7 @@
       <div class="list is-hoverable">
         <a
           class="list-item"
-          v-for="groupMembership in groupMemberships.elements"
+          v-for="groupMembership in actualMemberships"
           :class="{ 'is-active': groupMembership.parent.id === currentGroup.id }"
           @click="changeCurrentGroup(groupMembership.parent)"
           :key="groupMembership.id"
@@ -36,7 +36,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, IMember, IPerson, Group } from "@/types/actor";
+import { IGroup, IMember, IPerson, Group, MemberRole } from "@/types/actor";
 import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
 import { Paginate } from "@/types/paginate";
 
@@ -61,15 +61,28 @@ export default class GroupPicker extends Vue {
 
   @Prop() identity!: IPerson;
 
+  @Prop({ required: false, default: false }) restrictModeratorLevel!: boolean;
+
   groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
 
   currentGroup: IGroup = this.value;
 
   Group = Group;
 
-  changeCurrentGroup(group: IGroup) {
+  changeCurrentGroup(group: IGroup): void {
     this.currentGroup = group;
     this.$emit("input", group);
   }
+
+  get actualMemberships(): IMember[] {
+    if (this.restrictModeratorLevel) {
+      return this.groupMemberships.elements.filter((membership: IMember) =>
+        [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR, MemberRole.CREATOR].includes(
+          membership.role
+        )
+      );
+    }
+    return this.groupMemberships.elements;
+  }
 }
 </script>

js/src/components/Group/GroupPickerWrapper.vue

@@ -14,7 +14,11 @@
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="currentGroup.avatar">
-            <img class="image" :src="currentGroup.avatar.url" :alt="currentGroup.avatar.alt" />
+            <img
+              class="image is-rounded"
+              :src="currentGroup.avatar.url"
+              :alt="currentGroup.avatar.alt"
+            />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
@@ -46,7 +50,12 @@
       </p>
     </div>
     <b-modal :active.sync="isComponentModalActive" has-modal-card>
-      <group-picker v-model="currentGroup" :identity.sync="identity" @input="relay" />
+      <group-picker
+        v-model="currentGroup"
+        :identity.sync="identity"
+        @input="relay"
+        :restrict-moderator-level="true"
+      />
     </b-modal>
   </div>
 </template>
@@ -88,11 +97,11 @@ export default class GroupPickerWrapper extends Vue {
   groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
 
   @Watch("value")
-  updateCurrentGroup(value: IGroup) {
+  updateCurrentGroup(value: IGroup): void {
     this.currentGroup = value;
   }
 
-  relay(group: IGroup) {
+  relay(group: IGroup): void {
     this.currentGroup = group;
     this.$emit("input", group);
     this.isComponentModalActive = false;

js/src/components/Group/Invitations.vue

@@ -14,6 +14,7 @@ import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
 import { IMember } from "@/types/actor";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import InvitationCard from "@/components/Group/InvitationCard.vue";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
 
 @Component({
   components: {
@@ -23,27 +24,35 @@ import InvitationCard from "@/components/Group/InvitationCard.vue";
 export default class Invitations extends Vue {
   @Prop({ required: true, type: Array }) invitations!: IMember;
 
-  async acceptInvitation(id: string) {
-    const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>({
-      mutation: ACCEPT_INVITATION,
-      variables: {
-        id,
-      },
-    });
-    if (data) {
-      this.$emit("acceptInvitation", data.acceptInvitation);
+  async acceptInvitation(id: string): Promise<void> {
+    try {
+      const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>({
+        mutation: ACCEPT_INVITATION,
+        variables: {
+          id,
+        },
+      });
+      if (data) {
+        this.$emit("acceptInvitation", data.acceptInvitation);
+      }
+    } catch (e) {
+      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }
   }
 
-  async rejectInvitation(id: string) {
-    const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>({
-      mutation: REJECT_INVITATION,
-      variables: {
-        id,
-      },
-    });
-    if (data) {
-      this.$emit("rejectInvitation", data.rejectInvitation);
+  async rejectInvitation(id: string): Promise<void> {
+    try {
+      const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>({
+        mutation: REJECT_INVITATION,
+        variables: {
+          id,
+        },
+      });
+      if (data) {
+        this.$emit("rejectInvitation", data.rejectInvitation);
+      }
+    } catch (e) {
+      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
     }
   }
 }