Correctly handle event update

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

js/src/components/Event/AddressAutoComplete.vue

@@ -81,11 +81,12 @@ import { Modal } from 'buefy/dist/components/dialog';
 export default class AddressAutoComplete extends Vue {
 
   @Prop({ required: false, default: () => [] }) initialData!: IAddress[];
+  @Prop({ required: false }) value!: IAddress;
 
   data: IAddress[] = this.initialData;
   selected: IAddress|null = new Address();
   isFetching: boolean = false;
-  queryText: string = '';
+  queryText: string = this.value && this.value.description || '';
   addressModalActive: boolean = false;
 
   async getAsyncData(query) {

js/src/components/Event/TagInput.vue

@@ -1,33 +1,51 @@
 <template>
     <b-field label="Enter some tags">
         <b-taginput
-                v-model="tags"
+                v-model="tagsStrings"
                 :data="filteredTags"
                 autocomplete
                 :allow-new="true"
                 :field="path"
                 icon="label"
                 placeholder="Add a tag"
-                @typing="getFilteredTags">
+                @typing="getFilteredTags"
+        >
         </b-taginput>
     </b-field>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { get } from 'lodash';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { get, differenceBy } from 'lodash';
 import { ITag } from '@/types/tag.model';
-@Component
+
+@Component({
+  computed: {
+    tagsStrings: {
+      get() {
+        return this.$props.data.map((tag: ITag) => tag.title);
+      },
+      set(tagStrings) {
+        const tagEntities = tagStrings.map((tag) => {
+          if (TagInput.isTag(tag)) {
+            return tag;
+          }
+          return { title: tag, slug: tag } as ITag;
+        });
+        this.$emit('input', tagEntities);
+      },
+    },
+  },
+})
 export default class TagInput extends Vue {
 
-  @Prop({ required: false, default: () => [] }) data!: object[];
+  @Prop({ required: false, default: () => [] }) data!: ITag[];
   @Prop({ required: true, default: 'value' }) path!: string;
-  @Prop({ required: true }) value!: string;
+  @Prop({ required: true }) value!: ITag[];
 
-  filteredTags: object[] = [];
-  tags: object[] = [];
+  filteredTags: ITag[] = [];
 
   getFilteredTags(text) {
-    this.filteredTags = this.data.filter((option) => {
+    this.filteredTags = differenceBy(this.data, this.value, 'id').filter((option) => {
       return get(option, this.path)
                 .toString()
                 .toLowerCase()
@@ -35,18 +53,6 @@ export default class TagInput extends Vue {
     });
   }
 
-  @Watch('tags')
-  onTagsChanged (tags) {
-    const tagEntities = tags.map((tag) => {
-      if (TagInput.isTag(tag)) {
-        return tag;
-      }
-      return { title: tag, slug: tag } as ITag;
-    });
-    console.log('tags changed', tagEntities);
-    this.$emit('input', tagEntities);
-  }
-
   static isTag(x: any): x is ITag {
     return x.slug !== undefined;
   }