Allow events to be searched by location and period

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

js/src/components/Event/AddressAutoComplete.vue

@@ -1,16 +1,4 @@
 <template>
-  <div class="address-autocomplete">
-    <b-field expanded>
-      <template slot="label">
-        {{ $t("Find an address") }}
-        <b-button
-          v-if="!gettingLocation"
-          size="is-small"
-          icon-right="map-marker"
-          @click="locateMe"
-        />
-        <span v-else>{{ $t("Getting location") }}</span>
-      </template>
   <b-autocomplete
     :data="addressData"
     v-model="queryText"
@@ -37,67 +25,9 @@
             queryText,
           })
         }}</span>
-            <!--                        <p class="control" @click="openNewAddressModal">-->
-            <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
-            <!--                        </p>-->
       </div>
     </template>
   </b-autocomplete>
-    </b-field>
-    <div class="map" v-if="selected && selected.geom">
-      <map-leaflet
-        :coords="selected.geom"
-        :marker="{
-          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
-          icon: selected.poiInfos.poiIcon.icon,
-        }"
-        :updateDraggableMarkerCallback="reverseGeoCode"
-        :options="{ zoom: mapDefaultZoom }"
-        :readOnly="false"
-      />
-    </div>
-    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
-    <!--            <div class="modal-card" style="width: auto">-->
-    <!--                <header class="modal-card-head">-->
-    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
-    <!--                </header>-->
-    <!--                <section class="modal-card-body">-->
-    <!--                    <form>-->
-    <!--                        <b-field :label="$t('Name')">-->
-    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field :label="$t('Street')">-->
-    <!--                            <b-input v-model="selected.street" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Postal Code')">-->
-    <!--                                <b-input v-model="selected.postalCode" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Locality')">-->
-    <!--                                <b-input v-model="selected.locality" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Region')">-->
-    <!--                                <b-input v-model="selected.region" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Country')">-->
-    <!--                                <b-input v-model="selected.country" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-    <!--                    </form>-->
-    <!--                </section>-->
-    <!--                <footer class="modal-card-foot">-->
-    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
-    <!--                </footer>-->
-    <!--            </div>-->
-    <!--        </b-modal>-->
-  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@@ -109,9 +39,6 @@ import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
 
 @Component({
-  components: {
-    "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
-  },
   apollo: {
     config: CONFIG,
   },
@@ -127,16 +54,6 @@ export default class AddressAutoComplete extends Vue {
 
   queryText: string = (this.value && new Address(this.value).fullName) || "";
 
-  addressModalActive = false;
-
-  private gettingLocation = false;
-
-  private location!: Position;
-
-  private gettingLocationError: any;
-
-  private mapDefaultZoom = 15;
-
   config!: IConfig;
 
   fetchAsyncData!: Function;
@@ -197,76 +114,6 @@ export default class AddressAutoComplete extends Vue {
     this.selected = option;
     this.$emit("input", this.selected);
   }
-
-  resetPopup() {
-    this.selected = new Address();
-  }
-
-  openNewAddressModal() {
-    this.resetPopup();
-    this.addressModalActive = true;
-  }
-
-  async reverseGeoCode(e: LatLng, zoom: number) {
-    // If the position has been updated through autocomplete selection, no need to geocode it!
-    if (this.checkCurrentPosition(e)) return;
-    const result = await this.$apollo.query({
-      query: REVERSE_GEOCODE,
-      variables: {
-        latitude: e.lat,
-        longitude: e.lng,
-        zoom,
-        locale: this.$i18n.locale,
-      },
-    });
-
-    this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
-    const defaultAddress = new Address(this.addressData[0]);
-    this.selected = defaultAddress;
-    this.$emit("input", this.selected);
-    this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
-  }
-
-  checkCurrentPosition(e: LatLng) {
-    if (!this.selected || !this.selected.geom) return false;
-    const lat = parseFloat(this.selected.geom.split(";")[1]);
-    const lon = parseFloat(this.selected.geom.split(";")[0]);
-
-    return e.lat === lat && e.lng === lon;
-  }
-
-  async locateMe(): Promise<void> {
-    this.gettingLocation = true;
-    try {
-      this.gettingLocation = false;
-      this.location = await AddressAutoComplete.getLocation();
-      this.mapDefaultZoom = 12;
-      this.reverseGeoCode(
-        new LatLng(this.location.coords.latitude, this.location.coords.longitude),
-        12
-      );
-    } catch (e) {
-      this.gettingLocation = false;
-      this.gettingLocationError = e.message;
-    }
-  }
-
-  static async getLocation(): Promise<Position> {
-    return new Promise((resolve, reject) => {
-      if (!("geolocation" in navigator)) {
-        reject(new Error("Geolocation is not available."));
-      }
-
-      navigator.geolocation.getCurrentPosition(
-        (pos) => {
-          resolve(pos);
-        },
-        (err) => {
-          reject(err);
-        }
-      );
-    });
-  }
 }
 </script>
 <style lang="scss">

js/src/components/Event/EventCard.vue

@@ -1,31 +1,3 @@
-<docs>
-### EventCard
-
-A simple card for an event
-
-```vue
-<EventCard
-  :event="{
-    title: 'Vue Styleguidist first meetup: learn the basics!',
-    beginsOn: new Date(),
-    tags: [
-      {
-        slug: 'test', title: 'Test'
-      },
-      {
-        slug: 'mobilizon', title: 'Mobilizon'
-      },
-    ],
-    organizerActor: {
-      preferredUsername: 'tcit',
-      name: 'Some Random Dude',
-      domain: null
-    }
-  }"
-  />
-```
-</docs>
-
 <template>
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image">
@@ -36,9 +8,13 @@ A simple card for an event
         }')`"
       >
         <div class="tag-container" v-if="event.tags">
-          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{
+          <router-link
-            tag.title
+            :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
-          }}</b-tag>
+            v-for="tag in event.tags.slice(0, 3)"
+            :key="tag.slug"
+          >
+            <b-tag type="is-light">{{ tag.title }}</b-tag>
+          </router-link>
         </div>
       </figure>
     </div>
@@ -101,6 +77,7 @@ import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model"
 import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { Actor, Person } from "@/types/actor";
+import RouteName from "../../router/name";
 
 @Component({
   components: {
@@ -114,6 +91,8 @@ export default class EventCard extends Vue {
 
   ParticipantRole = ParticipantRole;
 
+  RouteName = RouteName;
+
   defaultOptions: IEventCardOptions = {
     hideDate: false,
     loggedPerson: false,
@@ -176,6 +155,9 @@ a.card {
     z-index: 10;
     max-width: 40%;
 
+    a {
+      text-decoration: none;
+
       span.tag {
         margin: 5px auto;
         text-overflow: ellipsis;
@@ -187,6 +169,7 @@ a.card {
         color: #3c376e;
       }
     }
+  }
 
   div.card-image {
     background: $secondary;

js/src/components/Event/FullAddressAutoComplete.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="address-autocomplete">
+    <b-field expanded>
+      <template slot="label">
+        {{ $t("Find an address") }}
+        <b-button
+          v-if="!gettingLocation"
+          size="is-small"
+          icon-right="map-marker"
+          @click="locateMe"
+        />
+        <span v-else>{{ $t("Getting location") }}</span>
+      </template>
+      <b-autocomplete
+        :data="addressData"
+        v-model="queryText"
+        :placeholder="$t('e.g. 10 Rue Jangot')"
+        field="fullName"
+        :loading="isFetching"
+        @typing="fetchAsyncData"
+        icon="map-marker"
+        expanded
+        @select="updateSelected"
+      >
+        <template slot-scope="{ option }">
+          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <b>{{ option.poiInfos.name }}</b
+          ><br />
+          <small>{{ option.poiInfos.alternativeName }}</small>
+        </template>
+        <template slot="empty">
+          <span v-if="isFetching">{{ $t("Searching…") }}</span>
+          <div v-else-if="queryText.length >= 3" class="is-enabled">
+            <span>{{ $t('No results for "{queryText}"') }}</span>
+            <span>{{
+              $t("You can try another search term or drag and drop the marker on the map", {
+                queryText,
+              })
+            }}</span>
+            <!--                        <p class="control" @click="openNewAddressModal">-->
+            <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
+            <!--                        </p>-->
+          </div>
+        </template>
+      </b-autocomplete>
+    </b-field>
+    <div class="map" v-if="selected && selected.geom">
+      <map-leaflet
+        :coords="selected.geom"
+        :marker="{
+          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
+          icon: selected.poiInfos.poiIcon.icon,
+        }"
+        :updateDraggableMarkerCallback="reverseGeoCode"
+        :options="{ zoom: mapDefaultZoom }"
+        :readOnly="false"
+      />
+    </div>
+    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
+    <!--            <div class="modal-card" style="width: auto">-->
+    <!--                <header class="modal-card-head">-->
+    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
+    <!--                </header>-->
+    <!--                <section class="modal-card-body">-->
+    <!--                    <form>-->
+    <!--                        <b-field :label="$t('Name')">-->
+    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field :label="$t('Street')">-->
+    <!--                            <b-input v-model="selected.street" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Postal Code')">-->
+    <!--                                <b-input v-model="selected.postalCode" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Locality')">-->
+    <!--                                <b-input v-model="selected.locality" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Region')">-->
+    <!--                                <b-input v-model="selected.region" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Country')">-->
+    <!--                                <b-input v-model="selected.country" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+    <!--                    </form>-->
+    <!--                </section>-->
+    <!--                <footer class="modal-card-foot">-->
+    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
+    <!--                </footer>-->
+    <!--            </div>-->
+    <!--        </b-modal>-->
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { LatLng } from "leaflet";
+import { debounce } from "lodash";
+import { Address, IAddress } from "../../types/address.model";
+import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
+import { CONFIG } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
+
+@Component({
+  components: {
+    "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
+  },
+  apollo: {
+    config: CONFIG,
+  },
+})
+export default class FullAddressAutoComplete extends Vue {
+  @Prop({ required: true }) value!: IAddress;
+
+  addressData: IAddress[] = [];
+
+  selected: IAddress = new Address();
+
+  isFetching = false;
+
+  queryText: string = (this.value && new Address(this.value).fullName) || "";
+
+  addressModalActive = false;
+
+  private gettingLocation = false;
+
+  private location!: Position;
+
+  private gettingLocationError: any;
+
+  private mapDefaultZoom = 15;
+
+  config!: IConfig;
+
+  fetchAsyncData!: Function;
+
+  // We put this in data because of issues like
+  // https://github.com/vuejs/vue-class-component/issues/263
+  data() {
+    return {
+      fetchAsyncData: debounce(this.asyncData, 200),
+    };
+  }
+
+  async asyncData(query: string) {
+    if (!query.length) {
+      this.addressData = [];
+      this.selected = new Address();
+      return;
+    }
+
+    if (query.length < 3) {
+      this.addressData = [];
+      return;
+    }
+
+    this.isFetching = true;
+    const result = await this.$apollo.query({
+      query: ADDRESS,
+      fetchPolicy: "network-only",
+      variables: {
+        query,
+        locale: this.$i18n.locale,
+      },
+    });
+
+    this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address));
+    this.isFetching = false;
+  }
+
+  @Watch("config")
+  watchConfig(config: IConfig) {
+    if (!config.geocoding.autocomplete) {
+      // If autocomplete is disabled, we put a larger debounce value
+      // so that we don't request with incomplete address
+      this.fetchAsyncData = debounce(this.asyncData, 2000);
+    }
+  }
+
+  @Watch("value")
+  updateEditing() {
+    if (!(this.value && this.value.id)) return;
+    this.selected = this.value;
+    const address = new Address(this.selected);
+    this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
+  }
+
+  updateSelected(option: IAddress) {
+    if (option == null) return;
+    this.selected = option;
+    this.$emit("input", this.selected);
+  }
+
+  resetPopup() {
+    this.selected = new Address();
+  }
+
+  openNewAddressModal() {
+    this.resetPopup();
+    this.addressModalActive = true;
+  }
+
+  async reverseGeoCode(e: LatLng, zoom: number) {
+    // If the position has been updated through autocomplete selection, no need to geocode it!
+    if (this.checkCurrentPosition(e)) return;
+    const result = await this.$apollo.query({
+      query: REVERSE_GEOCODE,
+      variables: {
+        latitude: e.lat,
+        longitude: e.lng,
+        zoom,
+        locale: this.$i18n.locale,
+      },
+    });
+
+    this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
+    const defaultAddress = new Address(this.addressData[0]);
+    this.selected = defaultAddress;
+    this.$emit("input", this.selected);
+    this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
+  }
+
+  checkCurrentPosition(e: LatLng) {
+    if (!this.selected || !this.selected.geom) return false;
+    const lat = parseFloat(this.selected.geom.split(";")[1]);
+    const lon = parseFloat(this.selected.geom.split(";")[0]);
+
+    return e.lat === lat && e.lng === lon;
+  }
+
+  async locateMe(): Promise<void> {
+    this.gettingLocation = true;
+    try {
+      this.gettingLocation = false;
+      this.location = await FullAddressAutoComplete.getLocation();
+      this.mapDefaultZoom = 12;
+      this.reverseGeoCode(
+        new LatLng(this.location.coords.latitude, this.location.coords.longitude),
+        12
+      );
+    } catch (e) {
+      this.gettingLocation = false;
+      this.gettingLocationError = e.message;
+    }
+  }
+
+  static async getLocation(): Promise<Position> {
+    return new Promise((resolve, reject) => {
+      if (!("geolocation" in navigator)) {
+        reject(new Error("Geolocation is not available."));
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          resolve(pos);
+        },
+        (err) => {
+          reject(err);
+        }
+      );
+    });
+  }
+}
+</script>
+<style lang="scss">
+.address-autocomplete {
+  margin-bottom: 0.75rem;
+}
+
+.autocomplete {
+  .dropdown-menu {
+    z-index: 2000;
+  }
+
+  .dropdown-item.is-disabled {
+    opacity: 1 !important;
+    cursor: auto;
+  }
+}
+
+.read-only {
+  cursor: pointer;
+}
+
+.map {
+  height: 400px;
+  width: 100%;
+}
+</style>

js/src/graphql/search.ts

@@ -1,8 +1,8 @@
 import gql from "graphql-tag";
 
 export const SEARCH_EVENTS = gql`
-  query SearchEvents($searchText: String!) {
+  query SearchEvents($location: String, $radius: Float, $tag: String, $term: String) {
-    searchEvents(search: $searchText) {
+    searchEvents(location: $location, radius: $radius, tag: $tag, term: $term) {
       total
       elements {
         title

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 },
   },
 ];

js/src/types/address.model.ts

@@ -106,10 +106,13 @@ export class Address implements IAddress {
     return { name, alternativeName, poiIcon };
   }
 
-  get fullName() {
+  get fullName(): string {
     const { name, alternativeName } = this.poiInfos;
+    if (name && alternativeName) {
       return `${name}, ${alternativeName}`;
     }
+    return "";
+  }
 
   get iconForPOI(): IPOIIcon {
     if (this.type == null) {

js/src/views/Event/Edit.vue

@@ -29,7 +29,7 @@
           {{ $t("Date parameters") }}
         </b-button>
 
-        <address-auto-complete v-model="event.physicalAddress" />
+        <full-address-auto-complete v-model="event.physicalAddress" />
 
         <div class="field">
           <label class="label">{{ $t("Description") }}</label>
@@ -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,

js/src/views/Search.vue

@@ -1,6 +1,14 @@
 <template>
   <section class="container">
-    <h1>{{ $t('Search results: "{search}"', { search: this.searchTerm }) }}</h1>
+    <form @submit.prevent="processSearch" v-if="!actualTag">
+      <b-field :label="$t('Event')">
+        <b-input size="is-large" v-model="search" />
+      </b-field>
+      <b-field :label="$t('Location')">
+        <address-auto-complete v-model="location" />
+      </b-field>
+      <b-button native-type="submit">{{ $t("Go") }}</b-button>
+    </form>
     <b-loading :active.sync="$apollo.loading" />
     <b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab">
       <b-tab-item>
@@ -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;
+  }
 }
 </script>
 <style lang="scss">

lib/federation/activity_pub/transmogrifier.ex

@@ -239,8 +239,7 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
   def handle_incoming(
         %{
           "type" => activity_type,
-          "object" => %{"type" => object_type, "id" => object_url} = object,
+          "object" => %{"type" => object_type, "id" => object_url} = object
-          "to" => to
         } = data
       )
       when activity_type in ["Create", "Add"] and

lib/graphql/api/search.ex

@@ -51,25 +51,20 @@ defmodule Mobilizon.GraphQL.API.Search do
   """
   @spec search_events(String.t(), integer | nil, integer | nil) ::
           {:ok, Page.t()} | {:error, String.t()}
-  def search_events(search, page \\ 1, limit \\ 10) do
+  def search_events(%{term: term} = args, page \\ 1, limit \\ 10) do
-    search = String.trim(search)
+    term = String.trim(term)
 
-    cond do
+    if is_url(term) do
-      search == "" ->
-        {:error, "Search can't be empty"}
-
-      is_url(search) ->
       # skip, if it's w not an actor
-        case process_from_url(search) do
+      case process_from_url(term) do
         %Page{total: _total, elements: _elements} = page ->
           {:ok, page}
 
         _ ->
           {:ok, %{total: 0, elements: []}}
       end
-
+    else
-      true ->
+      {:ok, Events.build_events_for_search(Map.put(args, :term, term), page, limit)}
-        {:ok, Events.build_events_for_search(search, page, limit)}
     end
   end
 

lib/graphql/resolvers/search.ex

@@ -22,7 +22,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Search do
   @doc """
   Search events
   """
-  def search_events(_parent, %{search: search, page: page, limit: limit}, _resolution) do
+  def search_events(_parent, %{page: page, limit: limit} = args, _resolution) do
-    Search.search_events(search, page, limit)
+    Search.search_events(args, page, limit)
   end
 end

lib/graphql/schema/search.ex

@@ -45,7 +45,10 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
 
     @desc "Search events"
     field :search_events, :events do
-      arg(:search, non_null(:string))
+      arg(:term, :string, default_value: "")
+      arg(:tag, :string)
+      arg(:location, :string, description: "A geohash for coordinates")
+      arg(:radius, :float, default_value: 50)
       arg(:page, :integer, default_value: 1)
       arg(:limit, :integer, default_value: 10)
 

lib/mobilizon/events/events.ex

@@ -8,6 +8,7 @@ defmodule Mobilizon.Events do
   import Ecto.Query
   import EctoEnum
 
+  import Mobilizon.Service.Guards
   import Mobilizon.Storage.Ecto
 
   alias Ecto.{Changeset, Multi}
@@ -457,14 +458,13 @@ defmodule Mobilizon.Events do
   @doc """
   Builds a page struct for events by their name.
   """
-  @spec build_events_for_search(String.t(), integer | nil, integer | nil) :: Page.t()
+  @spec build_events_for_search(map(), integer | nil, integer | nil) :: Page.t()
-  def build_events_for_search(name, page \\ nil, limit \\ nil)
+  def build_events_for_search(%{term: term} = args, page \\ nil, limit \\ nil) do
-  def build_events_for_search("", _page, _limit), do: %Page{total: 0, elements: []}
+    term
-
-  def build_events_for_search(name, page, limit) do
-    name
     |> normalize_search_string()
     |> events_for_search_query()
+    |> events_for_tag(args)
+    |> events_for_location(args)
     |> filter_local_or_from_followed_instances_events()
     |> Page.build_page(page, limit)
   end
@@ -1283,6 +1283,8 @@ defmodule Mobilizon.Events do
   end
 
   @spec do_event_for_search_query(Ecto.Query.t(), String.t()) :: Ecto.Query.t()
+  # defp do_event_for_search_query(query, ""), do: query
+
   defp do_event_for_search_query(query, search_string) do
     from(event in query,
       join: id_and_rank in matching_event_ids_and_ranks(search_string),
@@ -1291,6 +1293,34 @@ defmodule Mobilizon.Events do
     )
   end
 
+  @spec events_for_tag(Ecto.Query.t(), map()) :: Ecto.Query.t()
+  defp events_for_tag(query, %{tag: tag}) when not is_nil(tag) and tag != "" do
+    query
+    |> join(:inner, [q, _r], te in "events_tags", on: q.id == te.event_id)
+    |> join(:inner, [q, _r, te], t in Tag, on: te.tag_id == t.id)
+    |> where([q, _r, te, t], t.title == ^tag)
+  end
+
+  defp events_for_tag(query, _args), do: query
+
+  @spec events_for_location(Ecto.Query.t(), map()) :: Ecto.Query.t()
+  defp events_for_location(query, %{location: location, radius: radius})
+       when not is_nil_or_empty_string(location) and not is_nil(radius) do
+    with {lon, lat} <- Geohax.decode(location),
+         point <- Geo.WKT.decode!("SRID=4326;POINT(#{lon} #{lat})") do
+      query
+      |> join(:inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
+      |> where(
+        [q],
+        st_dwithin_in_meters(^point, as(:address).geom, ^(radius * 1000))
+      )
+    else
+      _ -> query
+    end
+  end
+
+  defp events_for_location(query, _args), do: query
+
   @spec normalize_search_string(String.t()) :: String.t()
   defp normalize_search_string(search_string) do
     search_string

lib/service/guards.ex

@@ -0,0 +1,7 @@
+defmodule Mobilizon.Service.Guards do
+  @moduledoc """
+  Various guards
+  """
+
+  defguard is_nil_or_empty_string(value) when is_nil(value) or value == ""
+end

test/graphql/resolvers/search_test.exs

@@ -13,7 +13,22 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
     {:ok, conn: conn, user: user}
   end
 
-  test "search_events/3 finds events with basic search", %{
+  describe "search events/3" do
+    @search_events_query """
+    query SearchEvents($location: String, $radius: Float, $tag: String, $term: String) {
+      searchEvents(location: $location, radius: $radius, tag: $tag, term: $term) {
+        total,
+        elements {
+          id
+          title,
+          uuid,
+          __typename
+        }
+      }
+    }
+    """
+
+    test "finds events with basic search", %{
       conn: conn,
       user: user
     } do
@@ -22,32 +37,142 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
       event = insert(:event, title: "test_event")
       Workers.BuildSearch.insert_search_event(event)
 
-    query = """
-    {
-        search_events(search: "test") {
-            total,
-            elements {
-              title,
-              uuid,
-              __typename
-            }
-        },
-    }
-    """
-
       res =
-      conn
+        AbsintheHelpers.graphql_query(conn,
-      |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
+          query: @search_events_query,
+          variables: %{term: "test"}
+        )
 
-    assert json_response(res, 200)["errors"] == nil
+      assert res["errors"] == nil
-    assert json_response(res, 200)["data"]["search_events"]["total"] == 1
+      assert res["data"]["searchEvents"]["total"] == 1
-    assert json_response(res, 200)["data"]["search_events"]["elements"] |> length == 1
+      assert res["data"]["searchEvents"]["elements"] |> length == 1
 
-    assert hd(json_response(res, 200)["data"]["search_events"]["elements"])["uuid"] ==
+      assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
                to_string(event.uuid)
     end
 
-  test "search_persons/3 finds persons with basic search", %{
+    test "finds events and actors with word search", %{
+      conn: conn,
+      user: user
+    } do
+      insert(:actor, user: user, preferred_username: "person", name: "I like pineapples")
+      event1 = insert(:event, title: "Pineapple fashion week")
+      event2 = insert(:event, title: "I love pineAPPLE")
+      event3 = insert(:event, title: "Hello")
+      Workers.BuildSearch.insert_search_event(event1)
+      Workers.BuildSearch.insert_search_event(event2)
+      Workers.BuildSearch.insert_search_event(event3)
+
+      res =
+        AbsintheHelpers.graphql_query(conn,
+          query: @search_events_query,
+          variables: %{term: "pineapple"}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["searchEvents"]["total"] == 2
+
+      assert res["data"]["searchEvents"]["elements"]
+             |> length == 2
+
+      assert res["data"]["searchEvents"]["elements"]
+             |> Enum.map(& &1["title"]) == [
+               "Pineapple fashion week",
+               "I love pineAPPLE"
+             ]
+    end
+
+    test "finds events with accented search", %{
+      conn: conn,
+      user: user
+    } do
+      insert(:actor, user: user, preferred_username: "person", name: "Torréfaction du Kafé")
+      insert(:actor, type: :Group, preferred_username: "group", name: "Kafé group")
+      event = insert(:event, title: "Tour du monde des Kafés")
+      Workers.BuildSearch.insert_search_event(event)
+
+      res =
+        AbsintheHelpers.graphql_query(conn,
+          query: @search_events_query,
+          variables: %{term: "Kafés"}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["searchEvents"]["total"] == 1
+
+      assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
+               event.uuid
+    end
+
+    test "finds events by tag", %{conn: conn} do
+      tag = insert(:tag, title: "Café")
+      tag2 = insert(:tag, title: "Thé")
+      event = insert(:event, title: "Tour du monde", tags: [tag, tag2])
+      Workers.BuildSearch.insert_search_event(event)
+
+      res =
+        AbsintheHelpers.graphql_query(conn,
+          query: @search_events_query,
+          variables: %{tag: "Café"}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["searchEvents"]["total"] == 1
+
+      assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
+               event.uuid
+    end
+
+    test "finds events by location", %{conn: conn} do
+      {lon, lat} = {45.75, 4.85}
+      point = %Geo.Point{coordinates: {lon, lat}, srid: 4326}
+      geohash = Geohax.encode(lon, lat, 6)
+      address = insert(:address, geom: point)
+      event = insert(:event, title: "Tour du monde", physical_address: address)
+      Workers.BuildSearch.insert_search_event(event)
+
+      res =
+        AbsintheHelpers.graphql_query(conn,
+          query: @search_events_query,
+          variables: %{location: geohash}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["searchEvents"]["total"] == 1
+
+      assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
+               event.uuid
+    end
+
+    test "finds events with multiple criteria", %{conn: conn} do
+      {lon, lat} = {45.75, 4.85}
+      point = %Geo.Point{coordinates: {lon, lat}, srid: 4326}
+      geohash = Geohax.encode(lon, lat, 6)
+      address = insert(:address, geom: point)
+      tag = insert(:tag, title: "Café")
+      tag2 = insert(:tag, title: "Thé")
+      event = insert(:event, title: "Tour du monde", physical_address: address, tags: [tag, tag2])
+      insert(:event, title: "Autre événement avec même tags", tags: [tag, tag2])
+      insert(:event, title: "Même endroit", physical_address: address)
+      insert(:event, title: "Même monde")
+      Workers.BuildSearch.insert_search_event(event)
+
+      res =
+        AbsintheHelpers.graphql_query(conn,
+          query: @search_events_query,
+          variables: %{location: geohash, radius: 10, tag: "Thé", term: "Monde"}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["searchEvents"]["total"] == 1
+
+      assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
+               event.uuid
+    end
+  end
+
+  describe "search_persons/3" do
+    test "finds persons with basic search", %{
       conn: conn,
       user: user
     } do
@@ -76,86 +201,13 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
       assert json_response(res, 200)["data"]["search_persons"]["total"] == 1
       assert json_response(res, 200)["data"]["search_persons"]["elements"] |> length == 1
 
-    assert hd(json_response(res, 200)["data"]["search_persons"]["elements"])["preferredUsername"] ==
+      assert hd(json_response(res, 200)["data"]["search_persons"]["elements"])[
+               "preferredUsername"
+             ] ==
                actor.preferred_username
     end
 
-  test "search_groups/3 finds persons with basic search", %{
+    test "finds persons with word search", %{
-    conn: conn,
-    user: user
-  } do
-    insert(:actor, user: user, preferred_username: "test_person")
-    group = insert(:actor, type: :Group, preferred_username: "test_group")
-    event = insert(:event, title: "test_event")
-    Workers.BuildSearch.insert_search_event(event)
-
-    query = """
-    {
-        search_groups(search: "test") {
-          total,
-          elements {
-            preferredUsername,
-            __typename
-          }
-        },
-    }
-    """
-
-    res =
-      conn
-      |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
-
-    assert json_response(res, 200)["errors"] == nil
-    assert json_response(res, 200)["data"]["search_groups"]["total"] == 1
-    assert json_response(res, 200)["data"]["search_groups"]["elements"] |> length == 1
-
-    assert hd(json_response(res, 200)["data"]["search_groups"]["elements"])["preferredUsername"] ==
-             group.preferred_username
-  end
-
-  test "search_events/3 finds events and actors with word search", %{
-    conn: conn,
-    user: user
-  } do
-    insert(:actor, user: user, preferred_username: "person", name: "I like pineapples")
-    event1 = insert(:event, title: "Pineapple fashion week")
-    event2 = insert(:event, title: "I love pineAPPLE")
-    event3 = insert(:event, title: "Hello")
-    Workers.BuildSearch.insert_search_event(event1)
-    Workers.BuildSearch.insert_search_event(event2)
-    Workers.BuildSearch.insert_search_event(event3)
-
-    query = """
-    {
-        search_events(search: "pineapple") {
-          total,
-          elements {
-            title,
-            uuid,
-            __typename
-          }
-        }
-    }
-    """
-
-    res =
-      conn
-      |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
-
-    assert json_response(res, 200)["errors"] == nil
-    assert json_response(res, 200)["data"]["search_events"]["total"] == 2
-
-    assert json_response(res, 200)["data"]["search_events"]["elements"]
-           |> length == 2
-
-    assert json_response(res, 200)["data"]["search_events"]["elements"]
-           |> Enum.map(& &1["title"]) == [
-             "Pineapple fashion week",
-             "I love pineAPPLE"
-           ]
-  end
-
-  test "search_persons/3 finds persons with word search", %{
       conn: conn,
       user: user
     } do
@@ -190,30 +242,32 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
       assert json_response(res, 200)["data"]["search_persons"]["elements"]
              |> length == 1
 
-    assert hd(json_response(res, 200)["data"]["search_persons"]["elements"])["preferredUsername"] ==
+      assert hd(json_response(res, 200)["data"]["search_persons"]["elements"])[
+               "preferredUsername"
+             ] ==
                actor.preferred_username
     end
+  end
 
-  test "search_events/3 finds events with accented search", %{
+  describe "search_groups/3" do
+    test "finds persons with basic search", %{
       conn: conn,
       user: user
     } do
-    insert(:actor, user: user, preferred_username: "person", name: "Torréfaction du Kafé")
+      insert(:actor, user: user, preferred_username: "test_person")
-    insert(:actor, type: :Group, preferred_username: "group", name: "Kafé group")
+      group = insert(:actor, type: :Group, preferred_username: "test_group")
-    event = insert(:event, title: "Tour du monde des Kafés")
+      event = insert(:event, title: "test_event")
       Workers.BuildSearch.insert_search_event(event)
 
-    # Elaborate query
       query = """
       {
-        search_events(search: "Kafé") {
+          search_groups(search: "test") {
             total,
             elements {
-            title,
+              preferredUsername,
-            uuid,
               __typename
             }
-        }
+          },
       }
       """
 
@@ -222,11 +276,14 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
         |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
 
       assert json_response(res, 200)["errors"] == nil
-    assert json_response(res, 200)["data"]["search_events"]["total"] == 1
+      assert json_response(res, 200)["data"]["search_groups"]["total"] == 1
-    assert hd(json_response(res, 200)["data"]["search_events"]["elements"])["uuid"] == event.uuid
+      assert json_response(res, 200)["data"]["search_groups"]["elements"] |> length == 1
+
+      assert hd(json_response(res, 200)["data"]["search_groups"]["elements"])["preferredUsername"] ==
+               group.preferred_username
     end
 
-  test "search_groups/3 finds groups with accented search", %{
+    test "finds groups with accented search", %{
       conn: conn,
       user: user
     } do
@@ -258,4 +315,5 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
       assert hd(json_response(res, 200)["data"]["search_groups"]["elements"])["preferredUsername"] ==
                group.preferred_username
     end
+  end
 end