Participation panel revamp and fixes
Apollo is a pain in the ass with pagination & filters, so this removes the tabs system and uses a <select> to filter instead Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -100,7 +100,7 @@
|
||||
<b-button
|
||||
:disabled="newComment.text.trim().length === 0"
|
||||
native-type="submit"
|
||||
type="is-info"
|
||||
type="is-primary"
|
||||
>{{ $t("Post a reply") }}</b-button
|
||||
>
|
||||
</span>
|
||||
|
||||
@@ -60,10 +60,17 @@
|
||||
>
|
||||
<span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
|
||||
{{
|
||||
$t("{approved} / {total} seats", {
|
||||
approved: participation.event.participantStats.participant,
|
||||
total: participation.event.options.maximumAttendeeCapacity,
|
||||
})
|
||||
$tc(
|
||||
"{available}/{capacity} available places",
|
||||
participation.event.options.maximumAttendeeCapacity -
|
||||
(participation.event.participantStats.going - 1),
|
||||
{
|
||||
available:
|
||||
participation.event.options.maximumAttendeeCapacity -
|
||||
(participation.event.participantStats.going - 1),
|
||||
capacity: participation.event.options.maximumAttendeeCapacity,
|
||||
}
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span v-else>
|
||||
@@ -79,6 +86,7 @@
|
||||
@click="
|
||||
gotToWithCheck(participation, {
|
||||
name: RouteName.PARTICIPATIONS,
|
||||
query: { role: ParticipantRole.NOT_APPROVED },
|
||||
params: { eventId: participation.event.uuid },
|
||||
})
|
||||
"
|
||||
|
||||
@@ -1,205 +0,0 @@
|
||||
<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"
|
||||
: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 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"
|
||||
>@{{ 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, Ref } from "vue-property-decorator";
|
||||
import { IParticipant, ParticipantRole } from "../../types/event.model";
|
||||
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!: Function;
|
||||
|
||||
@Prop({ required: true, type: Function }) refuseParticipant!: Function;
|
||||
|
||||
@Prop({ required: false, type: Boolean, default: false }) showRole!: boolean;
|
||||
|
||||
@Prop({ required: false, type: Number, default: 20 }) perPage!: number;
|
||||
|
||||
@Ref("queueTable") readonly queueTable!: any;
|
||||
|
||||
checkedRows: IParticipant[] = [];
|
||||
|
||||
MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH;
|
||||
|
||||
nl2br = nl2br;
|
||||
|
||||
ParticipantRole = ParticipantRole;
|
||||
|
||||
toggleQueueDetails(row: IParticipant) {
|
||||
if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
|
||||
this.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>
|
||||
Reference in New Issue
Block a user