2019-09-11 09:59:01 +02:00
< template >
< div class = "modal-card" >
< header class = "modal-card-head" >
2019-09-20 18:22:03 +02:00
< p class = "modal-card-title" > { { $t ( 'Join event {title}' , { title : event . title } ) } } < / p >
2019-09-11 09:59:01 +02:00
< / header >
< section class = "modal-card-body is-flex" >
< div class = "media" >
< div
class = "media-left" >
< b -icon
icon = "alert"
type = "is-warning"
size = "is-large" / >
< / div >
< div class = "media-content" >
2019-09-20 18:22:03 +02:00
< p > { { $t ( 'Do you want to participate in {title}?' , { title : event . title } ) } } ? < / p >
2019-09-11 09:59:01 +02:00
2019-09-12 11:34:01 +02:00
< b -field :label ="$t('Identity')" >
2019-09-11 09:59:01 +02:00
< identity -picker v-model ="identity" > < / identity -picker >
< / b - f i e l d >
2019-09-20 18:22:03 +02:00
< p v-if ="event.joinOptions === EventJoinOptions.RESTRICTED" >
{ { $t ( 'The event organizer has chosen to approve manually the participations to this event. You will receive a notification when your participation has been approved' ) } }
< / p >
2019-09-11 09:59:01 +02:00
< p v-if ="!event.local" >
2019-09-20 18:22:03 +02:00
{ { $t ( 'The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.' ) } }
2019-09-11 09:59:01 +02:00
< / p >
< / div >
< / div >
< / section >
< footer class = "modal-card-foot" >
< button
class = "button"
ref = "cancelButton"
@ click = "close" >
2019-09-20 18:22:03 +02:00
{ { $t ( 'Cancel' ) } }
2019-09-11 09:59:01 +02:00
< / button >
< button
class = "button is-primary"
ref = "confirmButton"
@ click = "confirm" >
2019-09-20 18:22:03 +02:00
{ { $t ( 'Confirm my particpation' ) } }
2019-09-11 09:59:01 +02:00
< / button >
< / footer >
< / div >
< / template >
< script lang = "ts" >
import { Component , Prop , Vue } from 'vue-property-decorator' ;
2019-09-20 18:22:03 +02:00
import { IEvent , EventJoinOptions } from '@/types/event.model' ;
2019-09-11 09:59:01 +02:00
import IdentityPicker from '@/views/Account/IdentityPicker.vue' ;
import { IPerson } from '@/types/actor' ;
@ Component ( {
components : {
IdentityPicker ,
} ,
mounted ( ) {
this . $data . isActive = true ;
} ,
} )
export default class ReportModal extends Vue {
@ Prop ( { type : Function , default : ( ) => { } } ) onConfirm ;
@ Prop ( { type : Object } ) event ! : IEvent ;
@ Prop ( { type : Object } ) defaultIdentity ! : IPerson ;
isActive : boolean = false ;
identity : IPerson = this . defaultIdentity ;
2019-09-20 18:22:03 +02:00
EventJoinOptions = EventJoinOptions ;
2019-09-11 09:59:01 +02:00
confirm ( ) {
this . onConfirm ( this . identity ) ;
}
/ * *
* Close the Dialog .
* /
close ( ) {
this . isActive = false ;
this . $emit ( 'close' ) ;
}
}
< / script >
< style lang = "scss" >
. modal - card . modal - card - foot {
justify - content : flex - end ;
}
< / style >