fix #1469 and # 1475

src/components/Home/SearchFields.vue

@@ -1,7 +1,7 @@
 <template>
   <form
     id="search-anchor"
-    class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
+    class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center justify-center dark:text-slate-100"
     role="search"
     @submit.prevent="submit"
   >
@@ -38,6 +38,11 @@
 <script lang="ts" setup>
 import { IAddress } from "@/types/address.model";
 import { AddressSearchType } from "@/types/enums";
+import {
+  addressToLocation,
+  getLocationFromLocal,
+  storeLocationInLocal,
+} from "@/utils/location";
 import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter, useRoute } from "vue-router";
@@ -51,6 +56,7 @@ const props = defineProps<{
   location: IAddress | null;
   locationDefaultText?: string | null;
   search: string;
+  fromLocalStorage?: boolean | false;
 }>();
 
 const router = useRouter();
@@ -64,10 +70,19 @@ const emit = defineEmits<{
 
 const location = computed({
   get(): IAddress | null {
-    return props.location;
+    if (props.location) {
+      return props.location;
+    }
+    if (props.fromLocalStorage) {
+      return getLocationFromLocal();
+    }
+    return null;
   },
   set(newLocation: IAddress | null) {
     emit("update:location", newLocation);
+    if (props.fromLocalStorage) {
+      storeLocationInLocal(newLocation);
+    }
   },
 });
 
@@ -82,12 +97,7 @@ const search = computed({
 
 const submit = () => {
   emit("submit");
-  const lat = location.value?.geom
-    ? parseFloat(location.value?.geom?.split(";")?.[1])
-    : undefined;
-  const lon = location.value?.geom
-    ? parseFloat(location.value?.geom?.split(";")?.[0])
-    : undefined;
+  const { lat, lon } = addressToLocation(location.value);
   router.push({
     name: RouteName.SEARCH,
     query: {

src/components/Local/CloseEvents.vue

@@ -1,20 +1,36 @@
 <template>
   <close-content
     class="container mx-auto px-2"
-    v-show="loading || (events && events.total > 0)"
-    :suggestGeoloc="suggestGeoloc"
+    :suggestGeoloc="false"
     v-on="attrs"
-    @doGeoLoc="emit('doGeoLoc')"
-    :doingGeoloc="doingGeoloc"
   >
     <template #title>
-      <template v-if="userLocationName">
-        {{ t("Events nearby {position}", { position: userLocationName }) }}
+      <template v-if="userLocation?.name">
+        {{
+          t("Incoming events and activities nearby {position}", {
+            position: userLocation?.name,
+          })
+        }}
       </template>
       <template v-else>
-        {{ t("Events close to you") }}
+        {{ t("Incoming events and activities") }}
       </template>
     </template>
+    <template #subtitle>
+      <div v-if="!loading && events.total == 0">
+        <template v-if="userLocation?.name">
+          {{
+            t(
+              "No events found nearby {position}. Try removing your position to see all events!",
+              { position: userLocation?.name }
+            )
+          }}
+        </template>
+        <template v-else>
+          {{ t("No events found") }}
+        </template>
+      </div>
+    </template>
     <template #content>
       <skeleton-event-result
         v-for="i in 6"
@@ -28,25 +44,36 @@
         :key="event.uuid"
       />
       <more-content
-        v-if="userLocationName && userLocation?.lat && userLocation?.lon"
+        v-if="userLocation?.name && userLocation?.lat && userLocation?.lon"
         :to="{
           name: RouteName.SEARCH,
           query: {
-            locationName: userLocationName,
+            locationName: userLocation?.name,
             lat: userLocation.lat?.toString(),
             lon: userLocation.lon?.toString(),
-            contentType: 'EVENTS',
+            contentType: 'ALL',
             distance: `${distance}_km`,
           },
         }"
         :picture="userLocation?.picture"
       >
         {{
-          t("View more events around {position}", {
-            position: userLocationName,
+          t("View more events and activities around {position}", {
+            position: userLocation?.name,
           })
         }}
       </more-content>
+      <more-content
+        v-else
+        :to="{
+          name: RouteName.SEARCH,
+          query: {
+            contentType: 'ALL',
+          },
+        }"
+      >
+        {{ t("View more events and activities") }}
+      </more-content>
     </template>
   </close-content>
 </template>
@@ -55,76 +82,55 @@
 import { LocationType } from "../../types/user-location.model";
 import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
-import { computed, onMounted, useAttrs } from "vue";
-import { SEARCH_EVENTS } from "@/graphql/search";
+import { watch, computed, useAttrs } from "vue";
+import { FETCH_EVENTS } from "@/graphql/event";
 import { IEvent } from "@/types/event.model";
-import { useLazyQuery } from "@vue/apollo-composable";
+import { useQuery } from "@vue/apollo-composable";
 import EventCard from "../Event/EventCard.vue";
 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";
+import { EventSortField, SortDirection } from "@/types/enums";
 
 const props = defineProps<{
   userLocation: LocationType;
   doingGeoloc?: boolean;
 }>();
-const emit = defineEmits(["doGeoLoc"]);
-
-const EVENT_PAGE_LIMIT = 12;
+defineEmits(["doGeoLoc"]);
 
 const { t } = useI18n({ useScope: "global" });
 const attrs = useAttrs();
 
 const userLocation = computed(() => props.userLocation);
 
-const userLocationName = computed(() => {
-  return userLocation.value?.name;
+const geoHash = computed(() => {
+  console.debug("userLocation updated", userLocation.value);
+  const geo = coordsToGeoHash(userLocation.value.lat, userLocation.value.lon);
+  console.debug("geohash:", geo);
+  return geo;
 });
-const suggestGeoloc = computed(() => userLocation.value?.isIPLocation);
 
-const geoHash = computed(() =>
-  coordsToGeoHash(props.userLocation.lat, props.userLocation.lon)
+const distance = computed<number>(() =>
+  userLocation.value?.isIPLocation ? 150 : 25
 );
 
-const distance = computed<number>(() => (suggestGeoloc.value ? 150 : 25));
-
-const now = computed(() => roundToNearestMinute(new Date()));
-
-const searchEnabled = computed(() => geoHash.value != undefined);
-
-const {
-  result: eventsResult,
-  loading: loadingEvents,
-  load: load,
-} = useLazyQuery<{
+const eventsQuery = useQuery<{
   searchEvents: Paginate<IEvent>;
-}>(
-  SEARCH_EVENTS,
-  () => ({
-    location: geoHash.value,
-    beginsOn: now.value,
-    endsOn: undefined,
-    radius: distance.value,
-    eventPage: 1,
-    limit: EVENT_PAGE_LIMIT,
-    type: "IN_PERSON",
-  }),
-  () => ({
-    enabled: searchEnabled.value,
-    fetchPolicy: "cache-first",
-  })
-);
+}>(FETCH_EVENTS, () => ({
+  orderBy: EventSortField.BEGINS_ON,
+  direction: SortDirection.ASC,
+  longevents: false,
+  location: geoHash.value,
+  radius: distance.value,
+}));
 
 const events = computed(
-  () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }
+  () => eventsQuery.result.value?.events ?? { elements: [], total: 0 }
 );
+watch(events, (e) => console.debug("events: ", e));
 
-onMounted(async () => {
-  await load();
-});
-
-const loading = computed(() => props.doingGeoloc || loadingEvents.value);
+const loading = computed(() => props.doingGeoloc || eventsQuery.loading.value);
+watch(loading, (l) => console.debug("loading: ", l));
 </script>

src/components/Local/LastEvents.vue

@@ -60,6 +60,7 @@ const { result: resultEvents, loading: loadingEvents } = useQuery<{
 }>(FETCH_EVENTS, {
   orderBy: EventSortField.BEGINS_ON,
   direction: SortDirection.ASC,
+  longevents: false,
 });
 const events = computed(
   () => resultEvents.value?.events ?? { total: 0, elements: [] }