Solves issue where page was reset to one after leaving items list. This was caused by the event bus, now the responsability of reseting the page when a filter is clicked is handled by each filter component. #375.

2020-03-25 10:48:46 -03:00 · 2020-03-25 10:48:46 -03:00 · 2be88b8fa4
parent 77946d1def
commit 2be88b8fa4
15 changed files with 39 additions and 19 deletions
--- a/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
+++ b/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
@ -8,7 +8,7 @@
                :data="options"
                expanded
                :loading="isLoadingOptions"
-                @input="search"
+                @input="($event) => { resetPage(); search($event); }"
                field="label"
                @select="onSelect"
                clearable
--- a/src/views/admin/components/filter-types/checkbox/Checkbox.vue
+++ b/src/views/admin/components/filter-types/checkbox/Checkbox.vue
@ -14,6 +14,7 @@
                <input 
                        v-model="selected"
                        :value="option.value"
+                        @input="resetPage()"
                        type="checkbox"> 
                    <span class="check" /> 
                    <span class="control-label">
--- a/src/views/admin/components/filter-types/date-interval/DateInterval.vue
+++ b/src/views/admin/components/filter-types/date-interval/DateInterval.vue
@ -5,7 +5,7 @@
                :placeholder="$i18n.get('label_selectbox_init')"
                v-model="dateInit"
                @focus="isTouched = true"
-                @input="validadeValues()"
+                @input="($event) => { resetPage(); validadeValues($event) }"
                editable
                :trap-focus="false"
                :date-formatter="(date) => dateFormatter(date)"
--- a/src/views/admin/components/filter-types/date/Date.vue
+++ b/src/views/admin/components/filter-types/date/Date.vue
@ -2,7 +2,7 @@
    <div class="date-filter-container">
         <b-dropdown
                :mobile-modal="true"
-                @input="onChangeComparator($event)"
+                @input="($event) => { resetPage(); onChangeComparator($event) }"
                aria-role="list"
                trap-focus>
            <button
@ -72,7 +72,7 @@
                :aria-labelledby="'filter-label-id-' + filter.id"
                :placeholder="$i18n.get('instruction_select_a_date')"
                v-model="value"
-                @input="emit()"
+                @input="($event) => { resetPage(); emit($event) }"
                editable
                :trap-focus="false"
                :date-formatter="(date) => dateFormatter(date)"
--- a/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
@ -3,7 +3,7 @@
        <b-numberinput
                :aria-labelledby="'filter-label-id-' + filter.id"
                size="is-small"
-                @input="validadeValues()"
+                @input="($event) => { resetPage(); validadeValues($event) }"
                :step="filterTypeOptions.step"
                v-model="valueInit"
                />
@ -15,7 +15,7 @@
        <b-numberinput
                :aria-labelledby="'filter-label-id-' + filter.id"
                size="is-small"
-                @input="validadeValues()"
+                @input="($event) => { resetPage(); validadeValues($event) }"
                :step="filterTypeOptions.step"
                v-model="valueEnd"/>
        
--- a/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
@ -3,7 +3,7 @@
        <b-select
                expanded
                :placeholder="$i18n.get('instruction_select_a_interval')"
-                @input="changeInterval"
+                @input="($event) => { resetPage; changeInterval($event) }"
                v-model="selectedInterval">
            <option value="">
                {{ $i18n.get('label_selectbox_init') }}...
--- a/src/views/admin/components/filter-types/numeric/Numeric.vue
+++ b/src/views/admin/components/filter-types/numeric/Numeric.vue
@ -2,7 +2,7 @@
    <div class="numeric-filter-container">
         <b-dropdown
                :mobile-modal="true"
-                @input="onChangeComparator($event)"
+                @input="($event) => { resetPage(); onChangeComparator($event) }"
                aria-role="list"
                trap-focus>
            <button
@ -64,7 +64,7 @@
                :aria-labelledby="'filter-label-id-' + filter.id"
                size="is-small"
                :step="Number(filterTypeOptions.step)"
-                @input="emit()"
+                @input="($event) => { resetPage($event); emit($event); }"
                v-model="value"/>
    </div>
 </template>
--- a/src/views/admin/components/filter-types/selectbox/Selectbox.vue
+++ b/src/views/admin/components/filter-types/selectbox/Selectbox.vue
@ -6,7 +6,7 @@
                v-if="!isLoadingOptions"
                :value="selected"
                :aria-labelledby="'filter-label-id-' + filter.id"
-                @input="onSelect($event)"
+                @input="($event) => { resetPage(); onSelect($event) }"
                :placeholder="$i18n.get('label_selectbox_init')"
                expanded>
            <option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
--- a/src/views/admin/components/filter-types/taginput/Taginput.vue
+++ b/src/views/admin/components/filter-types/taginput/Taginput.vue
@ -11,7 +11,7 @@
                :remove-on-keys="[]"
                field="label"
                attached
-                @input="onSelect"
+                @input="($event) => { resetPage(); onSelect($event) }"
                @typing="search"
                :aria-close-label="$i18n.get('remove_value')"
                :aria-labelledby="'filter-label-id-' + filter.id"
--- a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
@ -20,6 +20,7 @@
                    class="b-checkbox checkbox is-small">
                <input 
                        v-model="selected"
+                        @input="resetPage"
                        :value="option.value"
                        type="checkbox"> 
                <span class="check" /> 
@ -78,7 +79,6 @@
                const isEqual = (newVal.length == oldVal.length) && newVal.every((element, index) => {
                    return element === oldVal[index]; 
                });
-
                if (!isEqual)
                    this.onSelect();
            },
@ -257,7 +257,8 @@

                this.$emit('sendValuesToTags', { label: onlyLabels, taxonomy: this.taxonomy, value: this.selected });
            },
-            onSelect(){
+            onSelect() {
+                
                this.$emit('input', {
                    filter: 'checkbox',
                    taxonomy: this.taxonomy,
--- a/src/views/admin/components/filter-types/taxonomy/Taginput.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Taginput.vue
@ -15,7 +15,7 @@
                :aria-labelledby="'filter-label-id-' + filter.id"
                :class="{'has-selected': selected != undefined && selected != []}"
                @typing="search"
-                @input="onSelect"
+                @input="($event) => { resetPage(); onSelect($event) }"
                :placeholder="$i18n.get('info_type_to_add_terms')"
                check-infinite-scroll
                @infinite-scroll="searchMore">
--- a/src/views/admin/components/modals/checkbox-radio-modal.vue
+++ b/src/views/admin/components/modals/checkbox-radio-modal.vue
@ -690,6 +690,8 @@
            applyFilter() {
                this.$parent.close();

+                this.$eventBusSearch.resetPageOnStore();
+
                if (this.isTaxonomy && this.isFilter) {
                    this.$eventBusSearch.$emit('input', {
                        filter: 'checkbox',
@ -756,7 +758,15 @@

    .tainacan-modal-content {
        width: auto;
-        min-height: 600px;
+        min-height: 550px;
+
+        .b-tabs {
+            margin-bottom: 0 !important;
+
+            .tab-content {
+                padding: 0.5em;
+            }
+        }
    }

    .tainacan-modal-title {
@ -847,7 +857,7 @@
        display: flex;
        overflow: auto;
        padding: 0 !important;
-        min-height: 253px;
+        min-height: 232px;
        max-height: 35vh;

        &:focus {
--- a/src/views/admin/components/search/filters-tags-list.vue
+++ b/src/views/admin/components/search/filters-tags-list.vue
@ -45,6 +45,7 @@
                'getFilterTags'
            ]),
            removeMetaQuery({ filterId, value, singleLabel, label, taxonomy, metadatumId }) {
+                this.$eventBusSearch.resetPageOnStore();
                this.$eventBusSearch.removeMetaFromFilterTag({ 
                    filterId: filterId,
                    singleLabel: singleLabel,
@ -55,7 +56,7 @@
                });
            },
            clearAllFilters() {
-                // this.$eventBusSearch.clearAllFilters();
+                this.$eventBusSearch.resetPageOnStore();
                for (let tag of this.filterTags) {
                    this.removeMetaQuery(tag);
                }
--- a/src/views/admin/js/event-bus-search.js
+++ b/src/views/admin/js/event-bus-search.js
@ -15,8 +15,6 @@ export default {
            },
            created() {
                this.$on('input', data => {
-                    
-                    this.$store.dispatch('search/setPage', 1);
                    if (data.taxonomy)
                        this.addTaxquery(data);
                    else
@ -235,6 +233,10 @@ export default {
                    this.$store.dispatch('search/setPage', page);
                    this.updateURLQueries();
                },
+                resetPageOnStore() {
+                    console.log('resetei')
+                    this.$store.dispatch('search/setPage', 1);
+                },
                setItemsPerPage(itemsPerPage) {
                    this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
                    this.updateURLQueries();
--- a/src/views/admin/js/filter-types-mixin.js
+++ b/src/views/admin/js/filter-types-mixin.js
@ -25,6 +25,11 @@ export const filterTypeMixin = {
        this.metadatumId = this.filter.metadatum.metadatum_id ? this.filter.metadatum.metadatum_id : this.metadatumId;
        this.filterTypeOptions = this.filter.filter_type_options ? this.filter.filter_type_options : this.filterTypeOptions;
        this.metadatumType = this.filter.metadatum.metadata_type_object && this.filter.metadatum.metadata_type_object.className ? this.filter.metadatum.metadata_type_object.className : this.metadatumType;
+    },
+    methods: {
+        resetPage() {
+            this.$eventBusSearch.resetPageOnStore()
+        }
    }
 };