Improve post & events cards, homepage and my events page

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

js/src/views/Event/Edit.vue

@@ -606,7 +606,6 @@ import {
   CURRENT_ACTOR_CLIENT,
   IDENTITIES,
   LOGGED_USER_DRAFTS,
-  LOGGED_USER_PARTICIPATIONS,
   PERSON_STATUS_GROUP,
 } from "../../graphql/actor";
 import {
@@ -635,6 +634,7 @@ import { IEventOptions } from "@/types/event-options.model";
 import { USER_SETTINGS } from "@/graphql/user";
 import { IUser } from "@/types/current-user.model";
 import { IAddress } from "@/types/address.model";
+import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 

js/src/views/Event/GroupEvents.vue

@@ -52,14 +52,10 @@
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
         </subtitle>
         <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
-        <transition-group name="list" tag="div" class="event-list">
-          <EventListViewCard
-            v-for="event in group.organizedEvents.elements"
-            :key="event.id"
-            :event="event"
-            :options="{ memberofGroup: isCurrentActorMember }"
-          />
-        </transition-group>
+        <grouped-multi-event-minimalist-card
+          :events="group.organizedEvents.elements"
+          :isCurrentActorMember="isCurrentActorMember"
+        />
         <b-message
           v-if="
             group.organizedEvents.elements.length === 0 &&
@@ -88,7 +84,7 @@ import { Component } from "vue-property-decorator";
 import { mixins } from "vue-class-component";
 import RouteName from "@/router/name";
 import Subtitle from "@/components/Utils/Subtitle.vue";
-import EventListViewCard from "@/components/Event/EventListViewCard.vue";
+import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEventMinimalistCard.vue";
 import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
 import GroupMixin from "@/mixins/group";
 import { IMember } from "@/types/actor/member.model";
@@ -120,14 +116,14 @@ const EVENTS_PAGE_LIMIT = 10;
           beforeDateTime: this.showPassedEvents ? new Date() : null,
           afterDateTime: this.showPassedEvents ? null : new Date(),
           organisedEventsPage: this.eventsPage,
-          organisedEventslimit: EVENTS_PAGE_LIMIT,
+          organisedEventsLimit: EVENTS_PAGE_LIMIT,
         };
       },
     },
   },
   components: {
     Subtitle,
-    EventListViewCard,
+    GroupedMultiEventMinimalistCard,
   },
   metaInfo() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

js/src/views/Event/MyEvents.vue

@@ -18,110 +18,175 @@
       >
     </div>
     <b-loading :active.sync="$apollo.loading"></b-loading>
-    <section v-if="futureParticipations.length > 0">
-      <subtitle>
-        {{ $t("Upcoming") }}
-      </subtitle>
-      <transition-group name="list" tag="p">
-        <div v-for="month in monthlyFutureParticipations" :key="month[0]">
-          <span class="upcoming-month">{{ month[0] }}</span>
-          <EventListCard
-            v-for="participation in month[1]"
-            :key="participation.id"
-            :participation="participation"
-            :options="{ hideDate: false }"
-            @event-deleted="eventDeleted"
-            class="participation"
-          />
-        </div>
-      </transition-group>
-      <div class="columns is-centered">
-        <b-button
-          class="column is-narrow"
-          v-if="
-            hasMoreFutureParticipations && futureParticipations.length === limit
-          "
-          @click="loadMoreFutureParticipations"
-          size="is-large"
-          type="is-primary"
-          >{{ $t("Load more") }}</b-button
+    <div class="wrapper">
+      <div class="event-filter">
+        <b-field grouped group-multiline>
+          <b-field>
+            <b-switch v-model="showUpcoming">{{
+              showUpcoming ? $t("Upcoming events") : $t("Past events")
+            }}</b-switch>
+          </b-field>
+          <b-field v-if="showUpcoming">
+            <b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
+          </b-field>
+          <b-field v-if="showUpcoming">
+            <b-checkbox v-model="showAttending">{{
+              $t("Attending")
+            }}</b-checkbox>
+          </b-field>
+          <b-field v-if="showUpcoming">
+            <b-checkbox v-model="showMyGroups">{{
+              $t("From my groups")
+            }}</b-checkbox>
+          </b-field>
+          <p v-if="!showUpcoming">
+            {{
+              $tc(
+                "You have attended {count} events in the past.",
+                pastParticipations.total,
+                {
+                  count: pastParticipations.total,
+                }
+              )
+            }}
+          </p>
+          <b-field
+            class="date-filter"
+            expanded
+            :label="
+              showUpcoming
+                ? $t('Showing events starting on')
+                : $t('Showing events before')
+            "
+          >
+            <b-datepicker v-model="dateFilter" />
+            <b-button
+              @click="dateFilter = new Date()"
+              class="reset-area"
+              icon-left="close"
+              :title="$t('Clear date filter field')"
+            />
+          </b-field>
+        </b-field>
+      </div>
+      <div class="my-events">
+        <section
+          class="py-4"
+          v-if="showUpcoming && showDrafts && drafts.length > 0"
         >
-      </div>
-    </section>
-    <section v-if="drafts.length > 0">
-      <subtitle>
-        {{ $t("Drafts") }}
-      </subtitle>
-      <div class="columns is-multiline">
-        <EventCard
-          v-for="draft in drafts"
-          :key="draft.uuid"
-          :event="draft"
-          class="is-one-quarter-desktop column"
-        />
-      </div>
-    </section>
-    <section v-if="pastParticipations.length > 0">
-      <subtitle>
-        {{ $t("Past events") }}
-      </subtitle>
-      <transition-group name="list" tag="p">
-        <div v-for="month in monthlyPastParticipations" :key="month[0]">
-          <span class="past-month">{{ month[0] }}</span>
-          <EventListCard
-            v-for="participation in month[1]"
-            :key="participation.id"
-            :participation="participation"
-            :options="{ hideDate: false }"
-            @event-deleted="eventDeleted"
-            class="participation"
-          />
-        </div>
-      </transition-group>
-      <div class="columns is-centered">
-        <b-button
-          class="column is-narrow"
+          <multi-event-minimalist-card :events="drafts" :showOrganizer="true" />
+        </section>
+        <section
+          class="py-4"
           v-if="
-            hasMorePastParticipations && pastParticipations.length === limit
+            showUpcoming && monthlyFutureEvents && monthlyFutureEvents.size > 0
+          "
+        >
+          <transition-group name="list" tag="p">
+            <div
+              class="mb-5"
+              v-for="month in monthlyFutureEvents"
+              :key="month[0]"
+            >
+              <span class="upcoming-month">{{ month[0] }}</span>
+              <div v-for="element in month[1]" :key="element.id">
+                <event-participation-card
+                  v-if="'role' in element"
+                  :participation="element"
+                  :options="{ hideDate: false }"
+                  @event-deleted="eventDeleted"
+                  class="participation"
+                />
+                <event-minimalist-card
+                  v-else-if="
+                    !monthParticipationsIds(month[1]).includes(element.id)
+                  "
+                  :event="element"
+                  class="participation"
+                />
+              </div>
+            </div>
+          </transition-group>
+          <div class="columns is-centered">
+            <b-button
+              class="column is-narrow"
+              v-if="
+                hasMoreFutureParticipations &&
+                futureParticipations &&
+                futureParticipations.length === limit
+              "
+              @click="loadMoreFutureParticipations"
+              size="is-large"
+              type="is-primary"
+              >{{ $t("Load more") }}</b-button
+            >
+          </div>
+        </section>
+        <section
+          class="has-text-centered not-found"
+          v-if="
+            showUpcoming &&
+            monthlyFutureEvents &&
+            monthlyFutureEvents.size === 0 &&
+            !$apollo.loading
           "
-          @click="loadMorePastParticipations"
-          size="is-large"
-          type="is-primary"
-          >{{ $t("Load more") }}</b-button
         >
-      </div>
-    </section>
-    <section
-      class="has-text-centered not-found"
-      v-if="
-        futureParticipations.length === 0 &&
-        pastParticipations.length === 0 &&
-        !$apollo.loading
-      "
-    >
-      <div class="columns is-vertical is-centered">
-        <div class="column is-three-quarters">
           <div class="img-container" :class="{ webp: supportsWebPFormat }" />
           <div class="content has-text-centered">
             <p>
-              {{ $t("You didn't create or join any event yet.") }}
-              <i18n path="Do you wish to {create_event} or {explore_events}?">
-                <router-link
-                  :to="{ name: RouteName.CREATE_EVENT }"
-                  slot="create_event"
-                  >{{ $t("create an event") }}</router-link
-                >
-                <router-link
-                  :to="{ name: RouteName.SEARCH }"
-                  slot="explore_events"
-                  >{{ $t("explore the events") }}</router-link
-                >
-              </i18n>
+              {{
+                $t(
+                  "You don't have any upcoming events. Maybe try another filter?"
+                )
+              }}
             </p>
+            <i18n
+              path="Do you wish to {create_event} or {explore_events}?"
+              tag="p"
+            >
+              <router-link
+                :to="{ name: RouteName.CREATE_EVENT }"
+                slot="create_event"
+                >{{ $t("create an event") }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.SEARCH }"
+                slot="explore_events"
+                >{{ $t("explore the events") }}</router-link
+              >
+            </i18n>
           </div>
-        </div>
+        </section>
+        <section v-if="!showUpcoming && pastParticipations.elements.length > 0">
+          <transition-group name="list" tag="p">
+            <div v-for="month in monthlyPastParticipations" :key="month[0]">
+              <span class="past-month">{{ month[0] }}</span>
+              <event-participation-card
+                v-for="participation in month[1]"
+                :key="participation.id"
+                :participation="participation"
+                :options="{ hideDate: false }"
+                @event-deleted="eventDeleted"
+                class="participation"
+              />
+            </div>
+          </transition-group>
+          <div class="columns is-centered">
+            <b-button
+              class="column is-narrow"
+              v-if="
+                hasMorePastParticipations &&
+                pastParticipations.elements.length === limit
+              "
+              @click="loadMorePastParticipations"
+              size="is-large"
+              type="is-primary"
+              >{{ $t("Load more") }}</b-button
+            >
+          </div>
+        </section>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
@@ -133,35 +198,47 @@ import { ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
 import { supportsWebPFormat } from "@/utils/support";
 import { IParticipant, Participant } from "../../types/participant.model";
+import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
+import { EventModel, IEvent } from "../../types/event.model";
+import EventParticipationCard from "../../components/Event/EventParticipationCard.vue";
+import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
+import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
+import Subtitle from "../../components/Utils/Subtitle.vue";
 import {
   LOGGED_USER_PARTICIPATIONS,
-  LOGGED_USER_DRAFTS,
-} from "../../graphql/actor";
-import { EventModel, IEvent } from "../../types/event.model";
-import EventListCard from "../../components/Event/EventListCard.vue";
-import EventCard from "../../components/Event/EventCard.vue";
-import Subtitle from "../../components/Utils/Subtitle.vue";
+  LOGGED_USER_UPCOMING_EVENTS,
+} from "@/graphql/participant";
+import { Paginate } from "@/types/paginate";
+
+type Eventable = IParticipant | IEvent;
 
 @Component({
   components: {
     Subtitle,
-    EventCard,
-    EventListCard,
+    MultiEventMinimalistCard,
+    EventParticipationCard,
+    EventMinimalistCard,
   },
   apollo: {
     config: CONFIG,
-    futureParticipations: {
-      query: LOGGED_USER_PARTICIPATIONS,
+    userUpcomingEvents: {
+      query: LOGGED_USER_UPCOMING_EVENTS,
       fetchPolicy: "cache-and-network",
-      variables: {
-        page: 1,
-        limit: 10,
-        afterDateTime: new Date().toISOString(),
+      variables() {
+        return {
+          page: 1,
+          limit: 10,
+          afterDateTime: this.dateFilter,
+        };
       },
-      update: (data) =>
-        data.loggedUser.participations.elements.map(
+      update(data) {
+        this.futureParticipations = data.loggedUser.participations.elements.map(
           (participation: IParticipant) => new Participant(participation)
-        ),
+        );
+        this.groupEvents = data.loggedUser.followedGroupEvents.elements.map(
+          ({ event }: { event: IEvent }) => event
+        );
+      },
     },
     drafts: {
       query: LOGGED_USER_DRAFTS,
@@ -176,15 +253,14 @@ import Subtitle from "../../components/Utils/Subtitle.vue";
     pastParticipations: {
       query: LOGGED_USER_PARTICIPATIONS,
       fetchPolicy: "cache-and-network",
-      variables: {
-        page: 1,
-        limit: 10,
-        beforeDateTime: new Date().toISOString(),
+      variables() {
+        return {
+          page: 1,
+          limit: 10,
+          beforeDateTime: this.dateFilter,
+        };
       },
-      update: (data) =>
-        data.loggedUser.participations.elements.map(
-          (participation: IParticipant) => new Participant(participation)
-        ),
+      update: (data) => data.loggedUser.participations,
     },
   },
   metaInfo() {
@@ -200,13 +276,89 @@ export default class MyEvents extends Vue {
 
   limit = 10;
 
+  get showUpcoming(): boolean {
+    return ((this.$route.query.showUpcoming as string) || "true") === "true";
+  }
+
+  set showUpcoming(showUpcoming: boolean) {
+    this.$router.push({
+      name: RouteName.MY_EVENTS,
+      query: { ...this.$route.query, showUpcoming: showUpcoming.toString() },
+    });
+  }
+
+  get showDrafts(): boolean {
+    return ((this.$route.query.showDrafts as string) || "true") === "true";
+  }
+
+  set showDrafts(showDrafts: boolean) {
+    this.$router.push({
+      name: RouteName.MY_EVENTS,
+      query: { ...this.$route.query, showDrafts: showDrafts.toString() },
+    });
+  }
+
+  get showAttending(): boolean {
+    return ((this.$route.query.showAttending as string) || "true") === "true";
+  }
+
+  set showAttending(showAttending: boolean) {
+    this.$router.push({
+      name: RouteName.MY_EVENTS,
+      query: { ...this.$route.query, showAttending: showAttending.toString() },
+    });
+  }
+
+  get showMyGroups(): boolean {
+    return ((this.$route.query.showMyGroups as string) || "false") === "true";
+  }
+
+  set showMyGroups(showMyGroups: boolean) {
+    this.$router.push({
+      name: RouteName.MY_EVENTS,
+      query: { ...this.$route.query, showMyGroups: showMyGroups.toString() },
+    });
+  }
+
+  get dateFilter(): Date {
+    const query = this.$route.query.dateFilter as string;
+    if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
+      return new Date(`${query}T00:00:00Z`);
+    }
+    return new Date();
+  }
+
+  set dateFilter(date: Date) {
+    const pad = (number: number) => {
+      if (number < 10) {
+        return "0" + number;
+      }
+      return number;
+    };
+    const stringifiedDate = `${date.getFullYear()}-${pad(
+      date.getMonth() + 1
+    )}-${pad(date.getDate())}`;
+
+    if (this.$route.query.dateFilter !== stringifiedDate) {
+      this.$router.push({
+        name: RouteName.MY_EVENTS,
+        query: {
+          ...this.$route.query,
+          dateFilter: stringifiedDate,
+        },
+      });
+    }
+  }
+
   config!: IConfig;
 
   futureParticipations: IParticipant[] = [];
 
+  groupEvents: IEvent[] = [];
+
   hasMoreFutureParticipations = true;
 
-  pastParticipations: IParticipant[] = [];
+  pastParticipations: Paginate<IParticipant> = { elements: [], total: 0 };
 
   hasMorePastParticipations = true;
 
@@ -216,49 +368,68 @@ export default class MyEvents extends Vue {
 
   supportsWebPFormat = supportsWebPFormat;
 
-  static monthlyParticipations(
-    participations: IParticipant[],
+  static monthlyEvents(
+    elements: Eventable[],
     revertSort = false
-  ): Map<string, Participant[]> {
-    const res = participations.filter(
-      ({ event, role }) =>
-        event.beginsOn != null && role !== ParticipantRole.REJECTED
-    );
-    if (revertSort) {
-      res.sort(
-        (a: IParticipant, b: IParticipant) =>
-          b.event.beginsOn.getTime() - a.event.beginsOn.getTime()
-      );
-    } else {
-      res.sort(
-        (a: IParticipant, b: IParticipant) =>
-          a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
-      );
-    }
-    return res.reduce(
-      (acc: Map<string, IParticipant[]>, participation: IParticipant) => {
-        const month = new Date(participation.event.beginsOn).toLocaleDateString(
-          undefined,
-          {
-            year: "numeric",
-            month: "long",
-          }
+  ): Map<string, Eventable[]> {
+    const res = elements.filter((element: Eventable) => {
+      if ("role" in element) {
+        return (
+          element.event.beginsOn != null &&
+          element.role !== ParticipantRole.REJECTED
         );
-        const filteredParticipations: IParticipant[] = acc.get(month) || [];
-        filteredParticipations.push(participation);
-        acc.set(month, filteredParticipations);
-        return acc;
-      },
-      new Map()
-    );
+      }
+      return element.beginsOn != null;
+    });
+    if (revertSort) {
+      res.sort((a: Eventable, b: Eventable) => {
+        const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
+        const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
+        return new Date(bTime).getTime() - new Date(aTime).getTime();
+      });
+    } else {
+      res.sort((a: Eventable, b: Eventable) => {
+        const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
+        const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
+        return new Date(aTime).getTime() - new Date(bTime).getTime();
+      });
+    }
+    return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
+      const month = new Date(
+        "role" in element ? element.event.beginsOn : element.beginsOn
+      ).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+      });
+      const filteredElements: Eventable[] = acc.get(month) || [];
+      filteredElements.push(element);
+      acc.set(month, filteredElements);
+      return acc;
+    }, new Map());
   }
 
-  get monthlyFutureParticipations(): Map<string, Participant[]> {
-    return MyEvents.monthlyParticipations(this.futureParticipations);
+  get monthlyFutureEvents(): Map<string, Eventable[]> {
+    let eventable = [] as Eventable[];
+    if (this.showAttending) {
+      eventable = [...eventable, ...this.futureParticipations];
+    }
+    if (this.showMyGroups) {
+      eventable = [...eventable, ...this.groupEvents];
+    }
+    return MyEvents.monthlyEvents(eventable);
   }
 
-  get monthlyPastParticipations(): Map<string, Participant[]> {
-    return MyEvents.monthlyParticipations(this.pastParticipations, true);
+  get monthlyPastParticipations(): Map<string, Eventable[]> {
+    return MyEvents.monthlyEvents(this.pastParticipations.elements, true);
+  }
+
+  monthParticipationsIds(elements: Eventable[]): string[] {
+    let res = elements.filter((element: Eventable) => {
+      return "role" in element;
+    }) as IParticipant[];
+    return res.map(({ event }: { event: IEvent }) => {
+      return event.id as string;
+    });
   }
 
   loadMoreFutureParticipations(): void {
@@ -287,9 +458,12 @@ export default class MyEvents extends Vue {
     this.futureParticipations = this.futureParticipations.filter(
       (participation) => participation.event.id !== eventid
     );
-    this.pastParticipations = this.pastParticipations.filter(
-      (participation) => participation.event.id !== eventid
-    );
+    this.pastParticipations = {
+      elements: this.pastParticipations.elements.filter(
+        (participation) => participation.event.id !== eventid
+      ),
+      total: this.pastParticipations.total - 1,
+    };
   }
 
   get hideCreateEventButton(): boolean {
@@ -300,6 +474,8 @@ export default class MyEvents extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+@import "~bulma/sass/utilities/mixins.sass";
+
 main > .container {
   background: $white;
 
@@ -335,6 +511,7 @@ section {
 }
 
 .not-found {
+  margin-top: 2rem;
   .img-container {
     background-image: url("../../../public/img/pics/event_creation-480w.jpg");
     @media (min-resolution: 2dppx) {
@@ -359,4 +536,41 @@ section {
     margin: auto auto 1rem;
   }
 }
+
+.wrapper {
+  display: grid;
+  grid-template-areas: "filter" "events";
+  align-items: start;
+
+  @include desktop {
+    gap: 2rem;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "filter events";
+  }
+
+  .event-filter {
+    grid-area: filter;
+    background: lightgray;
+    border-radius: 5px;
+    padding: 0.75rem 1.25rem 0.25rem;
+
+    @include desktop {
+      padding: 2rem 1.25rem;
+      ::v-deep .field.is-grouped {
+        display: block;
+      }
+    }
+
+    ::v-deep .field > .field {
+      margin: 0 auto 1.25rem !important;
+    }
+
+    .date-filter ::v-deep .field-body {
+      display: block;
+    }
+  }
+  .my-events {
+    grid-area: events;
+  }
+}
 </style>