2019-09-20 18:22:03 +02:00
|
|
|
<template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<section class="container mx-auto" v-if="event">
|
2022-01-10 15:19:16 +01:00
|
|
|
<breadcrumbs-nav
|
|
|
|
:links="[
|
2022-07-12 10:55:28 +02:00
|
|
|
{ name: RouteName.MY_EVENTS, text: t('My events') },
|
2022-01-10 15:19:16 +01:00
|
|
|
{
|
|
|
|
name: RouteName.EVENT,
|
|
|
|
params: { uuid: event.uuid },
|
|
|
|
text: event.title,
|
|
|
|
},
|
|
|
|
{
|
2022-07-12 10:55:28 +02:00
|
|
|
name: RouteName.PARTICIPATIONS,
|
2022-01-10 15:19:16 +01:00
|
|
|
params: { uuid: event.uuid },
|
2022-07-12 10:55:28 +02:00
|
|
|
text: t('Participants'),
|
2022-01-10 15:19:16 +01:00
|
|
|
},
|
|
|
|
]"
|
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
<h1>{{ t("Participants") }}</h1>
|
|
|
|
<div class="">
|
|
|
|
<div class="">
|
|
|
|
<div class="">
|
|
|
|
<o-field :label="t('Status')" horizontal label-for="role-select">
|
|
|
|
<o-select v-model="role" id="role-select">
|
2021-10-04 18:59:41 +02:00
|
|
|
<option :value="null">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Everything") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</option>
|
|
|
|
<option :value="ParticipantRole.CREATOR">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Organizer") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</option>
|
|
|
|
<option :value="ParticipantRole.PARTICIPANT">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Participant") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</option>
|
|
|
|
<option :value="ParticipantRole.NOT_APPROVED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Not approved") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</option>
|
|
|
|
<option :value="ParticipantRole.REJECTED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Rejected") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</option>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-select>
|
|
|
|
</o-field>
|
2021-10-04 18:59:41 +02:00
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="" v-if="exportFormats.length > 0">
|
|
|
|
<o-dropdown aria-role="list">
|
2021-10-04 18:59:41 +02:00
|
|
|
<template #trigger="{ active }">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
|
|
|
:label="t('Export')"
|
|
|
|
variant="primary"
|
2021-10-04 18:59:41 +02:00
|
|
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown-item
|
2021-10-10 16:24:12 +02:00
|
|
|
has-link
|
2021-10-04 18:59:41 +02:00
|
|
|
v-for="format in exportFormats"
|
|
|
|
:key="format"
|
|
|
|
aria-role="listitem"
|
2022-07-12 10:55:28 +02:00
|
|
|
@click="
|
2022-08-26 16:08:58 +02:00
|
|
|
exportParticipants(
|
|
|
|
{
|
|
|
|
eventId: event?.id,
|
|
|
|
format,
|
|
|
|
},
|
|
|
|
{ context: { type: format } }
|
|
|
|
)
|
2022-07-12 10:55:28 +02:00
|
|
|
"
|
|
|
|
@keyup.enter="
|
2022-08-26 16:08:58 +02:00
|
|
|
exportParticipants(
|
|
|
|
{
|
|
|
|
eventId: event?.id,
|
|
|
|
format,
|
|
|
|
},
|
|
|
|
{ context: { type: format } }
|
|
|
|
)
|
2022-07-12 10:55:28 +02:00
|
|
|
"
|
2021-06-30 16:17:29 +02:00
|
|
|
>
|
2021-10-10 16:24:12 +02:00
|
|
|
<button class="dropdown-button">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-icon :icon="formatToIcon(format)"></o-icon>
|
2021-10-10 16:24:12 +02:00
|
|
|
{{ format }}
|
|
|
|
</button>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-dropdown-item>
|
|
|
|
</o-dropdown>
|
2021-10-04 18:59:41 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-table
|
2021-10-04 18:59:41 +02:00
|
|
|
:data="event.participants.elements"
|
|
|
|
ref="queueTable"
|
|
|
|
detailed
|
|
|
|
detail-key="id"
|
2022-08-26 16:08:58 +02:00
|
|
|
v-model:checked-rows="checkedRows"
|
2021-10-04 18:59:41 +02:00
|
|
|
checkable
|
2022-08-26 16:08:58 +02:00
|
|
|
:is-row-checkable="(row: IParticipant) => row.role !== ParticipantRole.CREATOR"
|
2021-10-04 18:59:41 +02:00
|
|
|
checkbox-position="left"
|
|
|
|
:show-detail-icon="false"
|
2022-07-12 10:55:28 +02:00
|
|
|
:loading="participantsLoading"
|
2021-10-04 18:59:41 +02:00
|
|
|
paginated
|
2021-11-24 16:05:52 +01:00
|
|
|
:current-page="page"
|
2021-10-04 18:59:41 +02:00
|
|
|
backend-pagination
|
|
|
|
:pagination-simple="true"
|
2022-07-12 10:55:28 +02:00
|
|
|
:aria-next-label="t('Next page')"
|
|
|
|
:aria-previous-label="t('Previous page')"
|
|
|
|
:aria-page-label="t('Page')"
|
|
|
|
:aria-current-label="t('Current page')"
|
2021-10-04 18:59:41 +02:00
|
|
|
:total="event.participants.total"
|
|
|
|
:per-page="PARTICIPANTS_PER_PAGE"
|
|
|
|
backend-sorting
|
|
|
|
:default-sort-direction="'desc'"
|
|
|
|
:default-sort="['insertedAt', 'desc']"
|
2022-08-26 16:08:58 +02:00
|
|
|
@page-change="(newPage: number) => (page = newPage)"
|
|
|
|
@sort="(field: string, order: string) => emit('sort', field, order)"
|
2021-10-04 18:59:41 +02:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-table-column
|
2021-10-04 18:59:41 +02:00
|
|
|
field="actor.preferredUsername"
|
2022-07-12 10:55:28 +02:00
|
|
|
:label="t('Participant')"
|
2021-10-04 18:59:41 +02:00
|
|
|
v-slot="props"
|
|
|
|
>
|
2022-08-26 16:08:58 +02:00
|
|
|
<article>
|
|
|
|
<figure v-if="props.row.actor.avatar">
|
|
|
|
<img
|
|
|
|
class="rounded"
|
|
|
|
:src="props.row.actor.avatar.url"
|
|
|
|
alt=""
|
|
|
|
height="48"
|
|
|
|
width="48"
|
|
|
|
/>
|
2021-10-04 18:59:41 +02:00
|
|
|
</figure>
|
2022-07-12 10:55:28 +02:00
|
|
|
<Incognito
|
2021-10-04 18:59:41 +02:00
|
|
|
v-else-if="props.row.actor.preferredUsername === 'anonymous'"
|
2022-07-12 10:55:28 +02:00
|
|
|
:size="48"
|
2021-10-04 18:59:41 +02:00
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
<AccountCircle v-else :size="48" />
|
2022-08-26 16:08:58 +02:00
|
|
|
<div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="prose dark:prose-invert">
|
2021-10-04 18:59:41 +02:00
|
|
|
<span v-if="props.row.actor.preferredUsername !== 'anonymous'">
|
|
|
|
<span v-if="props.row.actor.name">{{
|
|
|
|
props.row.actor.name
|
|
|
|
}}</span
|
|
|
|
><br />
|
2022-08-26 16:08:58 +02:00
|
|
|
>@{{ usernameWithDomain(props.row.actor) }}</span
|
|
|
|
>
|
2021-10-04 18:59:41 +02:00
|
|
|
<span v-else>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Anonymous participant") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2021-06-30 16:17:29 +02:00
|
|
|
</div>
|
2021-10-04 18:59:41 +02:00
|
|
|
</article>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column field="role" :label="t('Role')" v-slot="props">
|
2022-08-26 16:08:58 +02:00
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="primary"
|
2021-10-04 18:59:41 +02:00
|
|
|
v-if="props.row.role === ParticipantRole.CREATOR"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Organizer") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Participant") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Not confirmed") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="warning"
|
2021-10-04 18:59:41 +02:00
|
|
|
v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Not approved") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
|
|
|
<tag
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="danger"
|
2021-10-04 18:59:41 +02:00
|
|
|
v-else-if="props.row.role === ParticipantRole.REJECTED"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Rejected") }}
|
2022-08-26 16:08:58 +02:00
|
|
|
</tag>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column
|
2021-10-04 18:59:41 +02:00
|
|
|
field="metadata.message"
|
|
|
|
class="column-message"
|
2022-07-12 10:55:28 +02:00
|
|
|
:label="t('Message')"
|
2021-10-04 18:59:41 +02:00
|
|
|
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">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ ellipsize(props.row.metadata.message) }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</p>
|
|
|
|
<p v-else>
|
|
|
|
{{ props.row.metadata.message }}
|
2021-06-30 16:17:29 +02:00
|
|
|
</p>
|
2021-10-04 18:59:41 +02:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
class="button is-text"
|
|
|
|
v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
|
|
|
|
@click.stop="toggleQueueDetails(props.row)"
|
|
|
|
>
|
|
|
|
{{
|
2022-07-12 10:55:28 +02:00
|
|
|
openDetailedRows[props.row.id] ? t("View less") : t("View more")
|
2020-08-18 15:50:50 +02:00
|
|
|
}}
|
2021-10-04 18:59:41 +02:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<p v-else class="has-text-grey-dark">
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("No message") }}
|
2021-10-04 18:59:41 +02:00
|
|
|
</p>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
|
|
|
<o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
|
|
|
|
<span class="text-center">
|
|
|
|
{{ formatDateString(props.row.insertedAt) }}<br />{{
|
|
|
|
formatTimeString(props.row.insertedAt)
|
2021-10-04 18:59:41 +02:00
|
|
|
}}
|
|
|
|
</span>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table-column>
|
2021-10-04 18:59:41 +02:00
|
|
|
<template #detail="props">
|
|
|
|
<article v-html="nl2br(props.row.metadata.message)" />
|
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<template #empty>
|
|
|
|
<EmptyContent icon="account-circle" :inline="true">
|
|
|
|
{{ t("No participant matches the filters") }}
|
|
|
|
</EmptyContent>
|
2021-10-04 18:59:41 +02:00
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<template #bottom-left>
|
|
|
|
<div class="flex gap-2">
|
|
|
|
<o-button
|
2021-10-04 18:59:41 +02:00
|
|
|
@click="acceptParticipants(checkedRows)"
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="success"
|
2021-10-04 18:59:41 +02:00
|
|
|
:disabled="!canAcceptParticipants"
|
|
|
|
>
|
|
|
|
{{
|
2022-07-12 10:55:28 +02:00
|
|
|
t(
|
2021-10-04 18:59:41 +02:00
|
|
|
"No participant to approve|Approve participant|Approve {number} participants",
|
2022-07-12 10:55:28 +02:00
|
|
|
{ number: checkedRows.length },
|
|
|
|
checkedRows.length
|
2021-10-04 18:59:41 +02:00
|
|
|
)
|
|
|
|
}}
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-button>
|
|
|
|
<o-button
|
2021-10-04 18:59:41 +02:00
|
|
|
@click="refuseParticipants(checkedRows)"
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="danger"
|
2021-10-04 18:59:41 +02:00
|
|
|
:disabled="!canRefuseParticipants"
|
|
|
|
>
|
|
|
|
{{
|
2022-07-12 10:55:28 +02:00
|
|
|
t(
|
2021-10-04 18:59:41 +02:00
|
|
|
"No participant to reject|Reject participant|Reject {number} participants",
|
2022-07-12 10:55:28 +02:00
|
|
|
{ number: checkedRows.length },
|
|
|
|
checkedRows.length
|
2021-10-04 18:59:41 +02:00
|
|
|
)
|
|
|
|
}}
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-button>
|
2021-10-04 18:59:41 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-table>
|
2021-10-04 18:59:41 +02:00
|
|
|
</section>
|
2019-09-20 18:22:03 +02:00
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2020-11-27 19:27:44 +01:00
|
|
|
import { ParticipantRole } from "@/types/enums";
|
2022-08-26 16:08:58 +02:00
|
|
|
import { IParticipant } from "@/types/participant.model";
|
|
|
|
import { IEvent } from "@/types/event.model";
|
2021-10-04 18:59:41 +02:00
|
|
|
import {
|
|
|
|
EXPORT_EVENT_PARTICIPATIONS,
|
|
|
|
PARTICIPANTS,
|
|
|
|
UPDATE_PARTICIPANT,
|
2022-08-26 16:08:58 +02:00
|
|
|
} from "@/graphql/event";
|
|
|
|
import { usernameWithDomain } from "@/types/actor";
|
|
|
|
import { nl2br } from "@/utils/html";
|
|
|
|
import { asyncForEach } from "@/utils/asyncForEach";
|
|
|
|
import RouteName from "@/router/name";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { useCurrentActorClient } from "@/composition/apollo/actor";
|
|
|
|
import { useParticipantsExportFormats } from "@/composition/config";
|
|
|
|
import { useMutation, useQuery } from "@vue/apollo-composable";
|
|
|
|
import {
|
|
|
|
integerTransformer,
|
|
|
|
enumTransformer,
|
|
|
|
useRouteQuery,
|
|
|
|
} from "vue-use-route-query";
|
|
|
|
import { computed, inject, ref } from "vue";
|
|
|
|
import { formatDateString, formatTimeString } from "@/filters/datetime";
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
|
|
|
import Incognito from "vue-material-design-icons/Incognito.vue";
|
|
|
|
import EmptyContent from "@/components/Utils/EmptyContent.vue";
|
|
|
|
import { Notifier } from "@/plugins/notifier";
|
2022-09-20 16:53:26 +02:00
|
|
|
import Tag from "@/components/TagElement.vue";
|
2020-03-05 19:32:34 +01:00
|
|
|
|
2020-06-18 15:23:05 +02:00
|
|
|
const PARTICIPANTS_PER_PAGE = 10;
|
2020-03-05 19:32:34 +01:00
|
|
|
const MESSAGE_ELLIPSIS_LENGTH = 130;
|
2019-09-20 18:22:03 +02:00
|
|
|
|
2021-10-05 10:52:30 +02:00
|
|
|
type exportFormat = "CSV" | "PDF" | "ODS";
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = defineProps<{
|
|
|
|
eventId: string;
|
|
|
|
}>();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
const emit = defineEmits(["sort"]);
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
2019-09-20 18:22:03 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { currentActor } = useCurrentActorClient();
|
|
|
|
const participantsExportFormats = useParticipantsExportFormats();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const ellipsize = (text?: string) =>
|
|
|
|
text && text.substring(0, MESSAGE_ELLIPSIS_LENGTH).concat("…");
|
2019-09-20 18:22:03 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
// metaInfo() {
|
|
|
|
// return {
|
|
|
|
// title: this.t("Participants") as string,
|
|
|
|
// };
|
|
|
|
// },
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const page = useRouteQuery("page", 1, integerTransformer);
|
|
|
|
const role = useRouteQuery(
|
|
|
|
"role",
|
|
|
|
ParticipantRole.PARTICIPANT,
|
|
|
|
enumTransformer(ParticipantRole)
|
|
|
|
);
|
2019-09-20 18:22:03 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const checkedRows = ref<IParticipant[]>([]);
|
2019-12-20 13:04:34 +01:00
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
const queueTable = ref();
|
2019-09-20 18:22:03 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { result: participantsResult, loading: participantsLoading } = useQuery<{
|
|
|
|
event: IEvent;
|
|
|
|
}>(
|
|
|
|
PARTICIPANTS,
|
|
|
|
() => ({
|
|
|
|
uuid: props.eventId,
|
|
|
|
page: page.value,
|
|
|
|
limit: PARTICIPANTS_PER_PAGE,
|
|
|
|
roles: role.value,
|
|
|
|
}),
|
|
|
|
() => ({
|
|
|
|
enabled:
|
|
|
|
currentActor.value?.id !== undefined &&
|
|
|
|
page.value !== undefined &&
|
|
|
|
role.value !== undefined,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
const event = computed(() => participantsResult.value?.event);
|
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
// const participantStats = computed((): IEventParticipantStats | null => {
|
|
|
|
// if (!event.value) return null;
|
|
|
|
// return event.value.participantStats;
|
|
|
|
// });
|
2022-07-12 10:55:28 +02:00
|
|
|
|
|
|
|
const { mutate: updateParticipant, onError: onUpdateParticipantError } =
|
|
|
|
useMutation(UPDATE_PARTICIPANT);
|
|
|
|
|
|
|
|
onUpdateParticipantError((e) => console.error(e));
|
|
|
|
|
|
|
|
const acceptParticipants = async (
|
|
|
|
participants: IParticipant[]
|
|
|
|
): Promise<void> => {
|
|
|
|
await asyncForEach(participants, async (participant: IParticipant) => {
|
|
|
|
await updateParticipant({
|
|
|
|
id: participant.id,
|
|
|
|
role: ParticipantRole.PARTICIPANT,
|
2020-06-18 15:23:05 +02:00
|
|
|
});
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
|
|
|
checkedRows.value = [];
|
|
|
|
};
|
|
|
|
|
|
|
|
const refuseParticipants = async (
|
|
|
|
participants: IParticipant[]
|
|
|
|
): Promise<void> => {
|
|
|
|
await asyncForEach(participants, async (participant: IParticipant) => {
|
|
|
|
await updateParticipant({
|
|
|
|
id: participant.id,
|
|
|
|
role: ParticipantRole.REJECTED,
|
2020-06-18 15:23:05 +02:00
|
|
|
});
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
|
|
|
checkedRows.value = [];
|
|
|
|
};
|
|
|
|
|
|
|
|
const {
|
|
|
|
mutate: exportParticipants,
|
|
|
|
onDone: onExportParticipantsMutationDone,
|
|
|
|
onError: onExportParticipantsMutationError,
|
|
|
|
} = useMutation(EXPORT_EVENT_PARTICIPATIONS);
|
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
onExportParticipantsMutationDone(({ data, context }) => {
|
2022-07-12 10:55:28 +02:00
|
|
|
const link =
|
|
|
|
window.origin +
|
|
|
|
"/exports/" +
|
2022-08-26 16:08:58 +02:00
|
|
|
context?.type.toLowerCase() +
|
2022-07-12 10:55:28 +02:00
|
|
|
"/" +
|
2022-08-26 16:08:58 +02:00
|
|
|
data?.exportEventParticipants;
|
|
|
|
console.debug(link);
|
2022-07-12 10:55:28 +02:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
|
|
|
|
const notifier = inject<Notifier>("notifier");
|
|
|
|
|
|
|
|
onExportParticipantsMutationError((e) => {
|
|
|
|
console.error(e);
|
|
|
|
if (e.graphQLErrors && e.graphQLErrors.length > 0) {
|
|
|
|
notifier?.error(e.graphQLErrors[0].message);
|
2021-10-04 18:59:41 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
const exportFormats = computed((): exportFormat[] => {
|
|
|
|
return (participantsExportFormats ?? []).map(
|
|
|
|
(key) => key.toUpperCase() as exportFormat
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
const formatToIcon = (format: exportFormat): string => {
|
|
|
|
switch (format) {
|
|
|
|
case "CSV":
|
|
|
|
return "file-delimited";
|
|
|
|
case "PDF":
|
|
|
|
return "file-pdf-box";
|
|
|
|
case "ODS":
|
|
|
|
return "google-spreadsheet";
|
2021-10-05 10:52:30 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* We can accept participants if at least one of them is not approved
|
|
|
|
*/
|
|
|
|
const canAcceptParticipants = (): boolean => {
|
|
|
|
return checkedRows.value.some((participant: IParticipant) =>
|
|
|
|
[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(
|
|
|
|
participant.role
|
2020-11-30 10:24:11 +01:00
|
|
|
)
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* We can refuse participants if at least one of them is something different than not approved
|
|
|
|
*/
|
|
|
|
const canRefuseParticipants = (): boolean => {
|
|
|
|
return checkedRows.value.some(
|
|
|
|
(participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleQueueDetails = (row: IParticipant): void => {
|
|
|
|
if (
|
|
|
|
row.metadata.message &&
|
|
|
|
row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH
|
|
|
|
)
|
|
|
|
return;
|
|
|
|
queueTable.value.toggleDetails(row);
|
|
|
|
if (row.id) {
|
|
|
|
openDetailedRows.value[row.id] = !openDetailedRows.value[row.id];
|
2020-06-18 15:23:05 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
2021-05-17 09:38:04 +02:00
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
const openDetailedRows = ref<Record<string, boolean>>({});
|
2019-09-20 18:22:03 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
|
<style lang="scss" scoped>
|
2021-10-04 18:59:41 +02:00
|
|
|
section.container.container {
|
|
|
|
padding: 1rem;
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
2020-06-17 15:54:24 +02:00
|
|
|
|
2020-06-18 15:23:05 +02:00
|
|
|
.table {
|
2021-06-30 16:17:29 +02:00
|
|
|
.column-message {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
2020-06-18 15:23:05 +02:00
|
|
|
.ellipsed-message {
|
|
|
|
cursor: pointer;
|
2021-06-30 16:17:29 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
p {
|
|
|
|
flex: 1;
|
|
|
|
min-width: 200px;
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
display: inline;
|
|
|
|
}
|
2020-06-18 15:23:05 +02:00
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
2019-10-09 17:03:35 +02:00
|
|
|
|
2020-06-18 15:23:05 +02:00
|
|
|
nav.breadcrumb {
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
2019-10-09 17:03:35 +02:00
|
|
|
</style>
|