mobilizon.chapril.org-mobilizon/js/src/components/Event/ParticipationTable.vue

<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>