mobilizon.chapril.org-mobil.../js/src/views/Event/EventList.vue

56 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<section class="container">
<h1>{{ $t("Event list") }}</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
<EventCard
v-for="event in events"
:key="event.uuid"
:event="event"
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<b-message
v-if-else="events.length === 0 && $apollo.loading === false"
type="is-danger"
>{{ $t("No events found") }}</b-message
>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import EventCard from "../../components/Event/EventCard.vue";
import RouteName from "../../router/name";
import { IEvent } from "../../types/event.model";
2019-02-22 14:55:47 +01:00
@Component({
components: {
EventCard,
},
metaInfo() {
return {
title: this.$t("Event list") as string,
};
},
})
export default class EventList extends Vue {
@Prop(String) location!: string;
events = [];
loading = true;
locationChip = false;
locationText = "";
viewEvent(event: IEvent): void {
2019-02-22 14:55:47 +01:00
this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>