Homepage cards improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Local/LastEvents.vue

@@ -0,0 +1,76 @@
+<template>
+  <close-content
+    v-show="loadingEvents || (events && events.total > 0)"
+    :suggestGeoloc="false"
+    v-on="attrs"
+  >
+    <template #title>
+      {{ t("Last published 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: '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";
+
+defineProps<{
+  instanceName: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+
+const { result: resultEvents, loading: loadingEvents } = useQuery<{
+  events: Paginate<IEvent>;
+}>(FETCH_EVENTS, {
+  orderBy: EventSortField.INSERTED_AT,
+  direction: SortDirection.DESC,
+});
+const events = computed(
+  () => resultEvents.value?.events ?? { total: 0, elements: [] }
+);
+</script>