Work on dashboard

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

js/src/views/Account/children/EditIdentity.vue

@@ -30,6 +30,7 @@
           has-icon
           aria-close-label="Close notification"
           role="alert"
+          :key="error"
           v-for="error in errors"
     >
     {{ error }}

js/src/views/Event/Event.vue

@@ -69,7 +69,7 @@
                   </router-link>
                 </p>
                 <p class="control" v-if="actorIsOrganizer()">
-                  <a class="button is-danger" @click="openDeleteEventModal()">
+                  <a class="button is-danger" @click="openDeleteEventModalWrapper">
                     {{ $t('Delete') }}
                   </a>
                 </p>
@@ -111,7 +111,7 @@
                     <img
                             class="is-rounded"
                             :src="event.organizerActor.avatar.url"
-                            :alt="$t("{actor}'s avatar", {actor: event.organizerActor.preferredUsername})" />
+                            :alt="event.organizerActor.avatar.alt" />
                   </figure>
                 </actor-link>
               </div>
@@ -262,6 +262,7 @@ import ReportModal from '@/components/Report/ReportModal.vue';
 import ParticipationModal from '@/components/Event/ParticipationModal.vue';
 import { IReport } from '@/types/report.model';
 import { CREATE_REPORT } from '@/graphql/report';
+import EventMixin from '@/mixins/event';
 
 @Component({
   components: {
@@ -290,7 +291,7 @@ import { CREATE_REPORT } from '@/graphql/report';
     },
   },
 })
-export default class Event extends Vue {
+export default class Event extends EventMixin {
   @Prop({ type: String, required: true }) uuid!: string;
 
   event!: IEvent;
@@ -302,31 +303,12 @@ export default class Event extends Vue {
 
   EventVisibility = EventVisibility;
 
-  async openDeleteEventModal () {
-    const participantsLength = this.event.participants.length;
-    const prefix = participantsLength
-            ? this.$tc('There are {participants} participants.', this.event.participants.length, {
-              participants: this.event.participants.length,
-            })
-            : '';
-
-    this.$buefy.dialog.prompt({
-      type: 'is-danger',
-      title: this.$t('Delete event') as string,
-      message: `${prefix}
-        ${this.$t('Are you sure you want to delete this event? This action cannot be reverted.')}
-        <br><br>
-        ${this.$t('To confirm, type your event title "{eventTitle}"', { eventTitle: this.event.title })}`,
-      confirmText: this.$t(
-              'Delete {eventTitle}',
-              { eventTitle: this.event.title },
-      ) as string,
-      inputAttrs: {
-        placeholder: this.event.title,
-        pattern: this.event.title,
-      },
-      onConfirm: () => this.deleteEvent(),
-    });
+  /**
+   * Delete the event, then redirect to home.
+   */
+  async openDeleteEventModalWrapper() {
+    await this.openDeleteEventModal(this.event, this.currentActor);
+    await this.$router.push({ name: RouteName.HOME });
   }
 
   async reportEvent(content: string, forward: boolean) {
@@ -464,31 +446,6 @@ export default class Event extends Vue {
     return `mailto:?to=&body=${this.event.url}${encodeURIComponent('\n\n')}${this.event.description}&subject=${this.event.title}`;
   }
 
-  private async deleteEvent() {
-    const router = this.$router;
-    const eventTitle = this.event.title;
-
-    try {
-      await this.$apollo.mutate<IParticipant>({
-        mutation: DELETE_EVENT,
-        variables: {
-          eventId: this.event.id,
-          actorId: this.currentActor.id,
-        },
-      });
-
-      await router.push({ name: RouteName.HOME });
-      this.$buefy.notification.open({
-        message: this.$t('Event {eventTitle} deleted', { eventTitle }) as string,
-        type: 'is-success',
-        position: 'is-bottom-right',
-        duration: 5000,
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
 }
 </script>
 <style lang="scss" scoped>

js/src/views/Event/MyEvents.vue

@@ -0,0 +1,201 @@
+<template>
+    <main class="container">
+        <h1 class="title">
+            {{ $t('My events') }}
+        </h1>
+        <b-loading :active.sync="$apollo.loading"></b-loading>
+        <section v-if="futureParticipations.length > 0">
+            <h2 class="subtitle">
+                {{ $t('Upcoming') }}
+            </h2>
+            <transition-group name="list" tag="p">
+                <div v-for="month in monthlyFutureParticipations" :key="month[0]">
+                    <h3>{{ month[0] }}</h3>
+                    <EventListCard
+                            v-for="participation in month[1]"
+                            :key="`${participation.event.uuid}${participation.actor.id}`"
+                            :participation="participation"
+                            :options="{ hideDate: false }"
+                            @eventDeleted="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>
+        </section>
+        <section v-if="pastParticipations.length > 0">
+            <h2 class="subtitle">
+                {{ $t('Past events') }}
+            </h2>
+            <transition-group name="list" tag="p">
+                <div v-for="month in monthlyPastParticipations" :key="month[0]">
+                    <h3>{{ month[0] }}</h3>
+                    <EventListCard
+                            v-for="participation in month[1]"
+                            :key="`${participation.event.uuid}${participation.actor.id}`"
+                            :participation="participation"
+                            :options="{ hideDate: false }"
+                            @eventDeleted="eventDeleted"
+                            class="participation"
+                    />
+                </div>
+            </transition-group>
+            <div class="columns is-centered">
+                <b-button class="column is-narrow"
+                          v-if="hasMorePastParticipations && (pastParticipations.length === limit)" @click="loadMorePastParticipations" size="is-large" type="is-primary">{{ $t('Load more') }}</b-button>
+            </div>
+        </section>
+        <b-message v-if="futureParticipations.length === 0 && pastParticipations.length === 0 && $apollo.loading === false" type="is-danger">
+            {{ $t('No events found') }}
+        </b-message>
+    </main>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
+import { IParticipant, Participant } from '@/types/event.model';
+import EventListCard from '@/components/Event/EventListCard.vue';
+
+
+@Component({
+  components: {
+    EventListCard,
+  },
+  apollo: {
+    futureParticipations: {
+      query: LOGGED_USER_PARTICIPATIONS,
+      variables: {
+        page: 1,
+        limit: 10,
+        afterDateTime: (new Date()).toISOString(),
+      },
+      update: data => data.loggedUser.participations.map(participation => new Participant(participation)),
+    },
+    pastParticipations: {
+      query: LOGGED_USER_PARTICIPATIONS,
+      variables: {
+        page: 1,
+        limit: 10,
+        beforeDateTime: (new Date()).toISOString(),
+      },
+      update: data => data.loggedUser.participations.map(participation => new Participant(participation)),
+    },
+  },
+})
+export default class MyEvents extends Vue {
+  @Prop(String) location!: string;
+
+  futurePage: number = 1;
+  pastPage: number = 1;
+  limit: number = 10;
+
+  futureParticipations: IParticipant[] = [];
+  hasMoreFutureParticipations: boolean = true;
+
+  pastParticipations: IParticipant[] = [];
+  hasMorePastParticipations: boolean = true;
+
+  private monthlyParticipations(participations: IParticipant[]): Map<string, Participant[]> {
+    const res = participations.filter(({ event }) => event.beginsOn != null);
+    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' });
+      const participations: IParticipant[] = acc.get(month) || [];
+      participations.push(participation);
+      acc.set(month, participations);
+      return acc;
+    },                new Map());
+  }
+
+  get monthlyFutureParticipations(): Map<string, Participant[]> {
+    return this.monthlyParticipations(this.futureParticipations);
+  }
+
+  get monthlyPastParticipations(): Map<string, Participant[]> {
+    return this.monthlyParticipations(this.pastParticipations);
+  }
+
+  loadMoreFutureParticipations() {
+    this.futurePage += 1;
+    this.$apollo.queries.futureParticipations.fetchMore({
+      // New variables
+      variables: {
+        page: this.futurePage,
+        limit: this.limit,
+      },
+      // Transform the previous result with new data
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        const newParticipations = fetchMoreResult.loggedUser.participations;
+        this.hasMoreFutureParticipations = newParticipations.length === this.limit;
+
+        return {
+          loggedUser: {
+            __typename: previousResult.loggedUser.__typename,
+            participations: [...previousResult.loggedUser.participations, ...newParticipations],
+          },
+        };
+      },
+    });
+  }
+
+  loadMorePastParticipations() {
+    this.pastPage += 1;
+    this.$apollo.queries.pastParticipations.fetchMore({
+            // New variables
+      variables: {
+        page: this.pastPage,
+        limit: this.limit,
+      },
+            // Transform the previous result with new data
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        const newParticipations = fetchMoreResult.loggedUser.participations;
+        this.hasMorePastParticipations = newParticipations.length === this.limit;
+
+        return {
+          loggedUser: {
+            __typename: previousResult.loggedUser.__typename,
+            participations: [...previousResult.loggedUser.participations, ...newParticipations],
+          },
+        };
+      },
+    });
+  }
+
+  eventDeleted(eventid) {
+    this.futureParticipations = this.futureParticipations.filter(participation => participation.event.id !== eventid);
+    this.pastParticipations = this.pastParticipations.filter(participation => participation.event.id !== eventid);
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+    @import "../../variables";
+
+    .participation {
+        margin: 1rem auto;
+    }
+
+    section {
+        margin: 3rem auto;
+
+        & > h2 {
+            display: block;
+            color: $primary;
+            font-size: 3rem;
+            text-decoration: underline;
+            text-decoration-color: $secondary;
+        }
+
+        h3 {
+            margin-top: 2rem;
+            font-weight: bold;
+        }
+    }
+</style>

js/src/views/Home.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="container" v-if="config">
-    <section class="hero is-link" v-if="!currentUser.id || !loggedPerson">
+    <section class="hero is-link" v-if="!currentUser.id || !currentActor">
       <div class="hero-body">
-        <div class="container">
+        <div>
           <h1 class="title">{{ config.name }}</h1>
           <h2 class="subtitle">{{ config.description }}</h2>
           <router-link class="button" :to="{ name: 'Register' }" v-if="config.registrationsOpen">
@@ -16,7 +16,7 @@
     </section>
     <section v-else>
       <h1>
-        {{ $t('Welcome back {username}', {username: loggedPerson.preferredUsername}) }}
+        {{ $t('Welcome back {username}', {username: `@${currentActor.preferredUsername}`}) }}
       </h1>
     </section>
     <b-dropdown aria-role="list">
@@ -24,7 +24,7 @@
         <span>{{ $t('Create') }}</span>
         <b-icon icon="menu-down"></b-icon>
       </button>
-
+.organizerActor.id
       <b-dropdown-item aria-role="listitem">
         <router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
       </b-dropdown-item>
@@ -32,14 +32,14 @@
         <router-link :to="{ name: RouteName.CREATE_GROUP }">{{ $t('Group') }}</router-link>
       </b-dropdown-item>
     </b-dropdown>
-    <section v-if="loggedPerson" class="container">
-      <span class="events-nearby title">
-        {{ $t("Events you're going at") }}
-      </span>
+    <section v-if="currentActor" class="container">
+      <h3 class="title">
+        {{ $t("Upcoming") }}
+      </h3>
       <b-loading :active.sync="$apollo.loading"></b-loading>
-      <div v-if="goingToEvents.size > 0" v-for="row in Array.from(goingToEvents.entries())">
-        <!--   Iterators will be supported in v-for with VueJS 3     -->
-        <date-component :date="row[0]"></date-component>
+      <div v-if="goingToEvents.size > 0" v-for="row in goingToEvents" class="upcoming-events">
+        <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
+          <date-component :date="row[0]"></date-component>
           <h3 class="subtitle"
             v-if="isToday(row[0])">
             {{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
@@ -49,24 +49,42 @@
             {{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
           </h3>
           <h3 class="subtitle"
-              v-else>
+              v-else-if="isInLessThanSevenDays(row[0])">
               {{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
           </h3>
-        <div class="columns">
-          <EventCard
-                  v-for="event in row[1]"
-                  :key="event.uuid"
-                  :event="event"
-                  :options="{loggedPerson: loggedPerson}"
-                  class="column is-one-quarter-desktop is-half-mobile"
+        </span>
+        <div class="level">
+          <EventListCard
+                  v-for="participation in row[1]"
+                  v-if="isInLessThanSevenDays(row[0])"
+                  :key="participation[1].event.uuid"
+                  :participation="participation[1]"
+                  class="level-item"
           />
         </div>
       </div>
       <b-message v-else type="is-danger">
         {{ $t("You're not going to any event yet") }}
       </b-message>
+      <span class="view-all">
+        <router-link :to=" { name: EventRouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
+      </span>
     </section>
-    <section class="container">
+    <section v-if="currentActor && lastWeekEvents.length > 0">
+      <h3 class="title">
+        {{ $t("Last week") }}
+      </h3>
+      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <div class="level">
+          <EventListCard
+                  v-for="participation in lastWeekEvents"
+                  :key="participation.event.uuid"
+                  :participation="participation"
+                  class="level-item"
+          />
+      </div>
+    </section>
+    <section>
       <h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <div v-if="events.length > 0" class="columns is-multiline">
@@ -87,16 +105,18 @@
 import ngeohash from 'ngeohash';
 import { FETCH_EVENTS } from '@/graphql/event';
 import { Component, Vue } from 'vue-property-decorator';
+import EventListCard from '@/components/Event/EventListCard.vue';
 import EventCard from '@/components/Event/EventCard.vue';
-import { LOGGED_PERSON_WITH_GOING_TO_EVENTS } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import { ICurrentUser } from '@/types/current-user.model';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
 import { RouteName } from '@/router';
-import { IEvent } from '@/types/event.model';
+import { EventModel, IEvent, IParticipant, Participant } from '@/types/event.model';
 import DateComponent from '@/components/Event/DateCalendarIcon.vue';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
+import { EventRouteName } from '@/router/event';
 
 @Component({
   apollo: {
@@ -104,8 +124,8 @@ import { IConfig } from '@/types/config.model';
       query: FETCH_EVENTS,
       fetchPolicy: 'no-cache', // Debug me: https://github.com/apollographql/apollo-client/issues/3030
     },
-    loggedPerson: {
-      query: LOGGED_PERSON_WITH_GOING_TO_EVENTS,
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
     },
     currentUser: {
       query: CURRENT_USER_CLIENT,
@@ -116,6 +136,7 @@ import { IConfig } from '@/types/config.model';
   },
   components: {
     DateComponent,
+    EventListCard,
     EventCard,
   },
 })
@@ -124,10 +145,12 @@ export default class Home extends Vue {
   locations = [];
   city = { name: null };
   country = { name: null };
-  loggedPerson: IPerson = new Person();
+  currentUserParticipations: IParticipant[] = [];
   currentUser!: ICurrentUser;
+  currentActor!: IPerson;
   config: IConfig = { description: '', name: '', registrationsOpen: false };
   RouteName = RouteName;
+  EventRouteName = EventRouteName;
 
   // get displayed_name() {
   //   return this.loggedPerson && this.loggedPerson.name === null
@@ -135,7 +158,23 @@ export default class Home extends Vue {
   //     : this.loggedPerson.name;
   // }
 
-  isToday(date: string) {
+  async mounted() {
+    const lastWeek = new Date();
+    lastWeek.setDate(new Date().getDate() - 7);
+
+    const { data } = await this.$apollo.query({
+      query: LOGGED_USER_PARTICIPATIONS,
+      variables: {
+        afterDateTime: lastWeek.toISOString(),
+      },
+    });
+
+    if (data) {
+      this.currentUserParticipations = data.loggedUser.participations.map(participation => new Participant(participation));
+    }
+  }
+
+  isToday(date: Date) {
     return (new Date(date)).toDateString() === (new Date()).toDateString();
   }
 
@@ -148,35 +187,43 @@ export default class Home extends Vue {
   }
 
   isBefore(date: string, nbDays: number) :boolean {
-    return this.calculateDiffDays(date) > nbDays;
+    return this.calculateDiffDays(date) < nbDays;
   }
 
-  // FIXME: Use me
   isInLessThanSevenDays(date: string): boolean {
-    return this.isInDays(date, 7);
+    return this.isBefore(date, 7);
   }
 
   calculateDiffDays(date: string): number {
-    const dateObj = new Date(date);
-    return Math.ceil((dateObj.getTime() - (new Date()).getTime()) / 1000 / 60 / 60 / 24);
+    return Math.ceil(((new Date(date)).getTime() - (new Date()).getTime()) / 1000 / 60 / 60 / 24);
   }
 
-  get goingToEvents(): Map<string, IEvent[]> {
-    const res = this.$data.loggedPerson.goingToEvents.filter((event) => {
-      return event.beginsOn != null && this.isBefore(event.beginsOn, 0);
+  get goingToEvents(): Map<string, Map<string, IParticipant>> {
+    const res = this.currentUserParticipations.filter(({ event }) => {
+      return event.beginsOn != null && !this.isBefore(event.beginsOn.toDateString(), 0);
     });
     res.sort(
-            (a: IEvent, b: IEvent) => new Date(a.beginsOn) > new Date(b.beginsOn),
+            (a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime(),
     );
-    return res.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
-      const day = (new Date(event.beginsOn)).toDateString();
-      const events: IEvent[] = acc.get(day) || [];
-      events.push(event);
-      acc.set(day, events);
+    return res.reduce((acc: Map<string, Map<string, IParticipant>>, participation: IParticipant) => {
+      const day = (new Date(participation.event.beginsOn)).toDateString();
+      const participations: Map<string, IParticipant> = acc.get(day) || new Map();
+      participations.set(participation.event.uuid, participation);
+      acc.set(day, participations);
       return acc;
     },                new Map());
   }
 
+  get lastWeekEvents() {
+    const res = this.currentUserParticipations.filter(({ event }) => {
+      return event.beginsOn != null && this.isBefore(event.beginsOn.toDateString(), 0);
+    });
+    res.sort(
+          (a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime(),
+      );
+    return res;
+  }
+
   geoLocalize() {
     const router = this.$router;
     const sessionCity = sessionStorage.getItem('City');
@@ -226,7 +273,7 @@ export default class Home extends Vue {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="scss">
 .search-autocomplete {
   border: 1px solid #dbdbdb;
   color: rgba(0, 0, 0, 0.87);
@@ -235,4 +282,34 @@ export default class Home extends Vue {
 .events-nearby {
   margin: 25px auto;
 }
+
+.date-component-container {
+  display: flex;
+  align-items: center;
+  margin: 1.5rem auto;
+
+  h3.subtitle {
+    margin-left: 7px;
+  }
+}
+
+  .upcoming-events {
+    .level {
+      margin-left: 4rem;
+    }
+  }
+
+    section.container {
+        margin: auto auto 3rem;
+    }
+
+  span.view-all {
+    display: block;
+    margin-top: 2rem;
+    text-align: right;
+
+    a {
+      text-decoration: underline;
+    }
+  }
 </style>

js/src/views/User/Login.vue

@@ -65,7 +65,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { LOGIN } from '@/graphql/auth';
 import { validateEmailField, validateRequiredField } from '@/utils/validators';
-import { saveUserData } from '@/utils/auth';
+import { initializeCurrentActor, saveUserData } from '@/utils/auth';
 import { ILogin } from '@/types/login.model';
 import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { onLogin } from '@/vue-apollo';
@@ -146,6 +146,7 @@ export default class Login extends Vue {
           role: data.login.user.role,
         },
       });
+      await initializeCurrentActor(this.$apollo.provider.defaultClient);
 
       onLogin(this.$apollo);
 

js/src/views/User/PasswordReset.vue

@@ -6,7 +6,7 @@
       </h1>
       <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
       <form @submit="resetAction">
-        <b-field label="Password">
+        <b-field :label="$t('Password')">
           <b-input
             aria-required="true"
             required
@@ -16,7 +16,7 @@
             v-model="credentials.password"
           />
         </b-field>
-        <b-field label="Password (confirmation)">
+        <b-field :label="$t('Password (confirmation)')">
           <b-input
             aria-required="true"
             required

js/src/views/User/Register.vue

@@ -39,7 +39,7 @@
           <div class="column">
             <form @submit="submit">
               <b-field
-                label="Email"
+                :label="$t('Email')"
                 :type="errors.email ? 'is-danger' : null"
                 :message="errors.email"
               >
@@ -54,7 +54,7 @@
               </b-field>
 
               <b-field
-                label="Password"
+                :label="$t('Password')"
                 :type="errors.password ? 'is-danger' : null"
                 :message="errors.password"
               >