Export participants to different formats

* CSV
* PDF (requires Python dependency `weasyprint`)
* ODS (requires Python dependency `pyexcel_ods3`)

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

js/src/graphql/config.ts

@@ -175,3 +175,13 @@ export const WEB_PUSH = gql`
     }
   }
 `;
+
+export const EVENT_PARTICIPANTS = gql`
+  query EventParticipants {
+    config {
+      exportFormats {
+        eventParticipants
+      }
+    }
+  }
+`;

js/src/graphql/event.ts

@@ -574,3 +574,13 @@ export const CLOSE_EVENTS = gql`
     }
   }
 `;
+
+export const EXPORT_EVENT_PARTICIPATIONS = gql`
+  mutation ExportEventParticipants(
+    $eventId: ID!
+    $format: ExportFormatEnum
+    $roles: [ParticipantRoleEnum]
+  ) {
+    exportEventParticipants(eventId: $eventId, format: $format, roles: $roles)
+  }
+`;

js/src/types/config.model.ts

@@ -102,4 +102,7 @@ export interface IConfig {
     enabled: boolean;
     publicKey: string;
   };
+  exportFormats: {
+    eventParticipants: string[];
+  };
 }

js/src/views/Event/Participants.vue

@@ -1,235 +1,255 @@
 <template>
-  <main class="container">
-    <section v-if="event">
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li>
-            <router-link :to="{ name: RouteName.MY_EVENTS }">{{
-              $t("My events")
-            }}</router-link>
-          </li>
-          <li>
-            <router-link
-              :to="{
-                name: RouteName.EVENT,
-                params: { uuid: event.uuid },
-              }"
-              >{{ event.title }}</router-link
-            >
-          </li>
-          <li class="is-active">
-            <router-link
-              :to="{
-                name: RouteName.PARTICIPANTS,
-                params: { uuid: event.uuid },
-              }"
-              >{{ $t("Participants") }}</router-link
-            >
-          </li>
-        </ul>
-      </nav>
-      <h2 class="title">{{ $t("Participants") }}</h2>
-      <b-field :label="$t('Status')" horizontal>
-        <b-select v-model="role">
-          <option :value="null">
-            {{ $t("Everything") }}
-          </option>
-          <option :value="ParticipantRole.CREATOR">
-            {{ $t("Organizer") }}
-          </option>
-          <option :value="ParticipantRole.PARTICIPANT">
-            {{ $t("Participant") }}
-          </option>
-          <option :value="ParticipantRole.NOT_APPROVED">
-            {{ $t("Not approved") }}
-          </option>
-          <option :value="ParticipantRole.REJECTED">
-            {{ $t("Rejected") }}
-          </option>
-        </b-select>
-      </b-field>
-      <b-table
-        :data="event.participants.elements"
-        ref="queueTable"
-        detailed
-        detail-key="id"
-        :checked-rows.sync="checkedRows"
-        checkable
-        :is-row-checkable="(row) => row.role !== ParticipantRole.CREATOR"
-        checkbox-position="left"
-        :show-detail-icon="false"
-        :loading="this.$apollo.loading"
-        paginated
-        backend-pagination
-        :pagination-simple="true"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
-        :total="event.participants.total"
-        :per-page="PARTICIPANTS_PER_PAGE"
-        backend-sorting
-        :default-sort-direction="'desc'"
-        :default-sort="['insertedAt', 'desc']"
-        @page-change="(newPage) => (page = newPage)"
-        @sort="(field, order) => $emit('sort', field, order)"
-      >
-        <b-table-column
-          field="actor.preferredUsername"
-          :label="$t('Participant')"
-          v-slot="props"
-        >
-          <article class="media">
-            <figure
-              class="media-left image is-48x48"
-              v-if="props.row.actor.avatar"
-            >
-              <img
-                class="is-rounded"
-                :src="props.row.actor.avatar.url"
-                alt=""
-              />
-            </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-dark"
-                    >@{{ usernameWithDomain(props.row.actor) }}</span
-                  >
-                </span>
-                <span v-else>
-                  {{ $t("Anonymous participant") }}
-                </span>
-              </div>
-            </div>
-          </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
-            type="is-primary"
-            v-if="props.row.role === ParticipantRole.CREATOR"
-          >
-            {{ $t("Organizer") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
-            {{ $t("Participant") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
-            {{ $t("Not confirmed") }}
-          </b-tag>
-          <b-tag
-            type="is-warning"
-            v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
-          >
-            {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
-            v-else-if="props.row.role === ParticipantRole.REJECTED"
-          >
-            {{ $t("Rejected") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column
-          field="metadata.message"
-          class="column-message"
-          :label="$t('Message')"
-          v-slot="props"
-        >
-          <div
-            @click="toggleQueueDetails(props.row)"
-            :class="{
-              'ellipsed-message':
-                props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+  <section class="section container" v-if="event">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <router-link :to="{ name: RouteName.MY_EVENTS }">{{
+            $t("My events")
+          }}</router-link>
+        </li>
+        <li>
+          <router-link
+            :to="{
+              name: RouteName.EVENT,
+              params: { uuid: event.uuid },
             }"
-            v-if="props.row.metadata && props.row.metadata.message"
+            >{{ event.title }}</router-link
           >
-            <p>
-              {{ props.row.metadata.message | ellipsize }}
-            </p>
-            <button
-              type="button"
-              class="button is-text"
-              v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
-              @click.stop="toggleQueueDetails(props.row)"
+        </li>
+        <li class="is-active">
+          <router-link
+            :to="{
+              name: RouteName.PARTICIPANTS,
+              params: { uuid: event.uuid },
+            }"
+            >{{ $t("Participants") }}</router-link
+          >
+        </li>
+      </ul>
+    </nav>
+    <h1 class="title">{{ $t("Participants") }}</h1>
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <b-field :label="$t('Status')" horizontal label-for="role-select">
+            <b-select v-model="role" id="role-select">
+              <option :value="null">
+                {{ $t("Everything") }}
+              </option>
+              <option :value="ParticipantRole.CREATOR">
+                {{ $t("Organizer") }}
+              </option>
+              <option :value="ParticipantRole.PARTICIPANT">
+                {{ $t("Participant") }}
+              </option>
+              <option :value="ParticipantRole.NOT_APPROVED">
+                {{ $t("Not approved") }}
+              </option>
+              <option :value="ParticipantRole.REJECTED">
+                {{ $t("Rejected") }}
+              </option>
+            </b-select>
+          </b-field>
+        </div>
+        <div class="level-item" v-if="exportFormats.length > 0">
+          <b-dropdown aria-role="list">
+            <template #trigger="{ active }">
+              <b-button
+                :label="$t('Export')"
+                type="is-primary"
+                :icon-right="active ? 'menu-up' : 'menu-down'"
+              />
+            </template>
+
+            <b-dropdown-item
+              v-for="format in exportFormats"
+              :key="format"
+              @click="exportParticipants(format)"
+              aria-role="listitem"
+              >{{ format }}</b-dropdown-item
             >
-              {{
-                openDetailedRows[props.row.id]
-                  ? $t("View less")
-                  : $t("View more")
-              }}
-            </button>
-          </div>
-          <p v-else class="has-text-grey-dark">
-            {{ $t("No message") }}
-          </p>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
-          <span class="has-text-centered">
-            {{ props.row.insertedAt | formatDateString }}<br />{{
-              props.row.insertedAt | formatTimeString
-            }}
-          </span>
-        </b-table-column>
-        <template #detail="props">
-          <article v-html="nl2br(props.row.metadata.message)" />
-        </template>
-        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey-dark has-text-centered">
-              <p>{{ $t("No participant matches the filters") }}</p>
+          </b-dropdown>
+        </div>
+      </div>
+    </div>
+    <b-table
+      :data="event.participants.elements"
+      ref="queueTable"
+      detailed
+      detail-key="id"
+      :checked-rows.sync="checkedRows"
+      checkable
+      :is-row-checkable="(row) => row.role !== ParticipantRole.CREATOR"
+      checkbox-position="left"
+      :show-detail-icon="false"
+      :loading="this.$apollo.loading"
+      paginated
+      backend-pagination
+      :pagination-simple="true"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
+      :total="event.participants.total"
+      :per-page="PARTICIPANTS_PER_PAGE"
+      backend-sorting
+      :default-sort-direction="'desc'"
+      :default-sort="['insertedAt', 'desc']"
+      @page-change="(newPage) => (page = newPage)"
+      @sort="(field, order) => $emit('sort', field, order)"
+    >
+      <b-table-column
+        field="actor.preferredUsername"
+        :label="$t('Participant')"
+        v-slot="props"
+      >
+        <article class="media">
+          <figure
+            class="media-left image is-48x48"
+            v-if="props.row.actor.avatar"
+          >
+            <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+          </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-dark"
+                  >@{{ usernameWithDomain(props.row.actor) }}</span
+                >
+              </span>
+              <span v-else>
+                {{ $t("Anonymous participant") }}
+              </span>
             </div>
-          </section>
-        </template>
-        <template slot="bottom-left">
-          <div class="buttons">
-            <b-button
-              @click="acceptParticipants(checkedRows)"
-              type="is-success"
-              :disabled="!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"
-              :disabled="!canRefuseParticipants"
-            >
-              {{
-                $tc(
-                  "No participant to reject|Reject participant|Reject {number} participants",
-                  checkedRows.length,
-                  { number: checkedRows.length }
-                )
-              }}
-            </b-button>
           </div>
-        </template>
-      </b-table>
-    </section>
-  </main>
+        </article>
+      </b-table-column>
+      <b-table-column field="role" :label="$t('Role')" v-slot="props">
+        <b-tag
+          type="is-primary"
+          v-if="props.row.role === ParticipantRole.CREATOR"
+        >
+          {{ $t("Organizer") }}
+        </b-tag>
+        <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+          {{ $t("Participant") }}
+        </b-tag>
+        <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
+          {{ $t("Not confirmed") }}
+        </b-tag>
+        <b-tag
+          type="is-warning"
+          v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
+        >
+          {{ $t("Not approved") }}
+        </b-tag>
+        <b-tag
+          type="is-danger"
+          v-else-if="props.row.role === ParticipantRole.REJECTED"
+        >
+          {{ $t("Rejected") }}
+        </b-tag>
+      </b-table-column>
+      <b-table-column
+        field="metadata.message"
+        class="column-message"
+        :label="$t('Message')"
+        v-slot="props"
+      >
+        <div
+          @click="toggleQueueDetails(props.row)"
+          :class="{
+            'ellipsed-message':
+              props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+          }"
+          v-if="props.row.metadata && props.row.metadata.message"
+        >
+          <p v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH">
+            {{ props.row.metadata.message | ellipsize }}
+          </p>
+          <p v-else>
+            {{ props.row.metadata.message }}
+          </p>
+          <button
+            type="button"
+            class="button is-text"
+            v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
+            @click.stop="toggleQueueDetails(props.row)"
+          >
+            {{
+              openDetailedRows[props.row.id] ? $t("View less") : $t("View more")
+            }}
+          </button>
+        </div>
+        <p v-else class="has-text-grey-dark">
+          {{ $t("No message") }}
+        </p>
+      </b-table-column>
+      <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        <span class="has-text-centered">
+          {{ props.row.insertedAt | formatDateString }}<br />{{
+            props.row.insertedAt | formatTimeString
+          }}
+        </span>
+      </b-table-column>
+      <template #detail="props">
+        <article v-html="nl2br(props.row.metadata.message)" />
+      </template>
+      <template slot="empty">
+        <section class="section">
+          <div class="content has-text-grey-dark has-text-centered">
+            <p>{{ $t("No participant matches the filters") }}</p>
+          </div>
+        </section>
+      </template>
+      <template slot="bottom-left">
+        <div class="buttons">
+          <b-button
+            @click="acceptParticipants(checkedRows)"
+            type="is-success"
+            :disabled="!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"
+            :disabled="!canRefuseParticipants"
+          >
+            {{
+              $tc(
+                "No participant to reject|Reject participant|Reject {number} participants",
+                checkedRows.length,
+                { number: checkedRows.length }
+              )
+            }}
+          </b-button>
+        </div>
+      </template>
+    </b-table>
+  </section>
 </template>
 
 <script lang="ts">
@@ -237,10 +257,14 @@ import { Component, Prop, Vue, Watch, Ref } from "vue-property-decorator";
 import { ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import { IEvent, IEventParticipantStats } from "../../types/event.model";
-import { PARTICIPANTS, UPDATE_PARTICIPANT } from "../../graphql/event";
+import {
+  EXPORT_EVENT_PARTICIPATIONS,
+  PARTICIPANTS,
+  UPDATE_PARTICIPANT,
+} from "../../graphql/event";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
-import { CONFIG } from "../../graphql/config";
+import { EVENT_PARTICIPANTS } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
 import { nl2br } from "../../utils/html";
 import { asyncForEach } from "../../utils/asyncForEach";
@@ -256,7 +280,7 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
     currentActor: {
       query: CURRENT_ACTOR_CLIENT,
     },
-    config: CONFIG,
+    config: EVENT_PARTICIPANTS,
     event: {
       query: PARTICIPANTS,
       variables() {
@@ -390,6 +414,46 @@ export default class Participants extends Vue {
     this.checkedRows = [];
   }
 
+  async exportParticipants(type: "CSV" | "PDF" | "ODS"): Promise<void> {
+    try {
+      const {
+        data: { exportEventParticipants },
+      } = await this.$apollo.mutate({
+        mutation: EXPORT_EVENT_PARTICIPATIONS,
+        variables: {
+          eventId: this.event.id,
+          format: type,
+        },
+      });
+      const link =
+        window.origin +
+        "/exports/" +
+        type.toLowerCase() +
+        "/" +
+        exportEventParticipants;
+      console.log(link);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.href = link;
+      a.setAttribute("download", "true");
+      a.click();
+      window.URL.revokeObjectURL(a.href);
+      document.body.removeChild(a);
+    } catch (e: any) {
+      console.error(e);
+      if (e.graphQLErrors && e.graphQLErrors.length > 0) {
+        this.$notifier.error(e.graphQLErrors[0].message);
+      }
+    }
+  }
+
+  get exportFormats(): string[] {
+    return (this.config?.exportFormats?.eventParticipants || []).map((key) =>
+      key.toUpperCase()
+    );
+  }
+
   /**
    * We can accept participants if at least one of them is not approved
    */
@@ -449,8 +513,9 @@ export default class Participants extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-section {
-  padding: 1rem 0;
+section.container.container {
+  padding: 1rem;
+  background: $white;
 }
 
 .table {