Add ability to add message for participation and improve participation

management interface

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

js/src/components/Admin/Followers.vue

@@ -6,7 +6,6 @@
                 :loading="$apollo.queries.relayFollowers.loading"
                 ref="table"
                 :checked-rows.sync="checkedRows"
-                :is-row-checkable="(row) => row.id !== 3"
                 detailed
                 :show-detail-icon="false"
                 paginated

js/src/components/Event/ParticipationButton.vue

@@ -1,3 +1,4 @@
+import {EventJoinOptions} from "@/types/event.model";
 <docs>
 A button to set your participation
 
@@ -80,7 +81,7 @@ A button to set your participation
                         </figure>
                     </div>
                     <div class="media-content">
-                        <span>{{ $t('as {identity}', {identity: currentActor.preferredUsername }) }}</span>
+                        <span>{{ $t('as {identity}', {identity: currentActor.name || `@${currentActor.preferredUsername}` }) }}</span>
                     </div>
                 </div>
             </b-dropdown-item>
@@ -96,14 +97,13 @@ A button to set your participation
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { EventModel, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
+import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
 import { IPerson, Person } from '@/types/actor';
 import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
 import { RouteName } from '@/router';
-import { FETCH_EVENT } from '@/graphql/event';
 
 @Component({
   apollo: {
@@ -132,7 +132,11 @@ export default class ParticipationButton extends Vue {
   RouteName = RouteName;
 
   joinEvent(actor: IPerson) {
-    this.$emit('joinEvent', actor);
+    if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
+      this.$emit('joinEventWithConfirmation', actor);
+    } else {
+      this.$emit('joinEvent', actor);
+    }
   }
 
   joinModal() {

js/src/components/Event/ParticipationTable.vue

@@ -0,0 +1,164 @@
+<template>
+    <b-table
+            :data="data"
+            ref="queueTable"
+            detailed
+            detail-key="id"
+            :checked-rows.sync="checkedRows"
+            checkable
+            :is-row-checkable="row => row.role !== ParticipantRole.CREATOR"
+            checkbox-position="left"
+            default-sort="insertedAt"
+            default-sort-direction="asc"
+            :show-detail-icon="false"
+            :loading="this.$apollo.loading"
+            paginated
+            backend-pagination
+            :aria-next-label="$t('Next page')"
+            :aria-previous-label="$t('Previous page')"
+            :aria-page-label="$t('Page')"
+            :aria-current-label="$t('Current page')"
+            :total="total"
+            :per-page="perPage"
+            backend-sorting
+            :default-sort-direction="'desc'"
+            :default-sort="['insertedAt', 'desc']"
+            @page-change="page => $emit('page-change', page)"
+            @sort="(field, order) => $emit('sort', field, order)"
+    >
+        <template slot-scope="props">
+            <b-table-column field="insertedAt" :label="$t('Date')" sortable>
+                <b-tag type="is-success" class="has-text-centered">{{ props.row.insertedAt | formatDateString }}<br>{{ props.row.insertedAt | formatTimeString }}</b-tag>
+            </b-table-column>
+            <b-table-column field="role" :label="$t('Role')" sortable v-if="showRole">
+                                  <span v-if="props.row.role === ParticipantRole.CREATOR">
+                                      {{ $t('Organizer') }}
+                                  </span>
+                <span v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+                                      {{ $t('Participant') }}
+                                  </span>
+            </b-table-column>
+            <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
+                <article class="media">
+                    <figure class="media-left" v-if="props.row.actor.avatar">
+                        <p class="image is-48x48">
+                            <img :src="props.row.actor.avatar.url" alt="">
+                        </p>
+                    </figure>
+                    <b-icon class="media-left" v-else-if="props.row.actor.preferredUsername === 'anonymous'" size="is-large" icon="incognito" />
+                    <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+                    <div class="media-content">
+                        <div class="content">
+                                              <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
+                                                  <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span><br />
+                                                  <span class="is-size-7 has-text-grey">@{{ props.row.actor.preferredUsername }}</span>
+                                              </span>
+                            <span v-else>
+                                                  {{ $t('Anonymous participant') }}
+                                              </span>
+                        </div>
+                    </div>
+                </article>
+            </b-table-column>
+            <b-table-column field="metadata.message" :label="$t('Message')">
+                                  <span @click="toggleQueueDetails(props.row)" :class="{ 'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH }" v-if="props.row.metadata && props.row.metadata.message">
+                                    {{ props.row.metadata.message | ellipsize }}
+                                  </span>
+                <span v-else class="has-text-grey">
+                                      {{ $t('No message') }}
+                                  </span>
+            </b-table-column>
+        </template>
+        <template slot="detail" slot-scope="props">
+            <article v-html="nl2br(props.row.metadata.message)" />
+        </template>
+        <template slot="bottom-left" v-if="checkedRows.length > 0">
+            <div class="buttons">
+                <b-button @click="acceptParticipants(checkedRows)" type="is-success" v-if="canAcceptParticipants">
+                    {{ $tc('No participant to approve|Approve participant|Approve {number} participants', checkedRows.length, { number: checkedRows.length }) }}
+                </b-button>
+                <b-button @click="refuseParticipants(checkedRows)" type="is-danger" v-if="canRefuseParticipants">
+                    {{ $tc('No participant to reject|Reject participant|Reject {number} participants', checkedRows.length, { number: checkedRows.length }) }}
+                </b-button>
+            </div>
+        </template>
+    </b-table>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IParticipant, ParticipantRole } from '@/types/event.model';
+import { Refs } from '@/shims-vue';
+import { nl2br } from '@/utils/html';
+import { asyncForEach } from '@/utils/asyncForEach';
+
+const MESSAGE_ELLIPSIS_LENGTH = 130;
+
+@Component({
+  filters: {
+    ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat('…'),
+  },
+})
+export default class ParticipationTable extends Vue {
+  @Prop({ required: true, type: Array }) data!: IParticipant[];
+  @Prop({ required: true, type: Number }) total!: number;
+  @Prop({ required: true, type: Function }) acceptParticipant;
+  @Prop({ required: true, type: Function }) refuseParticipant;
+  @Prop({ required: false, type: Boolean, default: false }) showRole;
+  @Prop({ required: false, type: Number, default: 20 }) perPage;
+  checkedRows: IParticipant[] = [];
+
+  MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH;
+  nl2br = nl2br;
+  ParticipantRole = ParticipantRole;
+
+  $refs!: Refs<{
+    queueTable: any,
+  }>;
+
+  toggleQueueDetails(row: IParticipant) {
+    if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
+    this.$refs.queueTable.toggleDetails(row);
+  }
+
+  async acceptParticipants(participants: IParticipant[]) {
+    await asyncForEach(participants, async (participant: IParticipant) => {
+      await this.acceptParticipant(participant);
+    });
+    this.checkedRows = [];
+  }
+
+  async refuseParticipants(participants: IParticipant[]) {
+    await asyncForEach(participants, async (participant: IParticipant) => {
+      await this.refuseParticipant(participant);
+    });
+    this.checkedRows = [];
+  }
+
+    /**
+     * We can accept participants if at least one of them is not approved
+     */
+  get canAcceptParticipants(): boolean {
+    return this.checkedRows.some(
+        (participant: IParticipant) => [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role),
+    );
+  }
+
+    /**
+     * We can refuse participants if at least one of them is something different than not approved
+     */
+  get canRefuseParticipants(): boolean {
+    return this.checkedRows.some((participant: IParticipant) => participant.role !== ParticipantRole.REJECTED);
+  }
+}
+</script>
+<style lang="scss" scoped>
+    .ellipsed-message {
+        cursor: pointer;
+    }
+
+    .table {
+        span.tag {
+            height: initial;
+        }
+    }
+</style>

js/src/components/NavBar.vue

@@ -29,7 +29,7 @@
               <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" />
+              <b-icon v-else size="is-medium" icon="account-circle" />
             </div>
 
             <div class="media-content">
@@ -180,6 +180,10 @@ nav {
       background: $secondary;
     }
 
+    span.icon.is-medium {
+      display: flex;
+    }
+
     img {
       max-height: 2.5em;
     }

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -7,18 +7,24 @@
                     <b-message type="is-info">{{ $t("Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.") }}</b-message>
                     <b-message type="is-danger" v-if="error">{{ error }}</b-message>
                     <b-field :label="$t('Email')">
-                        <b-field>
-                            <b-input
-                                    type="email"
-                                    v-model="anonymousParticipation.email"
-                                    placeholder="Your email"
-                                    required>
-                            </b-input>
-                            <p class="control">
-                                <b-button type="is-primary" native-type="submit">{{ $t('Send email') }}</b-button>
-                            </p>
-                        </b-field>
+                        <b-input
+                                type="email"
+                                v-model="anonymousParticipation.email"
+                                placeholder="Your email"
+                                required>
+                        </b-input>
                     </b-field>
+                    <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">{{ $t("The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event.") }}</p>
+                    <p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
+                    <b-field :label="$t('Message')">
+                        <b-input
+                                type="textarea"
+                                v-model="anonymousParticipation.message"
+                                minlength="10"
+                                :required="event.joinOptions === EventJoinOptions.RESTRICTED">
+                        </b-input>
+                    </b-field>
+                    <b-button type="is-primary" native-type="submit">{{ $t('Send email') }}</b-button>
                     <div class="has-text-centered">
                         <b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">
                             {{ $t('Back to previous page') }}
@@ -31,7 +37,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { EventModel, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
+import { EventModel, IEvent, IParticipant, ParticipantRole, EventJoinOptions } from '@/types/event.model';
 import { FETCH_EVENT, JOIN_EVENT } from '@/graphql/event';
 import { IConfig } from '@/types/config.model';
 import { CONFIG } from '@/graphql/config';
@@ -55,10 +61,11 @@ import { RouteName } from '@/router';
 })
 export default class ParticipationWithoutAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
-  anonymousParticipation: { email: String } = { email: '' };
+  anonymousParticipation: { email: String, message: String } = { email: '', message: '' };
   event!: IEvent;
   config!: IConfig;
   error: String|boolean = false;
+  EventJoinOptions = EventJoinOptions;
 
   async joinEvent() {
     this.error = false;
@@ -69,6 +76,7 @@ export default class ParticipationWithoutAccount extends Vue {
           eventId: this.event.id,
           actorId: this.config.anonymous.actorId,
           email: this.anonymousParticipation.email,
+          message: this.anonymousParticipation.message,
         },
         update: (store, { data }) => {
           if (data == null) return;