Merge pull request #1812 from noirbizarre/harvest-config-admin

Harvest config admin

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Harvest sources are now filterable through the harvest source create/edit admin form [#1812](https://github.com/opendatateam/udata/pull/1812)
 
 ## 1.5.0 (2018-07-30)
 

js/components/form/base-field.js

@@ -18,6 +18,11 @@ export const FieldComponentMixin = {
         required: Boolean,
         placeholder: String,
         readonly: Boolean
+    },
+    methods: {
+        onChange(evt) {
+            this.$dispatch('field:value-change', evt.target.value);
+        }
     }
 };
 
@@ -40,6 +45,11 @@ export const BaseField = {
         'date-picker': require('components/form/date-picker.vue'),
         'checkbox': require('components/form/checkbox.vue')
     },
+    events: {
+        'field:value-change': function(value) {
+            this.$dispatch('field:change', this, value);
+        }
+    },
     props: {
         field: {
             type: Object,
@@ -123,6 +133,11 @@ export const BaseField = {
             }
             return widget;
         }
+    },
+    watch: {
+        value(value) {
+            this.$dispatch('field:change', this, value);
+        }
     }
 };
 

js/components/form/checkbox.vue

@@ -11,6 +11,7 @@
             :id="field.id"
             :name="field.id"
             :checked="value"
+            @input="onChange"
             ></input>
         {{ field.label }}
     </label>
@@ -22,6 +23,11 @@ import {FieldComponentMixin} from 'components/form/base-field';
 
 export default {
     name: 'Checkbox',
-    mixins: [FieldComponentMixin]
+    mixins: [FieldComponentMixin],
+    methods: {
+        onChange(evt) {
+            this.$dispatch('field:value-change', evt.target.checked);
+        }
+    }
 };
 </script>

js/components/form/markdown-editor.vue

@@ -45,7 +45,8 @@
     :name="field.id"
     :placeholder="placeholder"
     :required="required"
-    :readonly="readonly">{{value || ''}}</textarea>
+    :readonly="readonly"
+    @input="onChange">{{value || ''}}</textarea>
 </template>
 
 <script>

js/components/form/select-input.vue

@@ -5,7 +5,8 @@
     :name="field.id"
     :placeholder="placeholder"
     :required="required"
-    :disabled="readonly">
+    :disabled="readonly"
+    @change="onChange">
     <option v-for="option in options | extract" :value="option.value">
         {{option.text || option.value}}
     </option>
@@ -48,6 +49,6 @@ export default {
             }
             return items;
         }
-    }
+    },
 };
 </script>

js/components/form/text-input.vue

@@ -5,14 +5,15 @@
     :placeholder="placeholder"
     :required="required"
     :readonly="readonly"
-    :value="value"></input>
+    :value="value"
+    @input="onChange"></input>
 </template>
 
 <script>
 import {FieldComponentMixin} from 'components/form/base-field';
 
 export default {
     name: 'text-input',
-    mixins: [FieldComponentMixin]
+    mixins: [FieldComponentMixin],
 };
 </script>

js/components/form/url-field.vue

@@ -6,7 +6,8 @@
         :placeholder="placeholder"
         :required="required"
         :readonly="readonly"
-        :value="value"></input>
+        :value="value"
+        @input="onChange"></input>
 </div>
 </template>
 

js/components/harvest/config-form.vue

@@ -0,0 +1,78 @@
+<template>
+<form class="config-form" role="form" v-el:form>
+    <!-- Filters -->
+    <div v-if="hasFilters" class="vertical-field form-group">
+        <span class="form-help"
+            v-popover="description" popover-trigger="hover" popover-placement="left">
+        </span>
+        <label class="filter-label">{{ _('Filters') }}</label>
+        <filter-field v-for="(idx,filter) in config.filters"
+            :choices="backend.filters" :key="filter.key" :value="filter.value"
+            :index="idx" :type="filter.type"
+            v-ref:filters
+            >
+        </filter-field>
+        <label :for="field.id" class="help-block" :key="error"
+            v-for="error in errors">{{error}}</label>
+        <button class="btn btn-success" @click.prevent="addFilter">
+            <span class="fa fa-fw fa-plus"></span>
+            {{ _('Add a filter') }}
+        </button>
+    </div>
+</form>
+</template>
+
+<script>
+import FilterField from './filter-field.vue';
+
+export default {
+    components: {FilterField},
+    data() {
+        return {
+            description: this._('A set of filters to apply'),
+        };
+    },
+    events: {
+        'filter:delete': function(index) {
+            this.config.filters.splice(index, 1);
+        }
+    },
+    props: {
+        config:  {
+            type: Object,
+            default: () => {},
+        },
+        backend: Object,
+    },
+    computed: {
+        hasFilters() {
+            return this.backend && this.backend.filters.length;
+        }
+    },
+    methods: {
+        addFilter() {
+            if (!this.config.filters) {
+                this.$set('config.filters', []);
+            }
+            this.config.filters.push({key: undefined, value: undefined});
+        },
+        serialize() {
+            const config = {};
+            if (this.hasFilters) {
+                config.filters = this.$refs.filters.map(vm => ({
+                    key: vm.key, value: vm.value, type: vm.type
+                }));
+            }
+            return config;
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.config-form {
+    .filter-label {
+        display: block;
+    }
+}
+</style>

js/components/harvest/filter-field.vue

@@ -0,0 +1,91 @@
+<template>
+<div class="input-group filter-group">
+    <select class="form-control filter-group__type" v-model="type">
+        <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">
+        <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>
+    <span class="input-group-btn">
+        <button class="btn btn-danger" type="button" @click.prevent="onDelete">
+            <span class="fa fa-remove">
+        </button>
+    </span>
+</div>
+</template>
+
+<script>
+import {_} from 'i18n';
+
+const TYPES = [
+    {value: 'include', label: _('Include')},
+    {value: 'exclude', label: _('Exclude')},
+];
+
+export default {
+    data() {
+        return {TYPES};
+    },
+    props: {
+        choices: Array,
+        type: {
+            type: String,
+            validator: value => TYPES.map(t => t.value).includes(value),
+            default: 'include',
+        },
+        key: [String, null],
+        value: undefined,
+        index: Number,
+    },
+    computed: {
+        hasData() {
+            return this.key || this.value;
+        },
+        isDefined() {
+            return this.key && this.value;
+        },
+        placeholder() {
+            if (!this.key || !this.choices) return;
+            return this.choices.find(c => c.key == this.key).description;
+        }
+    },
+    methods: {
+        onDelete() {
+            this.$dispatch('filter:delete', this.index);
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.filter-group {
+    display: flex;
+    margin-bottom: 5px;
+
+    .form-control {
+        border-right: none;
+    }
+
+    .filter-group__type {
+        flex: 0 1 auto;
+        width: auto;
+    }
+
+    .filter-group__key {
+        flex: 0 1 auto;
+        width: auto;
+    }
+
+    .filter-group__value {
+        flex: 1 0 auto;
+        width: auto;
+    }
+
+    .input-group-btn {
+        flex: 0 0;
+        width: auto;
+    }
+}
+</style>

js/components/harvest/form.vue

@@ -1,13 +1,20 @@
 <template>
-<vform v-ref:form :fields="fields" :model="source"></vform>
+<div>
+    <v-form v-ref:form :fields="fields" :model="source"></v-form>
+    <config-form v-ref:config-form :config="source.config || {}" :backend="backend"></config-form>
+    <v-form v-ref:post-form :fields="postFields" :model="source"></v-form>
+</div>
 </template>
 
 <script>
 import HarvestSource from 'models/harvest/source';
 import backends from 'models/harvest/backends';
+import VForm from 'components/form/vertical-form.vue';
+import ConfigForm from './config-form.vue';
 
 export default {
     name: 'HarvestSourceForm',
+    components: {VForm, ConfigForm},
     props: {
         source: {
             type: HarvestSource,
@@ -17,8 +24,10 @@ export default {
         },
         hideNotifications: false
     },
-    data: function() {
+    data() {
         return {
+            backends: backends.items,
+            backendValue: this.source.backend,
             fields: [{
                     id: 'name',
                     label: this._('Name')
@@ -33,21 +42,49 @@ export default {
                     id: 'backend',
                     label: this._('Backend'),
                     widget: 'select-input',
-                    values: backends.items.map(function(item) {
-                        return {value: item.id, text: item.label};
-                    })
-                }, {
-                    id: 'active',
-                    label: this._('Active')
-                }]
+                    values: this.backendValues
+                }],
+            postFields: [{
+                id: 'active',
+                label: this._('Active')
+            }],
+            filters: [],
         };
     },
-    components: {
-        vform: require('components/form/vertical-form.vue')
+    events: {
+        'field:change': function(field, value) {
+            if (field.field.id == 'backend') {
+                this.backendValue = value;
+            }
+        }
+    },
+    computed: {
+        /**
+         * The currently selected backend
+         */
+        backend() {
+            if (!this.backendValue) return;
+            return this.backends.find(item => item.id == this.backendValue);
+        },
+        /**
+         * Values for the backend select box
+         */
+        backendValues() {
+            return this.backends.map(item => ({value: item.id, text: item.label}));
+        },
+    },
+    created() {
+        // Prevent empty backends select box
+        backends.$on('updated', () => {this.backends = backends.items})
     },
     methods: {
         serialize: function() {
-            return this.$refs.form.serialize();
+            const data =  Object.assign({},
+                this.$refs.postForm.serialize(),
+                this.$refs.form.serialize(),
+            )
+            data.config = this.$refs.configForm.serialize();
+            return data;
         },
         validate: function() {
             const isValid = this.$refs.form.validate();