Add address input and refactor federation stuff

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

js/src/components/Event/AddressAutoComplete.vue

@@ -0,0 +1,53 @@
+<template>
+    <b-field label="Find an address">
+        <b-autocomplete
+                :data="data"
+                placeholder="e.g. 10 Rue Jangot"
+                field="description"
+                :loading="isFetching"
+                @typing="getAsyncData"
+                @select="option => selected = option">
+
+            <template slot-scope="{option}">
+                <b>{{ option.description }}</b>
+                <p>
+                    <small>{{ option.street }}</small>,&#32;
+                    <small>{{ option.locality }}</small>
+                </p>
+            </template>
+        </b-autocomplete>
+    </b-field>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { IAddress } from '@/types/address.model';
+import { ADDRESS } from '@/graphql/address';
+@Component
+export default class AddressAutoComplete extends Vue {
+
+  @Prop({ required: false, default: () => [] }) initialData!: IAddress[];
+
+  data: IAddress[] = this.initialData;
+  selected: IAddress|null = null;
+  isFetching: boolean = false;
+
+  async getAsyncData(query) {
+    if (!query.length) {
+      this.data = [];
+      return;
+    }
+    this.isFetching = true;
+    const result = await this.$apollo.query({
+      query: ADDRESS,
+      variables: { query },
+    });
+
+    this.data = result.data.searchAddress as IAddress[];
+  }
+
+  @Watch("selected")
+  updateSelected() {
+    this.$emit('input', this.selected);
+  }
+}
+</script>

js/src/graphql/address.ts

@@ -0,0 +1,18 @@
+import gql from 'graphql-tag';
+
+export const ADDRESS = gql`
+    query($query:String!) {
+        searchAddress(
+            query: $query
+        ) {
+            description,
+            geom,
+            floor,
+            street,
+            locality,
+            postalCode,
+            region,
+            country
+        }
+    }
+`;

js/src/graphql/event.ts

@@ -144,7 +144,8 @@ export const CREATE_EVENT = gql`
   $category: String!,
   $beginsOn: DateTime!,
   $picture: PictureInput,
-  $tags: [String]
+  $tags: [String],
+  $physicalAddress: AddressInput!
   ) {
     createEvent(
       title: $title,
@@ -153,7 +154,8 @@ export const CREATE_EVENT = gql`
       organizerActorId: $organizerActorId,
       category: $category,
       picture: $picture,
-      tags: $tags
+      tags: $tags,
+      physicalAddress: $physicalAddress
     ) {
       id,
       uuid,

js/src/types/address.model.ts

@@ -1,4 +1,5 @@
 export interface IAddress {
+  id: number;
   description: string;
   floor: string;
   street: string;

js/src/views/Event/Create.vue

@@ -14,6 +14,8 @@
 
         <tag-input v-model="event.tags" :data="tags" path="title" />
 
+        <address-auto-complete v-model="event.physicalAddress" />
+
         <date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
         <date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
 
@@ -57,9 +59,10 @@ import DateTimePicker from '@/components/Event/DateTimePicker.vue';
 import TagInput from '@/components/Event/TagInput.vue';
 import { TAGS } from '@/graphql/tags';
 import { ITag } from '@/types/tag.model';
+import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
 
 @Component({
-  components: { TagInput, DateTimePicker, PictureUpload, Editor },
+  components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
   apollo: {
     loggedPerson: {
       query: LOGGED_PERSON,
@@ -134,9 +137,13 @@ export default class CreateEvent extends Vue {
     const obj = {
       organizerActorId: this.loggedPerson.id,
       beginsOn: this.event.beginsOn.toISOString(),
-      tags: this.event.tags.map((tag: ITag) => tag.title),
+      tags: this.event.tags.map((tag: ITag) => tag.title)
     };
-    const res = Object.assign({}, this.event, obj);
+    let res = Object.assign({}, this.event, obj);
+
+    if (this.event.physicalAddress) {
+      delete this.event.physicalAddress['__typename'];
+    }
 
     /**
      * Transform picture files