Fix participations list actions with another identity

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

js/src/components/Event/EventCard.vue

@@ -76,17 +76,10 @@ A simple card for an event
 </template>
 
 <script lang="ts">
-import { IEvent, ParticipantRole } from '@/types/event.model';
+import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { IActor, IPerson, Person } from '@/types/actor';
+import { Person } from '@/types/actor';
-
-export interface IEventCardOptions {
-  hideDate: boolean;
-  loggedPerson: IPerson | boolean;
-  hideDetails: boolean;
-  organizerActor: IActor | null;
-}
 
 @Component({
   components: {

js/src/components/Event/EventListCard.vue

@@ -60,35 +60,37 @@ export default {
           </div>
           <h2 class="title">{{ participation.event.title }}</h2>
         </div>
-        <div>
+        <div class="participation-actor has-text-grey">
           <span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span>
-          <span v-if="participation.actor.id === participation.event.organizerActor.id">{{ $t("You're organizing this event") }}</span>
+          <span>
-          <span v-else>
+            {{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span>
-            <span v-if="participation.event.beginsOn < new Date()">{{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span>
+            <span v-if="participation.role === ParticipantRole.PARTICIPANT">{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
-            |
-            <span>{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
           </span>
         </div>
         <div class="columns">
           <span class="column is-narrow">
             <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
-            <b-icon icon="lock_opened" v-if=" participation.event.visibility === EventVisibility.RESTRICTED" />
+            <b-icon icon="lock-open" v-if="participation.event.visibility === EventVisibility.UNLISTED" />
             <b-icon icon="lock" v-if="participation.event.visibility === EventVisibility.PRIVATE" />
           </span>
-          <span class="column">
+          <span class="column is-narrow participant-stats">
-            <span v-if="!participation.event.options.maximumAttendeeCapacity">
+<!--            <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">-->
-              {{ $tc('{count} participants', participation.event.participantStats.approved, { count: participation.event.participantStats.approved })}}
+<!--              {{ $tc('{count} participants', participation.event.participantStats.participants, { count: participation.event.participantStats.participants })}}-->
+<!--            </span>-->
+            <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
+              {{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.participants, total: participation.event.options.maximumAttendeeCapacity }) }}
+<!--              <b-progress-->
+<!--                      v-if="participation.event.options.maximumAttendeeCapacity > 0"-->
+<!--                      size="is-medium"-->
+<!--                      :value="participation.event.participantStats.participants * 100 / participation.event.options.maximumAttendeeCapacity">-->
+<!--              </b-progress>-->
             </span>
-            <b-progress
+            <span v-else>{{ $t('No participants yet') }}</span>
-                    v-if="participation.event.options.maximumAttendeeCapacity > 0"
-                    type="is-primary"
-                    size="is-medium"
-                    :value="participation.event.participantStats.approved * 100 / participation.event.options.maximumAttendeeCapacity" show-value>
-              {{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.approved, total: participation.event.options.maximumAttendeeCapacity }) }}
-            </b-progress>
             <span
               v-if="participation.event.participantStats.unapproved > 0">
+              <b-button type="is-text" @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })">
                 {{ $tc('{count} requests waiting', participation.event.participantStats.unapproved, { count: participation.event.participantStats.unapproved })}}
+              </b-button>
             </span>
           </span>
         </div>
@@ -96,20 +98,36 @@ export default {
       <div class="actions column is-narrow">
         <ul>
           <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
-            <router-link :to="{ name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid }  }">
+            <b-button
-              <b-icon icon="pencil" /> {{ $t('Edit') }}
+                    type="is-text"
-            </router-link>
+                    @click="gotToWithCheck(participation, { name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid }  })"
+                    icon-left="pencil"
+            >
+              {{ $t('Edit') }}
+            </b-button>
+          </li>
+          <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))" @click="openDeleteEventModalWrapper">
+            <b-button type="is-text" icon-left="delete">
+              {{ $t('Delete') }}
+            </b-button>
           </li>
           <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
-            <a @click="openDeleteEventModalWrapper"><b-icon icon="delete" /> {{ $t('Delete') }}</a>
+            <b-button
-          </li>
+                    type="is-text"
-          <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
+                    @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })"
-            <router-link :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } }">
+                    icon-left="account-multiple-plus"
-              <b-icon icon="account-multiple-plus" /> {{ $t('Manage participations') }}
+            >
-            </router-link>
+              {{ $t('Manage participations') }}
+            </b-button>
           </li>
           <li>
-            <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"><b-icon icon="view-compact" /> {{ $t('View event page') }}</router-link>
+            <b-button
+              tag="router-link"
+              icon-left="view-compact"
+              type="is-text"
+              :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
+              {{ $t('View event page') }}
+            </b-button>
           </li>
         </ul>
       </div>
@@ -118,17 +136,17 @@ export default {
 </template>
 
 <script lang="ts">
-import { IParticipant, ParticipantRole, EventVisibility } from '@/types/event.model';
+import { IParticipant, ParticipantRole, EventVisibility, IEventCardOptions } from '@/types/event.model';
 import { Component, Prop } from 'vue-property-decorator';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { IActor, IPerson, Person } from '@/types/actor';
+import { IPerson } from '@/types/actor';
 import { mixins } from 'vue-class-component';
 import ActorMixin from '@/mixins/actor';
-import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import EventMixin from '@/mixins/event';
 import { RouteName } from '@/router';
-import { ICurrentUser } from '@/types/current-user.model';
+import { changeIdentity } from '@/utils/auth';
-import { IEventCardOptions } from './EventCard.vue';
+import { Route } from 'vue-router';
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
@@ -174,10 +192,26 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
     await this.openDeleteEventModal(this.participation.event, this.currentActor);
   }
 
+  async gotToWithCheck(participation: IParticipant, route: Route) {
+    if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
+      const organizer = participation.event.organizerActor as IPerson;
+      await changeIdentity(this.$apollo.provider.defaultClient, organizer);
+      this.$buefy.notification.open({
+        message: this.$t('Current identity has been changed to {identityName} in order to manage this event.', {
+          identityName: organizer.preferredUsername,
+        }) as string,
+        type: 'is-info',
+        position: 'is-bottom-right',
+        duration: 5000,
+      });
+    }
+    return await this.$router.push(route);
+  }
+
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @import "../../variables";
 
   article.box {
@@ -205,6 +239,15 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
     div.content {
       padding: 5px;
 
+      .participation-actor span, .participant-stats span {
+        padding: 0 5px;
+
+        button {
+          height: auto;
+          padding-top: 0;
+        }
+      }
+
       div.title-wrapper {
         display: flex;
         align-items: center;
@@ -227,14 +270,29 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
         }
       }
 
-      progress + .progress-value {
+      /deep/ progress + .progress-value {
-        color: $primary !important;
+        color: lighten($primary, 20%) !important;
       }
     }
 
     .actions {
       ul li {
         margin: 0 auto;
+        .is-link {
+          cursor: pointer;
+        }
+
+        .button.is-text {
+          text-decoration: none;
+
+          /deep/ span:first-child i.mdi::before {
+            font-size: 24px !important;
+          }
+
+          /deep/ span:last-child {
+            padding-left: 4px;
+          }
+        }
 
         * {
           font-size: 0.8rem;

js/src/components/NavBar.vue

@@ -20,7 +20,7 @@
           <figure class="image is-32x32" v-if="currentActor.avatar">
             <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
           </figure>
-          <span>{{ currentActor.preferredUsername }}</span>
+          <b-icon v-else icon="account-circle" />
         </template>
 
         <b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id">
@@ -29,10 +29,14 @@
               <figure class="image is-32x32" v-if="identity.avatar">
                 <img class="is-rounded" :src="identity.avatar.url" alt="" />
               </figure>
+              <b-icon v-else icon="account-circle" />
             </div>
 
             <div class="media-content">
               <span>{{ identity.displayName() }}</span>
+              <span class="has-text-grey" v-if="identity.name">
+                @{{ identity.preferredUsername }}
+              </span>
             </div>
           </span>
 

js/src/graphql/actor.ts

@@ -114,7 +114,8 @@ query LoggedUserParticipations($afterDateTime: DateTime, $beforeDateTime: DateTi
               },
               participantStats {
                   approved,
-                  unapproved
+                  unapproved,
+                  participants
               },
               options {
                   maximumAttendeeCapacity

js/src/i18n/en_US.json

@@ -56,6 +56,7 @@
 	"Create your communities and your events": "Create your communities and your events",
 	"Create": "Create",
 	"Creator": "Creator",
+	"Current identity has been changed to {identityName} in order to manage this event.": "Current identity has been changed to {identityName} in order to manage this event.",
 	"Delete event": "Delete event",
 	"Delete this identity": "Delete this identity",
 	"Delete your identity": "Delete your identity",
@@ -149,6 +150,7 @@
 	"No events found": "No events found",
 	"No group found": "No group found",
 	"No groups found": "No groups found",
+	"No participants yet": "No participants yet",
 	"No results for \"{queryText}\"": "No results for \"{queryText}\"",
 	"Number of places": "Number of places",
 	"Old password": "Old password",
@@ -225,6 +227,7 @@
 	"Street": "Street",
 	"Tentative: Will be confirmed later": "Tentative: Will be confirmed later",
 	"The content came from another server. Transfer an anonymous copy of the report?": "The content came from another server. Transfer an anonymous copy of the report ?",
+	"The current identity doesn't have any permission on this event. You should probably change it.": "The current identity doesn't have any permission on this event. You should probably change it.",
 	"The draft event has been updated": "The draft event has been updated",
 	"The event has been created as a draft": "The event has been created as a draft",
 	"The event has been published": "The event has been published",
@@ -281,7 +284,6 @@
 	"You have one event today.": "You have no events today | You have one event today. | You have {count} events today",
 	"You have one event tomorrow.": "You have no events tomorrow | You have one event tomorrow. | You have {count} events tomorrow",
 	"You need to login.": "You need to login.",
-	"You're organizing this event": "You're organizing this event",
 	"Your account has been validated": "Your account has been validated",
 	"Your account is being validated": "Your account is being validated",
 	"Your account is nearly ready, {username}": "Your account is nearly ready, {username}",

js/src/i18n/fr_FR.json

@@ -56,6 +56,7 @@
     "Create your communities and your events": "Créer vos communautés et vos événements",
     "Create": "Créer",
     "Creator": "Créateur",
+    "Current identity has been changed to {identityName} in order to manage this event.": "L'identité actuelle a été changée à {identityName} pour pouvoir gérer cet événement.",
     "Delete event": "Supprimer un événement",
     "Delete this identity": "Supprimer cette identité",
     "Delete your identity": "Supprimer votre identité",
@@ -149,6 +150,7 @@
     "No events found": "Aucun événement trouvé",
     "No group found": "Aucun groupe trouvé",
     "No groups found": "Aucun groupe trouvé",
+    "No participants yet": "Aucun⋅e participant⋅e pour le moment",
     "No results for \"{queryText}\"": "Pas de résultats pour « {queryText} »",
     "Number of places": "Nombre de places",
     "Old password": "Ancien mot de passe",
@@ -225,6 +227,7 @@
     "Street": "Rue",
     "Tentative: Will be confirmed later": "Provisoire : sera confirmé plus tard",
     "The content came from another server. Transfer an anonymous copy of the report?": "Le contenu provient d'une autre instance. Transférer une copie anonyme du signalement ?",
+    "The current identity doesn't have any permission on this event. You should probably change it.": "L'identité actuelle n'a pas de permissions sur cet événement. Vous devriez probablement en changer.",
     "The draft event has been updated": "L'événement brouillon a été mis à jour",
     "The event has been created as a draft": "L'événement a été créé en tant que brouillon",
     "The event has been published": "L'événement a été publié",
@@ -281,7 +284,6 @@
     "You have one event today.": "Vous n'avez pas d'évenement aujourd'hui | Vous avez un événement aujourd'hui. | Vous avez {count} événements aujourd'hui",
     "You have one event tomorrow.": "Vous n'avez pas d'événement demain | Vous avez un événement demain. | Vous avez {count} événements demain",
     "You need to login.": "Vous devez vous connecter.",
-    "You're organizing this event": "Vous organisez cet événement",
     "Your account has been validated": "Votre compte a été validé",
     "Your account is being validated": "Votre compte est en cours de validation",
     "Your account is nearly ready, {username}": "Votre compte est presque prêt, {username}",
@@ -301,7 +303,7 @@
     "with {identity}": "avec {identity}",
     "{approved} / {total} seats": "{approved} / {total} places",
     "{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s",
-    "{count} requests waiting": "Un⋅e demande en attente|{count} demandes en attente",
+    "{count} requests waiting": "Une demande en attente|{count} demandes en attente",
     "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} garantit {respect} des personnes qui l'utiliseront. Puisque {source}, il est publiquement auditable, ce qui garantit sa transparence.",
     "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines"
 }

js/src/i18n/oc.json

@@ -121,7 +121,6 @@
     "{count} participants": "Un participant|{count} participants",
     "{approved} / {total} seats": "{approved} / {total} plaças",
     "meditate a bit": "meditatz un pauc",
-    "You're organizing this event": "Organizatz aqueste eveniment",
     "You need to login.": "Vos cal vos connectar.",
     "You are an organizer.": "Sètz un organizaire.",
     "You are already logged-in.": "Sètz ja connectat.",

js/src/types/event.model.ts

@@ -1,4 +1,4 @@
-import { Actor, IActor } from './actor';
+import { Actor, IActor, IPerson } from './actor';
 import { IAddress } from '@/types/address.model';
 import { ITag } from '@/types/tag.model';
 import { IPicture } from '@/types/picture.model';
@@ -45,6 +45,13 @@ export enum Category {
   MEETING = 'meeting',
 }
 
+export interface IEventCardOptions {
+  hideDate: boolean;
+  loggedPerson: IPerson | boolean;
+  hideDetails: boolean;
+  organizerActor: IActor | null;
+}
+
 export interface IParticipant {
   id?: string;
   role: ParticipantRole;

js/src/utils/errors.ts

@@ -43,5 +43,9 @@ export const errors: IError[] = [
     match: /NetworkError when attempting to fetch resource.$/,
     value: i18n.t('Error while communicating with the server.') as string,
   },
-
+  {
+    match: /Provided moderator actor ID doesn't have permission on this event$/,
+    value: i18n.t("The current identity doesn't have any permission on this event. You should probably change it.") as string,
+    suggestRefresh: false,
+  },
 ];

js/src/views/Event/MyEvents.vue

@@ -13,7 +13,7 @@
                     <h3>{{ month[0] }}</h3>
                     <EventListCard
                             v-for="participation in month[1]"
-                            :key="`${participation.event.uuid}${participation.actor.id}`"
+                            :key="participation.id"
                             :participation="participation"
                             :options="{ hideDate: false }"
                             @eventDeleted="eventDeleted"
@@ -48,7 +48,7 @@
                     <h3>{{ month[0] }}</h3>
                     <EventListCard
                             v-for="participation in month[1]"
-                            :key="`${participation.event.uuid}${participation.actor.id}`"
+                            :key="participation.id"
                             :participation="participation"
                             :options="{ hideDate: false }"
                             @eventDeleted="eventDeleted"

js/src/views/Home.vue

@@ -55,7 +55,7 @@
             <EventListCard
                     v-for="participation in row[1]"
                     v-if="isInLessThanSevenDays(row[0])"
-                    :key="participation[1].event.uuid"
+                    :key="participation[1].id"
                     :participation="participation[1]"
             />
           </div>

js/src/vue-apollo.ts

@@ -89,10 +89,16 @@ const errorLink = onError(({ graphQLErrors, networkError, forward, operation })
   }
 
   if (graphQLErrors) {
+    const messages: Set<string> = new Set();
+
     graphQLErrors.forEach(({ message, locations, path }) => {
-      Snackbar.open({ message: computeErrorMessage(message), type: 'is-danger', position: 'is-bottom' });
+      messages.add(computeErrorMessage(message));
       console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
     });
+
+    for (const message of messages) {
+      Snackbar.open({ message, type: 'is-danger', position: 'is-bottom' });
+    }
   }
 
   if (networkError) {