2020-03-05 19:32:34 +01:00
|
|
|
import {EventJoinOptions} from "@/types/event.model";
|
2019-10-05 21:17:18 +02:00
|
|
|
<docs>
|
|
|
|
A button to set your participation
|
|
|
|
|
|
|
|
##### If the participant has been confirmed
|
|
|
|
```vue
|
|
|
|
<ParticipationButton :participation="{ role: 'PARTICIPANT' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
|
|
|
|
```
|
|
|
|
|
|
|
|
##### If the participant has not being approved yet
|
|
|
|
```vue
|
|
|
|
<ParticipationButton :participation="{ role: 'NOT_APPROVED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
|
|
|
|
```
|
|
|
|
|
|
|
|
##### If the participant has been rejected
|
|
|
|
```vue
|
|
|
|
<ParticipationButton :participation="{ role: 'REJECTED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
|
|
|
|
```
|
|
|
|
|
|
|
|
##### If the participant doesn't exist yet
|
|
|
|
```vue
|
|
|
|
<ParticipationButton :participation="null" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
|
|
|
|
```
|
|
|
|
</docs>
|
|
|
|
|
2019-09-26 16:38:58 +02:00
|
|
|
<template>
|
2020-02-18 08:57:00 +01:00
|
|
|
<div class="participation-button">
|
|
|
|
<b-dropdown
|
|
|
|
aria-role="list"
|
|
|
|
position="is-bottom-left"
|
|
|
|
v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
|
|
|
|
>
|
2021-10-10 16:24:12 +02:00
|
|
|
<template #trigger="{ active }">
|
|
|
|
<b-button
|
|
|
|
type="is-success"
|
|
|
|
size="is-large"
|
|
|
|
icon-left="check"
|
|
|
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
|
|
|
>
|
|
|
|
{{ $t("I participate") }}
|
|
|
|
</b-button>
|
|
|
|
</template>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
<b-dropdown-item
|
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="confirmLeave"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="confirmLeave"
|
2020-02-18 08:57:00 +01:00
|
|
|
class="has-text-danger"
|
|
|
|
>{{ $t("Cancel my participation…") }}</b-dropdown-item
|
|
|
|
>
|
|
|
|
</b-dropdown>
|
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
<div
|
|
|
|
v-else-if="
|
|
|
|
participation && participation.role === ParticipantRole.NOT_APPROVED
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<b-dropdown
|
|
|
|
aria-role="list"
|
|
|
|
position="is-bottom-left"
|
|
|
|
class="dropdown-disabled"
|
|
|
|
>
|
2020-02-18 08:57:00 +01:00
|
|
|
<button class="button is-success is-large" type="button" slot="trigger">
|
|
|
|
<b-icon icon="timer-sand-empty" />
|
|
|
|
<template>
|
|
|
|
<span>{{ $t("I participate") }}</span>
|
|
|
|
</template>
|
|
|
|
<b-icon icon="menu-down" />
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<!-- <b-dropdown-item :value="false" aria-role="listitem">-->
|
|
|
|
<!-- {{ $t('Change my identity…')}}-->
|
|
|
|
<!-- </b-dropdown-item>-->
|
|
|
|
|
|
|
|
<b-dropdown-item
|
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="confirmLeave"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="confirmLeave"
|
2020-02-18 08:57:00 +01:00
|
|
|
class="has-text-danger"
|
|
|
|
>{{ $t("Cancel my participation request…") }}</b-dropdown-item
|
|
|
|
>
|
|
|
|
</b-dropdown>
|
|
|
|
<small>{{ $t("Participation requested!") }}</small>
|
|
|
|
<br />
|
|
|
|
<small>{{ $t("Waiting for organization team approval.") }}</small>
|
|
|
|
</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
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"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
|
|
|
|
|
|
|
<b-dropdown
|
|
|
|
aria-role="list"
|
|
|
|
position="is-bottom-left"
|
|
|
|
v-else-if="!participation && currentActor.id"
|
|
|
|
>
|
2021-10-10 16:24:12 +02:00
|
|
|
<template #trigger="{ active }">
|
|
|
|
<b-button
|
|
|
|
type="is-primary"
|
|
|
|
size="is-large"
|
|
|
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
|
|
|
>
|
|
|
|
{{ $t("Participate") }}
|
|
|
|
</b-button>
|
|
|
|
</template>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-dropdown-item
|
|
|
|
: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
|
|
|
>
|
2020-02-18 08:57:00 +01:00
|
|
|
<div class="media">
|
|
|
|
<div class="media-left">
|
|
|
|
<figure class="image is-32x32" v-if="currentActor.avatar">
|
|
|
|
<img class="is-rounded" :src="currentActor.avatar.url" alt />
|
|
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="media-content">
|
|
|
|
<span>
|
|
|
|
{{
|
|
|
|
$t("as {identity}", {
|
2020-11-30 10:24:11 +01:00
|
|
|
identity:
|
|
|
|
currentActor.name || `@${currentActor.preferredUsername}`,
|
2020-02-18 08:57:00 +01:00
|
|
|
})
|
|
|
|
}}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</b-dropdown-item>
|
|
|
|
|
|
|
|
<b-dropdown-item
|
|
|
|
:value="false"
|
|
|
|
aria-role="listitem"
|
|
|
|
@click="joinModal"
|
2021-10-10 16:24:12 +02:00
|
|
|
@keyup.enter="joinModal"
|
2020-02-18 08:57:00 +01:00
|
|
|
v-if="identities.length > 1"
|
|
|
|
>{{ $t("with another identity…") }}</b-dropdown-item
|
|
|
|
>
|
|
|
|
</b-dropdown>
|
|
|
|
<b-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"
|
|
|
|
type="is-primary"
|
|
|
|
size="is-large"
|
|
|
|
native-type="button"
|
|
|
|
>{{ $t("Participate") }}</b-button
|
|
|
|
>
|
|
|
|
<b-button
|
|
|
|
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 },
|
|
|
|
}"
|
2020-02-18 08:57:00 +01:00
|
|
|
v-else-if="!currentActor.id"
|
|
|
|
type="is-primary"
|
|
|
|
size="is-large"
|
|
|
|
native-type="button"
|
|
|
|
>{{ $t("Participate") }}</b-button
|
|
|
|
>
|
|
|
|
</div>
|
2019-09-26 16:38:58 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
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";
|
2020-02-18 08:57:00 +01:00
|
|
|
import { IPerson, Person } from "../../types/actor";
|
|
|
|
import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
|
|
|
|
import { CURRENT_USER_CLIENT } from "../../graphql/user";
|
|
|
|
import { CONFIG } from "../../graphql/config";
|
|
|
|
import { IConfig } from "../../types/config.model";
|
|
|
|
import RouteName from "../../router/name";
|
2019-12-03 11:29:51 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
currentUser: {
|
|
|
|
query: CURRENT_USER_CLIENT,
|
|
|
|
},
|
2019-12-20 13:04:34 +01:00
|
|
|
currentActor: CURRENT_ACTOR_CLIENT,
|
|
|
|
config: CONFIG,
|
2019-12-03 11:29:51 +01:00
|
|
|
identities: {
|
|
|
|
query: IDENTITIES,
|
2020-02-18 08:57:00 +01:00
|
|
|
update: ({ identities }) =>
|
2020-11-30 10:24:11 +01:00
|
|
|
identities
|
|
|
|
? identities.map((identity: IPerson) => new Person(identity))
|
|
|
|
: [],
|
2019-12-03 11:29:51 +01:00
|
|
|
skip() {
|
|
|
|
return this.currentUser.isLoggedIn === false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
2019-09-26 16:38:58 +02:00
|
|
|
export default class ParticipationButton extends Vue {
|
|
|
|
@Prop({ required: true }) participation!: IParticipant;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
@Prop({ required: true }) event!: IEvent;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-09-26 16:38:58 +02:00
|
|
|
@Prop({ required: true }) currentActor!: IPerson;
|
|
|
|
|
|
|
|
ParticipantRole = ParticipantRole;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-12-03 11:29:51 +01:00
|
|
|
identities: IPerson[] = [];
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
config!: IConfig;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
RouteName = RouteName;
|
2019-09-26 16:38:58 +02:00
|
|
|
|
2020-11-06 11:34:32 +01:00
|
|
|
joinEvent(actor: IPerson): void {
|
2020-03-05 19:32:34 +01:00
|
|
|
if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
|
2020-11-06 11:34:32 +01:00
|
|
|
this.$emit("join-event-with-confirmation", actor);
|
2020-03-05 19:32:34 +01:00
|
|
|
} else {
|
2020-11-06 11:34:32 +01:00
|
|
|
this.$emit("join-event", actor);
|
2020-03-05 19:32:34 +01:00
|
|
|
}
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
|
|
|
|
2020-11-06 11:34:32 +01:00
|
|
|
joinModal(): void {
|
|
|
|
this.$emit("join-modal");
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
|
|
|
|
2020-11-06 11:34:32 +01:00
|
|
|
confirmLeave(): void {
|
|
|
|
this.$emit("confirm-leave");
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
get hasAnonymousParticipationMethods(): boolean {
|
|
|
|
return this.event.options.anonymousParticipation;
|
|
|
|
}
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2019-12-20 13:04:34 +01:00
|
|
|
<style lang="scss" scoped>
|
2020-02-18 08:57:00 +01:00
|
|
|
.participation-button {
|
|
|
|
.dropdown {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
2019-09-26 16:38:58 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
&.dropdown-disabled button {
|
|
|
|
opacity: 0.5;
|
2019-09-26 16:38:58 +02:00
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.anonymousParticipationModal {
|
2020-11-16 10:04:47 +01:00
|
|
|
::v-deep .animation-content {
|
2020-02-18 08:57:00 +01:00
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|