Introduce comments below events

Also add tomstones

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

js/src/views/Account/IdentityPicker.vue

@@ -7,7 +7,8 @@
             <div class="list is-hoverable">
                 <a class="list-item" v-for="identity in identities" :class="{ 'is-active': identity.id === currentIdentity.id }" @click="changeCurrentIdentity(identity)">
                     <div class="media">
-                        <img class="media-left image" v-if="identity.avatar" :src="identity.avatar.url" />
+                        <img class="media-left image" v-if="identity.avatar" :src="identity.avatar.url" alt="" />
+                        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
                         <div class="media-content">
                             <h3>@{{ identity.preferredUsername }}</h3>
                             <small>{{ identity.name }}</small>

js/src/views/Account/IdentityPickerWrapper.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="identity-picker">
-        <img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url"  :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
-        <b-button type="is-text" @click="isComponentModalActive = true">
-            {{ $t('Change') }}
-        </b-button>
+        <span v-if="inline" class="inline">
+            <img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url"  :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
+            <b-button type="is-text" @click="isComponentModalActive = true">
+                {{ $t('Change') }}
+            </b-button>
+        </span>
+        <span v-else class="block" @click="isComponentModalActive = true">
+            <img class="image is-48x48" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url"  :alt="currentIdentity.avatar.alt"/>
+            <b-icon v-else size="is-large" icon="account-circle" />
+        </span>
         <b-modal :active.sync="isComponentModalActive" has-modal-card>
             <identity-picker v-model="currentIdentity" @input="relay" />
         </b-modal>
@@ -19,6 +25,7 @@ import IdentityPicker from './IdentityPicker.vue';
 })
 export default class IdentityPickerWrapper extends Vue {
   @Prop() value!: IActor;
+  @Prop({ default: true, type: Boolean }) inline!: boolean;
   isComponentModalActive: boolean = false;
   currentIdentity: IActor = this.value;
 
@@ -36,9 +43,16 @@ export default class IdentityPickerWrapper extends Vue {
 }
 </script>
 <style lang="scss">
-    .identity-picker img.image {
-        display: inline;
-        height: 1.5em;
-        vertical-align: text-bottom;
+    .identity-picker {
+
+        .block {
+            cursor: pointer;
+        }
+
+        .inline img.image {
+            display: inline;
+            height: 1.5em;
+            vertical-align: text-bottom;
+        }
     }
 </style>

js/src/views/Event/Edit.vue

@@ -94,7 +94,7 @@
             <b-field :label="$t('Number of places')">
               <b-numberinput controls-position="compact" min="0" v-model="event.options.maximumAttendeeCapacity"></b-numberinput>
             </b-field>
-<!-- 
+<!--
             <b-field>
               <b-switch v-model="event.options.showRemainingAttendeeCapacity">
                 {{ $t('Show remaining number of places') }}
@@ -108,12 +108,10 @@
             </b-field> -->
           </div>
 
-          <!-- <h2 class="subtitle">
+          <h2 class="subtitle">
             {{ $t('Public comment moderation') }}
           </h2>
 
-          <label>{{ $t('Comments on the event page') }}</label>
-
           <div class="field">
             <b-radio v-model="event.options.commentModeration"
                      name="commentModeration"
@@ -122,13 +120,13 @@
             </b-radio>
           </div>
 
-          <div class="field">
-            <b-radio v-model="event.options.commentModeration"
-                     name="commentModeration"
-                     :native-value="CommentModeration.MODERATED">
-              {{ $t('Moderated comments (shown after approval)') }}
-            </b-radio>
-          </div>
+<!--          <div class="field">-->
+<!--            <b-radio v-model="event.options.commentModeration"-->
+<!--                     name="commentModeration"-->
+<!--                     :native-value="CommentModeration.MODERATED">-->
+<!--              {{ $t('Moderated comments (shown after approval)') }}-->
+<!--            </b-radio>-->
+<!--          </div>-->
 
           <div class="field">
             <b-radio v-model="event.options.commentModeration"
@@ -136,7 +134,7 @@
                      :native-value="CommentModeration.CLOSED">
               {{ $t('Close comments for all (except for admins)') }}
             </b-radio>
-          </div> -->
+          </div>
 
           <h2 class="subtitle">
             {{ $t('Status') }}
@@ -542,13 +540,17 @@ export default class EditEvent extends Vue {
     const pictureObj = buildFileVariable(this.pictureFile, 'picture');
     res = Object.assign({}, res, pictureObj);
 
-    if (this.event.picture) {
-      const oldPictureFile = await buildFileFromIPicture(this.event.picture) as File;
-      const oldPictureFileContent = await readFileAsync(oldPictureFile);
-      const newPictureFileContent = await readFileAsync(this.pictureFile as File);
-      if (oldPictureFileContent === newPictureFileContent) {
-        res.picture = { pictureId: this.event.picture.id };
+    try {
+      if (this.event.picture) {
+        const oldPictureFile = await buildFileFromIPicture(this.event.picture) as File;
+        const oldPictureFileContent = await readFileAsync(oldPictureFile);
+        const newPictureFileContent = await readFileAsync(this.pictureFile as File);
+        if (oldPictureFileContent === newPictureFileContent) {
+          res.picture = { pictureId: this.event.picture.id };
+        }
       }
+    } catch (e) {
+      console.error(e);
     }
     return res;
   }

js/src/views/Event/Event.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <transition appear name="fade" mode="out-in">
-      <div v-if="event">
+      <div>
         <div class="header-picture" v-if="event.picture" :style="`background-image: url('${event.picture.url}')`" />
         <div class="header-picture-default" v-else />
           <section>
@@ -160,7 +160,7 @@
               </div>
             </div>
           </section>
-          <div class="description">
+          <div class="description" :class="{ exists: event.description }">
             <div class="description-container container">
               <h3 class="title">
                 {{ $t('About this event') }}
@@ -174,6 +174,12 @@
               </div>
             </div>
           </div>
+        <section class="comments" ref="commentsObserver">
+          <a href="#comments">
+            <h3 class="title" id="comments">{{ $t('Comments') }}</h3>
+          </a>
+          <comment-tree v-if="loadComments" :event="event" />
+        </section>
         <section class="share" v-if="!event.draft">
           <div class="container">
             <div class="columns is-centered is-multiline">
@@ -199,7 +205,7 @@
               </div>
               <hr />
               <div class="column is-half-widescreen has-text-right add-to-calendar">
-                <img src="../../assets/undraw_events.svg" class="is-hidden-mobile is-hidden-tablet-only" />
+                <img src="../../assets/undraw_events.svg" class="is-hidden-mobile is-hidden-tablet-only" alt="" />
                 <h3 @click="downloadIcsEvent()">
                   {{ $t('Add to my calendar') }}
                 </h3>
@@ -247,7 +253,7 @@
 import { EVENT_PERSON_PARTICIPATION, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event';
 import { Component, Prop } from 'vue-property-decorator';
 import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
-import { EventStatus, EventVisibility, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
+import { EventModel, EventStatus, EventVisibility, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
 import { IPerson, Person } from '@/types/actor';
 import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
@@ -264,6 +270,8 @@ import ParticipationButton from '@/components/Event/ParticipationButton.vue';
 import { GraphQLError } from 'graphql';
 import { RouteName } from '@/router';
 import { Address } from '@/types/address.model';
+import CommentTree from '@/components/Comment/CommentTree.vue';
+import 'intersection-observer';
 
 @Component({
   components: {
@@ -275,6 +283,7 @@ import { Address } from '@/types/address.model';
     ReportModal,
     IdentityPicker,
     ParticipationButton,
+    CommentTree,
     // tslint:disable:space-in-parens
     'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
     // tslint:enable
@@ -328,7 +337,7 @@ import { Address } from '@/types/address.model';
 export default class Event extends EventMixin {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  event!: IEvent;
+  event: IEvent = new EventModel();
   currentActor!: IPerson;
   identity: IPerson = new Person();
   participations: IParticipant[] = [];
@@ -338,6 +347,8 @@ export default class Event extends EventMixin {
   EventVisibility = EventVisibility;
   EventStatus = EventStatus;
   RouteName = RouteName;
+  observer!: IntersectionObserver;
+  loadComments: boolean = false;
 
   get eventTitle() {
     if (!this.event) return undefined;
@@ -351,10 +362,24 @@ export default class Event extends EventMixin {
 
   mounted() {
     this.identity = this.currentActor;
+    if (this.$route.hash.includes('#comment-')) {
+      this.loadComments = true;
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry) {
+          this.loadComments = entry.isIntersecting || this.loadComments;
+        }
+      }
+    },                                       {
+      rootMargin: '-50px 0px -50px',
+    });
+    this.observer.observe(this.$refs.commentsObserver as Element);
 
     this.$watch('eventDescription', function (eventDescription) {
       if (!eventDescription) return;
-      const eventDescriptionElement = this.$refs['eventDescriptionElement'] as HTMLElement;
+      const eventDescriptionElement = this.$refs.eventDescriptionElement as HTMLElement;
 
       eventDescriptionElement.addEventListener('click', ($event) => {
         // TODO: Find the right type for target
@@ -404,8 +429,8 @@ export default class Event extends EventMixin {
         mutation: CREATE_REPORT,
         variables: {
           eventId: this.event.id,
-          reporterActorId: this.currentActor.id,
-          reportedActorId: this.event.organizerActor.id,
+          reporterId: this.currentActor.id,
+          reportedId: this.event.organizerActor.id,
           content,
         },
       });
@@ -845,19 +870,24 @@ export default class Event extends EventMixin {
   }
 
   h3.title {
-    font-size: 3rem;
-    font-weight: 300;
+      font-weight: 300;
   }
 
   .description {
-    padding-top: 10px;
-    min-height: 40rem;
+    padding: 10px 0;
+    min-height: 7rem;
+
+    &.exists {
+      min-height: 40rem;
+    }
 
     @media screen and (min-width: 1216px) {
       background-repeat: no-repeat;
       background-size: 600px;
       background-position: 95% 101%;
-      background-image: url('../../assets/texting.svg');
+      &.exists {
+        background-image: url('../../assets/texting.svg');
+      }
     }
     border-top: solid 1px #111;
     border-bottom: solid 1px #111;
@@ -906,8 +936,17 @@ export default class Event extends EventMixin {
     }
   }
 
+  .comments {
+    margin: 1rem auto 2rem;
+
+    a h3#comments {
+      margin-bottom: 5px;
+    }
+  }
+
   .share {
-    border-bottom: solid 1px #111;
+    border-bottom: solid 1px $primary;
+    border-top: solid 1px $primary;
 
     .diaspora span svg {
       height: 2rem;
@@ -917,7 +956,7 @@ export default class Event extends EventMixin {
     .columns {
 
       & > * {
-        padding: 10rem 0;
+        padding: 2rem 0;
       }
 
       h3 {
@@ -957,7 +996,7 @@ export default class Event extends EventMixin {
         }
 
         img {
-          max-width: 400px;
+          max-width: 250px;
         }
 
         &::before {
@@ -965,7 +1004,6 @@ export default class Event extends EventMixin {
           background: #B3B3B2;
           position: absolute;
           bottom: 25%;
-          left: 0;
           height: 40%;
           width: 1px;
         }

js/src/views/Moderation/Report.vue

@@ -4,68 +4,81 @@
         <div class="container" v-if="report">
             <nav class="breadcrumb" aria-label="breadcrumbs">
                 <ul>
-                    <li><router-link :to="{ name: RouteName.DASHBOARD }">Dashboard</router-link></li>
-                    <li><router-link :to="{ name: RouteName.REPORTS }">Reports</router-link></li>
-                    <li class="is-active"><router-link :to="{ name: RouteName.REPORT, params: { reportId: this.report.id} }" aria-current="page">Report</router-link></li>
+                    <li><router-link :to="{ name: RouteName.DASHBOARD }">{{ $t('Dashboard') }}</router-link></li>
+                    <li><router-link :to="{ name: RouteName.REPORTS }">{{ $t('Reports') }}</router-link></li>
+                    <li class="is-active"><router-link :to="{ name: RouteName.REPORT, params: { reportId: this.report.id} }" aria-current="page">{{ $t('Report') }}</router-link></li>
                 </ul>
             </nav>
             <div class="buttons">
-                <b-button v-if="report.status !== ReportStatusEnum.RESOLVED" @click="updateReport(ReportStatusEnum.RESOLVED)" type="is-primary">Mark as resolved</b-button>
-                <b-button v-if="report.status !== ReportStatusEnum.OPEN" @click="updateReport(ReportStatusEnum.OPEN)" type="is-success">Reopen</b-button>
-                <b-button v-if="report.status !== ReportStatusEnum.CLOSED" @click="updateReport(ReportStatusEnum.CLOSED)" type="is-danger">Close</b-button>
+                <b-button v-if="report.status !== ReportStatusEnum.RESOLVED" @click="updateReport(ReportStatusEnum.RESOLVED)" type="is-primary">{{ $t('Mark as resolved') }}</b-button>
+                <b-button v-if="report.status !== ReportStatusEnum.OPEN" @click="updateReport(ReportStatusEnum.OPEN)" type="is-success">{{ $t('Reopen') }}</b-button>
+                <b-button v-if="report.status !== ReportStatusEnum.CLOSED" @click="updateReport(ReportStatusEnum.CLOSED)" type="is-danger">{{ $t('Close') }}</b-button>
             </div>
-            <div class="columns">
-                <div class="column">
-                    <div class="table-container">
-                        <table class="box table is-striped">
-                            <tbody>
-                                <tr>
-                                    <td>Compte signalé</td>
-                                    <td>
-                                        <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reported.preferredUsername } }">
-                                            <img v-if="report.reported.avatar" class="image" :src="report.reported.avatar.url" /> @{{ report.reported.preferredUsername }}
-                                        </router-link>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Signalé par</td>
-                                    <td>
-                                        <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reporter.preferredUsername } }">
-                                            <img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }}
-                                        </router-link>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Signalé</td>
-                                    <td>{{ report.insertedAt | formatDateTimeString }}</td>
-                                </tr>
-                                <tr v-if="report.updatedAt !== report.insertedAt">
-                                    <td>Mis à jour</td>
-                                    <td>{{ report.updatedAt | formatDateTimeString }}</td>
-                                </tr>
-                                <tr>
-                                    <td>Statut</td>
-                                    <td>
-                                        <span v-if="report.status === ReportStatusEnum.OPEN">Ouvert</span>
-                                        <span v-else-if="report.status === ReportStatusEnum.CLOSED">Fermé</span>
-                                        <span v-else-if="report.status === ReportStatusEnum.RESOLVED">Résolu</span>
-                                        <span v-else>Inconnu</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <div class="column">
-                    <div class="box">
-                        <p v-if="report.content">{{ report.content }}</p>
-                        <p v-else>Pas de commentaire</p>
-                    </div>
-                </div>
+            <div class="table-container">
+                <table class="table is-striped is-fullwidth">
+                    <tbody>
+                        <tr>
+                            <td>{{ $t('Reported identity') }}</td>
+                            <td>
+                                <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reported.preferredUsername } }">
+                                    <img v-if="report.reported.avatar" class="image" :src="report.reported.avatar.url" /> @{{ report.reported.preferredUsername }}
+                                </router-link>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ $t('Reported by') }}</td>
+                            <td>
+                                <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reporter.preferredUsername } }">
+                                    <img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }}
+                                </router-link>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ $t('Reported')}}</td>
+                            <td>{{ report.insertedAt | formatDateTimeString }}</td>
+                        </tr>
+                        <tr v-if="report.updatedAt !== report.insertedAt">
+                            <td>{{ $t('Updated') }}</td>
+                            <td>{{ report.updatedAt | formatDateTimeString }}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ $t('Status') }}</td>
+                            <td>
+                                <span v-if="report.status === ReportStatusEnum.OPEN">{{ $t('Open') }}</span>
+                                <span v-else-if="report.status === ReportStatusEnum.CLOSED">{{ $t('Closed') }}</span>
+                                <span v-else-if="report.status === ReportStatusEnum.RESOLVED">{{ $t('Resolved') }}</span>
+                                <span v-else>{{ $t('Unknown') }}</span>
+                            </td>
+                        </tr>
+                        <tr v-if="report.event && report.comments.length > 0">
+                            <td>{{ $t('Event') }}</td>
+                            <td>
+                                <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid }}">{{ report.event.title }}</router-link>
+                                <span class="is-pulled-right">
+                                    <b-button
+                                            tag="router-link"
+                                            type="is-primary"
+                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"
+                                            icon-left="pencil"
+                                            size="is-small">{{ $t('Edit') }}</b-button>
+                                    <b-button
+                                            type="is-danger"
+                                            @click="confirmDelete()"
+                                            icon-left="delete"
+                                            size="is-small">{{ $t('Delete') }}</b-button>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
 
-            <div class="box" v-if="report.event">
+            <div class="box report-content">
+                <p v-if="report.content" v-html="nl2br(report.content)"></p>
+                <p v-else>{{ $t('No comment') }}</p>
+            </div>
+
+            <div class="box" v-if="report.event && report.comments.length === 0">
                 <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid }}">
                     <h3 class="title">{{ report.event.title }}</h3>
                     <p v-html="report.event.description"></p>
@@ -75,28 +88,50 @@
                         type="is-primary"
                         :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"
                         icon-left="pencil"
-                        size="is-small">Edit</b-button>
+                        size="is-small">{{ $t('Edit') }}</b-button>
                 <b-button
                         type="is-danger"
                         @click="confirmDelete()"
                         icon-left="delete"
-                        size="is-small">Delete</b-button>
+                        size="is-small">{{ $t('Delete') }}</b-button>
             </div>
 
-            <h2 class="title" v-if="report.notes.length > 0">Notes</h2>
+            <ul v-for="comment in report.comments" v-if="report.comments.length > 0">
+                <li>
+                    <div class="box" v-if="comment">
+                        <article class="media">
+                            <div class="media-left">
+                                <figure class="image is-48x48" v-if="comment.actor.avatar">
+                                    <img :src="comment.actor.avatar.url" alt="Image">
+                                </figure>
+                                <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+                            </div>
+                            <div class="media-content">
+                                <div class="content">
+                                    <strong>{{ comment.actor.name }}</strong> <small>@{{ comment.actor.preferredUsername }}</small>
+                                    <br>
+                                    <p v-html="comment.text"></p>
+                                </div>
+                            </div>
+                        </article>
+                    </div>
+                </li>
+            </ul>
+
+            <h2 class="title" v-if="report.notes.length > 0">{{ $t('Notes') }}</h2>
             <div class="box note" v-for="note in report.notes" :id="`note-${note.id}`">
                 <p>{{ note.content }}</p>
                 <router-link :to="{ name: RouteName.PROFILE, params: { name: note.moderator.preferredUsername } }">
-                    <img class="image" :src="note.moderator.avatar.url" /> @{{ note.moderator.preferredUsername }}
+                    <img alt="" class="image" :src="note.moderator.avatar.url" /> @{{ note.moderator.preferredUsername }}
                 </router-link><br />
                 <small><a :href="`#note-${note.id}`" v-if="note.insertedAt">{{ note.insertedAt | formatDateTimeString }}</a></small>
             </div>
 
             <form @submit="addNote()">
-                <b-field label="Nouvelle note">
+                <b-field :label="$t('New note')">
                     <b-input type="textarea" v-model="noteContent"></b-input>
                 </b-field>
-                <b-button type="submit" @click="addNote">Ajouter une note</b-button>
+                <b-button type="submit" @click="addNote">{{ $t('Ajouter une note') }}</b-button>
             </form>
         </div>
     </section>
@@ -110,6 +145,7 @@ import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IPerson } from '@/types/actor';
 import { DELETE_EVENT } from '@/graphql/event';
 import { uniq } from 'lodash';
+import { nl2br } from '@/utils/html';
 
 @Component({
   apollo: {
@@ -137,6 +173,7 @@ export default class Report extends Vue {
 
   ReportStatusEnum = ReportStatusEnum;
   RouteName = RouteName;
+  nl2br = nl2br;
 
   noteContent: string = '';
 
@@ -175,9 +212,9 @@ export default class Report extends Vue {
 
   confirmDelete() {
     this.$buefy.dialog.confirm({
-      title: 'Deleting event',
-      message: 'Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the conversation with the event creator or edit its event instead.',
-      confirmText: 'Delete Event',
+      title: this.$t('Deleting event') as string,
+      message: this.$t('Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the conversation with the event creator or edit its event instead.') as string,
+      confirmText: this.$t('Delete Event') as string,
       type: 'is-danger',
       hasIcon: true,
       onConfirm: () => this.deleteEvent(),
@@ -232,6 +269,7 @@ export default class Report extends Vue {
           store.writeQuery({ query: REPORT, variables: { id: this.report.id }, data: { report } });
         },
       });
+      await this.$router.push({ name: RouteName.REPORTS });
     } catch (error) {
       console.error(error);
     }
@@ -248,7 +286,9 @@ export default class Report extends Vue {
 
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
     .container li {
         margin: 10px auto;
     }
@@ -262,4 +302,8 @@ export default class Report extends Vue {
     .dialog .modal-card-foot {
         justify-content: flex-end;
     }
+
+    .report-content {
+        border-left: 4px solid $primary;
+    }
 </style>

js/src/views/Moderation/ReportList.vue

@@ -2,8 +2,8 @@
     <section class="container">
         <nav class="breadcrumb" aria-label="breadcrumbs">
             <ul>
-                <li><router-link :to="{ name: RouteName.DASHBOARD }">Dashboard</router-link></li>
-                <li class="is-active"><router-link :to="{ name: RouteName.REPORTS }" aria-current="page">Reports</router-link></li>
+                <li><router-link :to="{ name: RouteName.DASHBOARD }">{{ $t('Dashboard') }}</router-link></li>
+                <li class="is-active"><router-link :to="{ name: RouteName.REPORTS }" aria-current="page">{{ $t('Reports') }}</router-link></li>
             </ul>
         </nav>
         <b-field>