diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
index 62aa75e4..16e6c96d 100644
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@@ -1,103 +1,33 @@
-
-
-
- {{ $t("Find an address") }}
-
- {{ $t("Getting location") }}
-
-
-
-
- {{ option.poiInfos.name }}
- {{ option.poiInfos.alternativeName }}
-
-
- {{ $t("Searching…") }}
-
- {{ $t('No results for "{queryText}"') }}
- {{
- $t("You can try another search term or drag and drop the marker on the map", {
- queryText,
- })
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ option.poiInfos.name }}
+ {{ option.poiInfos.alternativeName }}
+
+
+ {{ $t("Searching…") }}
+
+ {{ $t('No results for "{queryText}"') }}
+ {{
+ $t("You can try another search term or drag and drop the marker on the map", {
+ queryText,
+ })
+ }}
+
+
+
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index c6ea164e..1dddd51c 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -1,8 +1,8 @@
import gql from "graphql-tag";
export const SEARCH_EVENTS = gql`
- query SearchEvents($searchText: String!) {
- searchEvents(search: $searchText) {
+ query SearchEvents($location: String, $radius: Float, $tag: String, $term: String) {
+ searchEvents(location: $location, radius: $radius, tag: $tag, term: $term) {
total
elements {
title
diff --git a/js/src/router/event.ts b/js/src/router/event.ts
index beb2616c..0431c9e3 100644
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,6 +1,7 @@
import { RouteConfig, Route } from "vue-router";
import EventList from "../views/Event/EventList.vue";
import Location from "../views/Location.vue";
+import Search from "../views/Search.vue";
const participations = () =>
import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue");
@@ -112,6 +113,8 @@ export const eventRoutes: RouteConfig[] = [
{
path: "/tag/:tag",
name: EventRouteName.TAG,
- redirect: "/search/:tag",
+ component: Search,
+ props: true,
+ meta: { requiredAuth: false },
},
];
diff --git a/js/src/types/address.model.ts b/js/src/types/address.model.ts
index 2261d7bd..e320f59a 100644
--- a/js/src/types/address.model.ts
+++ b/js/src/types/address.model.ts
@@ -106,9 +106,12 @@ export class Address implements IAddress {
return { name, alternativeName, poiIcon };
}
- get fullName() {
+ get fullName(): string {
const { name, alternativeName } = this.poiInfos;
- return `${name}, ${alternativeName}`;
+ if (name && alternativeName) {
+ return `${name}, ${alternativeName}`;
+ }
+ return "";
}
get iconForPOI(): IPOIIcon {
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 8b0101f5..60267d53 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -29,7 +29,7 @@
{{ $t("Date parameters") }}
-
+
{{ $t("Description") }}
@@ -329,7 +329,7 @@ import PictureUpload from "@/components/PictureUpload.vue";
import EditorComponent from "@/components/Editor.vue";
import DateTimePicker from "@/components/Event/DateTimePicker.vue";
import TagInput from "@/components/Event/TagInput.vue";
-import AddressAutoComplete from "@/components/Event/AddressAutoComplete.vue";
+import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
import Subtitle from "@/components/Utils/Subtitle.vue";
import GroupPickerWrapper from "@/components/Group/GroupPickerWrapper.vue";
@@ -370,7 +370,7 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
GroupPickerWrapper,
Subtitle,
IdentityPickerWrapper,
- AddressAutoComplete,
+ FullAddressAutoComplete,
TagInput,
DateTimePicker,
PictureUpload,
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index c5240dc9..da4b5cb9 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -1,6 +1,14 @@
- {{ $t('Search results: "{search}"', { search: this.searchTerm }) }}
+
@@ -51,8 +59,11 @@ import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search";
import RouteName from "../router/name";
import EventCard from "../components/Event/EventCard.vue";
import GroupCard from "../components/Group/GroupCard.vue";
+import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
import { Group, IGroup } from "../types/actor";
+import { IAddress, Address } from "../types/address.model";
import { SearchEvent, SearchGroup } from "../types/search.model";
+import ngeohash from "ngeohash";
enum SearchTabs {
EVENTS = 0,
@@ -71,32 +82,37 @@ const tabsName: { events: number; groups: number } = {
query: SEARCH_EVENTS,
variables() {
return {
- searchText: this.searchTerm,
+ term: this.search,
+ tag: this.actualTag,
+ location: this.geohash,
};
},
skip() {
- return !this.searchTerm;
+ return !this.search && !this.actualTag;
},
},
searchGroups: {
query: SEARCH_GROUPS,
variables() {
return {
- searchText: this.searchTerm,
+ searchText: this.search,
};
},
skip() {
- return !this.searchTerm || this.isURL(this.searchTerm);
+ return !this.search || this.isURL(this.search);
},
},
},
components: {
GroupCard,
EventCard,
+ AddressAutoComplete,
},
})
export default class Search extends Vue {
- @Prop({ type: String, required: true }) searchTerm!: string;
+ @Prop({ type: String, required: false }) searchTerm!: string;
+
+ @Prop({ type: String, required: false }) tag!: string;
@Prop({ type: String, required: false, default: "events" }) searchType!: "events" | "groups";
@@ -106,6 +122,10 @@ export default class Search extends Vue {
activeTab: SearchTabs = tabsName[this.searchType];
+ search: string = this.searchTerm;
+ actualTag: string = this.tag;
+ location: IAddress = new Address();
+
@Watch("searchEvents")
async redirectURLToEvent() {
if (this.searchEvents.total === 1 && this.isURL(this.searchTerm)) {
@@ -159,6 +179,18 @@ export default class Search extends Vue {
a.href = url;
return (a.host && a.host !== window.location.host) as boolean;
}
+
+ processSearch() {
+ this.$apollo.queries.searchEvents.refetch();
+ }
+
+ get geohash() {
+ if (this.location && this.location.geom) {
+ const [lon, lat] = this.location.geom.split(";");
+ return ngeohash.encode(lat, lon, 6);
+ }
+ return undefined;
+ }
}