Compare commits

...

1 commit

Author SHA1 Message Date
johndoe4 81a1ca1c6b Adding UpcomingEvents.vue & include it to HomeView.vue
- Will show all upcoming Events sorted by Date on the Startpage
2023-05-17 00:33:37 +02:00
2 changed files with 80 additions and 0 deletions

View file

@ -0,0 +1,78 @@
<template>
<close-content
class="container mx-auto px-2"
v-show="loadingEvents || (events && events.total > 0)"
:suggestGeoloc="false"
v-on="attrs"
>
<template #title>
{{ t("Upcoming events") }}
</template>
<template #subtitle>
<i18n-t
class="text-slate-700 dark:text-slate-300"
tag="p"
keypath="On {instance} and other federated instances"
>
<template #instance>
<b>{{ instanceName }}</b>
</template>
</i18n-t>
</template>
<template #content>
<skeleton-event-result
v-for="i in 6"
class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
:key="i"
v-show="loadingEvents"
/>
<event-card
v-for="event in events.elements"
:event="event"
:key="event.uuid"
/>
<more-content
:to="{
name: RouteName.SEARCH,
query: {
contentType: 'EVENTS',
},
}"
>
{{ t("View more events") }}
</more-content>
</template>
</close-content>
</template>
<script lang="ts" setup>
import MoreContent from "./MoreContent.vue";
import CloseContent from "./CloseContent.vue";
import { computed, useAttrs } from "vue";
import { IEvent } from "@/types/event.model";
import { useQuery } from "@vue/apollo-composable";
import EventCard from "../Event/EventCard.vue";
import { Paginate } from "@/types/paginate";
import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
import { EventSortField, SortDirection } from "@/types/enums";
import { FETCH_EVENTS } from "@/graphql/event";
import { useI18n } from "vue-i18n";
import RouteName from "@/router/name";
defineProps<{
instanceName: string;
}>();
const { t } = useI18n({ useScope: "global" });
const attrs = useAttrs();
const { result: resultEvents, loading: loadingEvents } = useQuery<{
events: Paginate<IEvent>;
}>(FETCH_EVENTS, {
orderBy: EventSortField.BEGINS_ON,
direction: SortDirection.ASC,
});
const events = computed(
() => resultEvents.value?.events ?? { total: 0, elements: [] }
);
</script>

View file

@ -143,6 +143,7 @@
/> />
<CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" /> <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
<OnlineEvents /> <OnlineEvents />
<UpcomingEvents v-if="instanceName" :instanceName="instanceName" />
<LastEvents v-if="instanceName" :instanceName="instanceName" /> <LastEvents v-if="instanceName" :instanceName="instanceName" />
<!-- Unlogged content section --> <!-- Unlogged content section -->
<picture v-if="!currentUser?.isLoggedIn"> <picture v-if="!currentUser?.isLoggedIn">
@ -196,6 +197,7 @@ import { IEvent } from "../types/event.model";
import CloseEvents from "@/components/Local/CloseEvents.vue"; import CloseEvents from "@/components/Local/CloseEvents.vue";
import CloseGroups from "@/components/Local/CloseGroups.vue"; import CloseGroups from "@/components/Local/CloseGroups.vue";
import LastEvents from "@/components/Local/LastEvents.vue"; import LastEvents from "@/components/Local/LastEvents.vue";
import LastEvents from "@/components/Local/UpcomingEvents.vue";
import OnlineEvents from "@/components/Local/OnlineEvents.vue"; import OnlineEvents from "@/components/Local/OnlineEvents.vue";
import { import {
computed, computed,