Allow events to be searched by location and period

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-07-31 17:52:26 +02:00
parent 5a8745dc13
commit 3807ab1b63
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
15 changed files with 749 additions and 493 deletions

View File

@ -1,103 +1,33 @@
<template> <template>
<div class="address-autocomplete"> <b-autocomplete
<b-field expanded> :data="addressData"
<template slot="label"> v-model="queryText"
{{ $t("Find an address") }} :placeholder="$t('e.g. 10 Rue Jangot')"
<b-button field="fullName"
v-if="!gettingLocation" :loading="isFetching"
size="is-small" @typing="fetchAsyncData"
icon-right="map-marker" icon="map-marker"
@click="locateMe" expanded
/> @select="updateSelected"
<span v-else>{{ $t("Getting location") }}</span> >
</template> <template slot-scope="{ option }">
<b-autocomplete <b-icon :icon="option.poiInfos.poiIcon.icon" />
:data="addressData" <b>{{ option.poiInfos.name }}</b
v-model="queryText" ><br />
:placeholder="$t('e.g. 10 Rue Jangot')" <small>{{ option.poiInfos.alternativeName }}</small>
field="fullName" </template>
:loading="isFetching" <template slot="empty">
@typing="fetchAsyncData" <span v-if="isFetching">{{ $t("Searching") }}</span>
icon="map-marker" <div v-else-if="queryText.length >= 3" class="is-enabled">
expanded <span>{{ $t('No results for "{queryText}"') }}</span>
@select="updateSelected" <span>{{
> $t("You can try another search term or drag and drop the marker on the map", {
<template slot-scope="{ option }"> queryText,
<b-icon :icon="option.poiInfos.poiIcon.icon" /> })
<b>{{ option.poiInfos.name }}</b }}</span>
><br /> </div>
<small>{{ option.poiInfos.alternativeName }}</small> </template>
</template> </b-autocomplete>
<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> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@ -109,9 +39,6 @@ import { CONFIG } from "../../graphql/config";
import { IConfig } from "../../types/config.model"; import { IConfig } from "../../types/config.model";
@Component({ @Component({
components: {
"map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
},
apollo: { apollo: {
config: CONFIG, config: CONFIG,
}, },
@ -127,16 +54,6 @@ export default class AddressAutoComplete extends Vue {
queryText: string = (this.value && new Address(this.value).fullName) || ""; 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; config!: IConfig;
fetchAsyncData!: Function; fetchAsyncData!: Function;
@ -197,76 +114,6 @@ export default class AddressAutoComplete extends Vue {
this.selected = option; this.selected = option;
this.$emit("input", this.selected); 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> </script>
<style lang="scss"> <style lang="scss">

View File

@ -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> <template>
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }"> <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
<div class="card-image"> <div class="card-image">
@ -36,9 +8,13 @@ A simple card for an event
}')`" }')`"
> >
<div class="tag-container" v-if="event.tags"> <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> </div>
</figure> </figure>
</div> </div>
@ -101,6 +77,7 @@ import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model"
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { Actor, Person } from "@/types/actor"; import { Actor, Person } from "@/types/actor";
import RouteName from "../../router/name";
@Component({ @Component({
components: { components: {
@ -114,6 +91,8 @@ export default class EventCard extends Vue {
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
RouteName = RouteName;
defaultOptions: IEventCardOptions = { defaultOptions: IEventCardOptions = {
hideDate: false, hideDate: false,
loggedPerson: false, loggedPerson: false,
@ -176,15 +155,19 @@ a.card {
z-index: 10; z-index: 10;
max-width: 40%; max-width: 40%;
span.tag { a {
margin: 5px auto; text-decoration: none;
text-overflow: ellipsis;
overflow: hidden; span.tag {
display: block; margin: 5px auto;
font-size: 0.9em; text-overflow: ellipsis;
line-height: 1.75em; overflow: hidden;
background-color: #e6e4f4; display: block;
color: #3c376e; font-size: 0.9em;
line-height: 1.75em;
background-color: #e6e4f4;
color: #3c376e;
}
} }
} }

View File

@ -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>

View File

@ -1,8 +1,8 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
export const SEARCH_EVENTS = gql` 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 total
elements { elements {
title title

View File

@ -1,6 +1,7 @@
import { RouteConfig, Route } from "vue-router"; import { RouteConfig, Route } from "vue-router";
import EventList from "../views/Event/EventList.vue"; import EventList from "../views/Event/EventList.vue";
import Location from "../views/Location.vue"; import Location from "../views/Location.vue";
import Search from "../views/Search.vue";
const participations = () => const participations = () =>
import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"); import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue");
@ -112,6 +113,8 @@ export const eventRoutes: RouteConfig[] = [
{ {
path: "/tag/:tag", path: "/tag/:tag",
name: EventRouteName.TAG, name: EventRouteName.TAG,
redirect: "/search/:tag", component: Search,
props: true,
meta: { requiredAuth: false },
}, },
]; ];

View File

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

View File

@ -29,7 +29,7 @@
{{ $t("Date parameters") }} {{ $t("Date parameters") }}
</b-button> </b-button>
<address-auto-complete v-model="event.physicalAddress" /> <full-address-auto-complete v-model="event.physicalAddress" />
<div class="field"> <div class="field">
<label class="label">{{ $t("Description") }}</label> <label class="label">{{ $t("Description") }}</label>
@ -329,7 +329,7 @@ import PictureUpload from "@/components/PictureUpload.vue";
import EditorComponent from "@/components/Editor.vue"; import EditorComponent from "@/components/Editor.vue";
import DateTimePicker from "@/components/Event/DateTimePicker.vue"; import DateTimePicker from "@/components/Event/DateTimePicker.vue";
import TagInput from "@/components/Event/TagInput.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 IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
import Subtitle from "@/components/Utils/Subtitle.vue"; import Subtitle from "@/components/Utils/Subtitle.vue";
import GroupPickerWrapper from "@/components/Group/GroupPickerWrapper.vue"; import GroupPickerWrapper from "@/components/Group/GroupPickerWrapper.vue";
@ -370,7 +370,7 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
GroupPickerWrapper, GroupPickerWrapper,
Subtitle, Subtitle,
IdentityPickerWrapper, IdentityPickerWrapper,
AddressAutoComplete, FullAddressAutoComplete,
TagInput, TagInput,
DateTimePicker, DateTimePicker,
PictureUpload, PictureUpload,

View File

@ -1,6 +1,14 @@
<template> <template>
<section class="container"> <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-loading :active.sync="$apollo.loading" />
<b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab"> <b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab">
<b-tab-item> <b-tab-item>
@ -51,8 +59,11 @@ import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search";
import RouteName from "../router/name"; import RouteName from "../router/name";
import EventCard from "../components/Event/EventCard.vue"; import EventCard from "../components/Event/EventCard.vue";
import GroupCard from "../components/Group/GroupCard.vue"; import GroupCard from "../components/Group/GroupCard.vue";
import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
import { Group, IGroup } from "../types/actor"; import { Group, IGroup } from "../types/actor";
import { IAddress, Address } from "../types/address.model";
import { SearchEvent, SearchGroup } from "../types/search.model"; import { SearchEvent, SearchGroup } from "../types/search.model";
import ngeohash from "ngeohash";
enum SearchTabs { enum SearchTabs {
EVENTS = 0, EVENTS = 0,
@ -71,32 +82,37 @@ const tabsName: { events: number; groups: number } = {
query: SEARCH_EVENTS, query: SEARCH_EVENTS,
variables() { variables() {
return { return {
searchText: this.searchTerm, term: this.search,
tag: this.actualTag,
location: this.geohash,
}; };
}, },
skip() { skip() {
return !this.searchTerm; return !this.search && !this.actualTag;
}, },
}, },
searchGroups: { searchGroups: {
query: SEARCH_GROUPS, query: SEARCH_GROUPS,
variables() { variables() {
return { return {
searchText: this.searchTerm, searchText: this.search,
}; };
}, },
skip() { skip() {
return !this.searchTerm || this.isURL(this.searchTerm); return !this.search || this.isURL(this.search);
}, },
}, },
}, },
components: { components: {
GroupCard, GroupCard,
EventCard, EventCard,
AddressAutoComplete,
}, },
}) })
export default class Search extends Vue { 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"; @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]; activeTab: SearchTabs = tabsName[this.searchType];
search: string = this.searchTerm;
actualTag: string = this.tag;
location: IAddress = new Address();
@Watch("searchEvents") @Watch("searchEvents")
async redirectURLToEvent() { async redirectURLToEvent() {
if (this.searchEvents.total === 1 && this.isURL(this.searchTerm)) { if (this.searchEvents.total === 1 && this.isURL(this.searchTerm)) {
@ -159,6 +179,18 @@ export default class Search extends Vue {
a.href = url; a.href = url;
return (a.host && a.host !== window.location.host) as boolean; 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> </script>
<style lang="scss"> <style lang="scss">

View File

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

View File

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

View File

@ -22,7 +22,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Search do
@doc """ @doc """
Search events 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
end end

View File

@ -45,7 +45,10 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
@desc "Search events" @desc "Search events"
field :search_events, :events do 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(:page, :integer, default_value: 1)
arg(:limit, :integer, default_value: 10) arg(:limit, :integer, default_value: 10)

View File

@ -8,6 +8,7 @@ defmodule Mobilizon.Events do
import Ecto.Query import Ecto.Query
import EctoEnum import EctoEnum
import Mobilizon.Service.Guards
import Mobilizon.Storage.Ecto import Mobilizon.Storage.Ecto
alias Ecto.{Changeset, Multi} alias Ecto.{Changeset, Multi}
@ -457,14 +458,13 @@ defmodule Mobilizon.Events do
@doc """ @doc """
Builds a page struct for events by their name. 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() |> normalize_search_string()
|> events_for_search_query() |> events_for_search_query()
|> events_for_tag(args)
|> events_for_location(args)
|> filter_local_or_from_followed_instances_events() |> filter_local_or_from_followed_instances_events()
|> Page.build_page(page, limit) |> Page.build_page(page, limit)
end end
@ -1283,6 +1283,8 @@ defmodule Mobilizon.Events do
end end
@spec do_event_for_search_query(Ecto.Query.t(), String.t()) :: Ecto.Query.t() @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 defp do_event_for_search_query(query, search_string) do
from(event in query, from(event in query,
join: id_and_rank in matching_event_ids_and_ranks(search_string), join: id_and_rank in matching_event_ids_and_ranks(search_string),
@ -1291,6 +1293,34 @@ defmodule Mobilizon.Events do
) )
end 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() @spec normalize_search_string(String.t()) :: String.t()
defp normalize_search_string(search_string) do defp normalize_search_string(search_string) do
search_string search_string

7
lib/service/guards.ex Normal file
View File

@ -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

View File

@ -13,249 +13,307 @@ defmodule Mobilizon.GraphQL.Resolvers.SearchTest do
{:ok, conn: conn, user: user} {:ok, conn: conn, user: user}
end end
test "search_events/3 finds events with basic search", %{ describe "search events/3" do
conn: conn, @search_events_query """
user: user query SearchEvents($location: String, $radius: Float, $tag: String, $term: String) {
} do searchEvents(location: $location, radius: $radius, tag: $tag, term: $term) {
insert(:actor, user: user, preferred_username: "test_person") total,
insert(:actor, type: :Group, preferred_username: "test_group") elements {
event = insert(:event, title: "test_event") id
Workers.BuildSearch.insert_search_event(event) title,
uuid,
__typename
}
}
}
"""
query = """ test "finds events with basic search", %{
{ conn: conn,
search_events(search: "test") { user: user
} do
insert(:actor, user: user, preferred_username: "test_person")
insert(:actor, type: :Group, preferred_username: "test_group")
event = insert(:event, title: "test_event")
Workers.BuildSearch.insert_search_event(event)
res =
AbsintheHelpers.graphql_query(conn,
query: @search_events_query,
variables: %{term: "test"}
)
assert res["errors"] == nil
assert res["data"]["searchEvents"]["total"] == 1
assert res["data"]["searchEvents"]["elements"] |> length == 1
assert hd(res["data"]["searchEvents"]["elements"])["uuid"] ==
to_string(event.uuid)
end
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
actor = insert(:actor, user: user, preferred_username: "test_person")
insert(:actor, type: :Group, preferred_username: "test_group")
event = insert(:event, title: "test_event")
Workers.BuildSearch.insert_search_event(event)
query = """
{
search_persons(search: "test") {
total, total,
elements { elements {
title, preferredUsername,
uuid,
__typename __typename
} }
}, },
} }
""" """
res = res =
conn conn
|> get("/api", AbsintheHelpers.query_skeleton(query, "search")) |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
assert json_response(res, 200)["errors"] == nil assert json_response(res, 200)["errors"] == nil
assert json_response(res, 200)["data"]["search_events"]["total"] == 1 assert json_response(res, 200)["data"]["search_persons"]["total"] == 1
assert json_response(res, 200)["data"]["search_events"]["elements"] |> length == 1 assert json_response(res, 200)["data"]["search_persons"]["elements"] |> length == 1
assert hd(json_response(res, 200)["data"]["search_events"]["elements"])["uuid"] == assert hd(json_response(res, 200)["data"]["search_persons"]["elements"])[
to_string(event.uuid) "preferredUsername"
] ==
actor.preferred_username
end
test "finds persons with word search", %{
conn: conn,
user: user
} do
actor = insert(:actor, user: user, preferred_username: "person", name: "I like pineapples")
insert(:actor, preferred_username: "group", type: :Group, name: "pineapple group")
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_persons(search: "pineapple") {
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_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"
] ==
actor.preferred_username
end
end end
test "search_persons/3 finds persons with basic search", %{ describe "search_groups/3" do
conn: conn, test "finds persons with basic search", %{
user: user conn: conn,
} do user: user
actor = insert(:actor, user: user, preferred_username: "test_person") } do
insert(:actor, type: :Group, preferred_username: "test_group") insert(:actor, user: user, preferred_username: "test_person")
event = insert(:event, title: "test_event") group = insert(:actor, type: :Group, preferred_username: "test_group")
Workers.BuildSearch.insert_search_event(event) event = insert(:event, title: "test_event")
Workers.BuildSearch.insert_search_event(event)
query = """ query = """
{ {
search_persons(search: "test") { search_groups(search: "test") {
total, total,
elements { elements {
preferredUsername, preferredUsername,
__typename __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 "finds groups with accented search", %{
conn: conn,
user: user
} do
insert(:actor, user: user, preferred_username: "person", name: "Torréfaction du Kafé")
group = 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)
# Elaborate query
query = """
{
search_groups(search: "Kafé") {
total,
elements {
preferredUsername,
__typename
}
} }
}, }
} """
"""
res = res =
conn conn
|> get("/api", AbsintheHelpers.query_skeleton(query, "search")) |> get("/api", AbsintheHelpers.query_skeleton(query, "search"))
assert json_response(res, 200)["errors"] == nil assert json_response(res, 200)["errors"] == nil
assert json_response(res, 200)["data"]["search_persons"]["total"] == 1 assert json_response(res, 200)["data"]["search_groups"]["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_groups"]["elements"])["preferredUsername"] ==
actor.preferred_username group.preferred_username
end end
test "search_groups/3 finds persons with basic 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
actor = insert(:actor, user: user, preferred_username: "person", name: "I like pineapples")
insert(:actor, preferred_username: "group", type: :Group, name: "pineapple group")
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_persons(search: "pineapple") {
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_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"] ==
actor.preferred_username
end
test "search_events/3 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)
# Elaborate query
query = """
{
search_events(search: "Kafé") {
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"] == 1
assert hd(json_response(res, 200)["data"]["search_events"]["elements"])["uuid"] == event.uuid
end
test "search_groups/3 finds groups with accented search", %{
conn: conn,
user: user
} do
insert(:actor, user: user, preferred_username: "person", name: "Torréfaction du Kafé")
group = 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)
# Elaborate query
query = """
{
search_groups(search: "Kafé") {
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 hd(json_response(res, 200)["data"]["search_groups"]["elements"])["preferredUsername"] ==
group.preferred_username
end end
end end