Allow to accept / reject participants

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

js/src/components/Account/ActorLink.vue

@@ -1,10 +1,10 @@
 <template>
     <span>
-        <router-link v-if="actor.domain === null"
+        <span v-if="actor.domain === null"
                      :to="{name: 'Profile', params: { name: actor.preferredUsername } }"
         >
             <slot></slot>
-        </router-link>
+        </span>
         <a v-else :href="actor.url">
             <slot></slot>
         </a>

js/src/components/Account/ParticipantCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <article class="card">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-left" v-if="participant.actor.avatar">
+          <figure class="image is-48x48">
+            <img :src="participant.actor.avatar.url" />
+          </figure>
+        </div>
+        <div class="media-content">
+          <span class="title" ref="title">{{ actorDisplayName }}</span><br>
+          <small class="has-text-grey">@{{ participant.actor.preferredUsername }}</small>
+        </div>
+      </div>
+    </div>
+    <footer class="card-footer">
+    <b-button v-if="participant.role === ParticipantRole.NOT_APPROVED" @click="accept(participant)" type="is-success" class="card-footer-item">{{ $t('Approve') }}</b-button>
+    <b-button v-if="participant.role === ParticipantRole.NOT_APPROVED" @click="reject(participant)" type="is-danger" class="card-footer-item">{{ $t('Reject')}} </b-button>
+    <b-button v-if="participant.role === ParticipantRole.PARTICIPANT" @click="exclude(participant)" type="is-danger" class="card-footer-item">{{ $t('Exclude')}} </b-button>
+    <span v-if="participant.role === ParticipantRole.CREATOR" class="card-footer-item">{{ $t('Creator')}} </span>
+  </footer>
+  </article>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IActor, IPerson, Person } from '@/types/actor';
+import { IParticipant, ParticipantRole } from '@/types/event.model';
+
+@Component
+export default class ActorCard extends Vue {
+  @Prop({ required: true }) participant!: IParticipant;
+  @Prop({ type: Function }) accept;
+  @Prop({ type: Function }) reject;
+  @Prop({ type: Function }) exclude;
+
+  ParticipantRole = ParticipantRole;
+
+  get actorDisplayName(): string {
+    const actor = new Person(this.participant.actor);
+    return actor.displayName();
+  }
+
+}
+</script>
+
+<style lang="scss">
+</style>

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);
   }

js/src/components/Report/ReportModal.vue

@@ -16,24 +16,23 @@
                                 size="is-large"/>
                     </div>
                     <div class="media-content">
-                        <p>The report will be sent to the moderators of your instance.
-                            You can explain why you report this content below.</p>
+                        <p>{{ $t('The report will be sent to the moderators of your instance. You can explain why you report this content below.') }}</p>
 
                         <div class="control">
                             <b-input
                                     v-model="content"
                                     type="textarea"
                                     @keyup.enter="confirm"
-                                    placeholder="Additional comments"
+                                    :placeholder="$t('Additional comments')"
                             />
                         </div>
 
                         <p v-if="outsideDomain">
-                            The content came from another server. Transfer an anonymous copy of the report ?
+                            {{ $t('The content came from another server. Transfer an anonymous copy of the report?') }}
                         </p>
 
                         <div class="control" v-if="outsideDomain">
-                            <b-switch v-model="forward">Transfer to {{ outsideDomain }}</b-switch>
+                            <b-switch v-model="forward">{{ $t('Transfer to {outsideDomain}', { outsideDomain }) }}</b-switch>
                         </div>
                     </div>
                 </div>
@@ -44,13 +43,13 @@
                         class="button"
                         ref="cancelButton"
                         @click="close">
-                    {{ cancelText }}
+                    {{ translatedCancelText }}
                 </button>
                 <button
                         class="button is-primary"
                         ref="confirmButton"
                         @click="confirm">
-                    {{ confirmText }}
+                    {{ translatedConfirmText }}
                 </button>
             </footer>
         </div>
@@ -69,13 +68,21 @@ export default class ReportModal extends Vue {
   @Prop({ type: Function, default: () => {} }) onConfirm;
   @Prop({ type: String }) title;
   @Prop({ type: String, default: '' }) outsideDomain;
-  @Prop({ type: String, default: 'Cancel' }) cancelText;
-  @Prop({ type: String, default: 'Send the report' }) confirmText;
+  @Prop({ type: String }) cancelText;
+  @Prop({ type: String }) confirmText;
 
   isActive: boolean = false;
   content: string = '';
   forward: boolean = false;
 
+  get translatedCancelText() {
+    return this.cancelText || this.$t('Cancel');
+  }
+
+  get translatedConfirmText() {
+    return this.confirmText || this.$t('Send the report');
+  }
+
   confirm() {
     this.onConfirm(this.content, this.forward);
     this.close();