Refactor GraphQL queries and event cards

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

js/src/components/Event/EventCard.vue

@@ -40,6 +40,22 @@
         </div>
         <div class="media-content">
           <p class="event-title" :title="event.title">{{ event.title }}</p>
+          <div class="event-organizer">
+            <figure
+              class="image is-24x24"
+              v-if="organizer(event) && organizer(event).avatar"
+            >
+              <img
+                class="is-rounded"
+                :src="organizer(event).avatar.url"
+                alt=""
+              />
+            </figure>
+            <b-icon v-else icon="account-circle" />
+            <span class="organizer-name">
+              {{ organizerDisplayName(event) }}
+            </span>
+          </div>
           <div
             class="event-subtitle"
             v-if="event.physicalAddress"
@@ -49,7 +65,7 @@
                 : event.physicalAddress.description
             "
           >
-            <!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
+            <b-icon icon="map-marker" />
             <span v-if="isDescriptionDifferentFromLocality">
               {{ event.physicalAddress.description }},
               {{ event.physicalAddress.locality }}
@@ -58,6 +74,13 @@
               {{ event.physicalAddress.description }}
             </span>
           </div>
+          <div
+            class="event-subtitle"
+            v-else-if="event.options && event.options.isOnline"
+          >
+            <b-icon icon="video" />
+            <span>{{ $t("Online") }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -100,7 +123,12 @@
 </template>
 
 <script lang="ts">
-import { IEvent, IEventCardOptions } from "@/types/event.model";
+import {
+  IEvent,
+  IEventCardOptions,
+  organizerDisplayName,
+  organizer,
+} from "@/types/event.model";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
@@ -125,6 +153,10 @@ export default class EventCard extends Vue {
 
   RouteName = RouteName;
 
+  organizerDisplayName = organizerDisplayName;
+
+  organizer = organizer;
+
   defaultOptions: IEventCardOptions = {
     hideDate: false,
     loggedPerson: false,
@@ -236,35 +268,58 @@ a.card {
         margin-bottom: 15px;
         margin-left: 0rem;
       }
+
+      & > .media-content {
+        flex: 1;
+        width: 100%;
+        overflow-x: inherit;
+      }
     }
 
     .event-title {
-      font-size: 1.2rem;
+      font-size: 18px;
-      line-height: 1.25rem;
+      line-height: 24px;
       display: -webkit-box;
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
-      min-height: 2.4rem;
+      // min-height: 2.4rem;
       font-weight: bold;
     }
 
+    .event-organizer {
+      display: flex;
+      align-items: center;
+      padding-top: 8px;
+
+      .organizer-name {
+        font-size: 14px;
+        padding-left: 5px;
+        font-weight: 600;
+      }
+    }
+
     .event-subtitle {
       font-size: 0.85rem;
-      display: inline-flex;
+      display: flex;
-      flex-wrap: wrap;
+      align-items: center;
+      // flex-wrap: wrap;
       color: #3c376e;
 
-      span {
+      span:not(.icon) {
-        width: 14rem;
+        padding-left: 5px;
-        display: block;
-        overflow: hidden;
-
-        flex-grow: 1;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
+
+      // span {
+      //   width: 14rem;
+      //   display: block;
+      //   overflow: hidden;
+
+      //   flex-grow: 1;
+
+      //   text-overflow: ellipsis;
+      //   white-space: nowrap;
+      // }
     }
   }
 }

js/src/components/Event/MultiCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="multi-card-event">
+    <event-card
+      class="event-card"
+      v-for="event in events"
+      :event="event"
+      :key="event.uuid"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { IEvent } from "@/types/event.model";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import EventCard from "./EventCard.vue";
+@Component({
+  components: {
+    EventCard,
+  },
+})
+export default class MultiCard extends Vue {
+  @Prop({ type: Array as PropType<IEvent[]>, required: true })
+  events!: IEvent[];
+}
+</script>
+<style lang="scss" scoped>
+.multi-card-event {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  // @media (min-width: 400px) {
+  //   grid-template-columns: repeat(2, 1fr);
+  // }
+  // @media (min-width: 800px) {
+  //   grid-template-columns: repeat(4, 1fr);
+  // }
+
+  .event-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

js/src/components/Image/LazyImage.vue

@@ -63,6 +63,7 @@ export default class LazyImage extends Vue {
   onEnter(): void {
     // Image is visible (means: has entered the viewport),
     // so start loading by setting the src attribute
+    if (this.image) {
       this.image.src = this.src;
 
       this.image.onload = () => {
@@ -70,6 +71,7 @@ export default class LazyImage extends Vue {
         this.isLoaded = true;
       };
     }
+  }
 
   @Watch("src")
   updateImageWithSrcChange(): void {

js/src/components/NavBar.vue

@@ -208,12 +208,8 @@ import RouteName from "../router/name";
 
 @Component({
   apollo: {
-    currentUser: {
+    currentUser: CURRENT_USER_CLIENT,
-      query: CURRENT_USER_CLIENT,
+    currentActor: CURRENT_ACTOR_CLIENT,
-    },
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
     identities: {
       query: IDENTITIES,
       update: ({ identities }) =>

js/src/graphql/actor.ts

@@ -1,14 +1,25 @@
 import gql from "graphql-tag";
 
+export const ACTOR_FRAGMENT = gql`
+  fragment ActorFragment on Actor {
+    id
+    avatar {
+      id
+      url
+    }
+    type
+    preferredUsername
+    name
+    domain
+    summary
+    url
+  }
+`;
+
 export const FETCH_PERSON = gql`
   query ($username: String!) {
     fetchPerson(preferredUsername: $username) {
-      id
+      ...ActorFragment
-      url
-      name
-      domain
-      summary
-      preferredUsername
       suspended
       mediaSize
       avatar {
@@ -34,6 +45,7 @@ export const FETCH_PERSON = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const GET_PERSON = gql`
@@ -47,12 +59,7 @@ export const GET_PERSON = gql`
     $membershipsLimit: Int
   ) {
     person(id: $actorId) {
-      id
+      ...ActorFragment
-      url
-      name
-      domain
-      summary
-      preferredUsername
       suspended
       mediaSize
       avatar {
@@ -98,14 +105,7 @@ export const GET_PERSON = gql`
           role
           insertedAt
           parent {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
         }
       }
@@ -115,6 +115,7 @@ export const GET_PERSON = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const PERSON_FRAGMENT = gql`
@@ -126,6 +127,7 @@ export const PERSON_FRAGMENT = gql`
     }
     type
     preferredUsername
+    domain
     name
   }
 `;
@@ -151,17 +153,11 @@ export const LIST_PROFILES = gql`
     ) {
       total
       elements {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        name
-        avatar {
-          id
-          url
-        }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_DEFAULT_ACTOR = gql`
@@ -179,12 +175,9 @@ export const CURRENT_ACTOR_CLIENT = gql`
   query currentActor {
     currentActor @client {
       id
-      avatar {
-        id
-        url
-      }
       preferredUsername
       name
+      avatar
     }
   }
 `;
@@ -234,27 +227,10 @@ export const LOGGED_USER_PARTICIPATIONS = gql`
             beginsOn
             visibility
             organizerActor {
-              id
+              ...ActorFragment
-              preferredUsername
-              name
-              domain
-              summary
-              avatar {
-                id
-                url
-              }
             }
             attributedTo {
-              avatar {
+              ...ActorFragment
-                id
-                url
-              }
-              preferredUsername
-              name
-              summary
-              domain
-              url
-              id
             }
             participantStats {
               going
@@ -274,20 +250,13 @@ export const LOGGED_USER_PARTICIPATIONS = gql`
           id
           role
           actor {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            summary
-            avatar {
-              id
-              url
-            }
           }
         }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const LOGGED_USER_DRAFTS = gql`
@@ -306,14 +275,7 @@ export const LOGGED_USER_DRAFTS = gql`
         beginsOn
         visibility
         organizerActor {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          domain
-          avatar {
-            id
-            url
-          }
         }
         participantStats {
           going
@@ -326,6 +288,7 @@ export const LOGGED_USER_DRAFTS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const LOGGED_USER_MEMBERSHIPS = gql`
@@ -338,25 +301,10 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
           id
           role
           actor {
-            id
+            ...ActorFragment
-            avatar {
-              id
-              url
-            }
-            preferredUsername
-            name
-            domain
           }
           parent {
-            id
+            ...ActorFragment
-            preferredUsername
-            domain
-            name
-            type
-            avatar {
-              id
-              url
-            }
             organizedEvents {
               elements {
                 id
@@ -370,34 +318,22 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
             }
           }
           invitedBy {
-            id
+            ...ActorFragment
-            preferredUsername
-            domain
-            name
-            avatar {
-              id
-              url
-            }
           }
         }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const IDENTITIES = gql`
   query Identities {
     identities {
-      id
+      ...ActorFragment
-      avatar {
-        id
-        url
-      }
-      type
-      preferredUsername
-      name
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const PERSON_MEMBERSHIPS = gql`
@@ -410,20 +346,10 @@ export const PERSON_MEMBERSHIPS = gql`
           id
           role
           parent {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            type
-            avatar {
-              id
-              url
-            }
           }
           invitedBy {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
           }
           insertedAt
           updatedAt
@@ -431,6 +357,7 @@ export const PERSON_MEMBERSHIPS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const PERSON_STATUS_GROUP = gql`
@@ -443,19 +370,10 @@ export const PERSON_STATUS_GROUP = gql`
           id
           role
           parent {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           invitedBy {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
           }
           insertedAt
           updatedAt
@@ -468,24 +386,10 @@ export const PERSON_STATUS_GROUP = gql`
           notify
           approved
           target_actor {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           actor {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           insertedAt
           updatedAt
@@ -493,6 +397,7 @@ export const PERSON_STATUS_GROUP = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
@@ -508,19 +413,10 @@ export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
           id
           role
           parent {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           invitedBy {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
           }
           insertedAt
           updatedAt
@@ -528,6 +424,7 @@ export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CREATE_PERSON = gql`
@@ -543,16 +440,10 @@ export const CREATE_PERSON = gql`
       summary: $summary
       avatar: $avatar
     ) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      summary
-      avatar {
-        id
-        url
-      }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_PERSON = gql`
@@ -563,16 +454,10 @@ export const UPDATE_PERSON = gql`
     $avatar: MediaInput
   ) {
     updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      summary
-      avatar {
-        id
-        url
-      }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const DELETE_PERSON = gql`
@@ -600,16 +485,10 @@ export const REGISTER_PERSON = gql`
       summary: $summary
       email: $email
     ) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      summary
-      avatar {
-        id
-        url
-      }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const SUSPEND_PROFILE = gql`

js/src/graphql/admin.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const DASHBOARD = gql`
   query {
@@ -14,14 +15,7 @@ export const DASHBOARD = gql`
         }
       }
       lastGroupCreated {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        name
-        avatar {
-          id
-          url
-        }
       }
       numberOfUsers
       numberOfEvents
@@ -33,31 +27,23 @@ export const DASHBOARD = gql`
       numberOfConfirmedParticipationsToLocalEvents
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const RELAY_FRAGMENT = gql`
   fragment relayFragment on Follower {
     id
     actor {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      type
-      summary
     }
     targetActor {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      type
-      summary
     }
     approved
     insertedAt
     updatedAt
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const RELAY_FOLLOWERS = gql`

js/src/graphql/comment.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const COMMENT_FIELDS_FRAGMENT_NAME = "CommentFields";
 export const COMMENT_FIELDS_FRAGMENT = gql`
@@ -10,15 +11,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
     visibility
     local
     actor {
-      avatar {
+      ...ActorFragment
-        id
-        url
-      }
-      id
-      domain
-      preferredUsername
-      name
-      summary
     }
     totalReplies
     insertedAt
@@ -26,6 +19,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
     deletedAt
     isAnnouncement
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const COMMENT_RECURSIVE_FRAGMENT = gql`

js/src/graphql/discussion.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const DISCUSSION_BASIC_FIELDS_FRAGMENT = gql`
   fragment DiscussionBasicFields on Discussion {
@@ -11,18 +12,13 @@ export const DISCUSSION_BASIC_FIELDS_FRAGMENT = gql`
       id
       text
       actor {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        avatar {
-          id
-          url
-        }
       }
       publishedAt
       deletedAt
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const DISCUSSION_FIELDS_FOR_REPLY_FRAGMENT = gql`
@@ -35,26 +31,17 @@ export const DISCUSSION_FIELDS_FOR_REPLY_FRAGMENT = gql`
       text
       updatedAt
       actor {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        avatar {
-          id
-          url
-        }
       }
     }
     actor {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
     }
     creator {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const DISCUSSION_FIELDS_FRAGMENT = gql`
@@ -70,28 +57,17 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
       deletedAt
       publishedAt
       actor {
-        id
+        ...ActorFragment
-        domain
-        name
-        preferredUsername
-        avatar {
-          url
-        }
       }
     }
     actor {
-      id
+      ...ActorFragment
-      domain
-      name
-      preferredUsername
     }
     creator {
-      id
+      ...ActorFragment
-      domain
-      name
-      preferredUsername
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CREATE_DISCUSSION = gql`
@@ -121,14 +97,7 @@ export const GET_DISCUSSION = gql`
           id
           text
           actor {
-            id
+            ...ActorFragment
-            avatar {
-              id
-              url
-            }
-            name
-            domain
-            preferredUsername
           }
           insertedAt
           updatedAt
@@ -140,6 +109,7 @@ export const GET_DISCUSSION = gql`
     }
   }
   ${DISCUSSION_FIELDS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_DISCUSSION = gql`
@@ -171,16 +141,10 @@ export const DISCUSSION_COMMENT_CHANGED = gql`
         deletedAt
         publishedAt
         actor {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          domain
-          avatar {
-            id
-            url
-          }
         }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;

js/src/graphql/event.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 import { ADDRESS_FRAGMENT } from "./address";
 import { TAG_FRAGMENT } from "./tags";
 
@@ -7,14 +8,7 @@ const PARTICIPANT_QUERY_FRAGMENT = gql`
     role
     id
     actor {
-      preferredUsername
+      ...ActorFragment
-      avatar {
-        id
-        url
-      }
-      name
-      id
-      domain
     }
     event {
       id
@@ -26,6 +20,7 @@ const PARTICIPANT_QUERY_FRAGMENT = gql`
     }
     insertedAt
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 const PARTICIPANTS_QUERY_FRAGMENT = gql`
@@ -38,7 +33,7 @@ const PARTICIPANTS_QUERY_FRAGMENT = gql`
   ${PARTICIPANT_QUERY_FRAGMENT}
 `;
 
-const EVENT_OPTIONS_FRAGMENT = gql`
+export const EVENT_OPTIONS_FRAGMENT = gql`
   fragment EventOptions on EventOptions {
     maximumAttendeeCapacity
     remainingAttendeeCapacity
@@ -97,40 +92,13 @@ const FULL_EVENT_FRAGMENT = gql`
       ...AdressFragment
     }
     organizerActor {
-      avatar {
+      ...ActorFragment
-        id
-        url
-      }
-      preferredUsername
-      domain
-      name
-      url
-      id
-      summary
     }
     contacts {
-      avatar {
+      ...ActorFragment
-        id
-        url
-      }
-      preferredUsername
-      name
-      summary
-      domain
-      url
-      id
     }
     attributedTo {
-      avatar {
+      ...ActorFragment
-        id
-        url
-      }
-      preferredUsername
-      name
-      summary
-      domain
-      url
-      id
     }
     participantStats {
       going
@@ -156,18 +124,19 @@ const FULL_EVENT_FRAGMENT = gql`
         }
       }
       physicalAddress {
-        id
+        ...AdressFragment
-        description
       }
       organizerActor {
-        id
+        ...ActorFragment
-        avatar {
-          id
-          url
       }
-        preferredUsername
+      attributedTo {
-        domain
+        ...ActorFragment
-        name
+      }
+      options {
+        ...EventOptions
+      }
+      tags {
+        ...TagFragment
       }
     }
     options {
@@ -183,6 +152,7 @@ const FULL_EVENT_FRAGMENT = gql`
   ${ADDRESS_FRAGMENT}
   ${TAG_FRAGMENT}
   ${EVENT_OPTIONS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
 `;
 
 export const FETCH_EVENT = gql`
@@ -244,36 +214,28 @@ export const FETCH_EVENTS = gql`
         # online_address,
         # phone_address,
         physicalAddress {
-          id
+          ...AdressFragment
-          description
-          locality
         }
         organizerActor {
-          id
+          ...ActorFragment
-          avatar {
-            id
-            url
-          }
-          preferredUsername
-          domain
-          name
         }
         attributedTo {
-          avatar {
+          ...ActorFragment
-            id
-            url
-          }
-          preferredUsername
-          name
         }
         category
         tags {
           ...TagFragment
         }
+        options {
+          ...EventOptions
         }
       }
     }
+  }
+  ${ADDRESS_FRAGMENT}
   ${TAG_FRAGMENT}
+  ${EVENT_OPTIONS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CREATE_EVENT = gql`
@@ -514,10 +476,7 @@ export const FETCH_GROUP_EVENTS = gql`
     $organisedEventslimit: Int
   ) {
     group(preferredUsername: $name) {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
-      name
       organizedEvents(
         afterDatetime: $afterDateTime
         beforeDatetime: $beforeDateTime
@@ -538,22 +497,17 @@ export const FETCH_GROUP_EVENTS = gql`
             notApproved
           }
           attributedTo {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
           }
           organizerActor {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
           }
         }
         total
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CLOSE_EVENTS = gql`
@@ -570,13 +524,28 @@ export const CLOSE_EVENTS = gql`
           url
         }
         tags {
-          slug
+          ...TagFragment
-          title
+        }
+        options {
+          ...EventOptions
+        }
+        physicalAddress {
+          ...AdressFragment
+        }
+        attributedTo {
+          ...ActorFragment
+        }
+        organizerActor {
+          ...ActorFragment
         }
         __typename
       }
     }
   }
+  ${ADDRESS_FRAGMENT}
+  ${TAG_FRAGMENT}
+  ${EVENT_OPTIONS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
 `;
 
 export const EXPORT_EVENT_PARTICIPATIONS = gql`

js/src/graphql/followers.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const GROUP_FOLLOWERS = gql`
   query (
@@ -8,10 +9,7 @@ export const GROUP_FOLLOWERS = gql`
     $approved: Boolean
   ) {
     group(preferredUsername: $name) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
       followers(
         page: $followersPage
         limit: $followersLimit
@@ -21,14 +19,7 @@ export const GROUP_FOLLOWERS = gql`
         elements {
           id
           actor {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           approved
           insertedAt
@@ -37,6 +28,7 @@ export const GROUP_FOLLOWERS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_FOLLOWER = gql`

js/src/graphql/group.ts

@@ -2,6 +2,7 @@ import gql from "graphql-tag";
 import { DISCUSSION_BASIC_FIELDS_FRAGMENT } from "./discussion";
 import { RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT } from "./resources";
 import { POST_BASIC_FIELDS } from "./post";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const LIST_GROUPS = gql`
   query ListGroups(
@@ -23,12 +24,7 @@ export const LIST_GROUPS = gql`
       limit: $limit
     ) {
       elements {
-        id
+        ...ActorFragment
-        url
-        name
-        domain
-        summary
-        preferredUsername
         suspended
         avatar {
           id
@@ -51,16 +47,12 @@ export const LIST_GROUPS = gql`
       total
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const GROUP_FIELDS_FRAGMENTS = gql`
   fragment GroupFullFields on Group {
-    id
+    ...ActorFragment
-    url
-    name
-    domain
-    summary
-    preferredUsername
     suspended
     visibility
     openness
@@ -117,16 +109,10 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
           notApproved
         }
         attributedTo {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          domain
         }
         organizerActor {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          domain
         }
       }
       total
@@ -148,14 +134,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
         id
         role
         actor {
-          id
+          ...ActorFragment
-          name
-          domain
-          preferredUsername
-          avatar {
-            id
-            url
-          }
         }
         insertedAt
       }
@@ -197,6 +176,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
       total
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const FETCH_GROUP = gql`
@@ -263,21 +243,14 @@ export const CREATE_GROUP = gql`
       banner: $banner
       avatar: $avatar
     ) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      summary
-      avatar {
-        id
-        url
-      }
       banner {
         id
         url
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_GROUP = gql`
@@ -303,23 +276,17 @@ export const UPDATE_GROUP = gql`
       physicalAddress: $physicalAddress
       manuallyApprovesFollowers: $manuallyApprovesFollowers
     ) {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      summary
       visibility
       openness
       manuallyApprovesFollowers
-      avatar {
-        id
-        url
-      }
       banner {
         id
         url
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const DELETE_GROUP = gql`
@@ -355,10 +322,7 @@ export const GROUP_TIMELINE = gql`
     $limit: Int
   ) {
     group(preferredUsername: $preferredUsername) {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
-      name
       activity(type: $type, author: $author, page: $page, limit: $limit) {
         total
         elements {
@@ -371,18 +335,10 @@ export const GROUP_TIMELINE = gql`
           }
           type
           author {
-            id
+            ...ActorFragment
-            preferredUsername
-            name
-            domain
-            avatar {
-              id
-              url
-            }
           }
           group {
-            id
+            ...ActorFragment
-            preferredUsername
           }
           object {
             ... on Event {
@@ -396,14 +352,7 @@ export const GROUP_TIMELINE = gql`
             ... on Member {
               id
               actor {
-                id
+                ...ActorFragment
-                name
-                preferredUsername
-                domain
-                avatar {
-                  id
-                  url
-                }
               }
             }
             ... on Resource {
@@ -421,11 +370,7 @@ export const GROUP_TIMELINE = gql`
               id
             }
             ... on Group {
-              id
+              ...ActorFragment
-              preferredUsername
-              domain
-              name
-              summary
               visibility
               openness
               physicalAddress {
@@ -433,9 +378,7 @@ export const GROUP_TIMELINE = gql`
               }
               banner {
                 id
-              }
+                url
-              avatar {
-                id
               }
             }
           }
@@ -443,4 +386,5 @@ export const GROUP_TIMELINE = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;

js/src/graphql/home.ts

@@ -62,7 +62,7 @@ export const HOME_USER_QUERIES = gql`
           }
         }
       }
-      followGroupEvents {
+      followedGroupEvents {
         total
         elements {
           profile {

js/src/graphql/member.ts

@@ -1,31 +1,19 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const MEMBER_FRAGMENT = gql`
   fragment MemberFragment on Member {
     id
     role
     parent {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
-      name
-      avatar {
-        id
-        url
-      }
     }
     actor {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
-      name
-      avatar {
-        id
-        url
-      }
     }
     insertedAt
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const INVITE_MEMBER = gql`
@@ -57,24 +45,13 @@ export const REJECT_INVITATION = gql`
 export const GROUP_MEMBERS = gql`
   query ($name: String!, $roles: String, $page: Int, $limit: Int) {
     group(preferredUsername: $name) {
-      id
+      ...ActorFragment
-      url
-      name
-      domain
-      preferredUsername
       members(page: $page, limit: $limit, roles: $roles) {
         elements {
           id
           role
           actor {
-            id
+            ...ActorFragment
-            name
-            domain
-            preferredUsername
-            avatar {
-              id
-              url
-            }
           }
           insertedAt
         }
@@ -82,6 +59,7 @@ export const GROUP_MEMBERS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_MEMBER = gql`

js/src/graphql/post.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 import { TAG_FRAGMENT } from "./tags";
 
 export const POST_FRAGMENT = gql`
@@ -10,24 +11,10 @@ export const POST_FRAGMENT = gql`
     body
     draft
     author {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      avatar {
-        id
-        url
-      }
     }
     attributedTo {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      avatar {
-        id
-        url
-      }
     }
     insertedAt
     updatedAt
@@ -49,6 +36,7 @@ export const POST_FRAGMENT = gql`
     }
   }
   ${TAG_FRAGMENT}
+  ${ACTOR_FRAGMENT}
 `;
 
 export const POST_BASIC_FIELDS = gql`
@@ -58,24 +46,10 @@ export const POST_BASIC_FIELDS = gql`
     slug
     url
     author {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      avatar {
-        id
-        url
-      }
     }
     attributedTo {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      domain
-      avatar {
-        id
-        url
-      }
     }
     insertedAt
     updatedAt
@@ -88,15 +62,13 @@ export const POST_BASIC_FIELDS = gql`
       name
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const FETCH_GROUP_POSTS = gql`
   query GroupPosts($preferredUsername: String!, $page: Int, $limit: Int) {
     group(preferredUsername: $preferredUsername) {
-      id
+      ...ActorFragment
-      preferredUsername
-      domain
-      name
       posts(page: $page, limit: $limit) {
         total
         elements {

js/src/graphql/report.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const REPORTS = gql`
   query Reports($status: ReportStatus, $page: Int, $limit: Int) {
@@ -7,25 +8,10 @@ export const REPORTS = gql`
       elements {
         id
         reported {
-          id
+          ...ActorFragment
-          preferredUsername
-          domain
-          name
-          avatar {
-            id
-            url
-          }
         }
         reporter {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          avatar {
-            id
-            url
-          }
-          domain
-          type
         }
         event {
           id
@@ -41,31 +27,17 @@ export const REPORTS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 const REPORT_FRAGMENT = gql`
   fragment ReportFragment on Report {
     id
     reported {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      avatar {
-        id
-        url
-      }
-      domain
     }
     reporter {
-      id
+      ...ActorFragment
-      preferredUsername
-      name
-      avatar {
-        id
-        url
-      }
-      domain
-      type
     }
     event {
       id
@@ -81,27 +53,14 @@ const REPORT_FRAGMENT = gql`
       id
       text
       actor {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        name
-        avatar {
-          id
-          url
-        }
       }
     }
     notes {
       id
       content
       moderator {
-        id
+        ...ActorFragment
-        preferredUsername
-        name
-        avatar {
-          id
-          url
-        }
       }
       insertedAt
     }
@@ -110,6 +69,7 @@ const REPORT_FRAGMENT = gql`
     status
     content
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const REPORT = gql`
@@ -167,13 +127,7 @@ export const LOGS = gql`
         id
         action
         actor {
-          id
+          ...ActorFragment
-          preferredUsername
-          domain
-          avatar {
-            id
-            url
-          }
         }
         object {
           ... on Report {
@@ -197,23 +151,14 @@ export const LOGS = gql`
               uuid
             }
             actor {
-              id
+              ...ActorFragment
-              preferredUsername
-              domain
-              name
             }
           }
           ... on Person {
-            id
+            ...ActorFragment
-            preferredUsername
-            domain
-            name
           }
           ... on Group {
-            id
+            ...ActorFragment
-            preferredUsername
-            domain
-            name
           }
           ... on User {
             id
@@ -226,4 +171,5 @@ export const LOGS = gql`
       total
     }
   }
+  ${ACTOR_FRAGMENT}
 `;

js/src/graphql/resources.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT = gql`
   fragment ResourceMetadataBasicFields on ResourceMetadata {
@@ -38,10 +39,7 @@ export const GET_RESOURCE = gql`
         type
       }
       actor {
-        id
+        ...ActorFragment
-        preferredUsername
-        name
-        domain
       }
       children(page: $page, limit: $limit) {
         total
@@ -68,6 +66,7 @@ export const GET_RESOURCE = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
   ${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
 `;
 

js/src/graphql/search.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const SEARCH_EVENTS = gql`
   query SearchEvents(
@@ -58,18 +59,11 @@ export const SEARCH_GROUPS = gql`
     ) {
       total
       elements {
-        id
+        ...ActorFragment
-        avatar {
-          id
-          url
-        }
-        domain
-        preferredUsername
-        name
-        __typename
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const SEARCH_PERSONS = gql`
@@ -77,18 +71,11 @@ export const SEARCH_PERSONS = gql`
     searchPersons(term: $searchText, page: $page, limit: $limit) {
       total
       elements {
-        id
+        ...ActorFragment
-        avatar {
-          id
-          url
-        }
-        domain
-        preferredUsername
-        name
-        __typename
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const INTERACT = gql`
@@ -110,16 +97,9 @@ export const INTERACT = gql`
         __typename
       }
       ... on Group {
-        id
+        ...ActorFragment
-        avatar {
-          id
-          url
-        }
-        domain
-        preferredUsername
-        name
-        __typename
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;

js/src/graphql/todos.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const GET_TODO = gql`
   query GetTodo($id: ID!) {
@@ -9,26 +10,17 @@ export const GET_TODO = gql`
       dueDate
       todoList {
         actor {
-          id
+          ...ActorFragment
-          preferredUsername
-          domain
-          name
         }
         title
         id
       }
       assignedTo {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        name
-        avatar {
-          id
-          url
-        }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const FETCH_TODO_LIST = gql`
@@ -43,21 +35,17 @@ export const FETCH_TODO_LIST = gql`
           title
           status
           assignedTo {
-            id
+            ...ActorFragment
-            preferredUsername
-            domain
           }
           dueDate
         }
       }
       actor {
-        id
+        ...ActorFragment
-        preferredUsername
-        domain
-        name
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CREATE_TODO_LIST = gql`

js/src/graphql/user.ts

@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import { ACTOR_FRAGMENT } from "./actor";
 
 export const CREATE_USER = gql`
   mutation CreateUser($email: String!, $password: String!, $locale: String) {
@@ -18,17 +19,12 @@ export const VALIDATE_USER = gql`
         id
         email
         defaultActor {
-          id
+          ...ActorFragment
-          preferredUsername
-          name
-          avatar {
-            id
-            url
-          }
         }
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const LOGGED_USER = gql`
@@ -37,17 +33,12 @@ export const LOGGED_USER = gql`
       id
       email
       defaultActor {
-        id
+        ...ActorFragment
-        preferredUsername
-        name
-        avatar {
-          id
-          url
-        }
       }
       provider
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const CHANGE_PASSWORD = gql`
@@ -228,14 +219,7 @@ export const LIST_USERS = gql`
         confirmedAt
         disabled
         actors {
-          id
+          ...ActorFragment
-          preferredUsername
-          avatar {
-            id
-            url
-          }
-          name
-          summary
         }
         settings {
           timezone
@@ -243,6 +227,7 @@ export const LIST_USERS = gql`
       }
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const GET_USER = gql`
@@ -263,13 +248,7 @@ export const GET_USER = gql`
         id
       }
       actors {
-        id
+        ...ActorFragment
-        preferredUsername
-        name
-        avatar {
-          id
-          url
-        }
       }
       participations {
         total
@@ -277,6 +256,7 @@ export const GET_USER = gql`
       role
     }
   }
+  ${ACTOR_FRAGMENT}
 `;
 
 export const UPDATE_USER_LOCALE = gql`

js/src/i18n/en_US.json

@@ -1202,6 +1202,13 @@
   "{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
   "Back to top": "Back to top",
   "Powered by Mobilizon": "Powered by Mobilizon",
-  "Instance follows": "Instance follows",
+  "The event is fully online": "The event is fully online",
-  "The event is fully online": "The event is fully online"
+  "Follow": "Follow",
+  "Cancel follow request": "Cancel follow request",
+  "Unfollow": "Unfollow",
+  "your notification settings": "your notification settings",
+  "You will receive notifications about this group's public activity depending on %{notification_settings}.": "You will receive notifications about this group's public activity depending on %{notification_settings}.",
+  "Recent events from your groups": "Recent events from your groups",
+  "Online": "Online",
+  "That you follow or of which you are a member": "That you follow or of which you are a member"
 }

js/src/i18n/es.json

@@ -488,7 +488,6 @@
   "Instance administrator": "Administrador de instancia",
   "Instance configuration": "Configuración de instancia",
   "Instance feeds": "Flujos de instancias",
-  "Instance follows": "La instancia sigue",
   "Instance languages": "Idiomas de instancia",
   "Instance rules": "Reglas de instancia",
   "Instance settings": "Configuraciones de instancia",

js/src/i18n/fr_FR.json

@@ -1308,6 +1308,13 @@
   "{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
   "Back to top": "Retour en haut",
   "Powered by Mobilizon": "Propulsé par Mobilizon",
-  "Instance follows": "Abonnements de l'instance",
+  "The event is fully online": "L'événement est entièrement en ligne",
-  "The event is fully online": "L'événement est entièrement en ligne"
+  "Follow": "Suivre",
+  "Cancel follow request": "Annuler la demande de suivi",
+  "Unfollow": "Ne plus suivre",
+  "your notification settings": "vos paramètres de notification",
+  "You will receive notifications about this group's public activity depending on %{notification_settings}.": "Vous recevrez des notifications à propos de l'activité publique de ce groupe en fonction de %{notification_settings}.",
+  "Recent events from your groups": "Événements récents de vos groupes",
+  "Online": "En ligne",
+  "That you follow or of which you are a member": "Que vous suivez ou dont vous êtes membre"
 }

js/src/types/event.model.ts

@@ -4,7 +4,7 @@ import type { ITag } from "@/types/tag.model";
 import type { IMedia } from "@/types/media.model";
 import type { IComment } from "@/types/comment.model";
 import type { Paginate } from "@/types/paginate";
-import { Actor, Group } from "./actor";
+import { Actor, displayName, Group } from "./actor";
 import type { IActor, IGroup, IPerson } from "./actor";
 import type { IParticipant } from "./participant.model";
 import { EventOptions } from "./event-options.model";
@@ -257,3 +257,21 @@ export function toEditJSON(event: IEditableEvent): IEventEditJSON {
     })),
   };
 }
+
+export function organizer(event: IEvent): IActor | null {
+  if (event.attributedTo) {
+    return event.attributedTo;
+  }
+  if (event.organizerActor) {
+    return event.organizerActor;
+  }
+  return null;
+}
+
+export function organizerDisplayName(event: IEvent): string | null {
+  const organizerActor = organizer(event);
+  if (organizerActor) {
+    return displayName(organizerActor);
+  }
+  return null;
+}

js/src/views/Admin/Follows.vue

@@ -89,7 +89,7 @@ import RouteName from "../../router/name";
   },
   metaInfo() {
     return {
-      title: this.$t("Instance follows") as string,
+      title: this.$t("Federation") as string,
     };
   },
 })

js/src/views/Event/Event.vue

@@ -345,15 +345,7 @@
         <h3 class="title has-text-centered">
           {{ $t("These events may interest you") }}
         </h3>
-        <div class="columns">
+        <multi-card :events="event.relatedEvents" />
-          <div
-            class="column is-one-third-desktop"
-            v-for="relatedEvent in event.relatedEvents"
-            :key="relatedEvent.uuid"
-          >
-            <EventCard :event="relatedEvent" />
-          </div>
-        </div>
       </section>
       <b-modal
         :active.sync="isReportModalActive"
@@ -501,7 +493,7 @@ import { EventModel, IEvent } from "../../types/event.model";
 import { IActor, IPerson, Person, usernameWithDomain } from "../../types/actor";
 import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
 import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
-import EventCard from "../../components/Event/EventCard.vue";
+import MultiCard from "../../components/Event/MultiCard.vue";
 import ReportModal from "../../components/Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
 import { CREATE_REPORT } from "../../graphql/report";
@@ -536,7 +528,7 @@ import { IUser } from "@/types/current-user.model";
 @Component({
   components: {
     Subtitle,
-    EventCard,
+    MultiCard,
     BIcon,
     DateCalendarIcon,
     ReportModal,
@@ -576,7 +568,6 @@ import { IUser } from "@/types/current-user.model";
   apollo: {
     event: {
       query: FETCH_EVENT,
-      fetchPolicy: "cache-and-network",
       variables() {
         return {
           uuid: this.uuid,
@@ -590,7 +581,6 @@ import { IUser } from "@/types/current-user.model";
     loggedUser: USER_SETTINGS,
     participations: {
       query: EVENT_PERSON_PARTICIPATION,
-      fetchPolicy: "cache-and-network",
       variables() {
         return {
           eventId: this.event.id,
@@ -621,7 +611,6 @@ import { IUser } from "@/types/current-user.model";
     },
     person: {
       query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
       variables() {
         return {
           id: this.currentActor.id,

js/src/views/Group/Group.vue

@@ -475,7 +475,7 @@
             }}
           </event-metadata-block>
           <event-metadata-block
-            v-if="physicalAddress.url"
+            v-if="physicalAddress && physicalAddress.url"
             :title="$t('Location')"
             :icon="
               physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'

js/src/views/Posts/Edit.vue

@@ -266,7 +266,7 @@ export default class EditPost extends mixins(GroupMixin) {
 
   RouteName = RouteName;
 
-  editablePost!: IPost;
+  editablePost: IPost = this.post;
 
   usernameWithDomain = usernameWithDomain;