Allow to accept / reject participants

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

js/src/components/Event/EventCard.vue

@@ -60,7 +60,6 @@ export interface IEventCardOptions {
 @Component({
   components: {
     DateCalendarIcon,
-    EventCard,
   },
   mounted() {
     lineClamp(this.$refs.title, 3);

js/src/components/Event/EventListCard.vue

@@ -11,7 +11,8 @@
         <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 v-else>
-          <span>{{ $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>{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
         </span>
       </div>
@@ -50,9 +51,9 @@
           <a @click="openDeleteEventModalWrapper"><b-icon icon="delete" /> {{ $t('Delete') }}</a>
         </li>
         <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
-          <a @click="">
+          <router-link :to="{ name: EventRouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } }">
             <b-icon icon="account-multiple-plus" /> {{ $t('Manage participations') }}
-          </a>
+          </router-link>
         </li>
         <li>
           <router-link :to="{ name: EventRouteName.EVENT, params: { uuid: participation.event.uuid } }"><b-icon icon="view-compact" /> {{ $t('View event page') }}</router-link>

js/src/components/Event/ParticipationModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="modal-card">
         <header class="modal-card-head">
-            <p class="modal-card-title">Join event {{ event.title }}</p>
+            <p class="modal-card-title">{{ $t('Join event {title}', {title: event.title}) }}</p>
         </header>
 
         <section class="modal-card-body is-flex">
@@ -14,14 +14,18 @@
                             size="is-large"/>
                 </div>
                 <div class="media-content">
-                    <p>Do you want to participate in {{ event.title }}?</p>
+                    <p>{{ $t('Do you want to participate in {title}?', {title: event.title}) }}?</p>
 
                     <b-field :label="$t('Identity')">
                         <identity-picker v-model="identity"></identity-picker>
                     </b-field>
 
+                    <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
+                        {{ $t('The event organizer has chosen to approve manually the participations to this event. You will receive a notification when your participation has been approved')}}
+                    </p>
+
                     <p v-if="!event.local">
-                        The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.
+                        {{ $t('The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.') }}
                     </p>
                 </div>
             </div>
@@ -32,13 +36,13 @@
                     class="button"
                     ref="cancelButton"
                     @click="close">
-                Cancel
+                {{ $t('Cancel') }}
             </button>
             <button
                     class="button is-primary"
                     ref="confirmButton"
                     @click="confirm">
-                Confirm my particpation
+                {{ $t('Confirm my particpation') }}
             </button>
         </footer>
     </div>
@@ -46,7 +50,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IEvent } from '@/types/event.model';
+import { IEvent, EventJoinOptions } from '@/types/event.model';
 import IdentityPicker from '@/views/Account/IdentityPicker.vue';
 import { IPerson } from '@/types/actor';
 
@@ -66,6 +70,8 @@ export default class ReportModal extends Vue {
   isActive: boolean = false;
   identity: IPerson = this.defaultIdentity;
 
+  EventJoinOptions = EventJoinOptions;
+
   confirm() {
     this.onConfirm(this.identity);
   }