62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-image" v-if="!event.image">
|
|
<figure class="image is-16by9">
|
|
<img src="https://picsum.photos/g/400/225/?random">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
|
|
<h2 class="title">{{ event.title }}</h2>
|
|
</router-link>
|
|
<DateComponent v-if="!options.hideDate" :date="event.beginsOn" />
|
|
</div>
|
|
<div v-if="!options.hideDetails">
|
|
<div v-if="event.participants.length > 0 &&
|
|
options.loggedPerson &&
|
|
event.participants[0].actor.id === options.loggedPerson.id">
|
|
<b-tag type="is-info"><translate>Organizer</translate></b-tag>
|
|
</div>
|
|
<div v-else-if="event.participants.length === 1">
|
|
<translate
|
|
:translate-params="{name: event.participants[0].actor.preferredUsername}"
|
|
>%{name} organizes this event</translate>
|
|
</div>
|
|
<div v-else>
|
|
<span v-for="participant in event.participants" :key="participant.actor.uuid">
|
|
{{ participant.actor.preferredUsername }}
|
|
<span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,
|
|
<!-- <translate
|
|
:translate-params="{name: participant.actor.preferredUsername}"
|
|
> %{name} is in,</translate>-->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { IEvent, ParticipantRole } from '@/types/event.model';
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import DateComponent from '@/components/Event/Date.vue';
|
|
|
|
@Component({
|
|
components: {
|
|
DateComponent,
|
|
EventCard,
|
|
},
|
|
})
|
|
export default class EventCard extends Vue {
|
|
@Prop({ required: true }) event!: IEvent;
|
|
@Prop({ default() { return { hideDate: false, loggedPerson: false, hideDetails: false }; } }) options!: object;
|
|
|
|
data() {
|
|
return {
|
|
ParticipantRole,
|
|
};
|
|
}
|
|
}
|
|
</script>
|