2020-12-04 14:12:00 +00:00
< template >
< div >
2022-07-12 08:55:28 +00:00
< div class = "event-participation" v-if ="isEventNotAlreadyPassed" >
2020-12-04 14:12:00 +00:00
< participation -button
v - if = "shouldShowParticipationButton"
: participation = "participation"
: event = "event"
: current - actor = "currentActor"
2022-07-12 08:55:28 +00:00
: identities = "identities"
2020-12-04 14:12:00 +00:00
@ join - event = "(actor) => $emit('join-event', actor)"
@ join - modal = "$emit('join-modal')"
@ join - event - with - confirmation = "
( actor ) => $emit ( 'join-event-with-confirmation' , actor )
"
@ confirm - leave = "$emit('confirm-leave')"
/ >
2022-07-12 08:55:28 +00:00
< o -button
variant = "text"
2020-12-04 14:12:00 +00:00
v - if = "!actorIsParticipant && anonymousParticipation !== null"
@ click = "$emit('cancel-anonymous-participation')"
2022-07-12 08:55:28 +00:00
> { { t ( "Cancel anonymous participation" ) } } < / o - b u t t o n
2020-12-04 14:12:00 +00:00
>
< small v-if ="!actorIsParticipant && anonymousParticipation" >
2022-07-12 08:55:28 +00:00
{ { t ( "You are participating in this event anonymously" ) } }
< VTooltip >
< template # popper >
{ { t ( "Click for more information" ) } }
< / template >
2022-08-26 14:08:58 +00:00
< span @ click = "isAnonymousParticipationModalOpen = true" >
2022-07-12 08:55:28 +00:00
< InformationOutline :size ="16" / >
2020-12-04 15:44:37 +00:00
< / span >
2022-07-12 08:55:28 +00:00
< / VTooltip >
2020-12-04 14:12:00 +00:00
< / small >
< small
v - else - if = "!actorIsParticipant && anonymousParticipation === false"
>
{ {
2022-07-12 08:55:28 +00:00
t (
2020-12-04 14:12:00 +00:00
"You are participating in this event anonymously but didn't confirm participation"
)
} }
2022-07-12 08:55:28 +00:00
< VTooltip >
< template # popper >
{ {
t (
"This information is saved only on your computer. Click for details"
)
} }
< / template >
2020-12-04 14:12:00 +00:00
< router -link : to = "{ name: RouteName.TERMS }" >
2022-07-12 08:55:28 +00:00
< HelpCircleOutline :size ="16" / >
2020-12-04 14:12:00 +00:00
< / r o u t e r - l i n k >
2022-07-12 08:55:28 +00:00
< / VTooltip >
2020-12-04 14:12:00 +00:00
< / small >
< / div >
< div v-else >
2022-07-12 08:55:28 +00:00
< o -button variant = "primary" disabled icon -left = " menu -down " >
{ { t ( "Event already passed" ) } }
< / o - b u t t o n >
2020-12-04 14:12:00 +00:00
< / div >
2022-07-12 08:55:28 +00:00
< o -modal
v - model : active = "isAnonymousParticipationModalOpen"
2020-12-04 15:44:37 +00:00
has - modal - card
2022-07-12 08:55:28 +00:00
: close - button - aria - label = "t('Close')"
2020-12-04 15:44:37 +00:00
ref = "anonymous-participation-modal"
>
< div class = "modal-card" >
< header class = "modal-card-head" >
< p class = "modal-card-title" >
2022-07-12 08:55:28 +00:00
{ { t ( "About anonymous participation" ) } }
2020-12-04 15:44:37 +00:00
< / p >
< / header >
< section class = "modal-card-body" >
2022-07-12 08:55:28 +00:00
< o -notification
variant = "primary"
2020-12-04 15:44:37 +00:00
: closable = "false"
v - if = "event.joinOptions === EventJoinOptions.RESTRICTED"
>
{ {
2022-07-12 08:55:28 +00:00
t (
2020-12-04 15:53:55 +00:00
"As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
2020-12-04 15:44:37 +00:00
)
} }
2022-07-12 08:55:28 +00:00
< / o - n o t i f i c a t i o n >
2020-12-04 15:44:37 +00:00
< p >
{ {
2022-07-12 08:55:28 +00:00
t (
2020-12-04 15:44:37 +00:00
"Your participation status is saved only on this device and will be deleted one month after the event's passed."
)
} }
< / p >
2022-07-12 08:55:28 +00:00
< p v-if ="isSecureContext()" >
2020-12-04 15:44:37 +00:00
{ {
2022-07-12 08:55:28 +00:00
t (
2020-12-04 15:44:37 +00:00
"You may clear all participation information for this device with the buttons below."
)
} }
< / p >
2022-07-12 08:55:28 +00:00
< div class = "buttons" v-if ="isSecureContext()" >
< o -button
2022-08-26 14:08:58 +00:00
variant = "danger"
outlined
2020-12-04 15:44:37 +00:00
@ click = "clearEventParticipationData"
>
2022-07-12 08:55:28 +00:00
{ { t ( "Clear participation data for this event" ) } }
< / o - b u t t o n >
< o -button variant = "danger" @click ="clearAllParticipationData" >
{ { t ( "Clear participation data for all events" ) } }
< / o - b u t t o n >
2020-12-04 15:44:37 +00:00
< / div >
< / section >
< / div >
2022-07-12 08:55:28 +00:00
< / o - m o d a l >
2020-12-04 14:12:00 +00:00
< / div >
< / template >
2022-07-12 08:55:28 +00:00
< script lang = "ts" setup >
2020-12-04 15:44:37 +00:00
import { EventJoinOptions , EventStatus , ParticipantRole } from "@/types/enums" ;
2020-12-04 14:12:00 +00:00
import { IParticipant } from "@/types/participant.model" ;
import RouteName from "@/router/name" ;
import { IEvent } from "@/types/event.model" ;
2020-12-04 15:44:37 +00:00
import {
removeAllAnonymousParticipations ,
removeAnonymousParticipation ,
} from "@/services/AnonymousParticipationStorage" ;
2020-12-04 14:12:00 +00:00
import ParticipationButton from "../Event/ParticipationButton.vue" ;
2022-07-12 08:55:28 +00:00
import { computed , ref } from "vue" ;
import InformationOutline from "vue-material-design-icons/InformationOutline.vue" ;
import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue" ;
import { useI18n } from "vue-i18n" ;
import { IPerson } from "@/types/actor" ;
import { IAnonymousParticipationConfig } from "@/types/config.model" ;
const { t } = useI18n ( { useScope : "global" } ) ;
const props = withDefaults (
defineProps < {
participation : IParticipant | undefined ;
event : IEvent ;
anonymousParticipation ? : boolean | null ;
currentActor : IPerson ;
identities : IPerson [ ] ;
anonymousParticipationConfig : IAnonymousParticipationConfig ;
} > ( ) ,
{
anonymousParticipation : null ,
2020-12-04 14:12:00 +00:00
}
2022-07-12 08:55:28 +00:00
) ;
2020-12-04 14:12:00 +00:00
2022-07-12 08:55:28 +00:00
const isAnonymousParticipationModalOpen = ref ( false ) ;
2020-12-04 14:12:00 +00:00
2022-07-12 08:55:28 +00:00
const actorIsParticipant = computed ( ( ) : boolean => {
if ( actorIsOrganizer . value ) return true ;
2020-12-04 14:12:00 +00:00
2022-07-12 08:55:28 +00:00
return props . participation ? . role === ParticipantRole . PARTICIPANT ;
} ) ;
2020-12-04 14:12:00 +00:00
2022-07-12 08:55:28 +00:00
const actorIsOrganizer = computed ( ( ) : boolean => {
return props . participation ? . role === ParticipantRole . CREATOR ;
} ) ;
2020-12-04 14:12:00 +00:00
2022-07-12 08:55:28 +00:00
const shouldShowParticipationButton = computed ( ( ) : boolean => {
// If we have an anonymous participation, don't show the participation button
if (
props . anonymousParticipationConfig ? . allowed &&
props . anonymousParticipation
) {
2020-12-04 14:12:00 +00:00
return false ;
}
2022-07-12 08:55:28 +00:00
// So that people can cancel their participation
if ( actorIsParticipant . value ) return true ;
2020-12-04 15:44:37 +00:00
2022-07-12 08:55:28 +00:00
// You can participate to draft or cancelled events
if ( props . event . draft || props . event . status === EventStatus . CANCELLED )
return false ;
2020-12-04 15:44:37 +00:00
2022-07-12 08:55:28 +00:00
// If capacity is OK
if ( eventCapacityOK . value ) return true ;
// Else
return false ;
} ) ;
const eventCapacityOK = computed ( ( ) : boolean => {
if ( props . event . draft ) return true ;
if ( ! props . event . options . maximumAttendeeCapacity ) return true ;
return (
props . event . options . maximumAttendeeCapacity >
props . event . participantStats . participant
) ;
} ) ;
const isEventNotAlreadyPassed = computed ( ( ) : boolean => {
return new Date ( endDate . value ) > new Date ( ) ;
} ) ;
2022-08-26 14:08:58 +00:00
const endDate = computed ( ( ) : string => {
2022-07-12 08:55:28 +00:00
return props . event . endsOn !== null &&
props . event . endsOn > props . event . beginsOn
? props . event . endsOn
: props . event . beginsOn ;
} ) ;
const isSecureContext = ( ) : boolean => {
return window . isSecureContext ;
} ;
const clearEventParticipationData = async ( ) : Promise < void > => {
await removeAnonymousParticipation ( props . event . uuid ) ;
window . location . reload ( ) ;
} ;
const clearAllParticipationData = ( ) : void => {
removeAllAnonymousParticipations ( ) ;
window . location . reload ( ) ;
} ;
2020-12-04 14:12:00 +00:00
< / script >