diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue index 281c92d7b..564ac2b78 100644 --- a/js/src/components/Group/GroupCard.vue +++ b/js/src/components/Group/GroupCard.vue @@ -23,14 +23,14 @@ -
+

{{ displayName(group) }}

- + {{ `@${usernameWithDomain(group)}` }}
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue index 1cf9edd3f..cfff58bbb 100644 --- a/js/src/views/SearchView.vue +++ b/js/src/views/SearchView.vue @@ -539,6 +539,8 @@ import FilterSection from "@/components/Search/filters/FilterSection.vue"; import { listShortDisjunctionFormatter } from "@/utils/listFormat"; import langs from "@/i18n/langs.json"; import { useEventCategories, useFeatures } from "@/composition/apollo/config"; +import geohash from "ngeohash"; +import { coordsToGeoHash } from "@/utils/location"; const search = useRouteQuery("search", ""); @@ -560,8 +562,9 @@ const arrayTransformer: RouteQueryTransformer = { const eventPage = useRouteQuery("eventPage", 1, integerTransformer); const groupPage = useRouteQuery("groupPage", 1, integerTransformer); -const geohash = useRouteQuery("geohash", ""); -const radius = useRouteQuery("radius", null, floatTransformer); +const latitude = useRouteQuery("lat", undefined, floatTransformer); +const longitude = useRouteQuery("lon", undefined, floatTransformer); + const distance = useRouteQuery("distance", "10_km"); const when = useRouteQuery("when", "any"); const contentType = useRouteQuery( @@ -811,13 +814,19 @@ const filtersPanelOpened = ref(true); const toggleFilters = () => (filtersPanelOpened.value = !filtersPanelOpened.value); +const geoHashLocation = computed(() => + coordsToGeoHash(latitude.value, longitude.value) +); + +const radius = computed(() => Number.parseInt(distance.value.slice(0, -3))); + const { result: searchElementsResult, loading: searchLoading } = useQuery<{ searchEvents: Paginate; searchGroups: Paginate; }>(SEARCH_EVENTS_AND_GROUPS, () => ({ term: search.value, tags: props.tag, - location: geohash.value, + location: geoHashLocation.value, beginsOn: start.value, endsOn: end.value, radius: radius.value,