Allow events to be searched by location and period
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
5a8745dc13
commit
3807ab1b63
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
296
js/src/components/Event/FullAddressAutoComplete.vue
Normal file
296
js/src/components/Event/FullAddressAutoComplete.vue
Normal 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>
|
|
@ -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
|
||||||
|
|
|
@ -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 },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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
7
lib/service/guards.ex
Normal 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
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue