From 2e869aace320ce82bf9b4837295d19cc3cfed0f3 Mon Sep 17 00:00:00 2001
From: Axel Haustant <axel.haustant@data.gouv.fr>
Date: Fri, 25 Jan 2019 15:54:25 +0100
Subject: [PATCH] Fix lack of change events on harvest config form

---
 CHANGELOG.md                            |  1 +
 js/components/harvest/config-form.vue   | 16 ++++++++++++++++
 js/components/harvest/feature-field.vue | 13 +++++++++++--
 js/components/harvest/filter-field.vue  |  9 ++++++---
 js/views/harvester-edit.vue             |  7 +++++++
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73dbfa5986..307e6b084d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Added the missing `number` input field widget [#1993](https://github.com/opendatateam/udata/pull/1993)
 - Fix the organization private datasets and reuses counters [#1994](https://github.com/opendatateam/udata/pull/1994)
 - Disable autocorrect, spellcheck... on search and completion fields [#1995](https://github.com/opendatateam/udata/pull/1995)
+- Fix harvest preview in edit form not taking configuration (features and filters) [#1996](https://github.com/opendatateam/udata/pull/1996)
 
 ## 1.6.2 (2018-11-05)
 
diff --git a/js/components/harvest/config-form.vue b/js/components/harvest/config-form.vue
index c67aa79676..0e67c22388 100644
--- a/js/components/harvest/config-form.vue
+++ b/js/components/harvest/config-form.vue
@@ -38,6 +38,7 @@ import FeatureField from './feature-field.vue';
 import FilterField from './filter-field.vue';
 
 export default {
+    name: 'config-form',
     components: {FeatureField, FilterField},
     data() {
         return {
@@ -48,6 +49,17 @@ export default {
     events: {
         'filter:delete': function(index) {
             this.config.filters.splice(index, 1);
+            this.$nextTick(() => {
+                this.$dispatch('form:change', this)
+            })
+        },
+        'field:change': function(field, value) {
+            this.$dispatch('form:change', this, field, value);
+            return true;  // Let the event continue its bubbling
+        },
+        // Custom fields are not wrapped into a FormField
+        'field:value-change': function(value) {
+            this.$dispatch('form:change', this);
         }
     },
     props: {
@@ -71,6 +83,7 @@ export default {
                 this.$set('config.filters', []);
             }
             this.config.filters.push({key: undefined, value: undefined});
+            this.$dispatch('form:change', this)
         },
         serialize() {
             const config = {};
@@ -86,6 +99,9 @@ export default {
                 }));
             }
             return config;
+        },
+        validate() {
+            return true;  // Always valid
         }
     }
 }
diff --git a/js/components/harvest/feature-field.vue b/js/components/harvest/feature-field.vue
index f0e453cb41..97e45de00e 100644
--- a/js/components/harvest/feature-field.vue
+++ b/js/components/harvest/feature-field.vue
@@ -3,6 +3,7 @@
     <label :for="id">
         <input v-el:checkbox type="checkbox"
             :id="id" :name="key" :checked="checked"
+            @input="onChange"
         />
         {{ feature.label }}
     </label>
@@ -31,8 +32,16 @@ export default {
         key() {
             return this.feature.key;
         },
-        value() {
-            return this.$els.checkbox.checked;
+        value: {
+            cache: false,
+            get() {
+                return this.$els.checkbox.checked;
+            }
+        }
+    },
+    methods: {
+        onChange(evt) {
+            this.$dispatch('field:value-change', evt.target.checked);
         }
     }
 }
diff --git a/js/components/harvest/filter-field.vue b/js/components/harvest/filter-field.vue
index 6978110fde..0298cf1cdd 100644
--- a/js/components/harvest/filter-field.vue
+++ b/js/components/harvest/filter-field.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="input-group filter-group">
-    <select class="form-control filter-group__type" v-model="type">
+    <select class="form-control filter-group__type" v-model="type" @change="onChange">
         <option v-for="t in TYPES" :value="t.value" :key="t.value">{{ t.label }}</option>
     </select>
-    <select class="form-control filter-group__key" v-model="key">
+    <select class="form-control filter-group__key" v-model="key" @change="onChange">
         <option v-for="c in choices" :value="c.key" :key="c.key">{{ c.label }}</option>
     </select>
     <input type="text" class="form-control filter-group__value" v-model="value"
-        :placeholder="placeholder"></input>
+        :placeholder="placeholder" @change="onChange"></input>
     <span class="input-group-btn">
         <button class="btn btn-danger" type="button" @click.prevent="onDelete">
             <span class="fa fa-remove">
@@ -52,6 +52,9 @@ export default {
         }
     },
     methods: {
+        onChange(evt) {
+            this.$dispatch('field:value-change', evt.target.value);
+        },
         onDelete() {
             this.$dispatch('filter:delete', this.index);
         }
diff --git a/js/views/harvester-edit.vue b/js/views/harvester-edit.vue
index 22ec01cc89..f236ea0403 100644
--- a/js/views/harvester-edit.vue
+++ b/js/views/harvester-edit.vue
@@ -48,6 +48,13 @@ export default {
             }
         }
     },
+    ready() {
+        this.source.$on('updated', () => {
+            this.$nextTick(() => {
+                this.previewSource = Object.assign(new HarvestSource(), this.$refs.form.serialize());
+            });
+        });
+    },
     methods: {
         save() {
             const form = this.$refs.form;