2019-09-26 16:38:58 +02:00
|
|
|
<template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div>
|
|
|
|
<o-dropdown
|
2020-02-18 08:57:00 +01:00
|
|
|
v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
|
|
|
|
>
|
2021-10-10 16:24:12 +02:00
|
|
|
<template #trigger="{ active }">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
|
|
|
variant="success"
|
|
|
|
size="large"
|
2021-10-10 16:24:12 +02:00
|
|
|
icon-left="check"
|
|
|
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("I participate") }}
|
|
|
|
</o-button>
|
2021-10-10 16:24:12 +02:00
|
|
|
</template>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown-item
|
2020-02-18 08:57:00 +01:00
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="confirmLeave"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="confirmLeave"
|
2022-07-12 10:55:28 +02:00
|
|
|
class=""
|
|
|
|
>{{ t("Cancel my participation…") }}
|
|
|
|
</o-dropdown-item>
|
|
|
|
</o-dropdown>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
<div
|
|
|
|
v-else-if="
|
|
|
|
participation && participation.role === ParticipantRole.NOT_APPROVED
|
|
|
|
"
|
2022-07-12 10:55:28 +02:00
|
|
|
class="flex flex-col"
|
2020-11-30 10:24:11 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown>
|
|
|
|
<template #trigger>
|
|
|
|
<o-button variant="success" size="large" type="button">
|
|
|
|
<template class="flex items-center">
|
|
|
|
<TimerSandEmpty />
|
|
|
|
<span>{{ t("I participate") }}</span>
|
|
|
|
<MenuDown />
|
|
|
|
</template>
|
|
|
|
</o-button>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<o-dropdown-item :value="false" aria-role="listitem">
|
|
|
|
{{ t("Change my identity…") }}
|
|
|
|
</o-dropdown-item>
|
|
|
|
|
|
|
|
<o-dropdown-item
|
2020-02-18 08:57:00 +01:00
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="confirmLeave"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="confirmLeave"
|
2022-07-12 10:55:28 +02:00
|
|
|
class=""
|
|
|
|
>{{ t("Cancel my participation request…") }}</o-dropdown-item
|
2020-02-18 08:57:00 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-dropdown>
|
|
|
|
<p>{{ t("Participation requested!") }}</p>
|
|
|
|
<p>{{ t("Waiting for organization team approval.") }}</p>
|
2020-02-18 08:57:00 +01:00
|
|
|
</div>
|
2019-09-30 13:48:47 +02:00
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
<div
|
|
|
|
v-else-if="
|
|
|
|
participation && participation.role === ParticipantRole.REJECTED
|
|
|
|
"
|
|
|
|
>
|
2020-02-18 08:57:00 +01:00
|
|
|
<span>
|
2020-11-30 10:24:11 +01:00
|
|
|
{{
|
2022-07-12 10:55:28 +02:00
|
|
|
t(
|
2020-11-30 10:24:11 +01:00
|
|
|
"Unfortunately, your participation request was rejected by the organizers."
|
|
|
|
)
|
|
|
|
}}
|
2020-02-18 08:57:00 +01:00
|
|
|
</span>
|
2019-09-26 16:38:58 +02:00
|
|
|
</div>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown v-else-if="!participation && currentActor?.id">
|
2021-10-10 16:24:12 +02:00
|
|
|
<template #trigger="{ active }">
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
|
|
|
variant="primary"
|
|
|
|
size="large"
|
2021-10-10 16:24:12 +02:00
|
|
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ t("Participate") }}
|
|
|
|
</o-button>
|
2021-10-10 16:24:12 +02:00
|
|
|
</template>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown-item
|
2020-11-30 10:24:11 +01:00
|
|
|
:value="true"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="joinEvent(currentActor)"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="joinEvent(currentActor)"
|
2020-11-30 10:24:11 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="flex gap-2 items-center">
|
|
|
|
<figure class="" v-if="currentActor?.avatar">
|
|
|
|
<img
|
|
|
|
class="rounded-xl"
|
|
|
|
:src="currentActor.avatar.url"
|
|
|
|
alt=""
|
|
|
|
width="24"
|
|
|
|
height="24"
|
|
|
|
/>
|
|
|
|
</figure>
|
|
|
|
<AccountCircle v-else />
|
|
|
|
<div class="">
|
2020-02-18 08:57:00 +01:00
|
|
|
<span>
|
|
|
|
{{
|
2022-07-12 10:55:28 +02:00
|
|
|
t("as {identity}", {
|
|
|
|
identity: displayName(currentActor),
|
2020-02-18 08:57:00 +01:00
|
|
|
})
|
|
|
|
}}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-dropdown-item>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-dropdown-item
|
2020-02-18 08:57:00 +01:00
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="joinModal"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="joinModal"
|
2022-07-12 10:55:28 +02:00
|
|
|
v-if="(identities ?? []).length > 1"
|
|
|
|
>{{ t("with another identity…") }}</o-dropdown-item
|
2020-02-18 08:57:00 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-dropdown>
|
|
|
|
<o-button
|
2021-11-03 09:47:10 +01:00
|
|
|
rel="nofollow"
|
2020-02-18 08:57:00 +01:00
|
|
|
tag="router-link"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT,
|
|
|
|
params: { uuid: event.uuid },
|
|
|
|
}"
|
2020-02-18 08:57:00 +01:00
|
|
|
v-else-if="!participation && hasAnonymousParticipationMethods"
|
2022-07-12 10:55:28 +02:00
|
|
|
variant="primary"
|
|
|
|
size="large"
|
2020-02-18 08:57:00 +01:00
|
|
|
native-type="button"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Participate") }}</o-button
|
2020-02-18 08:57:00 +01:00
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2020-02-18 08:57:00 +01:00
|
|
|
tag="router-link"
|
2021-11-03 09:47:10 +01:00
|
|
|
rel="nofollow"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
|
|
|
|
params: { uuid: event.uuid },
|
|
|
|
}"
|
2022-07-12 10:55:28 +02:00
|
|
|
v-else-if="!currentActor?.id"
|
|
|
|
variant="primary"
|
|
|
|
size="large"
|
2020-02-18 08:57:00 +01:00
|
|
|
native-type="button"
|
2022-07-12 10:55:28 +02:00
|
|
|
>{{ t("Participate") }}</o-button
|
2020-02-18 08:57:00 +01:00
|
|
|
>
|
|
|
|
</div>
|
2019-09-26 16:38:58 +02:00
|
|
|
</template>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2020-11-27 19:27:44 +01:00
|
|
|
import { EventJoinOptions, ParticipantRole } from "@/types/enums";
|
|
|
|
import { IParticipant } from "../../types/participant.model";
|
|
|
|
import { IEvent } from "../../types/event.model";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { IPerson, displayName } from "../../types/actor";
|
2020-02-18 08:57:00 +01:00
|
|
|
import RouteName from "../../router/name";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { computed } from "vue";
|
|
|
|
import MenuDown from "vue-material-design-icons/MenuDown.vue";
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
|
|
|
import TimerSandEmpty from "vue-material-design-icons/TimerSandEmpty.vue";
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
participation: IParticipant | undefined;
|
|
|
|
event: IEvent;
|
|
|
|
currentActor: IPerson;
|
|
|
|
identities: IPerson[];
|
|
|
|
}>();
|
|
|
|
|
|
|
|
const emit = defineEmits([
|
|
|
|
"join-event-with-confirmation",
|
|
|
|
"join-event",
|
|
|
|
"join-modal",
|
|
|
|
"confirm-leave",
|
|
|
|
]);
|
|
|
|
|
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
|
|
const joinEvent = (actor: IPerson | undefined): void => {
|
|
|
|
if (props.event.joinOptions === EventJoinOptions.RESTRICTED) {
|
|
|
|
emit("join-event-with-confirmation", actor);
|
|
|
|
} else {
|
|
|
|
emit("join-event", actor);
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
};
|
2019-09-26 16:38:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const joinModal = (): void => {
|
|
|
|
emit("join-modal");
|
|
|
|
};
|
2019-09-26 16:38:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const confirmLeave = (): void => {
|
|
|
|
emit("confirm-leave");
|
|
|
|
};
|
2019-09-26 16:38:58 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const hasAnonymousParticipationMethods = computed((): boolean => {
|
|
|
|
return props.event.options.anonymousParticipation;
|
|
|
|
});
|
2019-09-26 16:38:58 +02:00
|
|
|
</script>
|