mobilizon/js/src/components/Event/EventCard.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}"
            >&nbsp;%{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>