Brings blur back to tainacan form item to garantee input even when quicly switching between fields. Adds number limit to terms request on taxonomy taginput. #320.

2019-11-21 13:24:49 -03:00 · 2019-11-21 13:24:49 -03:00 · 05223c0b6d
parent 6cce09ce7e
commit 05223c0b6d
10 changed files with 66 additions and 28 deletions
--- a/src/classes/metadata-types/date/Date.vue
+++ b/src/classes/metadata-types/date/Date.vue
@ -9,6 +9,7 @@
                v-mask="dateMask"
                v-model="dateValue"
                @input.native="onInput"
+                @blur="onBlur"
                :placeholder="dateFormat.toLowerCase()" />
        <p
                v-if="isInvalidDate && dateValue"
@ -76,7 +77,10 @@
                } else  {
                   this.$emit('input', [null]); 
                }
-            }, 300)
+            }, 300),
+            onBlur() {
+                this.$emit('blur');
+            }
        }
    }
 </script>
--- a/src/classes/metadata-types/numeric/Numeric.vue
+++ b/src/classes/metadata-types/numeric/Numeric.vue
@ -4,6 +4,7 @@
            :id="metadatum.metadatum.metadata_type_object.component + '-' + metadatum.metadatum.slug"
            :value="value"
            @input="onInput($event)"
+            @blur="onBlur"
            type="number"
            lang="en"
            :step="getStep"/>
@ -27,6 +28,9 @@
        methods: {
            onInput(value) {
                this.$emit('input', value);
+            },
+            onBlur() {
+                this.$emit('blur');
            }
        }
    }
--- a/src/classes/metadata-types/relationship/Relationship.vue
+++ b/src/classes/metadata-types/relationship/Relationship.vue
@ -8,6 +8,7 @@
                size="is-small"
                icon="magnify"
                @input="onInput"
+                @blur="onBlur"
                :data="options"
                :maxtags="maxtags != undefined ? maxtags : (metadatum.metadatum.multiple == 'yes' || allowNew === true ? 100 : 1)"
                autocomplete
@ -95,6 +96,9 @@
                this.selected = newSelected;
                this.$emit('input', newSelected.map((item) => item.value));
            },
+            onBlur() {
+                this.$emit('blur');
+            },
            search: _.debounce(function(query) {
                if ( this.selected.length > 0  && this.metadatum.metadatum.multiple === 'no')
                    return '';
--- a/src/classes/metadata-types/selectbox/Selectbox.vue
+++ b/src/classes/metadata-types/selectbox/Selectbox.vue
@ -37,7 +37,7 @@
        methods: {
            onSelected(value) {
                this.$emit('input', value);
-            },
+            }
        }
    }
 </script>
--- a/src/classes/metadata-types/tainacan-form-item.vue
+++ b/src/classes/metadata-types/tainacan-form-item.vue
@ -45,7 +45,8 @@
                        :is="metadatum.metadatum.metadata_type_object.component"
                        v-model="inputs[0]" 
                        :metadatum="metadatum"
-                        @input="changeValue()"/>
+                        @input="changeValue()"
+                        @blur="performValueChange()"/>
                <template v-if="metadatum.metadatum.multiple == 'yes' && inputs.length > 1">
                    <transition-group
                            name="filter-item"
@ -57,7 +58,8 @@
                                    :is="metadatum.metadatum.metadata_type_object.component"
                                    v-model="inputs[index]" 
                                    :metadatum="metadatum"
-                                    @input="changeValue()"/>
+                                    @input="changeValue()"
+                                    @blur="performValueChange()"/>
                            <a 
                                    v-if="index > 0" 
                                    @click="removeInput(index)"
@ -92,7 +94,8 @@
                        :is="metadatum.metadatum.metadata_type_object.component"
                        v-model="inputs"
                        :metadatum="metadatum"
-                        @input="changeValue()"/>
+                        @input="changeValue()"
+                        @blur="performValueChange()"/>
            </div>
        </transition>
    </b-field>
@ -135,7 +138,9 @@
        },
        methods: {
            changeValue: _.debounce(function() {
-
+                this.performValueChange();
+            }, 800),
+            performValueChange() {
                if (this.inputs && this.inputs.length > 0 && this.inputs[0] && this.inputs[0].value) {
                    let terms = this.inputs.map(term => term.value)
                    
@ -150,7 +155,6 @@

                        if (equal.length == terms.length && this.metadatum.value.length <= equal.length)
                            return;
-
                    }
                } else if (this.metadatum.value.constructor.name == 'Object') {

@ -170,14 +174,16 @@

                    if (equal.length == this.inputs.length && this.metadatum.value.length <= equal.length)
                        return;
+                } else if (this.inputs && this.inputs.length == 1 && this.inputs[0] == this.metadatum.value) {
+                    return
                }
+
                eventBus.$emit('input', {
                    itemId: this.metadatum.item.id,
                    metadatumId: this.metadatum.metadatum.id,
                    values: this.inputs ? this.inputs : ''
                });
-            
-            }, 500),
+            },
            createInputs() {
                if (this.metadatum.value instanceof Array)
                    this.inputs = this.metadatum.value.slice(0);
--- a/src/classes/metadata-types/taxonomy/Taxonomy.vue
+++ b/src/classes/metadata-types/taxonomy/Taxonomy.vue
@ -86,10 +86,6 @@
                    this.valueComponent = values;
                }
            },
-            onInput($event) {
-                this.valueComponent = $event;
-                this.$emit('input', this.valueComponent);
-            },
            reload($event) {
                if ($event.taxonomyId == this.taxonomyId && $event.metadatumId == this.metadatum.metadatum.id) {
                    this.valueComponent = $event.values;
--- a/src/classes/metadata-types/taxonomy/TaxonomyTaginput.vue
+++ b/src/classes/metadata-types/taxonomy/TaxonomyTaginput.vue
@ -1,8 +1,9 @@
 <template>
    <div class="block">
        <b-taginput
-                :id="metadatumComponentId"
+                expanded
                :disabled="disabled"
+                :id="metadatumComponentId"
                size="is-small"
                icon="magnify"
                :allow-new="false"
@ -19,7 +20,20 @@
                :loading="isFetching"
                :class="{'has-selected': selected != undefined && selected != []}"
                autocomplete
-                @typing="autoCompleteTerm"/>
+                @typing="autoCompleteTerm">
+            <template slot-scope="props">
+                <div class="media">
+                    <div class="media-content">
+                        {{ props.option.label }}
+                    </div>
+                </div>
+            </template>
+            <template 
+                    v-if="!isFetching"
+                    slot="empty">
+                {{ $i18n.get('info_no_terms_found') }}
+            </template>
+        </b-taginput>
    </div>
 </template>

@ -31,7 +45,6 @@
            return {
                selected: [],
                labels: [],
-                termList: [],
                isFetching: false,
            }
        },
@ -65,7 +78,6 @@
                'getTerms'
            ]),
            autoCompleteTerm: _.debounce( function(value) {
-                this.termList = [];
                this.labels = [];
                this.isFetching = true;

@ -80,17 +92,19 @@
                    search: { 
                        searchterm: value
                    },
-                    all: true
+                    all: true,
+                    order: 'asc',
+                    offset: 0,
+                    number: 12
                }).then((res) => {
-                    this.termList = res.terms;
                    
-                    for (let term of this.termList)
+                    for (let term of res.terms)
                        this.labels.push({label: term.name, value: term.id});

-                    if (this.termList.length <= 0 && this.allowSelectToCreate)
+                    if (res.terms.length <= 0 && this.allowSelectToCreate)
                        this.labels.push({label: `${value} (${this.$i18n.get('select_to_create')})`, value: value})

-                    this.isFetching = false;
+                    this.isFetching = false;    
                }).catch((error) => {
                    this.isFetching = false;
                    throw error;
--- a/src/classes/metadata-types/text/Text.vue
+++ b/src/classes/metadata-types/text/Text.vue
@ -3,7 +3,8 @@
            :disabled="disabled"
            :id="metadatum.metadatum.metadata_type_object.component + '-' + metadatum.metadatum.slug"
            :value="value"
-            @input="onInput($event)"/>
+            @input="onInput($event)"
+            @blur="onBlur"/>
 </template>

 <script>
@ -16,6 +17,9 @@
        methods: {
            onInput(value) {
                this.$emit('input', value);
+            },
+            onBlur() {
+                this.$emit('blur');
            }
        }
    }
--- a/src/classes/metadata-types/textarea/Textarea.vue
+++ b/src/classes/metadata-types/textarea/Textarea.vue
@ -4,6 +4,7 @@
            :id="metadatum.metadatum.metadata_type_object.component + '-' + metadatum.metadatum.slug"
            :value="value"
            @input="onInput($event)"
+            @blur="onBlur"
            type="textarea" />
 </template>

@ -17,6 +18,9 @@
        methods: {
            onInput(value) {
                this.$emit('input', value);
+            },
+            onBlur() {
+                this.$emit('blur');
            }
        }
    }
--- a/src/js/store/modules/taxonomy/actions.js
+++ b/src/js/store/modules/taxonomy/actions.js
@ -174,9 +174,9 @@ export const updateTerm = ({ commit }, { taxonomyId, id, name, description, pare
 export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, order, offset, number}) => {
    
    let query = '';
-    if (order == undefined) {
+    
+    if (order == undefined)
        order = 'asc';
-    }

    if(fetchOnly && search && !all ){
        query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
@ -188,9 +188,11 @@ export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, orde
        query =`?hideempty=0&order=${order}`;
    }

-    if (offset != undefined && number != undefined) {
-        query += '&offset=' + offset + '&number=' + number;
-    }
+    if (number != undefined)
+        query += '&number=' + number;
+    
+    if (offset != undefined)
+        query += '&offset=' + offset;

    return new Promise((resolve, reject) => {
        axios.tainacan.get(`/taxonomy/${taxonomyId}/terms${query}`)