Front-end fixes and updates

Especially Join/Leave event, Vue-Markdown replacement

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

js/src/graphql/event.ts

@@ -5,7 +5,8 @@ const participantQuery = `
   actor {
     preferredUsername,
     avatarUrl,
-    name
+    name,
+    id
   }
 `;
 
@@ -117,23 +118,20 @@ export const EDIT_EVENT = gql`
 `;
 
 export const JOIN_EVENT = gql`
-  mutation JoinEvent($id: Int!, $actorId: Int!) {
+  mutation JoinEvent($eventId: Int!, $actorId: Int!) {
     joinEvent(
-      id: $id,
+      eventId: $eventId,
       actorId: $actorId
     ) {
-      actor {
         ${participantQuery}
-      },
-      role
     }
   }
 `;
 
 export const LEAVE_EVENT = gql`
-  mutation LeaveEvent($id: Int!, $actorId: Int!) {
+  mutation LeaveEvent($eventId: Int!, $actorId: Int!) {
     leaveEvent(
-      id: $id,
+      eventId: $eventId,
       actorId: $actorId
     ) {
       actor {

js/src/main.ts

@@ -2,7 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
 // import * as VueGoogleMaps from 'vue2-google-maps';
-import VueMarkdown from 'vue-markdown';
+import VueSimpleMarkdown from 'vue-simple-markdown';
 import Buefy from 'buefy'
 import 'buefy/dist/buefy.css';
 import GetTextPlugin from 'vue-gettext';
@@ -14,7 +14,7 @@ const translations = require('@/i18n/translations.json');
 
 Vue.config.productionTip = false;
 
-Vue.use(VueMarkdown);
+Vue.use(VueSimpleMarkdown);
 Vue.use(Buefy, {
   defaultContainerElement: '#mobilizon'
 });

js/src/router/user.ts

@@ -28,7 +28,8 @@ export const userRoutes = [
     path: '/register/profile',
     name: UserRouteName.REGISTER_PROFILE,
     component: RegisterProfile,
-    props: true,
+    // We can only pass string values through params, therefore
+    props: (route) => ({ email: route.params.email, userAlreadyActivated: route.params.userAlreadyActivated === 'true' }),
     meta: { requiredAuth: false },
   },
   {
@@ -56,8 +57,7 @@ export const userRoutes = [
     path: '/validate/:token',
     name: UserRouteName.VALIDATE,
     component: Validate,
-    // We can only pass string values through params, therefore
-    props: (route) => ({ email: route.params.email, userAlreadyActivated: route.params.userAlreadyActivated === 'true' }),
+    props: true,
     meta: { requiresAuth: false },
   },
   {

js/src/views/Account/Register.vue

@@ -12,16 +12,6 @@
         <div class="columns is-mobile">
           <div class="column">
             <form v-if="!validationSent">
-              <div class="columns is-mobile is-centered">
-                <div class="column is-narrow">
-                  <figure class="image is-64x64">
-                    <transition name="avatar">
-                      <v-gravatar v-bind="{email: email}" default-img="mp"></v-gravatar>
-                    </transition>
-                  </figure>
-                </div>
-              </div>
-
               <b-field
                 :label="$gettext('Username')"
                 :type="errors.preferred_username ? 'is-danger' : null"

js/src/views/Event/Create.vue

@@ -34,18 +34,13 @@ import {EventJoinOptions} from "../../types/event.model";
 
 <script lang="ts">
     // import Location from '@/components/Location';
-    import VueMarkdown from "vue-markdown";
     import {CREATE_EVENT, EDIT_EVENT} from "@/graphql/event";
     import {Component, Prop, Vue} from "vue-property-decorator";
     import {Category, EventJoinOptions, EventStatus, EventVisibility, IEvent} from "@/types/event.model";
     import {LOGGED_PERSON} from "@/graphql/actor";
     import {IPerson} from "@/types/actor.model";
 
-    @Component({
-  components: {
-    VueMarkdown
-  }
-})
+@Component({})
 export default class CreateEvent extends Vue {
   @Prop({ required: false, type: String }) uuid!: string;
 

js/src/views/Event/Event.vue

@@ -47,15 +47,22 @@
             <span>{{ event.begins_on | formatDate }} - {{ event.ends_on | formatDate }}</span>
           </div>
           <p v-if="actorIsOrganizer()">
-            <translate>Vous êtes organisateur de cet événement.</translate>
+            <translate>You are an organizer.</translate>
           </p>
           <div v-else>
             <p v-if="actorIsParticipant()">
-              <translate>Vous avez annoncé aller à cet événement.</translate>
+              <translate>You announced that you're going to this event.</translate>
             </p>
             <p v-else>
-              Vous y allez ?
-              <span>{{ event.participants.length }} personnes y vont.</span>
+              <translate>Are you going to this event?</translate><br />
+              <span>
+                <translate
+                        :translate-n="event.participants.length"
+                        translate-plural="%{event.participants.length} persons are going"
+                >
+                  One person is going.
+                </translate>
+              </span>
             </p>
           </div>
           <div v-if="!actorIsOrganizer()">
@@ -66,7 +73,7 @@
           </div>
           <h2 class="subtitle">Details</h2>
           <p v-if="event.description">
-            <vue-markdown :source="event.description"></vue-markdown>
+            <vue-simple-markdown :source="event.description"></vue-simple-markdown>
           </p>
           <h2 class="subtitle">Participants</h2>
           <span v-if="event.participants.length === 0">No participants yet.</span>
@@ -99,15 +106,10 @@ import { LOGGED_PERSON } from '@/graphql/actor';
 import { IEvent, IParticipant } from '@/types/event.model';
 import { JOIN_EVENT } from '@/graphql/event';
 import { IPerson } from '@/types/actor.model';
-import { RouteName } from '@/router'
-
-// No typings for this component, so we use require
-const VueMarkdown = require('vue-markdown');
+import { RouteName } from '@/router';
+import 'vue-simple-markdown/dist/vue-simple-markdown.css';
 
 @Component({
-  components: {
-    VueMarkdown
-  },
   apollo: {
     event: {
       query: FETCH_EVENT,
@@ -152,13 +154,13 @@ export default class Event extends Vue {
       await this.$apollo.mutate<IParticipant>({
         mutation: JOIN_EVENT,
         variables: {
-          id: this.event.id,
+          eventId: this.event.id,
           actorId: this.loggedPerson.id,
         },
         update: (store, { data: { joinEvent } }) => {
           const event = store.readQuery<IEvent>({ query: FETCH_EVENT });
           if (event === null) {
-            console.error('Cannot update event participant cache, because of null value.')
+            console.error('Cannot update event participant cache, because of null value.');
             return
           }
 
@@ -177,7 +179,7 @@ export default class Event extends Vue {
       await this.$apollo.mutate<IParticipant>({
         mutation: LEAVE_EVENT,
         variables: {
-          id: this.event.id,
+          eventId: this.event.id,
           actorId: this.loggedPerson.id,
         },
         update: (store, { data: { leaveEvent } }) => {

js/src/views/Event/EventList.vue

@@ -19,17 +19,14 @@
 </template>
 
 <script lang="ts">
-import ngeohash from 'ngeohash';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { RouteName } from '@/router';
 
-// VueMarkdown is untyped
-const VueMarkdown = require('vue-markdown');
+const ngeohash = require('ngeohash');
 
 @Component({
   components: {
-    VueMarkdown,
     EventCard
   }
 })

js/src/views/Group/Create.vue

@@ -28,14 +28,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
-// VueMarkdown is untyped
-const VueMarkdown = require('vue-markdown')
-
-@Component({
-  components: {
-    VueMarkdown
-  }
-})
+@Component({})
 export default class CreateGroup extends Vue {
   e1 = 0;
   // FIXME: correctly type group