Add global search

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

js/src/components/Local/CloseContent.vue

@@ -28,7 +28,7 @@
     </div>
     <div class="overflow-hidden">
       <div
-        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8"
+        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8 p-1"
         ref="scrollContainer"
         @scroll="scrollHandler"
       >

js/src/components/Local/CloseEvents.vue

@@ -29,7 +29,7 @@
       <more-content
         v-if="userLocationName && userLocation?.lat && userLocation?.lon"
         :to="{
-          name: 'SEARCH',
+          name: RouteName.SEARCH,
           query: {
             locationName: userLocationName,
             lat: userLocation.lat?.toString(),
@@ -63,6 +63,8 @@ import { Paginate } from "@/types/paginate";
 import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
 import { useI18n } from "vue-i18n";
 import { coordsToGeoHash } from "@/utils/location";
+import { roundToNearestMinute } from "@/utils/datetime";
+import RouteName from "@/router/name";
 
 const props = defineProps<{ userLocation: LocationType }>();
 const emit = defineEmits(["doGeoLoc"]);
@@ -77,17 +79,27 @@ const userLocationName = computed(() => {
 });
 const suggestGeoloc = computed(() => props.userLocation?.isIPLocation);
 
+const geoHash = computed(() =>
+  coordsToGeoHash(props.userLocation.lat, props.userLocation.lon)
+);
+
 const { result: eventsResult, loading: loadingEvents } = useQuery<{
   searchEvents: Paginate<IEvent>;
-}>(SEARCH_EVENTS, () => ({
-  location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
-  beginsOn: new Date(),
-  endsOn: undefined,
-  radius: 25,
-  eventPage: 1,
-  limit: EVENT_PAGE_LIMIT,
-  type: "IN_PERSON",
-}));
+}>(
+  SEARCH_EVENTS,
+  () => ({
+    location: geoHash.value,
+    beginsOn: roundToNearestMinute(new Date()),
+    endsOn: undefined,
+    radius: 25,
+    eventPage: 1,
+    limit: EVENT_PAGE_LIMIT,
+    type: "IN_PERSON",
+  }),
+  () => ({
+    enabled: geoHash.value !== undefined,
+  })
+);
 
 const events = computed(
   () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }

js/src/components/Local/CloseGroups.vue

@@ -18,12 +18,12 @@
       </template>
     </template>
     <template #content>
-      <!-- <skeleton-group-result
+      <skeleton-group-result
         v-for="i in [...Array(6).keys()]"
         class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
         :key="i"
         v-show="loadingGroups"
-      /> -->
+      />
       <group-card
         v-for="group in selectedGroups"
         :key="group.id"
@@ -37,7 +37,7 @@
       <more-content
         v-if="userLocationName"
         :to="{
-          name: 'SEARCH',
+          name: RouteName.SEARCH,
           query: {
             locationName: userLocationName,
             lat: userLocation.lat?.toString(),
@@ -59,9 +59,9 @@
 </template>
 
 <script lang="ts" setup>
-// import SkeletonGroupResult from "../../components/result/SkeletonGroupResult.vue";
+import SkeletonGroupResult from "@/components/Group/SkeletonGroupResult.vue";
 import sampleSize from "lodash/sampleSize";
-import { LocationType } from "../../types/user-location.model";
+import { LocationType } from "@/types/user-location.model";
 import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
 import { IGroup } from "@/types/actor";
@@ -72,6 +72,7 @@ import { computed } from "vue";
 import GroupCard from "@/components/Group/GroupCard.vue";
 import { coordsToGeoHash } from "@/utils/location";
 import { useI18n } from "vue-i18n";
+import RouteName from "@/router/name";
 
 const props = defineProps<{ userLocation: LocationType }>();
 const emit = defineEmits(["doGeoLoc"]);

js/src/components/Local/LastEvents.vue

@@ -33,7 +33,7 @@
       />
       <more-content
         :to="{
-          name: 'SEARCH',
+          name: RouteName.SEARCH,
           query: {
             contentType: 'EVENTS',
           },
@@ -57,6 +57,7 @@ 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;

js/src/components/Local/OnlineEvents.vue

@@ -1,7 +1,8 @@
 <template>
   <close-content
+    class="container mx-auto px-2"
     :suggest-geoloc="false"
-    v-show="loadingEvents || events.length > 0"
+    v-show="loadingEvents || (events?.elements && events?.elements.length > 0)"
   >
     <template #title>
       {{ $t("Online upcoming events") }}
@@ -15,7 +16,7 @@
       />
       <event-card
         class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
-        v-for="event in events"
+        v-for="event in events?.elements"
         :key="event.id"
         :event="event"
         view-mode="column"
@@ -24,7 +25,7 @@
       />
       <more-content
         :to="{
-          name: 'SEARCH',
+          name: RouteName.SEARCH,
           query: {
             contentType: 'EVENTS',
             isOnline: 'true',
@@ -50,25 +51,27 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import SkeletonEventResult from "../result/SkeletonEventResult.vue";
+import SkeletonEventResult from "@/components/Event/SkeletonEventResult.vue";
 import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
 import { SEARCH_EVENTS } from "@/graphql/search";
-import EventCard from "../../components/Event/EventCard.vue";
+import EventCard from "@/components/Event/EventCard.vue";
 import { useQuery } from "@vue/apollo-composable";
+import RouteName from "@/router/name";
+import { Paginate } from "@/types/paginate";
+import { IEvent } from "@/types/event.model";
 
 const EVENT_PAGE_LIMIT = 12;
 
-const { result: searchEventResult, loading: loadingEvents } = useQuery(
-  SEARCH_EVENTS,
-  () => ({
-    beginsOn: new Date(),
-    endsOn: undefined,
-    eventPage: 1,
-    limit: EVENT_PAGE_LIMIT,
-    type: "ONLINE",
-  })
-);
+const { result: searchEventResult, loading: loadingEvents } = useQuery<{
+  searchEvents: Paginate<IEvent>;
+}>(SEARCH_EVENTS, () => ({
+  beginsOn: new Date(),
+  endsOn: undefined,
+  eventPage: 1,
+  limit: EVENT_PAGE_LIMIT,
+  type: "ONLINE",
+}));
 
-const events = computed(() => searchEventResult.value.searchEvents);
+const events = computed(() => searchEventResult.value?.searchEvents);
 </script>