Introduce group basic federation, event new page and notifications

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

js/src/components/Group/GroupCard.vue

@@ -1,32 +1,50 @@
 <template>
   <div class="card">
-    <div class="card-image" v-if="!group.banner">
-      <figure class="image is-4by3">
-        <img src="https://picsum.photos/g/400/200/">
-      </figure>
-    </div>
     <div class="card-content">
-      <div class="content">
-        <router-link :to="{ name: RouteName.GROUP, params:{ preferredUsername: group.preferredUsername } }">
-          <h2 class="title">{{ group.displayName() }}</h2>
-        </router-link>
+      <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-content">
+          <router-link
+            :to="{ name: RouteName.GROUP, params: { preferredUsername: groupFullUsername } }"
+          >
+            <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>
       </div>
-      <div>
-        <p>{{ group.summary }}</p>
+      <div class="content">
+        <p>{{ member.parent.summary }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Group } from '@/types/actor';
-import { RouteName } from '@/router';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember } from "@/types/actor";
+import RouteName from "../../router/name";
 
 @Component
 export default class GroupCard extends Vue {
-  @Prop({ required: true }) group!: Group;
+  @Prop({ required: true }) member!: IMember;
 
   RouteName = RouteName;
+
+  get groupFullUsername() {
+    if (this.member.parent.domain) {
+      return `${this.member.parent.preferredUsername}@${this.member.parent.domain}`;
+    }
+    return this.member.parent.preferredUsername;
+  }
 }
 </script>

js/src/components/Group/GroupPicker.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ $t("Pick a group") }}</p>
+    </header>
+    <section class="modal-card-body">
+      <div class="list is-hoverable">
+        <a
+          class="list-item"
+          v-for="groupMembership in groupMemberships.elements"
+          :class="{ 'is-active': groupMembership.parent.id === currentGroup.id }"
+          @click="changeCurrentGroup(groupMembership.parent)"
+          :key="groupMembership.id"
+        >
+          <div class="media">
+            <img
+              class="media-left image is-48x48"
+              v-if="groupMembership.parent.avatar"
+              :src="groupMembership.parent.avatar.url"
+              alt=""
+            />
+            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <div class="media-content">
+              <h3>@{{ groupMembership.parent.name }}</h3>
+              <small>{{ `@${groupMembership.parent.preferredUsername}` }}</small>
+            </div>
+          </div>
+        </a>
+        <a class="list-item" @click="changeCurrentGroup(new Group())" v-if="currentGroup.id">
+          <h3>{{ $t("Unset group") }}</h3>
+        </a>
+      </div>
+    </section>
+    <slot name="footer" />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember, IPerson, Group } from "@/types/actor";
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import { Paginate } from "@/types/paginate";
+
+@Component({
+  apollo: {
+    groupMemberships: {
+      query: PERSON_MEMBERSHIPS,
+      variables() {
+        return {
+          id: this.identity.id,
+        };
+      },
+      update: (data) => data.person.memberships,
+      skip() {
+        return !this.identity.id;
+      },
+    },
+  },
+})
+export default class GroupPicker extends Vue {
+  @Prop() value!: IGroup;
+
+  @Prop() identity!: IPerson;
+
+  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+
+  currentGroup: IGroup = this.value;
+
+  Group = Group;
+
+  changeCurrentGroup(group: IGroup) {
+    this.currentGroup = group;
+    this.$emit("input", group);
+  }
+}
+</script>

js/src/components/Group/GroupPickerWrapper.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="group-picker">
+    <div
+      class="no-group box"
+      v-if="!currentGroup.id && groupMemberships.total > 0"
+      @click="isComponentModalActive = true"
+    >
+      <p class="is-4">{{ $t("Add a group") }}</p>
+      <p class="is-6 is-size-6 has-text-grey">
+        {{ $t("The event will show the group as organizer.") }}
+      </p>
+    </div>
+    <div v-if="inline && currentGroup.id" class="inline box" @click="isComponentModalActive = true">
+      <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" />
+          </figure>
+          <b-icon v-else size="is-large" icon="account-circle" />
+        </div>
+        <div class="media-content" v-if="currentGroup.name">
+          <p class="is-4">{{ currentGroup.name }}</p>
+          <p class="is-6 has-text-grey">{{ `@${currentGroup.preferredUsername}` }}</p>
+        </div>
+        <div class="media-content" v-else>
+          {{ `@${currentGroup.preferredUsername}` }}
+        </div>
+        <b-button type="is-text" @click="isComponentModalActive = true">
+          {{ $t("Change") }}
+        </b-button>
+      </div>
+    </div>
+    <span v-else-if="currentGroup.id" class="block" @click="isComponentModalActive = true">
+      <img
+        class="image is-48x48"
+        v-if="currentGroup.avatar"
+        :src="currentGroup.avatar.url"
+        :alt="currentGroup.avatar.alt"
+      />
+      <b-icon v-else size="is-large" icon="account-circle" />
+    </span>
+    <div v-if="groupMemberships.total === 0" class="box">
+      <p class="is-4">{{ $t("This identity is not a member of any group.") }}</p>
+      <p class="is-6 is-size-6 has-text-grey">
+        {{ $t("You need to create the group before you create an event.") }}
+      </p>
+    </div>
+    <b-modal :active.sync="isComponentModalActive" has-modal-card>
+      <group-picker v-model="currentGroup" :identity.sync="identity" @input="relay" />
+    </b-modal>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { IGroup, IMember, IPerson } from "../../types/actor";
+import GroupPicker from "./GroupPicker.vue";
+import { PERSON_MEMBERSHIPS } from "../../graphql/actor";
+import { Paginate } from "../../types/paginate";
+
+@Component({
+  components: { GroupPicker },
+  apollo: {
+    groupMemberships: {
+      query: PERSON_MEMBERSHIPS,
+      variables() {
+        return {
+          id: this.identity.id,
+        };
+      },
+      update: (data) => data.person.memberships,
+      skip() {
+        return !this.identity.id;
+      },
+    },
+  },
+})
+export default class GroupPickerWrapper extends Vue {
+  @Prop({ type: Object, required: true }) value!: IGroup;
+
+  @Prop({ default: true, type: Boolean }) inline!: boolean;
+
+  @Prop({ type: Object, required: true }) identity!: IPerson;
+
+  isComponentModalActive = false;
+
+  currentGroup: IGroup = this.value;
+
+  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+
+  @Watch("value")
+  updateCurrentGroup(value: IGroup) {
+    this.currentGroup = value;
+  }
+
+  relay(group: IGroup) {
+    this.currentGroup = group;
+    this.$emit("input", group);
+    this.isComponentModalActive = false;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.group-picker {
+  .block,
+  .no-group,
+  .inline {
+    cursor: pointer;
+  }
+}
+</style>

js/src/components/Group/InvitationCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="media">
+    <div class="media-content">
+      <div class="content">
+        <p>
+          {{
+            $t("You have been invited by {invitedBy} to the following group:", {
+              invitedBy: member.invitedBy.name,
+            })
+          }}
+        </p>
+      </div>
+      <div class="media subfield">
+        <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-content">
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <router-link
+                  :to="{
+                    name: RouteName.GROUP,
+                    params: { preferredUsername: member.parent.preferredUsername },
+                  }"
+                >
+                  <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>
+                </router-link>
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">
+                <b-button type="is-success" @click="$emit('accept', member.id)">
+                  {{ $t("Accept") }}
+                </b-button>
+              </div>
+              <div class="level-item">
+                <b-button type="is-danger" @click="$emit('decline', member.id)">
+                  {{ $t("Decline") }}
+                </b-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember } from "@/types/actor";
+import RouteName from "../../router/name";
+
+@Component
+export default class InvitationCard extends Vue {
+  @Prop({ required: true }) member!: IMember;
+
+  RouteName = RouteName;
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+.media:not(.subfield) {
+  background: lighten($primary, 40%);
+  padding: 10px;
+}
+</style>