Fixes 91 vue files with the eslint error of order-in-components.

.eslintrc.js

@@ -17,7 +17,6 @@ module.exports = {
         'no-undef': 'warn',
         'vue/html-indent': 'off',
         'vue/attributes-order': 'off',
-        'vue/order-in-components': 'off',
         'vue/no-confusing-v-for-v-if': 'off',
         'vue/require-default-prop': 'off', // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md
     },

src/classes/filter-types/date/Date.vue

@@ -121,23 +121,12 @@
             dateInter,
             filterTypeMixin
         ],
-        mounted() {
-            this.updateSelectedValues();
-        },
         data(){
             return {
                 value: null,
                 comparator: '=', // =, !=, >, >=, <, <=
             }
         },
-        watch: {
-            'query.metaquery'() {
-                this.updateSelectedValues();
-            },
-            'query.taxquery'() {
-                this.updateSelectedValues();
-            }
-        },
         computed: {
             yearsOnlyValue() {
                 return this.value && typeof this.value.getUTCFullYear === 'function' ? this.value.getUTCFullYear() : null
@@ -154,6 +143,17 @@
                 }
             }
         },
+        watch: {
+            'query.metaquery'() {
+                this.updateSelectedValues();
+            },
+            'query.taxquery'() {
+                this.updateSelectedValues();
+            }
+        },
+        mounted() {
+            this.updateSelectedValues();
+        },
         methods: {
             updateSelectedValues(){
                 if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )

src/classes/filter-types/numeric-interval/FormNumericInterval.vue

@@ -87,6 +87,9 @@
                 showEditStepOptions: false
             }
         },
+        created() {
+            this.step = this.value && this.value.step ? this.value.step : 1;
+        },
         methods: {
             onUpdate() {
                 this.$emit('input', { 
@@ -94,9 +97,6 @@
                 });
             },
             
-        },
-        created() {
-            this.step = this.value && this.value.step ? this.value.step : 1;
         }
     }
 </script>

src/classes/filter-types/numeric-interval/NumericInterval.vue

@@ -28,9 +28,6 @@
                 valueEnd: null
             }
         },
-        mounted() {
-            this.updateSelectedValues();
-        },
         watch: {
             'query.metaquery'() {
                 this.updateSelectedValues();
@@ -39,6 +36,9 @@
                 this.updateSelectedValues();
             }
         },
+        mounted() {
+            this.updateSelectedValues();
+        },
         methods: {
             // only validate if the first value is higher than first
             validadeValues: _.debounce( function () {

src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue

@@ -100,6 +100,17 @@
                 isValid: true,
             }
         },
+        created() {
+            this.intervals = 
+                this.value && this.value.intervals && this.value.intervals.length > 0 ? 
+                    this.value.intervals : 
+                    [{
+                        label: '',
+                        to: null,
+                        from: null
+                    }];
+            this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true;
+        },
         methods: {
             onUpdate: _.debounce( function(interval, validade) {
                 if (validade != undefined && validade == true && 
@@ -153,17 +164,6 @@
                     });
                 }
             }
-        },
-        created() {
-            this.intervals = 
-                this.value && this.value.intervals && this.value.intervals.length > 0 ? 
-                    this.value.intervals : 
-                    [{
-                        label: '',
-                        to: null,
-                        from: null
-                    }];
-            this.showIntervalOnTag = this.value && this.value.showIntervalOnTag != undefined ? this.value.showIntervalOnTag : true;
         }
     }
 </script>

src/classes/filter-types/numeric-list-interval/NumericListInterval.vue

@@ -29,9 +29,6 @@
                 selectedInterval: ''
             }
         },
-        mounted() {
-            this.updateSelectedValues();
-        },
         watch: {
             'query.metaquery'() {
                 this.updateSelectedValues();
@@ -40,6 +37,9 @@
                 this.updateSelectedValues();
             }
         },        
+        mounted() {
+            this.updateSelectedValues();
+        },
         methods: {
             changeInterval() {
                 if (this.selectedInterval !== '') {

src/classes/filter-types/numeric/FormNumeric.vue

@@ -82,13 +82,13 @@
                 showEditStepOptions: false
             }
         },
+        created() {
+            this.step = this.value && this.value.step ? this.value.step : 1;
+        },
         methods: {
             onUpdateStep(value) {
                 this.$emit('input', { step: value });
             },
-        },
-        created() {
-            this.step = this.value && this.value.step ? this.value.step : 1;
         }
     }
 </script>

src/classes/filter-types/numeric/Numeric.vue

@@ -78,9 +78,6 @@
             wpAjax,
             filterTypeMixin
         ],
-        mounted() {
-            this.updateSelectedValues();
-        },
         data(){
             return {
                 value: null,
@@ -109,6 +106,9 @@
                 this.updateSelectedValues();
             }
         },
+        mounted() {
+            this.updateSelectedValues();
+        },
         methods: {
             updateSelectedValues(){
                 if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )

src/classes/filter-types/tainacan-filter-item.vue

@@ -68,6 +68,10 @@
                 });
             }
         },
+        beforeDestroy() {
+            if (this.isUsingElasticSearch)
+                this.$eventBusSearch.$off('isLoadingItems');
+        },
         methods: {
             onInput(inputEvent) {
                 this.$eventBusSearch.$emit('input', inputEvent);
@@ -81,10 +85,6 @@
                     metadatumId: this.filter.metadatum_id
                 });
             }
-        },    
-        beforeDestroy() {
-            if (this.isUsingElasticSearch)
-                this.$eventBusSearch.$off('isLoadingItems');
         }
     }
 </script>

src/classes/filter-types/taxonomy/Checkbox.vue

@@ -96,6 +96,12 @@
         mounted(){
             this.loadOptions();
         },
+        beforeDestroy() {
+            
+            // Cancels previous Request
+            if (this.getOptionsValuesCancel != undefined)
+                this.getOptionsValuesCancel.cancel('Facet search Canceled.');
+        }, 
         methods: {
             ...mapGetters('search', [
                 'getFacets'
@@ -298,12 +304,6 @@
             updatesIsLoading(isLoadingOptions) {
                 this.isLoadingOptions = isLoadingOptions;
             }
-        },
-        beforeDestroy() {
-            
-            // Cancels previous Request
-            if (this.getOptionsValuesCancel != undefined)
-                this.getOptionsValuesCancel.cancel('Facet search Canceled.');
         }
     }
 </script>

src/classes/filter-types/taxonomy/Taginput.vue

@@ -43,14 +43,13 @@
     
     export default {
         mixins: [ filterTypeMixin, dynamicFilterTypeMixin ],
-        created() {
-            if (this.filter.metadatum && 
-                this.filter.metadatum.metadata_type_object && 
-                this.filter.metadatum.metadata_type_object.options &&
-                this.filter.metadatum.metadata_type_object.options.taxonomy &&
-                this.filter.metadatum.metadata_type_object.options.taxonomy_id) {
-                    this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id;
-                    this.taxonomy = this.filter.metadatum.metadata_type_object.options.taxonomy;
+        data(){
+            return {
+                results:'',
+                selected:[],
+                options: [],
+                taxonomy: '',
+                taxonomyId: ''
             }
         },
         watch: {
@@ -61,18 +60,19 @@
                 this.loadOptions();
             }
         },
+        created() {
+            if (this.filter.metadatum && 
+                this.filter.metadatum.metadata_type_object && 
+                this.filter.metadatum.metadata_type_object.options &&
+                this.filter.metadatum.metadata_type_object.options.taxonomy &&
+                this.filter.metadatum.metadata_type_object.options.taxonomy_id) {
+                    this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id;
+                    this.taxonomy = this.filter.metadatum.metadata_type_object.options.taxonomy;
+                }
+        },
         mounted() {
             this.updateSelectedValues();
         },
-        data(){
-            return {
-                results:'',
-                selected:[],
-                options: [],
-                taxonomy: '',
-                taxonomyId: ''
-            }
-        },
         methods: {
             search: _.debounce( function(query) {
                 this.isLoadingOptions = true;

src/classes/metadata-types/date/Date.vue

@@ -39,9 +39,10 @@
 
     export default {
         mixins: [ dateInter ],
-        created(){
-            if (this.value)
-                this.dateValue = this.parseDateToNavigatorLanguage(this.value);
+        props: {
+            metadatum: Object,
+            value: [String, Number, Array],
+            disabled: false,
         },
         data() {
             return {
@@ -49,10 +50,9 @@
                 isInvalidDate: false,
             }
         },
-        props: {
-            metadatum: Object,
-            value: [String, Number, Array],
-            disabled: false,
+        created(){
+            if (this.value)
+                this.dateValue = this.parseDateToNavigatorLanguage(this.value);
         },
         methods: {
             onInput: _.debounce(function ($event) {

src/classes/metadata-types/numeric/FormNumeric.vue

@@ -81,13 +81,13 @@
                 showEditStepOptions: false
             }
         },
+        created() {
+            this.step = this.value && this.value.step ? this.value.step : 0.01;
+        },
         methods: {
             onUpdateStep(value) {
                 this.$emit('input', { step: value });
             }
-        },
-        created() {
-            this.step = this.value && this.value.step ? this.value.step : 0.01;
         }
     }
 </script>

src/classes/metadata-types/relationship/FormRelationship.vue

@@ -106,6 +106,16 @@
                 collectionMessage: ''
             }
         },
+        computed: {
+            setError(){
+                if( this.errors && this.errors.collection_id !== '' ){
+                    this.setErrorsAttributes( 'is-danger', this.errors.collection_id );
+                } else {
+                    this.setErrorsAttributes( '', '' );
+                }
+                return true;
+            },
+        },
         watch:{
             collection( value ){
                 this.collection = value;
@@ -139,16 +149,6 @@
                this.modelRepeated = this.value.repeated;
            }
         },
-        computed: {
-            setError(){
-                if( this.errors && this.errors.collection_id !== '' ){
-                    this.setErrorsAttributes( 'is-danger', this.errors.collection_id );
-                } else {
-                    this.setErrorsAttributes( '', '' );
-                }
-                return true;
-            },
-        },
         methods:{
             setErrorsAttributes( type, message ){
                 this.collectionType = type;

src/classes/metadata-types/relationship/Relationship.vue

@@ -47,6 +47,24 @@
     import qs from 'qs';
 
     export default {       
+        props: {
+            metadatum: Object,
+            maxtags: undefined,
+            disabled: false,
+            allowNew: true,
+        },
+        data() {
+            return {
+                results:'',
+                selected:[],
+                options: [],
+                isLoading: false,
+                collectionId: '',
+                inputValue: null,
+                queryObject: {},
+                itemsFound: []
+            }
+        },
         created() {
             this.collectionId = ( this.metadatum && this.metadatum.metadatum.metadata_type_options && this.metadatum.metadatum.metadata_type_options.collection_id ) ? this.metadatum.metadatum.metadata_type_options.collection_id : '';
             if (this.metadatum.value && (Array.isArray( this.metadatum.value ) ? this.metadatum.value.length > 0 : true )) {
@@ -68,24 +86,6 @@
                     });
             }
         },
-        data() {
-            return {
-                results:'',
-                selected:[],
-                options: [],
-                isLoading: false,
-                collectionId: '',
-                inputValue: null,
-                queryObject: {},
-                itemsFound: []
-            }
-        },
-        props: {
-            metadatum: Object,
-            maxtags: undefined,
-            disabled: false,
-            allowNew: true,
-        },
         methods: {
             setResults(option){
                 if(!option)

src/classes/metadata-types/selectbox/FormSelectbox.vue

@@ -37,11 +37,6 @@
                 options: []
             }
         },
-        created(){
-            if( this.value ) {
-                this.options = ( this.value.options ) ? this.value.options.split('\n') : [];
-            }
-        },
         computed: {
             setError(){
                 if( this.errors && this.errors.options !== '' ){
@@ -52,6 +47,11 @@
                 return true;
             }
         },
+        created(){
+            if( this.value ) {
+                this.options = ( this.value.options ) ? this.value.options.split('\n') : [];
+            }
+        },
         methods: {
             clear(){
                 this.optionType = '';

src/classes/metadata-types/tainacan-form-item.vue

@@ -134,6 +134,9 @@
                 this.errorMessage = updatedErrorMessage;
             })
         },
+        beforeDestroy() {
+            eventBusItemMetadata.$off('updateErrorMessageOf#' + this.metadatum.metadatum.id);
+        },
         methods: {
             changeValue: _.debounce(function() {
                 this.performValueChange();
@@ -200,9 +203,6 @@
                 const array = ['tainacan-relationship','tainacan-taxonomy'];
                 return !(array.indexOf(component) >= 0 );
             }
-        },
-        beforeDestroy() {
-            eventBusItemMetadata.$off('updateErrorMessageOf#' + this.metadatum.metadatum.id);
         }
     }
 </script>

src/classes/metadata-types/taxonomy/AddNewTerm.vue

@@ -97,6 +97,12 @@
     import { mapActions } from 'vuex';
 
     export default {
+        props: {
+            metadatum: [Number,String],
+            taxonomyId: [Number,String],
+            value: [ Array, Boolean, Number ],
+            componentType: ''
+        },
         data(){
             return {
                 name: '',
@@ -113,11 +119,8 @@
                 formErrors: {}
             }
         },
-        props: {
-            metadatum: [Number,String],
-            taxonomyId: [Number,String],
-            value: [ Array, Boolean, Number ],
-            componentType: ''
+        mounted() {
+            this.hasParent = this.parent != undefined && this.parent > 0;
         },
         methods: {
             ...mapActions('taxonomy', [
@@ -225,9 +228,6 @@
                 }
 
             }
-        },
-        mounted() {
-            this.hasParent = this.parent != undefined && this.parent > 0;
         }
     }
 </script>

src/classes/metadata-types/taxonomy/FormTaxonomy.vue

@@ -92,38 +92,18 @@
             metadatum: [ String, Object ],
             errors: [ String, Object, Array ]
         },
-        created(){
-            this.fetchTaxonomies();
-
-            this.single_types['tainacan-taxonomy-radio'] = 'Radio';
-            this.multiple_types['tainacan-taxonomy-tag-input'] = 'Tag Input';
-            this.multiple_types['tainacan-taxonomy-checkbox'] = 'Checkbox';
-
-            if (this.value) {
-
-                this.taxonomy_id = this.value.taxonomy_id;
-                this.allow_new_terms = ( this.value.allow_new_terms ) ? this.value.allow_new_terms : 'no';
-                
-                if (this.metadatum && this.metadatum.multiple === 'no') {
-                    let types = Object.keys( this.single_types );
-                    let hasValue = this.value && this.value.input_type && types.indexOf( this.value.input_type ) >= 0;
-                    this.setInputType( ( hasValue ) ? this.value.input_type : 'tainacan-taxonomy-radio' );
-                } else {
-                    let types = Object.keys( this.multiple_types );
-                    let hasValue = this.value && this.value.input_type && types.indexOf( this.value.input_type ) >= 0;
-                    this.setInputType( ( hasValue ) ? this.value.input_type : 'tainacan-taxonomy-checkbox' );
-                }
-            }
-
-            this.isReady = true;
-        },
-        watch: {
-            input_type:{
-                handler(val, oldValue) {
-                    if (val != oldValue) {
-                        this.emitValues();
-                    }
-                }
+        data(){
+            return {
+                isReady: false,
+                taxonomies: [],
+                taxonomy_id: '',
+                loading: true,
+                allow_new_terms: 'yes',
+                input_type: 'tainacan-taxonomy-radio',
+                multiple_types: {},
+                single_types: {},
+                taxonomyType:'',
+                taxonomyMessage: ''
             }
         },
         computed: {
@@ -160,19 +140,39 @@
                 return true;
             }
         },
-        data(){
-            return {
-                isReady: false,
-                taxonomies: [],
-                taxonomy_id: '',
-                loading: true,
-                allow_new_terms: 'yes',
-                input_type: 'tainacan-taxonomy-radio',
-                multiple_types: {},
-                single_types: {},
-                taxonomyType:'',
-                taxonomyMessage: ''
+        watch: {
+            input_type:{
+                handler(val, oldValue) {
+                    if (val != oldValue) {
+                        this.emitValues();
                     }
+                }
+            }
+        },
+        created(){
+            this.fetchTaxonomies();
+
+            this.single_types['tainacan-taxonomy-radio'] = 'Radio';
+            this.multiple_types['tainacan-taxonomy-tag-input'] = 'Tag Input';
+            this.multiple_types['tainacan-taxonomy-checkbox'] = 'Checkbox';
+
+            if (this.value) {
+
+                this.taxonomy_id = this.value.taxonomy_id;
+                this.allow_new_terms = ( this.value.allow_new_terms ) ? this.value.allow_new_terms : 'no';
+                
+                if (this.metadatum && this.metadatum.multiple === 'no') {
+                    let types = Object.keys( this.single_types );
+                    let hasValue = this.value && this.value.input_type && types.indexOf( this.value.input_type ) >= 0;
+                    this.setInputType( ( hasValue ) ? this.value.input_type : 'tainacan-taxonomy-radio' );
+                } else {
+                    let types = Object.keys( this.multiple_types );
+                    let hasValue = this.value && this.value.input_type && types.indexOf( this.value.input_type ) >= 0;
+                    this.setInputType( ( hasValue ) ? this.value.input_type : 'tainacan-taxonomy-checkbox' );
+                }
+            }
+
+            this.isReady = true;
         },
         methods: {
             setInputType( input ){

src/classes/metadata-types/taxonomy/Taxonomy.vue

@@ -25,23 +25,20 @@
     import AddNewTerm from  './AddNewTerm.vue'
 
     export default {
-        created(){
-            const metadata_type_options = this.metadatum.metadatum.metadata_type_options;
-
-            this.taxonomyId = metadata_type_options.taxonomy_id;
-            this.taxonomy = metadata_type_options.taxonomy;
-
-            if (metadata_type_options && metadata_type_options.allow_new_terms && this.metadatum.item) 
-                this.allowNew = metadata_type_options.allow_new_terms == 'yes';
-
-            this.getTermsId();
-        },
         components: {
             TainacanTaxonomyRadio,
             TainacanTaxonomyCheckbox,
             TainacanTaxonomyTagInput,
             AddNewTerm
         },
+        props: {
+            metadatum: Object,
+            value: [ Number, String, Array, Object ],
+            disabled: false,
+            forcedComponentType: '',
+            maxtags: '',
+            allowSelectToCreate: false,
+        },
         data(){
             return {
                 valueComponent: null,
@@ -51,19 +48,6 @@
                 allowNew: false
             }
         },
-        watch: {
-            valueComponent( val ){
-                this.$emit('input', val);
-            }
-        },
-        props: {
-            metadatum: Object,
-            value: [ Number, String, Array, Object ],
-            disabled: false,
-            forcedComponentType: '',
-            maxtags: '',
-            allowSelectToCreate: false,
-        },
         computed: {
             getComponent() {
                 if (this.forcedComponentType)
@@ -75,6 +59,22 @@
                     return this.metadatum.metadatum.metadata_type_options.input_type;
             }
         },
+        watch: {
+            valueComponent( val ){
+                this.$emit('input', val);
+            }
+        },
+        created(){
+            const metadata_type_options = this.metadatum.metadatum.metadata_type_options;
+
+            this.taxonomyId = metadata_type_options.taxonomy_id;
+            this.taxonomy = metadata_type_options.taxonomy;
+
+            if (metadata_type_options && metadata_type_options.allow_new_terms && this.metadatum.item) 
+                this.allowNew = metadata_type_options.allow_new_terms == 'yes';
+
+            this.getTermsId();
+        },
         methods: {
             getTermsId() {
                 let values = [];

src/classes/metadata-types/taxonomy/TaxonomyCheckbox.vue

@@ -69,17 +69,12 @@
     import CheckboxRadioModal from '../../../views/admin/components/modals/checkbox-radio-modal.vue'
 
     export default {
-        created() {
-            if (this.value && this.value.length > 0)
-                this.checked = this.value;
         
-            this.getTermsFromTaxonomy();
-            this.$parent.$on('update-taxonomy-inputs', ($event) => {
-                if ($event.taxonomyId == this.taxonomyId && $event.metadatumId == this.metadatum.id) {
-                    this.offset = 0;
-                    this.getTermsFromTaxonomy();
-                }
-            });
+        props: {
+            value: [ Number, String, Array ],
+            disabled: false,
+            taxonomyId: Number,
+            metadatum: Object
         },
         data() {
             return {
@@ -93,22 +88,31 @@
                 totalTerms: 0
             }
         },
+        computed: {
+            isShowingAllTerms() {
+                return this.terms.length >= this.totalTerms;
+            }
+        },
         watch: {
             value(val){
                 this.checked = val;
                 this.fetchSelectedLabels();
             }
         },
-        computed: {
-            isShowingAllTerms() {
-                return this.terms.length >= this.totalTerms;
+        created() {
+            if (this.value && this.value.length > 0)
+                this.checked = this.value;
+
+            this.getTermsFromTaxonomy();
+            this.$parent.$on('update-taxonomy-inputs', ($event) => {
+                if ($event.taxonomyId == this.taxonomyId && $event.metadatumId == this.metadatum.id) {
+                    this.offset = 0;
+                    this.getTermsFromTaxonomy();
                 }
+            });
         },
-        props: {
-            value: [ Number, String, Array ],
-            disabled: false,
-            taxonomyId: Number,
-            metadatum: Object
+        mounted() {
+            this.fetchSelectedLabels();
         },
         methods: {
             onChecked() {
@@ -206,9 +210,6 @@
                     trapFocus: true
                 });
             }
-        },
-        mounted() {
-            this.fetchSelectedLabels();
         }
     }
 </script>

src/classes/metadata-types/taxonomy/TaxonomyRadio.vue

@@ -78,14 +78,11 @@
     import CheckboxRadioModal from '../../../views/admin/components/modals/checkbox-radio-modal.vue'
 
     export default {
-        created() {
-            this.getTermsFromTaxonomy();
-            this.$parent.$on('update-taxonomy-inputs', ($event) => {
-                if ($event.taxonomyId == this.taxonomyId && $event.metadatumId == this.metadatum.id) {
-                    this.offset = 0;
-                    this.getTermsFromTaxonomy();
-                }
-            });
+        props: {
+            value: [ Number, String, Array ],
+            disabled: false,
+            taxonomyId: Number,
+            metadatum: Object
         },
         data() {
             return {
@@ -99,22 +96,28 @@
                 totalTerms: 0
             }
         },
+        computed: {
+            isShowingAllTerms() {
+                return this.terms.length >= this.totalTerms;
+            }
+        },
         watch: {
             value( val ){
                 this.checked = val;
                 this.fetchSelectedLabels();
             }
         },
-        computed: {
-            isShowingAllTerms() {
-                return this.terms.length >= this.totalTerms;
+        created() {
+            this.getTermsFromTaxonomy();
+            this.$parent.$on('update-taxonomy-inputs', ($event) => {
+                if ($event.taxonomyId == this.taxonomyId && $event.metadatumId == this.metadatum.id) {
+                    this.offset = 0;
+                    this.getTermsFromTaxonomy();
                 }
+            });
         },
-        props: {
-            value: [ Number, String, Array ],
-            disabled: false,
-            taxonomyId: Number,
-            metadatum: Object
+        mounted() {
+            this.fetchSelectedLabels();
         },
         methods: {
             clearInput() {
@@ -216,9 +219,6 @@
                     trapFocus: true
                 });
             }
-        },
-        mounted() {
-            this.fetchSelectedLabels();
         }
     }
 </script>

src/classes/metadata-types/taxonomy/TaxonomyTaginput.vue

@@ -41,6 +41,15 @@
     import { mapActions, mapGetters } from 'vuex';
 
     export default {
+        props: {
+            metadatumComponentId: '',
+            value: [ Number, String, Array ],
+            allowNew: true,
+            taxonomyId: Number,
+            disabled: false,
+            allowSelectToCreate: false,
+            maxtags: '',
+        },
         data(){
             return {
                 selected: [],
@@ -56,15 +65,6 @@
               }
           }
         },
-        props: {
-            metadatumComponentId: '',
-            value: [ Number, String, Array ],
-            allowNew: true,
-            taxonomyId: Number,
-            disabled: false,
-            allowSelectToCreate: false,
-            maxtags: '',
-        },
         created(){
             if (this.value && this.value.length > 0){
                 this.selected = this.value;

src/views/admin/admin.vue

@@ -51,6 +51,11 @@
 
     export default { 
         name: "AdminPage",
+        components: {
+            PrimaryMenu,
+            TainacanHeader,
+            TainacanRepositorySubheader
+        },
         data(){
             return {
                 isMenuCompressed: false,
@@ -58,10 +63,12 @@
                 activeRoute: '/collections'
             }
         },
-        components: {
-            PrimaryMenu,
-            TainacanHeader,
-            TainacanRepositorySubheader
+        watch: {
+            '$route' (to) {
+                this.isMenuCompressed = (to.params.collectionId != undefined);
+                this.activeRoute = to.name;
+                this.isRepositoryLevel = this.$route.params.collectionId == undefined;
+            }
         },
         created() {
             this.$statusHelper.loadStatuses(); 
@@ -69,13 +76,6 @@
             this.isMenuCompressed = (this.$route.params.collectionId != undefined);
             this.activeRoute = this.$route.name;
             this.isRepositoryLevel = this.$route.params.collectionId == undefined;
-        },
-        watch: {
-            '$route' (to) {
-                this.isMenuCompressed = (to.params.collectionId != undefined);
-                this.activeRoute = to.name;
-                this.isRepositoryLevel = this.$route.params.collectionId == undefined;
-            }
         }
     }
 </script>

src/views/admin/components/edition/collection-edition-form.vue

@@ -506,6 +506,9 @@ import { wpAjax, formHooks } from '../../js/mixins';
 
 export default {
     name: 'CollectionEditionForm',
+    components: {
+        FileItem
+    },
     mixins: [ wpAjax, formHooks ],
     data(){
         return {
@@ -551,8 +554,96 @@ export default {
             entityName: 'collection'
         }
     },
-    components: {
-        FileItem
+    mounted(){
+
+        this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('settings') }]);
+
+        if (this.$route.query.fromImporter != undefined) 
+            this.fromImporter = this.$route.query.fromImporter;
+
+        if (this.$route.path.split("/").pop() == "new") {
+            this.createNewCollection();
+            this.isNewCollection = true;
+        } else if (this.$route.path.split("/").pop() == "settings") {
+
+            this.isLoading = true;
+
+            // Obtains current Collection ID from URL
+            this.pathArray = this.$route.path.split("/").reverse(); 
+
+            this.collectionId = this.pathArray[1];
+
+            this.fetchCollection(this.collectionId).then(res => {
+                this.collection = res;
+
+                // Initializes Media Frames now that collectonId exists
+                this.initializeMediaFrames();
+                this.$nextTick()
+                    .then(() => {
+                        // Fills hook forms with it's real values 
+                        this.updateExtraFormData(this.collection);
+                    });
+               
+  
+                // Fill this.form data with current data.
+                this.form.name = this.collection.name;
+                this.form.description = this.collection.description;
+                this.form.slug = this.collection.slug;
+                this.form.status = this.collection.status;
+                this.form.enable_cover_page = this.collection.enable_cover_page;
+                this.form.cover_page_id = this.collection.cover_page_id;
+                this.form.parent = this.collection.parent;
+                this.form.default_view_mode = this.collection.default_view_mode;
+                this.form.enabled_view_modes = JSON.parse(JSON.stringify(this.collection.enabled_view_modes.reduce((result, viewMode) => { typeof viewMode == 'string' ? result.push(viewMode) : null; return result }, [])));
+                this.form.allow_comments = this.collection.allow_comments;
+
+                // Generates CoverPage from current cover_page_id info
+                if (this.form.cover_page_id != undefined && this.form.cover_page_id != '') {
+                    
+                    this.isFetchingPages = true;
+                    
+                    this.fetchPage(this.form.cover_page_id)
+                    .then((page) => {
+                        this.coverPage = page;
+                        this.coverPageTitle = this.coverPage.title.rendered;
+                        this.coverPageEditPath = tainacan_plugin.admin_url + '/post.php?post=' + page.id + '&action=edit';
+                        this.isFetchingPages = false;
+                    })
+                    .catch((error) => {
+                        this.$console.error(error);
+                        this.isFetchingPages = false;
+                    }); 
+                }
+
+                // Generates options for parent collection
+                this.isFetchingCollections = true;
+                this.fetchAllCollectionNames()
+                    .then((resp) => {
+                        resp.request.then((collections) => {
+                            this.collections = collections;
+                            this.isFetchingCollections = false;
+                        })
+                        .catch((error) => {
+                            this.$console.error(error);
+                            this.isFetchingCollections = false;
+                        }); 
+                    })
+                    .catch(() => {
+                        this.isFetchingCollections = false;
+                    }); 
+
+                this.isLoading = false; 
+            });
+        } else {
+            var tmppath = this.$route.fullPath.split("/");
+            var mapper = tmppath.pop();
+            if(tmppath.pop() == 'new') {
+                this.isNewCollection = true;
+                this.isMapped = true;
+                this.mapper = mapper;
+                this.createNewCollection();
+            }
+        }
     },
     methods: {
         ...mapActions('collection', [
@@ -802,97 +893,6 @@ export default {
                 }
             );
         }
-    },
-    mounted(){
-
-        this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('settings') }]);
-
-        if (this.$route.query.fromImporter != undefined) 
-            this.fromImporter = this.$route.query.fromImporter;
-
-        if (this.$route.path.split("/").pop() == "new") {
-            this.createNewCollection();
-            this.isNewCollection = true;
-        } else if (this.$route.path.split("/").pop() == "settings") {
-
-            this.isLoading = true;
-
-            // Obtains current Collection ID from URL
-            this.pathArray = this.$route.path.split("/").reverse(); 
-
-            this.collectionId = this.pathArray[1];
-
-            this.fetchCollection(this.collectionId).then(res => {
-                this.collection = res;
-
-                // Initializes Media Frames now that collectonId exists
-                this.initializeMediaFrames();
-                this.$nextTick()
-                    .then(() => {
-                        // Fills hook forms with it's real values 
-                        this.updateExtraFormData(this.collection);
-                    });
-               
-  
-                // Fill this.form data with current data.
-                this.form.name = this.collection.name;
-                this.form.description = this.collection.description;
-                this.form.slug = this.collection.slug;
-                this.form.status = this.collection.status;
-                this.form.enable_cover_page = this.collection.enable_cover_page;
-                this.form.cover_page_id = this.collection.cover_page_id;
-                this.form.parent = this.collection.parent;
-                this.form.default_view_mode = this.collection.default_view_mode;
-                this.form.enabled_view_modes = JSON.parse(JSON.stringify(this.collection.enabled_view_modes.reduce((result, viewMode) => { typeof viewMode == 'string' ? result.push(viewMode) : null; return result }, [])));
-                this.form.allow_comments = this.collection.allow_comments;
-
-                // Generates CoverPage from current cover_page_id info
-                if (this.form.cover_page_id != undefined && this.form.cover_page_id != '') {
-                    
-                    this.isFetchingPages = true;
-                    
-                    this.fetchPage(this.form.cover_page_id)
-                    .then((page) => {
-                        this.coverPage = page;
-                        this.coverPageTitle = this.coverPage.title.rendered;
-                        this.coverPageEditPath = tainacan_plugin.admin_url + '/post.php?post=' + page.id + '&action=edit';
-                        this.isFetchingPages = false;
-                    })
-                    .catch((error) => {
-                        this.$console.error(error);
-                        this.isFetchingPages = false;
-                    }); 
-                }
-
-                // Generates options for parent collection
-                this.isFetchingCollections = true;
-                this.fetchAllCollectionNames()
-                    .then((resp) => {
-                        resp.request.then((collections) => {
-                            this.collections = collections;
-                            this.isFetchingCollections = false;
-                        })
-                        .catch((error) => {
-                            this.$console.error(error);
-                            this.isFetchingCollections = false;
-                        }); 
-                    })
-                    .catch(() => {
-                        this.isFetchingCollections = false;
-                    }); 
-
-                this.isLoading = false; 
-            });
-        } else {
-            var tmppath = this.$route.fullPath.split("/");
-            var mapper = tmppath.pop();
-            if(tmppath.pop() == 'new') {
-                this.isNewCollection = true;
-                this.isMapped = true;
-                this.mapper = mapper;
-                this.createNewCollection();
-            }
-        }
     }
 }
 </script>

src/views/admin/components/edition/exporter-edition-form.vue

@@ -132,6 +132,39 @@
                 isLoading: false,
             }
         },
+        created() {
+            this.selectedCollection = this.$route.query.sourceCollection;
+
+            this.exporterType = this.$route.params.exporterSlug;
+
+            this.isLoading = true;
+            this.createExporterSession(this.exporterType)
+                .then(exporterSession => {
+                    this.exporterSession = exporterSession ? exporterSession : {};
+                    this.selectedMapping = this.exporterSession.mapping_selected;
+                    
+                    this.isLoading = false;
+                });
+
+            this.isFetchingCollections = true;
+
+            this.fetchCollections({ page: 1, collectionsPerPage: -1})
+                .then(response => {
+                    this.collections = response.collections;
+                    this.isFetchingCollections = false;
+                })
+                .catch(error => {
+                    this.isFetchingCollections = false;
+                    this.$console.error(error);
+                });
+
+
+            // Set exporter's name
+            this.fetchAvailableExporters().then((exporterTypes) => {
+            if (exporterTypes[this.exporterType]) 
+                    this.exporterName = exporterTypes[this.exporterType].name;
+            });
+        },
         methods: {
             ...mapActions('exporter', [
                 'fetchAvailableExporters',
@@ -197,39 +230,6 @@
                     !this.formErrorMessage
                 );
             }
-        },
-        created(){
-            this.selectedCollection = this.$route.query.sourceCollection;
-
-            this.exporterType = this.$route.params.exporterSlug;
-
-            this.isLoading = true;
-            this.createExporterSession(this.exporterType)
-                .then(exporterSession => {
-                    this.exporterSession = exporterSession ? exporterSession : {};
-                    this.selectedMapping = this.exporterSession.mapping_selected;
-                    
-                    this.isLoading = false;
-                });
-
-            this.isFetchingCollections = true;
-
-            this.fetchCollections({ page: 1, collectionsPerPage: -1})
-                .then(response => {
-                    this.collections = response.collections;
-                    this.isFetchingCollections = false;
-                })
-                .catch(error => {
-                    this.isFetchingCollections = false;
-                    this.$console.error(error);
-                });
-
-
-        // Set exporter's name
-        this.fetchAvailableExporters().then((exporterTypes) => {
-           if (exporterTypes[this.exporterType]) 
-                this.exporterName = exporterTypes[this.exporterType].name;
-            });
         }
     }
 </script>

src/views/admin/components/edition/filter-edition-form.vue

@@ -195,6 +195,11 @@ import { formHooks } from "../../js/mixins";
 export default {
     name: 'FilterEditionForm',
     mixins: [ formHooks ],
+    props: {
+        index: '',
+        editedFilter: Object,
+        originalFilter: Object,
+    },
     data(){
         return {
             editForm: {},
@@ -206,11 +211,7 @@ export default {
             entityName: 'filter'
         }
     }, 
-    props: {
-        index: '',
-        editedFilter: Object,
-        originalFilter: Object,
-    },
+
     created() {
 
         this.editForm = this.editedFilter;

src/views/admin/components/edition/importer-edition-form.vue

@@ -204,6 +204,26 @@ export default {
             backgroundProcess: undefined
         }
     },
+    created() {
+        this.importerType = this.$route.params.importerSlug;
+        this.collectionId = this.$route.query.targetCollection;
+        this.sessionId = this.$route.params.sessionId;
+
+        if (this.collectionId != undefined) {
+            this.onSelectCollection(this.collectionId);
+        }
+
+        // Set importer's name
+        this.fetchAvailableImporters().then((importerTypes) => {
+           if (importerTypes[this.importerType]) 
+            this.importerName = importerTypes[this.importerType].name;
+        });
+
+        if (this.sessionId != undefined)
+            this.loadImporter();
+        else
+            this.createImporter();    
+    },
     methods: {
         ...mapActions('importer', [
             'fetchAvailableImporters',
@@ -407,28 +427,7 @@ export default {
             this.collectionId = collectionId;
             this.mappedCollection['id'] = collectionId;
         }
-    },
-    created() {
-        this.importerType = this.$route.params.importerSlug;
-        this.collectionId = this.$route.query.targetCollection;
-        this.sessionId = this.$route.params.sessionId;
-
-        if (this.collectionId != undefined) {
-            this.onSelectCollection(this.collectionId);
     }
-
-        // Set importer's name
-        this.fetchAvailableImporters().then((importerTypes) => {
-           if (importerTypes[this.importerType]) 
-            this.importerName = importerTypes[this.importerType].name;
-        });
-
-        if (this.sessionId != undefined)
-            this.loadImporter();
-        else
-            this.createImporter();    
-    }
-
 }
 </script>
 

src/views/admin/components/edition/importer-mapping-form.vue

@@ -289,6 +289,9 @@ import MetadatumEditionForm from './../edition/metadatum-edition-form.vue';
 
 export default {
     name: 'ImporterEditionForm',
+    components: {
+        MetadatumEditionForm
+    },
     data(){
         return {
             importerId: Number,
@@ -319,14 +322,35 @@ export default {
             selectedTitle: undefined
         }
     },
-    components: {
-        MetadatumEditionForm
-    },
     computed: {
         metadatumTypes() {
             return this.getMetadatumTypes();
         }
     },
+    created() {
+        this.importerType = this.$route.params.importerType;
+        this.sessionId = this.$route.params.sessionId;
+        this.collectionId = this.$route.params.collectionId;
+        this.mappedCollection['id'] = this.collectionId;
+
+        // Set importer's name
+        this.fetchAvailableImporters().then((importerTypes) => {
+           if (importerTypes[this.importerType]) 
+            this.importerName = importerTypes[this.importerType].name;
+        });
+
+        this.loadImporter();
+
+        this.fetchCollectionBasics({ collectionId: this.collectionId, isContextEdit: true })
+            .then((collection) => {
+                this.collection = collection;
+            });
+    },
+    beforeDestroy() {
+        // Cancels previous Request
+        if (this.metadataSearchCancel != undefined)
+            this.metadataSearchCancel.cancel('Metadata search Canceled.');
+    },
     methods: {
         ...mapActions('importer', [
             'fetchAvailableImporters',
@@ -581,32 +605,7 @@ export default {
             this.showTitlePromptModal = false;
             this.onRunImporter();
         }
-    },
-    created() {
-        this.importerType = this.$route.params.importerType;
-        this.sessionId = this.$route.params.sessionId;
-        this.collectionId = this.$route.params.collectionId;
-        this.mappedCollection['id'] = this.collectionId;
-
-        // Set importer's name
-        this.fetchAvailableImporters().then((importerTypes) => {
-           if (importerTypes[this.importerType]) 
-            this.importerName = importerTypes[this.importerType].name;
-        });
-
-        this.loadImporter();
-
-        this.fetchCollectionBasics({ collectionId: this.collectionId, isContextEdit: true })
-            .then((collection) => {
-                this.collection = collection;
-            });
-    },
-    beforeDestroy() {
-        // Cancels previous Request
-        if (this.metadataSearchCancel != undefined)
-            this.metadataSearchCancel.cancel('Metadata search Canceled.');
     }
-
 }
 </script>
 

src/views/admin/components/edition/item-bulk-edition-form.vue

@@ -210,6 +210,18 @@ export default {
             return this.getCollection()
         }
     },
+    created() {
+        // Obtains collection ID
+        this.collectionId = this.$route.params.collectionId;
+
+        this.cleanFiles();
+
+        // Updates Collection BreadCrumb
+        this.$root.$emit('onCollectionBreadCrumbUpdate', [
+            { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+            { path: '', label: this.$i18n.get('add_items_bulk') }
+        ]);
+    },
     methods: {
         ...mapActions('collection', [
             'sendFile',
@@ -345,20 +357,7 @@ export default {
                 trapFocus: true
             });
         },
-    },
-    created() {
-        // Obtains collection ID
-        this.collectionId = this.$route.params.collectionId;
-
-        this.cleanFiles();
-
-        // Updates Collection BreadCrumb
-        this.$root.$emit('onCollectionBreadCrumbUpdate', [
-            { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
-            { path: '', label: this.$i18n.get('add_items_bulk') }
-        ]);
     }
-   
 }
 </script>
 

src/views/admin/components/edition/item-edition-form.vue

@@ -772,6 +772,11 @@ import { formHooks } from '../../js/mixins';
 
 export default {
     name: 'ItemEditionForm',
+    components: {
+        FileItem,
+        DocumentItem,
+        AttachmentsList
+    },
     mixins: [ formHooks ],
     data(){
         return {
@@ -831,11 +836,6 @@ export default {
             return this.getTotalAttachments();
         }
     },
-    components: {
-        FileItem,
-        DocumentItem,
-        AttachmentsList
-    },
     watch: {
         '$route.params.itemPosition'(newItemPosition, oldItemPosition) {
             if (oldItemPosition == undefined || oldItemPosition == newItemPosition)
@@ -867,6 +867,89 @@ export default {
             this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
         }
     },
+    created(){
+        // Obtains collection ID
+        this.cleanMetadata();
+        eventBusItemMetadata.clearAllErrors();
+        this.formErrorMessage = '';
+        this.collectionId = this.$route.params.collectionId;
+        this.form.collectionId = this.collectionId;
+
+        // CREATING NEW SINGLE ITEM
+        if (this.$route.fullPath.split("/").pop() == "new") {
+            this.isCreatingNewItem = true;
+            this.createNewItem();
+
+        // EDITING EXISTING ITEM
+        } else if (this.$route.fullPath.split("/").pop() == "edit") {
+            this.isLoading = true;
+
+            // Obtains current Item ID from URL
+            this.itemId = this.$route.params.itemId;
+            this.loadExistingItem();
+
+        // EDITING EXISTING SEQUENCE
+        } else if (this.$route.params.collectionId != undefined && this.$route.params.sequenceId != undefined){
+            this.isLoading = true;
+
+            this.sequenceId = this.$route.params.sequenceId;
+            let savedItemPosition = (this.$userPrefs.get('sequence_' + this.sequenceId + '_position') != undefined ? Number(this.$userPrefs.get('sequence_' + this.sequenceId + '_position')) : 1);
+            this.itemPosition = this.$route.params.itemPosition != undefined ? Number(this.$route.params.itemPosition) : savedItemPosition;
+
+            this.isOnSequenceEdit = true;
+
+            // Saves current itemPosition to user prefs
+            this.$userPrefs.set('sequence_' + this.sequenceId + '_position', this.itemPosition);
+
+            // Obtains current Item ID from Sequence
+            this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.sequenceId, itemPosition: this.itemPosition  })
+                .then(() => {
+                    this.itemId = this.itemIdInSequence;
+                    this.loadExistingItem();
+                })
+                .catch(() => {
+                    this.isLoading = false;
+                });
+
+            // Obtains current Sequence Group Info
+            this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
+        }
+
+        // Sets feedback variables
+        eventBusItemMetadata.$on('isUpdatingValue', (status) => {
+            this.isUpdatingValues = status;
+        });
+        eventBusItemMetadata.$on('hasErrorsOnForm', (hasErrors) => {
+            if (hasErrors)
+                this.formErrorMessage = this.$i18n.get('info_errors_in_form');
+            else
+                this.formErrorMessage = '';
+        });
+        this.cleanLastUpdated();
+    },
+    beforeDestroy () {
+        eventBusItemMetadata.$off('isUpdatingValue');
+        eventBusItemMetadata.$off('hasErrorsOnForm');
+    },
+    beforeRouteLeave ( to, from, next ) {
+        if (this.item.status == 'auto-draft') {
+            this.$buefy.modal.open({
+                parent: this,
+                component: CustomDialog,
+                props: {
+                    icon: 'alert',
+                    title: this.$i18n.get('label_warning'),
+                    message: this.$i18n.get('info_warning_item_not_saved'),
+                    onConfirm: () => {
+                        next();
+                    },
+                },
+                trapFocus: true
+            });
+        } else {
+            next()
+        }
+    },
     methods: {
         ...mapActions('item', [
             'sendItem',
@@ -1328,89 +1411,6 @@ export default {
                 query: { collapses: this.metadataCollapses }
             });
         }
-    },
-    created(){
-        // Obtains collection ID
-        this.cleanMetadata();
-        eventBusItemMetadata.clearAllErrors();
-        this.formErrorMessage = '';
-        this.collectionId = this.$route.params.collectionId;
-        this.form.collectionId = this.collectionId;
-
-        // CREATING NEW SINGLE ITEM
-        if (this.$route.fullPath.split("/").pop() == "new") {
-            this.isCreatingNewItem = true;
-            this.createNewItem();
-
-        // EDITING EXISTING ITEM
-        } else if (this.$route.fullPath.split("/").pop() == "edit") {
-            this.isLoading = true;
-
-            // Obtains current Item ID from URL
-            this.itemId = this.$route.params.itemId;
-            this.loadExistingItem();
-
-        // EDITING EXISTING SEQUENCE
-        } else if (this.$route.params.collectionId != undefined && this.$route.params.sequenceId != undefined){
-            this.isLoading = true;
-
-            this.sequenceId = this.$route.params.sequenceId;
-            let savedItemPosition = (this.$userPrefs.get('sequence_' + this.sequenceId + '_position') != undefined ? Number(this.$userPrefs.get('sequence_' + this.sequenceId + '_position')) : 1);
-            this.itemPosition = this.$route.params.itemPosition != undefined ? Number(this.$route.params.itemPosition) : savedItemPosition;
-
-            this.isOnSequenceEdit = true;
-
-            // Saves current itemPosition to user prefs
-            this.$userPrefs.set('sequence_' + this.sequenceId + '_position', this.itemPosition);
-
-            // Obtains current Item ID from Sequence
-            this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.sequenceId, itemPosition: this.itemPosition  })
-                .then(() => {
-                    this.itemId = this.itemIdInSequence;
-                    this.loadExistingItem();
-                })
-                .catch(() => {
-                    this.isLoading = false;
-                });
-
-            // Obtains current Sequence Group Info
-            this.fetchSequenceGroup({ collectionId: this.collectionId, groupId: this.sequenceId });
-        }
-
-        // Sets feedback variables
-        eventBusItemMetadata.$on('isUpdatingValue', (status) => {
-            this.isUpdatingValues = status;
-        });
-        eventBusItemMetadata.$on('hasErrorsOnForm', (hasErrors) => {
-            if (hasErrors)
-                this.formErrorMessage = this.$i18n.get('info_errors_in_form');
-            else
-                this.formErrorMessage = '';
-        });
-        this.cleanLastUpdated();
-    },
-    beforeDestroy () {
-        eventBusItemMetadata.$off('isUpdatingValue');
-        eventBusItemMetadata.$off('hasErrorsOnForm');
-    },
-    beforeRouteLeave ( to, from, next ) {
-        if (this.item.status == 'auto-draft') {
-            this.$buefy.modal.open({
-                parent: this,
-                component: CustomDialog,
-                props: {
-                    icon: 'alert',
-                    title: this.$i18n.get('label_warning'),
-                    message: this.$i18n.get('info_warning_item_not_saved'),
-                    onConfirm: () => {
-                        next();
-                    },
-                },
-                trapFocus: true
-            });
-        } else {
-            next()
-        }
     }
 }
 </script>

src/views/admin/components/edition/metadatum-edition-form.vue

@@ -255,6 +255,14 @@
     export default {
         name: 'MetadatumEditionForm',
         mixins: [ formHooks ],
+        props: {
+            index: '',
+            editedMetadatum: Object,
+            originalMetadatum: Object,
+            isRepositoryLevel: false,
+            collectionId: '',
+            isOnModal: false
+        },
         data() {
             return {
                 editForm: {},
@@ -265,14 +273,6 @@
                 entityName: 'metadatum'
             }
         },
-        props: {
-            index: '',
-            editedMetadatum: Object,
-            originalMetadatum: Object,
-            isRepositoryLevel: false,
-            collectionId: '',
-            isOnModal: false
-        },
         created() {
 
             this.editForm = this.editedMetadatum;

src/views/admin/components/edition/taxonomy-edition-form.vue

@@ -234,6 +234,9 @@
 
     export default {
         name: 'TaxonomyEditionForm',
+        components: {
+            TermsList
+        },
         mixins: [ wpAjax, formHooks ],
         data(){
             return {
@@ -259,9 +262,6 @@
                 shouldReloadTermsList: false
             }
         },
-        components: {
-            TermsList
-        },
         beforeRouteLeave( to, from, next ) {
             let formNotSaved = false;
 
@@ -312,6 +312,44 @@
                 next();
             }  
         },
+        mounted(){
+  
+            if (this.$route.query.tab == 'terms')
+                this.tabIndex = 1;
+
+            if (this.$route.name == "TaxonomyCreationForm") {
+                this.createNewTaxonomy();
+            } else if (this.$route.name == "TaxonomyEditionForm") {
+
+                this.isLoadingTaxonomy = true;
+
+                // Obtains current taxonomy ID from URL
+                this.pathArray = this.$route.fullPath.split("/").reverse();
+                this.taxonomyId = this.pathArray[1];
+
+                this.fetchTaxonomy({ taxonomyId: this.taxonomyId, isContextEdit: true })
+                    .then(res => {
+                        this.taxonomy = res.taxonomy;
+
+                        // Fills hook forms with it's real values 
+                        this.$nextTick()
+                            .then(() => {
+                                this.updateExtraFormData(this.taxonomy);
+                            });
+
+                        // Fill this.form data with current data.
+                        this.form.name = this.taxonomy.name;
+                        this.form.description = this.taxonomy.description;
+                        this.form.slug = this.taxonomy.slug;
+                        this.form.status = this.taxonomy.status;
+                        this.form.allowInsert = this.taxonomy.allow_insert;
+                        this.form.enabledPostTypes = this.taxonomy.enabled_post_types;
+
+                        this.isLoadingTaxonomy = false;
+                    })
+                    .catch(() => this.isLoadingTaxonomy = false);
+            }
+        },
         methods: {
             ...mapActions('taxonomy', [
                 'createTaxonomy',
@@ -477,44 +515,6 @@
 
                 this.createNewTaxonomy();
             }
-        },
-        mounted(){
-  
-            if (this.$route.query.tab == 'terms')
-                this.tabIndex = 1;
-
-            if (this.$route.name == "TaxonomyCreationForm") {
-                this.createNewTaxonomy();
-            } else if (this.$route.name == "TaxonomyEditionForm") {
-
-                this.isLoadingTaxonomy = true;
-
-                // Obtains current taxonomy ID from URL
-                this.pathArray = this.$route.fullPath.split("/").reverse();
-                this.taxonomyId = this.pathArray[1];
-
-                this.fetchTaxonomy({ taxonomyId: this.taxonomyId, isContextEdit: true })
-                    .then(res => {
-                        this.taxonomy = res.taxonomy;
-
-                        // Fills hook forms with it's real values 
-                        this.$nextTick()
-                            .then(() => {
-                                this.updateExtraFormData(this.taxonomy);
-                            });
-
-                        // Fill this.form data with current data.
-                        this.form.name = this.taxonomy.name;
-                        this.form.description = this.taxonomy.description;
-                        this.form.slug = this.taxonomy.slug;
-                        this.form.status = this.taxonomy.status;
-                        this.form.allowInsert = this.taxonomy.allow_insert;
-                        this.form.enabledPostTypes = this.taxonomy.enabled_post_types;
-
-                        this.isLoadingTaxonomy = false;
-                    })
-                    .catch(() => this.isLoadingTaxonomy = false);
-            }
         }
     }
 </script>

src/views/admin/components/edition/term-edition-form.vue

@@ -220,6 +220,10 @@
     export default {
         name: 'TermEditionForm',
         mixins: [ formHooks ],
+        props: {
+            editForm: Object,
+            taxonomyId: ''
+        },
         data() {
             return {
                 formErrors: {},
@@ -236,9 +240,34 @@
                 isLoading: false,
             }
         },
-        props: {
-            editForm: Object,
-            taxonomyId: ''
+        mounted() {
+
+            // Fills hook forms with it's real values 
+            this.$nextTick()
+                .then(() => {
+                    this.updateExtraFormData(this.editForm);
+                });
+
+            this.showCheckboxesWarning = false;
+            this.hasParent = this.editForm.parent != undefined && this.editForm.parent > 0;
+            this.initialParentId = this.editForm.parent;
+            this.initializeMediaFrames();
+
+            if (this.hasParent) {
+                this.isFetchingParentTerms = true;
+                this.showCheckboxesWarning = false;
+                this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
+                    .then((parentName) => {
+                        this.parentTermName = parentName;
+                        this.isFetchingParentTerms = false;
+                        this.showCheckboxesWarning = false;
+                    })
+                    .catch((error) => {
+                        this.$console.error(error);
+                        this.isFetchingParentTerms = false;
+                        this.showCheckboxesWarning = false;
+                    });
+            }
         },
         methods: {
             ...mapActions('taxonomy', [
@@ -389,35 +418,6 @@
                 this.parentTermName = selectedParentTerm.name;
                 this.showCheckboxesWarning = true;
             }
-        },
-        mounted() {
-
-            // Fills hook forms with it's real values 
-            this.$nextTick()
-                .then(() => {
-                    this.updateExtraFormData(this.editForm);
-                });
-
-            this.showCheckboxesWarning = false;
-            this.hasParent = this.editForm.parent != undefined && this.editForm.parent > 0;
-            this.initialParentId = this.editForm.parent;
-            this.initializeMediaFrames();
-
-            if (this.hasParent) {
-                this.isFetchingParentTerms = true;
-                this.showCheckboxesWarning = false;
-                this.fetchParentName({ taxonomyId: this.taxonomyId, parentId: this.editForm.parent })
-                    .then((parentName) => {
-                        this.parentTermName = parentName;
-                        this.isFetchingParentTerms = false;
-                        this.showCheckboxesWarning = false;
-                    })
-                    .catch((error) => {
-                        this.$console.error(error);
-                        this.isFetchingParentTerms = false;
-                        this.showCheckboxesWarning = false;
-                    });
-            }
         }
     }
 </script>

src/views/admin/components/lists/activities-list.vue

@@ -134,6 +134,16 @@
 
     export default {
         name: 'ActivitiesList',
+        components: {
+            ThreeStateToggleButton
+        },
+        props: {
+            isLoading: false,
+            totalActivities: 0,
+            page: 1,
+            activitiesPerPage: 12,
+            activities: Array
+        },
         data() {
             return {
                 selectedActivities: [],
@@ -144,13 +154,6 @@
                 }
             }
         },
-        props: {
-            isLoading: false,
-            totalActivities: 0,
-            page: 1,
-            activitiesPerPage: 12,
-            activities: Array
-        },
         methods: {
             ...mapActions('activity', [
                 'approve',
@@ -183,9 +186,6 @@
                     trapFocus: true
                 });
             },
-        },
-        components: {
-            ThreeStateToggleButton
         }
     }
 </script>

src/views/admin/components/lists/attachments-list.vue

@@ -104,17 +104,17 @@
         components: {
             FileItem
         },
+        props: {
+            item: Object,
+            isLoading: Boolean,
+            isEditable: Boolean,
+        },
         data() {
             return {
                 attachmentsPage: 1,
                 attachmentsPerPage: 24
             }
         },
-        props: {
-            item: Object,
-            isLoading: Boolean,
-            isEditable: Boolean,
-        },
         computed: {
             attachments() {
                 return this.getAttachments();
@@ -123,6 +123,10 @@
                 return this.getTotalAttachments();
             }
         },
+        created() {
+            // Get attachments
+            this.loadAttachments();
+        },
         methods: {
             ...mapActions('item', [
                 'fetchAttachments',
@@ -177,10 +181,6 @@
             onDeleteAttachment(attachment) {
                 this.$emit('onDeleteAttachment', attachment);
             }
-        },
-        created() {
-            // Get attachments
-            this.loadAttachments();
         }
     }
 </script>

src/views/admin/components/lists/basic-term-item.vue

@@ -58,12 +58,6 @@ import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'RecursiveTermItem',
-    data(){
-        return {
-            isLoadingTerms: false,
-            isEditingTerm: false
-        }
-    },
     props: {
         term: Object,
         index: Number,
@@ -71,6 +65,22 @@ export default {
         order: String,
         currentUserCanEditTaxonomy: Boolean
     },
+    data(){
+        return {
+            isLoadingTerms: false,
+            isEditingTerm: false
+        }
+    },
+    created() {
+        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);        
+    },
+    beforeDestroy() {
+        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);                
+    },
     methods: {
         ...mapActions('taxonomy', [
             'updateTerm',
@@ -129,16 +139,6 @@ export default {
             this.isEditingTerm = false;
             this.term.opened = false;
         }
-    },
-    created() {
-        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);        
-    },
-    beforeDestroy() {
-        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);                
     }
 }
 </script>

src/views/admin/components/lists/capabilities-list.vue

@@ -127,13 +127,13 @@
     }
     export default {
         name: 'CapabilitiesList',
+        components: {
+            CompleteRolesList
+        },
         props: {
             isLoading: false,
             capabilities: Array
         },
-        components: {
-            CompleteRolesList
-        },
         methods: {
             openCapabilitiyEditModal(capabilityKey) {
                 this.$buefy.modal.open({

src/views/admin/components/lists/collections-home-list.vue

@@ -255,15 +255,15 @@
 <script>
 export default {
     name: 'CollectionsHomeList',
-    data(){
-        return {
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
-        }
-    },
     props: {
         isLoading: false,
         collections: Array,
         collectionsTotal: Number
+    },
+    data(){
+        return {
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
+        }
     }
 }
 </script>

src/views/admin/components/lists/collections-list.vue

@@ -311,6 +311,14 @@ import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'CollectionsList',
+    props: {
+        isLoading: false,
+        totalCollections: 0,
+        page: 1,
+        collectionsPerPage: 12,
+        collections: Array,
+        isOnTrash: false
+    },
     data(){
         return {
             selectedCollections: [],
@@ -323,14 +331,6 @@ export default {
             contextMenuCollection: null
         }
     },
-    props: {
-        isLoading: false,
-        totalCollections: 0,
-        page: 1,
-        collectionsPerPage: 12,
-        collections: Array,
-        isOnTrash: false
-    },
     watch: {
         collections() {
             this.selectedCollections = [];

src/views/admin/components/lists/filters-list.vue

@@ -335,6 +335,9 @@ import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'FiltersList',
+    components: {
+        FilterEditionForm
+    },
     data(){           
         return {
             collectionId: '',
@@ -374,9 +377,6 @@ export default {
             return this.getCollection();
         }
     },
-    components: {
-        FilterEditionForm
-    },
     watch: {
         '$route.query': {
             handler(newQuery) {
@@ -414,6 +414,55 @@ export default {
             next()
         }  
     },
+    mounted() {
+
+        if (!this.isRepositoryLevel)
+            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('filter') }]);
+
+        this.$nextTick(() => { 
+            this.columnsTopY = this.$refs.filterEditionPageColumns ? this.$refs.filterEditionPageColumns.getBoundingClientRect().top : 0;
+        });
+
+        this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
+        if (this.isRepositoryLevel)
+            this.collectionId = 'default';
+        else
+            this.collectionId = this.$route.params.collectionId;
+
+        this.isLoadingFilters = true;
+        this.isLoadingFilterTypes = true;
+
+        this.fetchFilterTypes()
+            .then((filterTypes) => {
+                this.isLoadingFilterTypes = false;
+                this.filterTypes = filterTypes;
+            })
+            .catch(() => {
+                this.isLoadingFilterTypes = false;
+            });        
+
+        // Cancels previous Request
+        if (this.filtersSearchCancel != undefined)
+            this.filtersSearchCancel.cancel('Filters search Canceled.');
+
+        // Loads Filters
+        this.refreshFilters();
+        
+        // Sets modal callback function
+        this.$refs.filterTypeModal.onCancel = () => {
+            this.onCancelFilterTypeSelection();
+        }
+        
+    },
+    beforeDestroy() {
+        // Cancels previous filters Request
+        if (this.filtersSearchCancel != undefined)
+            this.filtersSearchCancel.cancel('Metadata search Canceled.');
+        
+        // Cancels previous metadata Request
+        if (this.metadataSearchCancel != undefined)
+            this.metadataSearchCancel.cancel('Metadata search Canceled.');
+    },
     methods: {
         ...mapActions('filter', [
             'fetchFilterTypes',
@@ -694,55 +743,6 @@ export default {
             })
             .catch(() => this.isLoadingFilters = false);
         }
-    },
-    mounted() {
-
-        if (!this.isRepositoryLevel)
-            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('filter') }]);
-
-        this.$nextTick(() => { 
-            this.columnsTopY = this.$refs.filterEditionPageColumns ? this.$refs.filterEditionPageColumns.getBoundingClientRect().top : 0;
-        });
-
-        this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
-        if (this.isRepositoryLevel)
-            this.collectionId = 'default';
-        else
-            this.collectionId = this.$route.params.collectionId;
-
-        this.isLoadingFilters = true;
-        this.isLoadingFilterTypes = true;
-
-        this.fetchFilterTypes()
-            .then((filterTypes) => {
-                this.isLoadingFilterTypes = false;
-                this.filterTypes = filterTypes;
-            })
-            .catch(() => {
-                this.isLoadingFilterTypes = false;
-            });        
-
-        // Cancels previous Request
-        if (this.filtersSearchCancel != undefined)
-            this.filtersSearchCancel.cancel('Filters search Canceled.');
-
-        // Loads Filters
-        this.refreshFilters();
-        
-        // Sets modal callback function
-        this.$refs.filterTypeModal.onCancel = () => {
-            this.onCancelFilterTypeSelection();
-        }
-        
-    },
-    beforeDestroy() {
-        // Cancels previous filters Request
-        if (this.filtersSearchCancel != undefined)
-            this.filtersSearchCancel.cancel('Metadata search Canceled.');
-        
-        // Cancels previous metadata Request
-        if (this.metadataSearchCancel != undefined)
-            this.metadataSearchCancel.cancel('Metadata search Canceled.');
     }
 }
 </script>

src/views/admin/components/lists/items-list.vue

@@ -923,16 +923,6 @@ import { dateInter } from "../../js/mixins";
 
 export default {
     name: 'ItemsList',
-    data(){
-        return {
-            isAllItemsSelected: false,
-            queryAllItemsSelected: {},
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
-            cursorPosX: -1,
-            cursorPosY: -1,
-            contextMenuItem: null
-        }
-    },
     mixins: [ dateInter ],
     props: {
         collectionId: undefined,
@@ -943,11 +933,15 @@ export default {
         totalItems: Number,
         viewMode: 'card'
     },
-    mounted() {
-        this.cleanSelectedItems();
-
-        if (this.highlightsItem)
-            setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000);
+    data(){
+        return {
+            isAllItemsSelected: false,
+            queryAllItemsSelected: {},
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
+            cursorPosX: -1,
+            cursorPosY: -1,
+            contextMenuItem: null
+        }
     },
     computed: {
         collection() {
@@ -993,6 +987,12 @@ export default {
                 this.queryAllItemsSelected = {};
         }
     },
+    mounted() {
+        this.cleanSelectedItems();
+
+        if (this.highlightsItem)
+            setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000);
+    },
     methods: {
         ...mapActions('collection', [
             'deleteItem',

src/views/admin/components/lists/metadata-list.vue

@@ -458,6 +458,9 @@ import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'MetadataList',
+    components: {
+        MetadatumEditionForm
+    },
     data(){           
         return {
             collectionId: '',
@@ -485,9 +488,6 @@ export default {
             metadataSearchCancel: undefined 
         }
     },
-    components: {
-        MetadatumEditionForm
-    },
     computed: {
         collection() {
             return this.getCollection();
@@ -556,6 +556,42 @@ export default {
             next()
         }  
     },
+    mounted() {
+
+        if (!this.isRepositoryLevel)
+            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
+
+        this.$nextTick(() => { 
+            this.columnsTopY = this.$refs.metadataEditionPageColumns ? this.$refs.metadataEditionPageColumns.getBoundingClientRect().top : 0;
+        });
+
+        this.cleanMetadata();
+        this.isLoadingMetadatumTypes = true;
+        this.isLoadingMetadata = true;
+
+        this.fetchMetadatumTypes()
+            .then(() => {
+                this.isLoadingMetadatumTypes = false;
+            })
+            .catch(() => {
+                this.isLoadingMetadatumTypes = false;
+            });
+        this.refreshMetadata();
+        this.fetchMetadatumMappers()
+            .then(() => {
+                this.isLoadingMetadatumMappers = false;
+            })
+            .catch(() => {
+                this.isLoadingMetadatumMappers = false;
+            });
+    },
+    beforeDestroy() {
+
+        // Cancels previous Request
+        if (this.metadataSearchCancel != undefined)
+            this.metadataSearchCancel.cancel('Metadata search Canceled.');
+
+    },
     methods: {
         ...mapActions('metadata', [
             'fetchMetadatumTypes',
@@ -936,42 +972,6 @@ export default {
                         </div>
                     </div>`;
         }
-    },
-    mounted() {
-
-        if (!this.isRepositoryLevel)
-            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
-
-        this.$nextTick(() => { 
-            this.columnsTopY = this.$refs.metadataEditionPageColumns ? this.$refs.metadataEditionPageColumns.getBoundingClientRect().top : 0;
-        });
-
-        this.cleanMetadata();
-        this.isLoadingMetadatumTypes = true;
-        this.isLoadingMetadata = true;
-
-        this.fetchMetadatumTypes()
-            .then(() => {
-                this.isLoadingMetadatumTypes = false;
-            })
-            .catch(() => {
-                this.isLoadingMetadatumTypes = false;
-            });
-        this.refreshMetadata();
-        this.fetchMetadatumMappers()
-            .then(() => {
-                this.isLoadingMetadatumMappers = false;
-            })
-            .catch(() => {
-                this.isLoadingMetadatumMappers = false;
-            });
-    },
-    beforeDestroy() {
-
-        // Cancels previous Request
-        if (this.metadataSearchCancel != undefined)
-            this.metadataSearchCancel.cancel('Metadata search Canceled.');
-
     }
 }
 </script>

src/views/admin/components/lists/processes-list.vue

@@ -306,6 +306,13 @@
 
     export default {
         name: 'List',
+        props: {
+            isLoading: false,
+            total: 0,
+            page: 1,
+            processesPerPage: 12,
+            processes: Array
+        },
         data() {
             return {
                 selected: [],
@@ -316,13 +323,6 @@
                 dateFormat: ''
             }
         },
-        props: {
-            isLoading: false,
-            total: 0,
-            page: 1,
-            processesPerPage: 12,
-            processes: Array
-        },
         watch: {
             processes() {
                 this.selected = [];
@@ -347,6 +347,41 @@
                 this.isSelecting = isSelecting;
             }
         },
+        mounted() {
+            let locale = navigator.language;
+
+            moment.locale(locale);
+
+            let localeData = moment.localeData();
+            this.dateFormat = localeData.longDateFormat('lll');
+
+            if (this.$route.query.highlight) {
+                this.highlightedProcess = this.$route.query.highlight;
+            }
+        },
+        created(){
+            if (jQuery && jQuery( document )) {
+                jQuery( document ).on( 'heartbeat-tick-list',  ( event, data ) => {
+                    let updatedProcesses = data.bg_process_feedback;
+
+                    for (let updatedProcess of updatedProcesses) {
+                        let updatedProcessIndex = this.processes.findIndex((aProcess) => aProcess.ID == updatedProcess.ID);
+                        if (updatedProcessIndex >= 0) {
+                            this.heartBitUpdateProcess(updatedProcess);
+                        }
+                    }
+                });
+
+                jQuery( document ).on( 'heartbeat-tick',  ( event, data ) => {
+                    jQuery( document ).trigger('heartbeat-tick-list', data);
+                });
+            }
+        },
+        beforeDestroy() {
+            if (jQuery && jQuery( document )) {
+                jQuery( document ).unbind( 'heartbeat-tick-list')
+            }
+        },
         methods: {
             ...mapActions('bgprocess', [
                 'deleteProcess',
@@ -458,41 +493,6 @@
                     trapFocus: true
                 });
             }
-        },
-        mounted() {
-            let locale = navigator.language;
-
-            moment.locale(locale);
-
-            let localeData = moment.localeData();
-            this.dateFormat = localeData.longDateFormat('lll');
-
-            if (this.$route.query.highlight) {
-                this.highlightedProcess = this.$route.query.highlight;
-            }
-        },
-        created(){
-            if (jQuery && jQuery( document )) {
-                jQuery( document ).on( 'heartbeat-tick-list',  ( event, data ) => {
-                    let updatedProcesses = data.bg_process_feedback;
-
-                    for (let updatedProcess of updatedProcesses) {
-                        let updatedProcessIndex = this.processes.findIndex((aProcess) => aProcess.ID == updatedProcess.ID);
-                        if (updatedProcessIndex >= 0) {
-                            this.heartBitUpdateProcess(updatedProcess);
-                        }
-                    }
-                });
-
-                jQuery( document ).on( 'heartbeat-tick',  ( event, data ) => {
-                    jQuery( document ).trigger('heartbeat-tick-list', data);
-                });
-            }
-        },
-        beforeDestroy() {
-            if (jQuery && jQuery( document )) {
-                jQuery( document ).unbind( 'heartbeat-tick-list')
-            }
         }
     }
 </script>

src/views/admin/components/lists/recursive-term-item.vue

@@ -133,6 +133,16 @@ import CustomDialog from '../other/custom-dialog.vue';
 
 export default {
     name: 'RecursiveTermItem',
+    components: {
+        RecursiveTermItem,
+    },
+    props: {
+        term: Object,
+        index: Number,
+        taxonomyId: Number,
+        order: String,
+        currentUserCanEditTaxonomy: Boolean
+    },
     data(){
         return {
             isLoadingTerms: false,
@@ -144,15 +154,18 @@ export default {
             totalTerms: 0
         }
     },
-    props: {
-        term: Object,
-        index: Number,
-        taxonomyId: Number,
-        order: String,
-        currentUserCanEditTaxonomy: Boolean
+
+    created() { 
+        this.$root.$on('onChildTermDeleted', this.eventOnChildTermDeleted);
+        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);        
     },
-    components: {
-        RecursiveTermItem,
+    beforeDestroy() { 
+        this.$root.$off('onChildTermDeleted', this.eventOnChildTermDeleted);
+        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);        
     },
     methods: {
         ...mapActions('taxonomy', [
@@ -305,18 +318,6 @@ export default {
             this.isEditingTerm = false;
             this.term.opened = false;
         }
-    },
-    created() { 
-        this.$root.$on('onChildTermDeleted', this.eventOnChildTermDeleted);
-        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);        
-    },
-    beforeDestroy() { 
-        this.$root.$off('onChildTermDeleted', this.eventOnChildTermDeleted);
-        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);        
     }
 }
 </script>

src/views/admin/components/lists/taxonomies-list.vue

@@ -199,14 +199,6 @@
 
     export default {
         name: 'List',
-        data() {
-            return {
-                selected: [],
-                allOnPageSelected: false,
-                isSelecting: false,
-                adminUrl: tainacan_plugin.admin_url
-            }
-        },
         props: {
             isLoading: false,
             total: 0,
@@ -215,6 +207,14 @@
             taxonomies: Array,
             isOnTrash: false
         },
+        data() {
+            return {
+                selected: [],
+                allOnPageSelected: false,
+                isSelecting: false,
+                adminUrl: tainacan_plugin.admin_url
+            }
+        },
         watch: {
             taxonomies() {
                 this.selected = [];

src/views/admin/components/lists/terms-list.vue

@@ -181,6 +181,15 @@ import t from 't';
 
 export default {
     name: 'TermsList',
+    components: {
+        RecursiveTermItem,
+        BasicTermItem,
+        TermEditionForm
+    },
+    props: {
+        taxonomyId: String,
+        currentUserCanEditTaxonomy: Boolean
+    },
     data(){
         return {
             isLoadingTerms: false,
@@ -196,10 +205,6 @@ export default {
             totalTerms: 0
         }
     },
-    props: {
-        taxonomyId: String,
-        currentUserCanEditTaxonomy: Boolean
-    },
     computed: {
         termsList() {
             return this.getTerms();
@@ -224,10 +229,24 @@ export default {
             this.$emit('isEditingTermUpdate', value);
         }
     },
-    components: {
-        RecursiveTermItem,
-        BasicTermItem,
-        TermEditionForm
+    created() {
+        if (this.taxonomyId != undefined && this.taxonomyId !== String) {
+            this.loadTerms(0);
+        }
+        this.$root.$on('onChildTermDeleted', this.eventOnChildTermDeleted);
+        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);
+        this.$termsListBus.$on('addNewChildTerm', this.addNewTerm);
+        this.$termsListBus.$on('deleteBasicTermItem', this.deleteBasicTerm);
+    },
+    beforeDestroy() {
+        this.$root.$off('onChildTermDeleted', this.eventOnChildTermDeleted);
+        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
+        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
+        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);
+        this.$termsListBus.$off('addNewChildTerm', this.addNewTerm);
+        this.$termsListBus.$off('deleteBasicTermItem', this.deleteBasicTerm);
     },
     methods: {
         ...mapActions('taxonomy', [
@@ -450,27 +469,7 @@ export default {
             this.isEditingTerm = false;
             this.editTerm = null;
         }
-    },
-    created() {
-        if (this.taxonomyId != undefined && this.taxonomyId !== String) {
-            this.loadTerms(0);
     }    
-        this.$root.$on('onChildTermDeleted', this.eventOnChildTermDeleted);
-        this.$termsListBus.$on('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$on('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$on('termEditionCanceled', this.eventOnTermEditionCanceled);
-        this.$termsListBus.$on('addNewChildTerm', this.addNewTerm);
-        this.$termsListBus.$on('deleteBasicTermItem', this.deleteBasicTerm);
-    },
-    beforeDestroy() {
-        this.$root.$off('onChildTermDeleted', this.eventOnChildTermDeleted);
-        this.$termsListBus.$off('editTerm', this.eventOnEditTerm);
-        this.$termsListBus.$off('termEditionSaved', this.eventOnTermEditionSaved);
-        this.$termsListBus.$off('termEditionCanceled', this.eventOnTermEditionCanceled);
-        this.$termsListBus.$off('addNewChildTerm', this.addNewTerm);
-        this.$termsListBus.$off('deleteBasicTermItem', this.deleteBasicTerm);
-    }
-    
 }
 </script>
 

src/views/admin/components/modals/activity-details-modal.vue

@@ -611,6 +611,9 @@
 
     export default {
         name: "ActivityDetailsModal",
+        components: {
+            FileItem
+        },
         props: {
             activityId: String
         },
@@ -624,15 +627,6 @@
                 adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#', 
             }
         },
-        components: {
-            FileItem
-        },
-        watch: {
-            '$route' (to, from) {
-                if (to !== from)
-                    this.$parent.close();
-            }
-        },
         computed: {
             activity() {
                 return this.getActivity();
@@ -670,6 +664,12 @@
                 }
             }
         },
+        watch: {
+            '$route' (to, from) {
+                if (to !== from)
+                    this.$parent.close();
+            }
+        },
         created() {
             this.loadActivity();
         },

src/views/admin/components/modals/available-exporters-modal.vue

@@ -65,15 +65,6 @@
                 isLoading: false
             }
         },
-        methods: {
-            ...mapActions('exporter', [
-                'fetchAvailableExporters'
-            ]),
-            onSelectExporter(exporterType) {
-                this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } });
-                this.$parent.close();
-            }
-        },
         mounted() {
             this.isLoading = true;
             this.fetchAvailableExporters()
@@ -87,6 +78,15 @@
 
             if (this.$refs.availableExportersModal)
                 this.$refs.availableExportersModal.focus();
+        },
+        methods: {
+            ...mapActions('exporter', [
+                'fetchAvailableExporters'
+            ]),
+            onSelectExporter(exporterType) {
+                this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } });
+                this.$parent.close();
+            }
         }
     }
 </script>

src/views/admin/components/modals/available-importers-modal.vue

@@ -67,15 +67,6 @@ export default {
             isLoading: false
         }
     },
-    methods: {
-        ...mapActions('importer', [
-            'fetchAvailableImporters'
-        ]),
-        onSelectImporter(importerType) {
-            this.$router.push({ path: this.$routerHelper.getImporterEditionPath(importerType.slug), query: { targetCollection: this.targetCollection } });
-            this.$parent.close();
-        }
-    },
     mounted() {
         this.isLoading = true;
         this.fetchAvailableImporters()
@@ -89,6 +80,15 @@ export default {
 
         if (this.$refs.availableImportersModal)
             this.$refs.availableImportersModal.focus();
+    },
+    methods: {
+        ...mapActions('importer', [
+            'fetchAvailableImporters'
+        ]),
+        onSelectImporter(importerType) {
+            this.$router.push({ path: this.$routerHelper.getImporterEditionPath(importerType.slug), query: { targetCollection: this.targetCollection } });
+            this.$parent.close();
+        }
     }
 }
 </script>

src/views/admin/components/modals/bulk-edition-modal.vue

@@ -290,6 +290,44 @@
             selectedForBulk: Object,
             collectionID: Number
         },
+        data() {
+            return {
+                statuses: {
+                    draft: 'draft',
+                    publish: 'publish',
+                    private: 'private'
+                },
+                editionCriteria: [1],
+                editionActionsForMultiple: {
+                    add: this.$i18n.get('add_value'),
+                    redefine: this.$i18n.get('set_new_value'),
+                    replace: this.$i18n.get('replace_value'),
+                    remove: this.$i18n.get('remove_a_value'),
+                    clear: this.$i18n.get('clear_values')
+                },
+                editionActionsForNotMultiple: {
+                    redefine: this.$i18n.get('set_new_value'),
+                    clear: this.$i18n.get('clear_values')
+                },
+                bulkEditionProcedures: {
+                    1: {
+                        isDone: false,
+                        isExecuting: false,
+                        totalItemsEditedWithSuccess: 0,
+                        tooltipShow: true,
+                    }
+                },
+                groupID: null,
+                dones: [false],
+                metadataIsLoading: false,
+                metadataSearchCancel: undefined
+            }
+        },
+        computed: {
+            metadata() {
+                return this.getMetadata();
+            }
+        },
         created(){
             if (this.collectionID){
                 this.metadataIsLoading = true;
@@ -328,43 +366,11 @@
             if (this.$refs.bulkEditionModal)
                 this.$refs.bulkEditionModal.focus();
         },
-        computed: {
-            metadata() {
-                return this.getMetadata();
-            }
-        },
-        data() {
-            return {
-                statuses: {
-                    draft: 'draft',
-                    publish: 'publish',
-                    private: 'private'
-                },
-                editionCriteria: [1],
-                editionActionsForMultiple: {
-                    add: this.$i18n.get('add_value'),
-                    redefine: this.$i18n.get('set_new_value'),
-                    replace: this.$i18n.get('replace_value'),
-                    remove: this.$i18n.get('remove_a_value'),
-                    clear: this.$i18n.get('clear_values')
-                },
-                editionActionsForNotMultiple: {
-                    redefine: this.$i18n.get('set_new_value'),
-                    clear: this.$i18n.get('clear_values')
-                },
-                bulkEditionProcedures: {
-                    1: {
-                        isDone: false,
-                        isExecuting: false,
-                        totalItemsEditedWithSuccess: 0,
-                        tooltipShow: true,
-                    }
-                },
-                groupID: null,
-                dones: [false],
-                metadataIsLoading: false,
-                metadataSearchCancel: undefined
-            }
+        beforeDestroy() {
+            // Cancels previous Request
+            if (this.metadataSearchCancel != undefined)
+                this.metadataSearchCancel.cancel('Metadata search Canceled.');
+
         },
         methods: {
             ...mapGetters('bulkedition', [
@@ -546,12 +552,6 @@
 
                 this.$set(this.bulkEditionProcedures[criterion], `${key}`, value);
             }
-        },
-        beforeDestroy() {
-            // Cancels previous Request
-            if (this.metadataSearchCancel != undefined)
-                this.metadataSearchCancel.cancel('Metadata search Canceled.');
-
         }
     }
 </script>

src/views/admin/components/modals/capability-edition-modal.vue

@@ -89,15 +89,22 @@ import { mapActions } from 'vuex';
 
 export default {
     name: 'CapabilityEditionModal',
+    props: {
+        capability: Object,
+        capabilityKey: String
+    },
     data() {
         return {
             existingRoles: [],
             isLoading: false
         }
     },
-    props: {
-        capability: Object,
-        capabilityKey: String
+    created() {
+        this.isLoading = true;
+        this.fetchRoles().then((roles) => {
+            this.existingRoles = roles;
+            this.isLoading = false;
+        });
     },
     methods: {
         ...mapActions('capability', [
@@ -111,13 +118,6 @@ export default {
             else 
                 this.removeCapabilityFromRole({ capabilityKey: this.capabilityKey.replace('%d', 'all'), role: role })
         }
-    },
-    created() {
-        this.isLoading = true;
-        this.fetchRoles().then((roles) => {
-            this.existingRoles = roles;
-            this.isLoading = false;
-        });
     }
 }
 </script>

src/views/admin/components/modals/checkbox-radio-modal.vue

@@ -354,6 +354,11 @@
             if (this.$refs.checkboxRadioModal)
                 this.$refs.checkboxRadioModal.focus()
         },
+        beforeDestroy() {
+            // Cancels previous Request
+            if (this.getOptionsValuesCancel != undefined)
+                this.getOptionsValuesCancel.cancel('Get options request canceled.');
+        },
         methods: {
             shouldShowMoreButton(key) {
                 return this.totalRemaining[key].remaining === true || (this.finderColumns[key].children.length < this.totalRemaining[key].remaining);
@@ -709,11 +714,6 @@
 
                 this.$emit('appliedCheckBoxModal');
             }
-        },
-        beforeDestroy() {
-            // Cancels previous Request
-            if (this.getOptionsValuesCancel != undefined)
-                this.getOptionsValuesCancel.cancel('Get options request canceled.');
         }
     }
 </script>

src/views/admin/components/modals/collections-modal.vue

@@ -65,15 +65,6 @@ export default {
             isLoading: false
         }
     },
-    methods: {
-        ...mapActions('collection', [
-            'fetchCollections'
-        ]),
-        onSelectCollection(collection) {
-            this.$router.push(this.$routerHelper.getNewItemPath(collection.id));
-            this.$parent.close();
-        }
-    },
     mounted() {
         this.isLoading = true;
         this.fetchCollections({ 
@@ -91,6 +82,15 @@ export default {
 
         if (this.$refs.collectionsModal)
             this.$refs.collectionsModal.focus();
+    },
+    methods: {
+        ...mapActions('collection', [
+            'fetchCollections'
+        ]),
+        onSelectCollection(collection) {
+            this.$router.push(this.$routerHelper.getNewItemPath(collection.id));
+            this.$parent.close();
+        }
     }
 }
 </script>

src/views/admin/components/modals/exposers-modal.vue

@@ -243,12 +243,6 @@ import qs from 'qs';
 
 export default {
     name: 'ExposersModal',
-    props: {
-        collectionId: Number,
-        totalItems: Number,
-        itemId: Number,
-        itemURL: String
-    },
     directives: {
         focus: {
             inserted(el) {
@@ -259,6 +253,12 @@ export default {
             }
         }
     },
+    props: {
+        collectionId: Number,
+        totalItems: Number,
+        itemId: Number,
+        itemURL: String
+    },
     data(){
         return {
             isLoading: false,
@@ -320,6 +320,28 @@ export default {
             return exposers;
         }
     },
+    mounted() {
+        this.isLoading = true;
+        this.fetchAvailableExposers()
+            .then(() => {
+                this.isLoading = false;
+            }).catch((error) => {
+                this.$console.log(error);
+                this.isLoading = false;
+            });
+
+        if (this.collectionId != undefined) {
+            this.fetchCollectionForExposer(this.collectionId)
+                .then((collection) => this.collectionURL = collection.url);
+        } else    
+            this.collectionURL = tainacan_plugin.theme_items_list_url;
+
+        if (this.itemId)
+            this.shouldRespectFetchOnly = false;
+
+        if (this.$refs.exposersModal)
+            this.$refs.exposersModal.focus()
+    },
     methods: {
         ...mapActions('exposer', [
             'fetchAvailableExposers'
@@ -443,28 +465,6 @@ export default {
                 return 0;
             return ( this.maxItemsPerPage * ( page - 1 ) + 1)
         },
-    },
-    mounted() {
-        this.isLoading = true;
-        this.fetchAvailableExposers()
-            .then(() => {
-                this.isLoading = false;
-            }).catch((error) => {
-                this.$console.log(error);
-                this.isLoading = false;
-            });
-
-        if (this.collectionId != undefined) {
-            this.fetchCollectionForExposer(this.collectionId)
-                .then((collection) => this.collectionURL = collection.url);
-        } else    
-            this.collectionURL = tainacan_plugin.theme_items_list_url;
-
-        if (this.itemId)
-            this.shouldRespectFetchOnly = false;
-
-        if (this.$refs.exposersModal)
-            this.$refs.exposersModal.focus()
     }
 }
 </script>

src/views/admin/components/navigation/tainacan-collection-subheader.vue

@@ -254,14 +254,6 @@ export default {
             }
         }
     },
-    methods: {
-        ...mapGetters('collection', [
-            'getCollection'
-        ]),
-        collectionBreadCrumbUpdate(breadCrumbItems) {
-            this.childrenBreadCrumbItems = breadCrumbItems;
-        }
-    },
     created() {
         this.activeRoute = this.$route.name;
 
@@ -271,6 +263,14 @@ export default {
     },
     beforeDestroy() {
         this.$root.$on('onCollectionBreadCrumbUpdate', this.collectionBreadCrumbUpdate);
+    },
+    methods: {
+        ...mapGetters('collection', [
+            'getCollection'
+        ]),
+        collectionBreadCrumbUpdate(breadCrumbItems) {
+            this.childrenBreadCrumbItems = breadCrumbItems;
+        }
     }
 }
 </script>

src/views/admin/components/navigation/tainacan-header.vue

@@ -131,6 +131,10 @@
 
     export default {
         name: 'TainacanHeader',
+        components: {
+            AdvancedSearch,
+            ProcessesPopup
+        },
         data() {
             return {
                 logoHeader: tainacan_plugin.base_url + '/assets/images/tainacan_logo_header.svg',
@@ -141,9 +145,16 @@
                 hasNewProcess: false
             }
         },
-        components: {
-            AdvancedSearch,
-            ProcessesPopup
+        created(){
+            this.$root.$on('closeAdvancedSearchShortcut', () => {
+                this.$refs.advancedSearchShortcut.toggle();
+            });
+            this.$root.$on('openProcessesPopup', () => {
+                this.showProcesses = true;
+            });
+        },
+        beforeDestroy() {
+            this.$root.$off('closeAdvancedSearchShortcut');
         },
         methods: {
             // toItemsPage() {
@@ -169,17 +180,6 @@
 
                 this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
             },
-        },
-        created(){
-            this.$root.$on('closeAdvancedSearchShortcut', () => {
-                this.$refs.advancedSearchShortcut.toggle();
-            });
-            this.$root.$on('openProcessesPopup', () => {
-                this.showProcesses = true;
-            });
-        },
-        beforeDestroy() {
-            this.$root.$off('closeAdvancedSearchShortcut');
         }
     }
 </script>

src/views/admin/components/navigation/tainacan-repository-subheader.vue

@@ -86,6 +86,10 @@ import AvailableExportersModal from '../modals/available-exporters-modal.vue';
 
 export default {
     name: 'TainacanRepositorySubheader',
+    props: {
+        isMenuCompressed: false,
+        isRepositoryLevel: true
+    },
     data() {
         return {
             repositoryName: tainacan_plugin.repository_name,
@@ -93,10 +97,6 @@ export default {
             collectionId: ''
         }
     },
-    props: {
-        isMenuCompressed: false,
-        isRepositoryLevel: true
-    },
     computed: {
         collection() {
             return this.getCollection();

src/views/admin/components/navigation/tainacan-title.vue

@@ -34,6 +34,9 @@
 <script>
 export default {
     name: 'TainacanTitle',
+    props: {
+        breadCrumbItems: Array
+    },
     data() {
         return {
             isRepositoryLevel: true,
@@ -42,9 +45,6 @@ export default {
             breadCrumbItem: {}
         }
     },
-    props: {
-        breadCrumbItems: Array
-    },
     watch: {
         '$route' (to, from) {
             if (to.path != from.path) {

src/views/admin/components/other/collection-filter.vue

@@ -52,6 +52,17 @@
             query: Object,
             open: false,
         },
+        data(){
+            return {
+                inputs: [],
+                collectionsIdsToFilter: []
+            }
+        },
+        computed: {
+            collections(){
+                return this.getCollections();
+            },
+        },
         created(){
             this.fetchCollections({
                     page: 1, 
@@ -71,17 +82,6 @@
                 this.applyFilter();
             }
         },
-        data(){
-            return {
-                inputs: [],
-                collectionsIdsToFilter: []
-            }
-        },
-        computed: {
-            collections(){
-                return this.getCollections();
-            },
-        },
         methods: {
             ...mapActions('search', [
                 'setPage'

src/views/admin/components/other/custom-dialog.vue

@@ -85,14 +85,14 @@
                 neverShowAgain: false
             }
         },
+        mounted() {
+            if (this.$refs.customDialog)
+                this.$refs.customDialog.focus();
+        },
         methods: {
             changeNeverShowMessageAgain($event) {
                 this.$userPrefs.set('neverShow' + this.messageKeyForUserPrefs + 'Dialog', $event);
             }
-        },
-        mounted() {
-            if (this.$refs.customDialog)
-                this.$refs.customDialog.focus();
         }
     }
 </script>

src/views/admin/components/other/file-item.vue

@@ -71,11 +71,6 @@
 <script>
 export default {
     name: 'FileItem',
-    data() {
-        return {
-            isPreviewModalActive: false
-        }
-    },
     props: {
         file: Object,
         size: 112,
@@ -83,6 +78,11 @@ export default {
         isSelected: false,
         modalOnClick: true
     },
+    data() {
+        return {
+            isPreviewModalActive: false
+        }
+    },
     methods: {
         getIconForMimeType(mimeType) {
             

src/views/admin/components/other/item-copy-dialog.vue

@@ -116,6 +116,17 @@
                 isCreatingSequenceEditGroup: Boolean,
             }
         },
+        created() {
+            this.message = this.$i18n.get('instruction_select_the_amount_of_copies');
+            this.isLoading = false;
+            this.hasCopied = false;
+            this.isCreatingSequenceEditGroup = false;
+            this.copyCount = 1;
+        },
+        mounted() {
+            if (this.$refs.itemCopyDialog)
+            this.$refs.itemCopyDialog.focus();
+        },
         methods: {
             ...mapActions('item', [
                 'fetchItem',
@@ -181,17 +192,6 @@
 
                 this.$parent.close();
             },
-        },
-        created() {
-            this.message = this.$i18n.get('instruction_select_the_amount_of_copies');
-            this.isLoading = false;
-            this.hasCopied = false;
-            this.isCreatingSequenceEditGroup = false;
-            this.copyCount = 1;
-        },
-        mounted() {
-            if (this.$refs.itemCopyDialog)
-            this.$refs.itemCopyDialog.focus();
         }
     }
 </script>

src/views/admin/components/other/processes-popup.vue

@@ -164,11 +164,6 @@ export default {
             dateFormat: ''
         }
     },
-    watch: {
-        bgProcesses(newBG) {
-            this.hasAnyProcessExecuting = newBG.some((element) => element.done <= 0);
-        }
-    },
     computed: {
         getAllProcesses(){
             if (this.updatedProcesses.length !== 0) {
@@ -183,6 +178,43 @@ export default {
             return this.bgProcesses;
         }
     },
+    watch: {
+        bgProcesses(newBG) {
+            this.hasAnyProcessExecuting = newBG.some((element) => element.done <= 0);
+        }
+    },
+    created() {
+        let locale = navigator.language;
+
+        moment.locale(locale);
+
+        let localeData = moment.localeData();
+        this.dateFormat = localeData.longDateFormat('lll');
+
+        this.fetchProcesses({
+            page: 1,
+            processesPerPage: 12,
+            shouldUpdateStore: false
+        }).then((response) => {
+            this.bgProcesses = JSON.parse(JSON.stringify(response.processes));
+        });
+
+        this.showProcessesList = false;
+
+        if (jQuery && jQuery( document )) {
+            jQuery( document ).on( 'heartbeat-tick-popup',  ( event, data ) => {
+                this.setProcesses(data.bg_process_feedback);
+            });
+
+            jQuery( document ).on( 'heartbeat-tick',  ( event, data ) => {
+                jQuery( document ).trigger('heartbeat-tick-popup',data);
+            });
+        }
+    },
+    beforeDestroy() {
+        if (jQuery && jQuery( document ))
+            jQuery( document ).unbind( 'heartbeat-tick-popup')
+    },
     methods: {
         ...mapActions('bgprocess', [
             'fetchProcesses',
@@ -217,38 +249,6 @@ export default {
         setProcesses(processes) {
             this.updatedProcesses = processes;
         }
-    },
-    created() {
-        let locale = navigator.language;
-
-        moment.locale(locale);
-
-        let localeData = moment.localeData();
-        this.dateFormat = localeData.longDateFormat('lll');
-
-        this.fetchProcesses({
-            page: 1,
-            processesPerPage: 12,
-            shouldUpdateStore: false
-        }).then((response) => {
-            this.bgProcesses = JSON.parse(JSON.stringify(response.processes));
-        });
-
-        this.showProcessesList = false;
-
-        if (jQuery && jQuery( document )) {
-            jQuery( document ).on( 'heartbeat-tick-popup',  ( event, data ) => {
-                this.setProcesses(data.bg_process_feedback);
-            });
-
-            jQuery( document ).on( 'heartbeat-tick',  ( event, data ) => {
-                jQuery( document ).trigger('heartbeat-tick-popup',data);
-            });
-        }
-    },
-    beforeDestroy() {
-        if (jQuery && jQuery( document ))
-            jQuery( document ).unbind( 'heartbeat-tick-popup')
     }
 }
 </script>

src/views/admin/components/other/three-state-toggle-button.vue

@@ -54,17 +54,6 @@
                 default: 'neutral_3tgbtn'
             },
         },
-        methods: {
-            yes_3tgbtn() {
-                this.parent.$emit(this.eventsName[0], this.otherProp);
-            },
-            no_3tgbtn() {
-                this.parent.$emit(this.eventsName[1], this.otherProp);
-            },
-            neutral_3tgbtn() {
-                this.parent.$emit(this.eventsName[2], this.otherProp);
-            }
-        },
         data() {
             return {
                 eventsName: ['yes_3tgbtn', 'no_3tgbtn', 'neutral_3tgbtn'],
@@ -87,6 +76,17 @@
                     }
                 }
             }
+        },
+        methods: {
+            yes_3tgbtn() {
+                this.parent.$emit(this.eventsName[0], this.otherProp);
+            },
+            no_3tgbtn() {
+                this.parent.$emit(this.eventsName[1], this.otherProp);
+            },
+            neutral_3tgbtn() {
+                this.parent.$emit(this.eventsName[2], this.otherProp);
+            }
         }
     }
 </script>

src/views/admin/components/search/advanced-search.vue

@@ -227,6 +227,37 @@
             isDoSearch: false,
             collectionId: ''
         },
+        data() {
+            return {
+                metaqueryOperatorsForInterval: {
+                    '=': this.$i18n.get('is_equal_to'),
+                    '!=': this.$i18n.get('is_not_equal_to'),
+                    '>': this.$i18n.get('greater_than'),
+                    '<': this.$i18n.get('less_than'),
+                    '>=': this.$i18n.get('greater_than_or_equal_to'),
+                    '<=': this.$i18n.get('less_than_or_equal_to'),
+                },
+                metaqueryOperatorsRegular: {
+                    '=': this.$i18n.get('is_equal_to'),
+                    '!=': this.$i18n.get('is_not_equal_to'),
+                    'LIKE': this.$i18n.get('contains'),
+                    'NOT LIKE': this.$i18n.get('not_contains'),
+                },
+                taxqueryOperators: {
+                    'LIKE': this.$i18n.get('contains'),
+                    'NOT LIKE': this.$i18n.get('not_contains')
+                },
+                searchCriteria: [1],
+                advancedSearchQuery: {
+                    advancedSearch: true,
+                    metaquery: {},
+                    taxquery: {}
+                },
+                metadataIsLoading: false,
+                metadata: [],
+                metadataSearchCancel: undefined
+            }
+        },
         watch: {
           isDoSearch(){
               this.searchAdvanced();
@@ -339,36 +370,13 @@
                 }
             }
         },
-        data() {
-            return {
-                metaqueryOperatorsForInterval: {
-                    '=': this.$i18n.get('is_equal_to'),
-                    '!=': this.$i18n.get('is_not_equal_to'),
-                    '>': this.$i18n.get('greater_than'),
-                    '<': this.$i18n.get('less_than'),
-                    '>=': this.$i18n.get('greater_than_or_equal_to'),
-                    '<=': this.$i18n.get('less_than_or_equal_to'),
-                },
-                metaqueryOperatorsRegular: {
-                    '=': this.$i18n.get('is_equal_to'),
-                    '!=': this.$i18n.get('is_not_equal_to'),
-                    'LIKE': this.$i18n.get('contains'),
-                    'NOT LIKE': this.$i18n.get('not_contains'),
-                },
-                taxqueryOperators: {
-                    'LIKE': this.$i18n.get('contains'),
-                    'NOT LIKE': this.$i18n.get('not_contains')
-                },
-                searchCriteria: [1],
-                advancedSearchQuery: {
-                    advancedSearch: true,
-                    metaquery: {},
-                    taxquery: {}
-                },
-                metadataIsLoading: false,
-                metadata: [],
-                metadataSearchCancel: undefined
-            }
+        beforeDestroy() {
+            this.$root.$off('metadatumUpdated');
+
+            // Cancels previous Request
+            if (this.metadataSearchCancel != undefined)
+                this.metadataSearchCancel.cancel('Metadata search Canceled.');
+
         },
         methods: {
             ...mapActions('metadata', [
@@ -579,14 +587,6 @@
                     }
                 }
             },
-        },
-        beforeDestroy() {
-            this.$root.$off('metadatumUpdated');
-
-            // Cancels previous Request
-            if (this.metadataSearchCancel != undefined)
-                this.metadataSearchCancel.cancel('Metadata search Canceled.');
-
         }
     }
 </script>

src/views/admin/components/search/filters-items-list.vue

@@ -201,12 +201,8 @@
     import CollectionsFilter from '../other/collection-filter.vue';
 
     export default {
-        data() {
-            return {
-                taxonomyFiltersCollectionNames: {},
-                repositoryCollectionNames: {},
-                collectionNameSearchCancel: undefined
-            }
+        components: {
+            CollectionsFilter
         },
         props: {
             filters: Array,
@@ -216,6 +212,22 @@
             taxonomy: String,
             repositoryCollectionFilters: Object
         },
+        data() {
+            return {
+                taxonomyFiltersCollectionNames: {},
+                repositoryCollectionNames: {},
+                collectionNameSearchCancel: undefined
+            }
+        },
+        computed: {
+            getQuery() {
+                return this.getPostQuery();
+            },
+            taxonomyId () {
+                const taxonomyArray = this.taxonomy.split("_");
+                return taxonomyArray[taxonomyArray.length - 1];
+            }
+        },
         watch: {
             taxonomyFilters() {
                 if (this.taxonomyFilters != undefined) {
@@ -260,6 +272,11 @@
                 }                
             }
         },
+        beforeDestroy() {
+            // Cancels previous collection name Request
+            if (this.collectionNameSearchCancel != undefined)
+                this.collectionNameSearchCancel.cancel('Collection name search Canceled.');
+        },
         methods: {
             ...mapGetters('search',[
                 'getPostQuery'
@@ -267,23 +284,6 @@
             ...mapActions('collection',[
                 'fetchAllCollectionNames'
             ]),
-        },
-        computed: {
-            getQuery() {
-                return this.getPostQuery();
-            },
-            taxonomyId () {
-                const taxonomyArray = this.taxonomy.split("_");
-                return taxonomyArray[taxonomyArray.length - 1];
-            }
-        },
-        components: {
-            CollectionsFilter
-        },
-        beforeDestroy() {
-            // Cancels previous collection name Request
-            if (this.collectionNameSearchCancel != undefined)
-                this.collectionNameSearchCancel.cancel('Collection name search Canceled.');
         }
     }
 </script>

src/views/admin/components/search/pagination.vue

@@ -115,6 +115,9 @@ import { mapGetters } from 'vuex';
 
 export default {
     name: 'Pagination',
+    props: {
+        isSortingByCustomMetadata: Boolean
+    },
     data() {
         return {
             maxItemsPerPage: tainacan_plugin.api_max_items_per_page
@@ -134,9 +137,6 @@ export default {
             return Math.ceil(Number(this.totalItems)/Number(this.itemsPerPage));    
         }
     },
-    props: {
-        isSortingByCustomMetadata: Boolean
-    },
     watch: {
         page( value ){
             if (value < 1)

src/views/admin/pages/home-page.vue

@@ -156,6 +156,9 @@ import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'HomePage',
+    components: {
+        CollectionsHomeList
+    },
     data(){
         return {
             isLoadingCollections: false,
@@ -163,14 +166,14 @@ export default {
             themeCollectionListURL: tainacan_plugin.theme_collection_list_url,
         }
     },
-    components: {
-        CollectionsHomeList
-    },
     computed: {
         collections() {
             return this.getCollections(); 
         }
     },
+    mounted(){
+        this.loadCollections();
+    },
     methods: {
          ...mapActions('collection', [
             'fetchCollections',
@@ -191,9 +194,6 @@ export default {
                     this.isLoadingCollections = false;
                 });
         }
-    },
-    mounted(){
-        this.loadCollections();
     }
 }
 </script>

src/views/admin/pages/lists/activities-page.vue

@@ -270,6 +270,10 @@
 
     export default {
         name: 'ActivitiesPage',
+        components: {
+            ActivitiesList,
+            ProcessesList,
+        },
         mixins: [ dateInter ],
         data(){
             return {
@@ -289,9 +293,53 @@
                 userIdForFiltering: null
             }
         },
-        components: {
-            ActivitiesList,
-            ProcessesList,
+        computed: {
+            activities(){
+                let activitiesList = this.getActivities();
+
+                for (let activity of activitiesList)
+                    activity['by'] = this.$i18n.get('info_by') +
+                        activity['user_name'] + '<br>' + this.$i18n.get('info_date') +
+                        moment(activity['log_date'], 'YYYY-MM-DD h:mm:ss').format('DD/MM/YYYY, hh:mm:ss');
+
+                return activitiesList;
+            },
+            processes(){
+                return this.getProcesses();
+            }
+        },
+        created() {
+            this.activitiesPerPage = this.$userPrefs.get('activities_per_page');
+            this.processesPerPage = this.$userPrefs.get('processes_per_page');
+            this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
+            this.isItemLevel = (!this.isRepositoryLevel && this.$route.params.itemId);
+        },
+        mounted(){
+            if (!this.isRepositoryLevel)
+                this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('activities') }]);
+
+            if (this.$route.query.tab == 'processes' && this.isRepositoryLevel)
+                this.tab = 'processes';
+
+            if (this.tab != 'processes') {
+                if (this.activitiesPerPage != this.$userPrefs.get('activities_per_page'))
+                    this.activitiesPerPage = this.$userPrefs.get('activities_per_page');
+
+                if (!this.activitiesPerPage) {
+                    this.activitiesPerPage = 12;
+                    this.$userPrefs.set('activities_per_page', 12);
+                }
+                this.loadActivities();
+            } else {
+                if (this.processesPerPage != this.$userPrefs.get('processes_per_page'))
+                    this.processesPerPage = this.$userPrefs.get('processes_per_page');
+
+                if (!this.processesPerPage) {
+                    this.processesPerPage = 12;
+                    this.$userPrefs.set('processes_per_page', 12);
+                }
+                this.loadProcesses();
+            }
         },
         methods: {
             ...mapActions('activity', [
@@ -473,54 +521,6 @@
                         this.isFetchingPages = false;
                     });
             }, 500)
-        },
-        computed: {
-            activities(){
-                let activitiesList = this.getActivities();
-
-                for (let activity of activitiesList)
-                    activity['by'] = this.$i18n.get('info_by') +
-                        activity['user_name'] + '<br>' + this.$i18n.get('info_date') +
-                        moment(activity['log_date'], 'YYYY-MM-DD h:mm:ss').format('DD/MM/YYYY, hh:mm:ss');
-
-                return activitiesList;
-            },
-            processes(){
-                return this.getProcesses();
-            }
-        },
-        created() {
-            this.activitiesPerPage = this.$userPrefs.get('activities_per_page');
-            this.processesPerPage = this.$userPrefs.get('processes_per_page');
-            this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
-            this.isItemLevel = (!this.isRepositoryLevel && this.$route.params.itemId);
-        },
-        mounted(){
-            if (!this.isRepositoryLevel)
-                this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('activities') }]);
-
-            if (this.$route.query.tab == 'processes' && this.isRepositoryLevel)
-                this.tab = 'processes';
-
-            if (this.tab != 'processes') {
-                if (this.activitiesPerPage != this.$userPrefs.get('activities_per_page'))
-                    this.activitiesPerPage = this.$userPrefs.get('activities_per_page');
-
-                if (!this.activitiesPerPage) {
-                    this.activitiesPerPage = 12;
-                    this.$userPrefs.set('activities_per_page', 12);
-                }
-                this.loadActivities();
-            } else {
-                if (this.processesPerPage != this.$userPrefs.get('processes_per_page'))
-                    this.processesPerPage = this.$userPrefs.get('processes_per_page');
-
-                if (!this.processesPerPage) {
-                    this.processesPerPage = 12;
-                    this.$userPrefs.set('processes_per_page', 12);
-                }
-                this.loadProcesses();
-            }
         }
     }
 </script>

src/views/admin/pages/lists/available-exporters-page.vue

@@ -34,14 +34,6 @@
                 isLoading: false
             }
         },
-        methods: {
-            ...mapActions('exporter', [
-                'fetchAvailableExporters'
-            ]),
-            onSelectExporter(exporterType) {
-                this.$router.push(this.$routerHelper.getExporterEditionPath(exporterType.slug));
-            }
-        },
         created() {
             this.isLoading = true;
             this.fetchAvailableExporters()
@@ -52,8 +44,15 @@
                     this.$console.log(error);
                     this.isLoading = false;
             });
+        },
+        methods: {
+            ...mapActions('exporter', [
+                'fetchAvailableExporters'
+            ]),
+            onSelectExporter(exporterType) {
+                this.$router.push(this.$routerHelper.getExporterEditionPath(exporterType.slug));
+            }
         }
-
     }
 </script>
 

src/views/admin/pages/lists/available-importers-page.vue

@@ -34,14 +34,6 @@ export default {
             isLoading: false
         }
     },
-    methods: {
-        ...mapActions('importer', [
-            'fetchAvailableImporters'
-        ]),
-        onSelectImporter(importerType) {
-            this.$router.push(this.$routerHelper.getImporterEditionPath(importerType.slug));
-        }
-    },
     created() {
         this.isLoading = true;
         this.fetchAvailableImporters()
@@ -52,8 +44,15 @@ export default {
             this.$console.log(error);
             this.isLoading = false;
         });
+    },
+    methods: {
+        ...mapActions('importer', [
+            'fetchAvailableImporters'
+        ]),
+        onSelectImporter(importerType) {
+            this.$router.push(this.$routerHelper.getImporterEditionPath(importerType.slug));
+        }
     }
-
 }
 </script>
 

src/views/admin/pages/lists/capabilities-page.vue

@@ -88,6 +88,9 @@
 
     export default {
         name: 'CapabilitiesPage',
+        components: {
+            CapabilitiesList
+        },
         data() {
             return {
                 isRepositoryLevel: false,
@@ -141,8 +144,12 @@
                 return this.getCollection();
             }
         },
-        components: {
-            CapabilitiesList
+        mounted() {
+            this.loadCapabilities();
+            this.fetchRolesForFiltering();
+        },
+        created() {
+            this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
         },
         methods: {
             ...mapActions('capability', [
@@ -179,13 +186,6 @@
                         this.isFetchingRoles = false;
                     });
             }
-        },
-        mounted() {
-            this.loadCapabilities();
-            this.fetchRolesForFiltering();
-        },
-        created() {
-            this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
         }
     }
 </script>

src/views/admin/pages/lists/collections-page.vue

@@ -320,6 +320,9 @@ import { mapActions, mapGetters } from 'vuex';
 
 export default {
     name: 'CollectionsPage',
+    components: {
+        CollectionsList
+    },
     data(){
         return {
             isLoading: false,
@@ -337,9 +340,6 @@ export default {
             ]
         }
     },
-    components: {
-        CollectionsList
-    },
     computed: {
         metadatum_mappers: {
             get() {
@@ -353,6 +353,42 @@ export default {
             return this.getRepositoryTotalCollections();
         }
     },
+    created() {
+        this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
+        this.isLoadingMetadatumTypes = true;
+        this.fetchMetadatumMappers()
+            .then(() => {
+                this.isLoadingMetadatumMappers = false;
+            })
+            .catch(() => {
+                this.isLoadingMetadatumMappers = false;
+            });
+    }, 
+    mounted(){
+        if (this.collectionsPerPage != this.$userPrefs.get('collections_per_page'))
+            this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
+        if (!this.collectionsPerPage) {
+            this.collectionsPerPage = 12;
+            this.$userPrefs.set('collections_per_page', 12);
+        }
+
+        if (this.order != this.$userPrefs.get('collections_order'))
+            this.order = this.$userPrefs.get('collections_order');
+        if (!this.order) {
+            this.order = 'asc';
+            this.$userPrefs.set('collections_order', 'asc');
+        }
+
+
+        if (this.orderBy != this.$userPrefs.get('collections_order_by'))
+            this.orderBy = this.$userPrefs.get('collections_order_by');
+        if (!this.orderBy) {
+            this.orderBy = 'date';
+            this.$userPrefs.set('collections_order_by', 'date');
+        }
+
+        this.loadCollections();
+    },
     methods: {
          ...mapActions('collection', [
             'fetchCollections',
@@ -454,42 +490,6 @@ export default {
             this.page = 1;
             this.loadCollections();
         },
-    },
-    created() {
-        this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
-        this.isLoadingMetadatumTypes = true;
-        this.fetchMetadatumMappers()
-            .then(() => {
-                this.isLoadingMetadatumMappers = false;
-            })
-            .catch(() => {
-                this.isLoadingMetadatumMappers = false;
-            });
-    }, 
-    mounted(){
-        if (this.collectionsPerPage != this.$userPrefs.get('collections_per_page'))
-            this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
-        if (!this.collectionsPerPage) {
-            this.collectionsPerPage = 12;
-            this.$userPrefs.set('collections_per_page', 12);
-        }
-
-        if (this.order != this.$userPrefs.get('collections_order'))
-            this.order = this.$userPrefs.get('collections_order');
-        if (!this.order) {
-            this.order = 'asc';
-            this.$userPrefs.set('collections_order', 'asc');
-        }
-
-
-        if (this.orderBy != this.$userPrefs.get('collections_order_by'))
-            this.orderBy = this.$userPrefs.get('collections_order_by');
-        if (!this.orderBy) {
-            this.orderBy = 'date';
-            this.$userPrefs.set('collections_order_by', 'date');
-        }
-
-        this.loadCollections();
     }
 }
 </script>

src/views/admin/pages/lists/filters-page.vue

@@ -12,12 +12,12 @@ import FiltersList from '../../components/lists/filters-list.vue';
 
 export default {
     name: 'FiltersPage',
+    components: {
+        FiltersList
+    },
     data(){
         return {
         }
-    },
-    components: {
-        FiltersList
     }
 }
 </script>

src/views/admin/pages/lists/items-page.vue

@@ -910,6 +910,20 @@
 
     export default {
         name: 'ItemsPage',
+        components: {
+            ItemsList,
+            FiltersTagsList,
+            FiltersItemsList,
+            Pagination,
+            AdvancedSearch,
+            ExposersModal
+        },
+        props: {
+            collectionId: Number,
+            defaultViewMode: String, // Used only on theme
+            enabledViewModes: Object, // Used only on theme
+            isOnTheme: Boolean
+        },
         data() {
             return {
                 isRepositoryLevel: false,
@@ -938,12 +952,6 @@
                 metadataSearchCancel: undefined
             }
         },
-        props: {
-            collectionId: Number,
-            defaultViewMode: String, // Used only on theme
-            enabledViewModes: Object, // Used only on theme
-            isOnTheme: Boolean
-        },
         computed: {
             isSortingByCustomMetadata() {
                 return (this.orderBy != undefined && this.orderBy != '' && this.orderBy != 'title' && this.orderBy != 'date');
@@ -1032,14 +1040,6 @@
                 }
             }
         },
-        components: {
-            ItemsList,
-            FiltersTagsList,
-            FiltersItemsList,
-            Pagination,
-            AdvancedSearch,
-            ExposersModal
-        },
         watch: {
             displayedMetadata() {
                 this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
@@ -1065,6 +1065,118 @@
                 }
             }
         },
+        created() {
+
+            this.isRepositoryLevel = (this.collectionId === undefined);
+
+            this.$eventBusSearch.setCollectionId(this.collectionId);
+            this.$eventBusSearch.updateStoreFromURL();
+
+            this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
+                this.isLoadingItems = isLoadingItems;
+            });
+
+            this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
+                this.adjustSearchControlHeight();
+                this.hasFiltered = hasFiltered;
+            });
+
+            this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
+                this.advancedSearchResults = advancedSearchResults;
+            });
+
+            this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', (to) => {
+                /* This condition is to prevent an incorrect fetch by filter or metadata when we coming from items
+                 * at collection level to items page at repository level
+                 */
+                if (this.isOnTheme || this.collectionId == to.params.collectionId || to.query.fromBreadcrumb) {
+                    this.prepareMetadata();
+                    this.prepareFilters();
+                }
+            });
+
+            if(this.$route.query && this.$route.query.advancedSearch) {
+                this.openAdvancedSearch = this.$route.query.advancedSearch;
+            }
+
+            this.$root.$on('openAdvancedSearch', (openAdvancedSearch) => {
+                this.openAdvancedSearch = openAdvancedSearch;
+            });
+
+        },
+        mounted() {
+            this.prepareFilters();
+            this.prepareMetadata();
+            this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
+
+            // Updates Collection Header Breadcrumb
+            if (!this.isOnTheme)
+                this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('items') }]);
+
+            // Setting initial view mode on Theme
+            if (this.isOnTheme) {
+                let prefsViewMode = !this.isRepositoryLevel ? 'view_mode_' + this.collectionId : 'view_mode';
+                if (this.$userPrefs.get(prefsViewMode) == undefined)
+                    this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
+                else {
+                    let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
+                    if (existingViewModeIndex >= 0)
+                        this.$eventBusSearch.setInitialViewMode(this.$userPrefs.get(prefsViewMode));
+                    else   
+                        this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
+                }
+
+                // For view modes such as slides, we force pagination to request only 12 per page
+                let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
+                if (existingViewModeIndex >= 0) {
+                    if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
+                        this.$eventBusSearch.setItemsPerPage(12);
+                    }
+                }
+                
+            } else {
+                let prefsAdminViewMode = !this.isRepositoryLevel ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
+                if (this.$userPrefs.get(prefsAdminViewMode) == undefined)
+                    this.$eventBusSearch.setInitialAdminViewMode('table');
+                else {
+                    let existingViewMode = this.$userPrefs.get(prefsAdminViewMode);
+                    if (existingViewMode == 'cards' || 
+                        existingViewMode == 'table' || 
+                        existingViewMode == 'records' || 
+                        existingViewMode == 'grid' || 
+                        existingViewMode == 'masonry')
+                        this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
+                    else
+                        this.$eventBusSearch.setInitialAdminViewMode('table');
+                }
+            }
+
+            this.showItemsHiddingDueSortingDialog();
+
+            // Watches window resize to adjust filter's top position and compression on mobile 
+            this.adjustSearchControlHeight();
+            window.addEventListener('resize', this.adjustSearchControlHeight);
+        },
+        beforeDestroy() {
+            this.removeEventListeners();
+
+            // Cancels previous Metadata Request
+            if (this.metadataSearchCancel != undefined)
+                this.metadataSearchCancel.cancel('Metadata search Canceled.');
+     
+            // Cancels previous Filters Request
+            if (this.filtersSearchCancel != undefined)
+                this.filtersSearchCancel.cancel('Filters search Canceled.');
+     
+            // Cancels previous Items Request
+            if (this.$eventBusSearch.searchCancel != undefined)
+                this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
+
+            // Cancels previous Repository Filters Request
+            if (this.repositoryFiltersSearchCancel != undefined)
+                this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
+
+        },
         methods: {
             ...mapGetters('collection', [
                 'getItems',
@@ -1545,118 +1657,6 @@
                 this.$eventBusSearch.$off('advancedSearchResults');
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
             }
-        },
-        created() {
-
-            this.isRepositoryLevel = (this.collectionId === undefined);
-
-            this.$eventBusSearch.setCollectionId(this.collectionId);
-            this.$eventBusSearch.updateStoreFromURL();
-
-            this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
-                this.isLoadingItems = isLoadingItems;
-            });
-
-            this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
-                this.adjustSearchControlHeight();
-                this.hasFiltered = hasFiltered;
-            });
-
-            this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
-                this.advancedSearchResults = advancedSearchResults;
-            });
-
-            this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', (to) => {
-                /* This condition is to prevent an incorrect fetch by filter or metadata when we coming from items
-                 * at collection level to items page at repository level
-                 */
-                if (this.isOnTheme || this.collectionId == to.params.collectionId || to.query.fromBreadcrumb) {
-                    this.prepareMetadata();
-                    this.prepareFilters();
-                }
-            });
-
-            if(this.$route.query && this.$route.query.advancedSearch) {
-                this.openAdvancedSearch = this.$route.query.advancedSearch;
-            }
-
-            this.$root.$on('openAdvancedSearch', (openAdvancedSearch) => {
-                this.openAdvancedSearch = openAdvancedSearch;
-            });
-
-        },
-        mounted() {
-            this.prepareFilters();
-            this.prepareMetadata();
-            this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
-
-            // Updates Collection Header Breadcrumb
-            if (!this.isOnTheme)
-                this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('items') }]);
-
-            // Setting initial view mode on Theme
-            if (this.isOnTheme) {
-                let prefsViewMode = !this.isRepositoryLevel ? 'view_mode_' + this.collectionId : 'view_mode';
-                if (this.$userPrefs.get(prefsViewMode) == undefined)
-                    this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
-                else {
-                    let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
-                    if (existingViewModeIndex >= 0)
-                        this.$eventBusSearch.setInitialViewMode(this.$userPrefs.get(prefsViewMode));
-                    else   
-                        this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
-                }
-
-                // For view modes such as slides, we force pagination to request only 12 per page
-                let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
-                if (existingViewModeIndex >= 0) {
-                    if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
-                        this.$eventBusSearch.setItemsPerPage(12);
-                    }
-                }
-                
-            } else {
-                let prefsAdminViewMode = !this.isRepositoryLevel ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
-                if (this.$userPrefs.get(prefsAdminViewMode) == undefined)
-                    this.$eventBusSearch.setInitialAdminViewMode('table');
-                else {
-                    let existingViewMode = this.$userPrefs.get(prefsAdminViewMode);
-                    if (existingViewMode == 'cards' || 
-                        existingViewMode == 'table' || 
-                        existingViewMode == 'records' || 
-                        existingViewMode == 'grid' || 
-                        existingViewMode == 'masonry')
-                        this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
-                    else
-                        this.$eventBusSearch.setInitialAdminViewMode('table');
-                }
-            }
-
-            this.showItemsHiddingDueSortingDialog();
-
-            // Watches window resize to adjust filter's top position and compression on mobile 
-            this.adjustSearchControlHeight();
-            window.addEventListener('resize', this.adjustSearchControlHeight);
-        },
-        beforeDestroy() {
-            this.removeEventListeners();
-
-            // Cancels previous Metadata Request
-            if (this.metadataSearchCancel != undefined)
-                this.metadataSearchCancel.cancel('Metadata search Canceled.');
-     
-            // Cancels previous Filters Request
-            if (this.filtersSearchCancel != undefined)
-                this.filtersSearchCancel.cancel('Filters search Canceled.');
-     
-            // Cancels previous Items Request
-            if (this.$eventBusSearch.searchCancel != undefined)
-                this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
-
-            // Cancels previous Repository Filters Request
-            if (this.repositoryFiltersSearchCancel != undefined)
-                this.repositoryFiltersSearchCancel.cancel('Repository Collection Filters search Canceled.');
-
         }
     }
 </script>

src/views/admin/pages/lists/metadata-page.vue

@@ -12,12 +12,12 @@ import MetadataList from '../../components/lists/metadata-list.vue';
 
 export default {
     name: 'MetadataPage',
+    components: {
+        MetadataList
+    },
     data(){
         return {
         }
-    },
-    components: {
-        MetadataList
     }
 }
 </script>

src/views/admin/pages/lists/taxonomies-page.vue

@@ -244,6 +244,9 @@
 
     export default {
         name: 'TaxonomyPage',
+        components: {
+            TaxonomiesList
+        },
         data(){
             return {
                 isLoading: false,
@@ -260,8 +263,41 @@
                 ]
             }
         },
-        components: {
-            TaxonomiesList
+        computed: {
+            taxonomies(){
+                return this.get();
+            },
+            repositoryTotalTaxonomies(){
+                return this.getRepositoryTotalTaxonomies();
+            }
+        },
+        created() {
+            this.taxonomiesPerPage = this.$userPrefs.get('taxonomies_per_page');
+        },
+        mounted(){
+            if (this.taxonomiesPerPage != this.$userPrefs.get('taxonomies_per_page'))
+                this.taxonomiesPerPage = this.$userPrefs.get('taxonomies_per_page');
+            if (!this.taxonomiesPerPage) {
+                this.taxonomiesPerPage = 12;
+                this.$userPrefs.set('taxonomies_per_page', 12);
+            }
+
+            if (this.order != this.$userPrefs.get('taxonomies_order'))
+                this.order = this.$userPrefs.get('taxonomies_order');
+            if (!this.order) {
+                this.order = 'asc';
+                this.$userPrefs.set('taxonomies_order', 'asc');
+            }
+
+
+            if (this.orderBy != this.$userPrefs.get('taxonomies_order_by'))
+                this.orderBy = this.$userPrefs.get('taxonomies_order_by');
+            if (!this.orderBy) {
+                this.orderBy = 'title';
+                this.$userPrefs.set('taxonomies_order_by', 'title');
+            }
+            
+            this.load();
         },
         methods: {
             ...mapActions('taxonomy', [
@@ -347,42 +383,6 @@
                 this.page = 1;
                 this.load();
             }
-        },
-        computed: {
-            taxonomies(){
-                return this.get();
-            },
-            repositoryTotalTaxonomies(){
-                return this.getRepositoryTotalTaxonomies();
-            }
-        },
-        created() {
-            this.taxonomiesPerPage = this.$userPrefs.get('taxonomies_per_page');
-        },
-        mounted(){
-            if (this.taxonomiesPerPage != this.$userPrefs.get('taxonomies_per_page'))
-                this.taxonomiesPerPage = this.$userPrefs.get('taxonomies_per_page');
-            if (!this.taxonomiesPerPage) {
-                this.taxonomiesPerPage = 12;
-                this.$userPrefs.set('taxonomies_per_page', 12);
-            }
-
-            if (this.order != this.$userPrefs.get('taxonomies_order'))
-                this.order = this.$userPrefs.get('taxonomies_order');
-            if (!this.order) {
-                this.order = 'asc';
-                this.$userPrefs.set('taxonomies_order', 'asc');
-            }
-
-
-            if (this.orderBy != this.$userPrefs.get('taxonomies_order_by'))
-                this.orderBy = this.$userPrefs.get('taxonomies_order_by');
-            if (!this.orderBy) {
-                this.orderBy = 'title';
-                this.$userPrefs.set('taxonomies_order_by', 'title');
-            }
-            
-            this.load();
         }
     }
 </script>

src/views/admin/pages/lists/term-items-page.vue

@@ -878,6 +878,22 @@
 
     export default {
         name: 'ItemsPage',
+        components: {
+            ItemsList,
+            FiltersTagsList,
+            FiltersItemsList,
+            Pagination,
+            AdvancedSearch,
+            ExposersModal
+        },
+        props: {
+            collectionId: Number,
+            termId: Number,
+            taxonomy: String,
+            defaultViewMode: String, // Used only on theme
+            enabledViewModes: Object, // Used only on theme
+            isOnTheme: Boolean
+        },
         data() {
             return {
                 isRepositoryLevel: false,
@@ -906,14 +922,6 @@
                 metadataSearchCancel: undefined
             }
         },
-        props: {
-            collectionId: Number,
-            termId: Number,
-            taxonomy: String,
-            defaultViewMode: String, // Used only on theme
-            enabledViewModes: Object, // Used only on theme
-            isOnTheme: Boolean
-        },
         computed: {
             isSortingByCustomMetadata() {
                 return (this.orderBy != undefined && this.orderBy != '' && this.orderBy != 'title' && this.orderBy != 'date'); 
@@ -978,14 +986,6 @@
                 }
             }
         },
-        components: {
-            ItemsList,
-            FiltersTagsList,
-            FiltersItemsList,
-            Pagination,
-            AdvancedSearch,
-            ExposersModal
-        },
         watch: {
             displayedMetadata() {
                 this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
@@ -1011,6 +1011,117 @@
                 }
             }
         },
+        created() {
+
+            this.isRepositoryLevel = (this.collectionId === undefined);
+
+            if (this.collectionId != undefined)
+                this.$eventBusSearch.setCollectionId(this.collectionId);
+
+            if (this.termId != undefined && this.termId != null)
+                this.$eventBusSearch.setTerm(this.termId, this.taxonomy);
+            
+            this.$eventBusSearch.updateStoreFromURL();
+
+            this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
+                this.isLoadingItems = isLoadingItems;
+            });
+
+            this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
+                this.adjustSearchControlHeight();
+                this.hasFiltered = hasFiltered;
+            });
+
+            this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
+                this.advancedSearchResults = advancedSearchResults;
+            });
+
+            this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', (to) => {
+                /* This condition is to prevent an incorrect fetch by filter or metadata when we come from items
+                 * at collection level to items page at repository level
+                 */
+
+                if (this.isOnTheme || this.collectionId == to.params.collectionId) {
+                    this.prepareMetadata();
+                    this.prepareFilters();
+                }
+            });
+
+            if(this.$route.query && this.$route.query.advancedSearch) {
+                this.openAdvancedSearch = this.$route.query.advancedSearch;
+            }
+
+            this.$root.$on('openAdvancedSearch', (openAdvancedSearch) => {
+                this.openAdvancedSearch = openAdvancedSearch;
+            });
+
+        },
+        mounted() {
+            
+            this.prepareFilters();
+            this.prepareMetadata();
+            this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
+
+            // Setting initial view mode on Theme
+            if (this.isOnTheme) {
+                let prefsViewMode = !this.isRepositoryLevel ? 'view_mode_' + this.collectionId : 'view_mode';
+                if (this.$userPrefs.get(prefsViewMode) == undefined)
+                    this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
+                else {
+                    let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
+                    if (existingViewModeIndex >= 0)
+                        this.$eventBusSearch.setInitialViewMode(this.$userPrefs.get(prefsViewMode));
+                    else   
+                        this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
+                }
+                
+                // For view modes such as slides, we force pagination to request only 12 per page
+                let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
+                if (existingViewModeIndex >= 0) {
+                    if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
+                        this.$eventBusSearch.setItemsPerPage(12);
+                    }
+                }
+
+            } else {
+                let prefsAdminViewMode = !this.isRepositoryLevel ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
+                if (this.$userPrefs.get(prefsAdminViewMode) == undefined)
+                    this.$eventBusSearch.setInitialAdminViewMode('table');
+                else {
+                    let existingViewMode = this.$userPrefs.get(prefsAdminViewMode);
+                    if (existingViewMode == 'cards' || 
+                        existingViewMode == 'table' || 
+                        existingViewMode == 'records' || 
+                        existingViewMode == 'grid' || 
+                        existingViewMode == 'masonry')
+                        this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
+                    else
+                        this.$eventBusSearch.setInitialAdminViewMode('table');
+                }
+            }
+
+            this.showItemsHiddingDueSortingDialog();
+
+            // Watches window resize to adjust filter's top position and compression on mobile 
+            this.adjustSearchControlHeight();
+            window.addEventListener('resize', this.adjustSearchControlHeight);
+        },
+        beforeDestroy() {
+            this.removeEventListeners();
+
+            // Cancels previous Metadata Request
+            if (this.metadataSearchCancel != undefined)
+                this.metadataSearchCancel.cancel('Metadata search Canceled.');
+     
+            // Cancels previous Filters Request
+            if (this.filtersSearchCancel != undefined)
+                this.filtersSearchCancel.cancel('Filters search Canceled.');
+     
+            // Cancels previous Items Request
+            if (this.$eventBusSearch.searchCancel != undefined)
+                this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
+
+        },
         methods: {
             ...mapGetters('collection', [
                 'getItems',
@@ -1468,117 +1579,6 @@
                 this.$eventBusSearch.$off('hasToPrepareMetadataAndFilters');
 
             },
-        },
-        created() {
-
-            this.isRepositoryLevel = (this.collectionId === undefined);
-
-            if (this.collectionId != undefined)
-                this.$eventBusSearch.setCollectionId(this.collectionId);
-
-            if (this.termId != undefined && this.termId != null)
-                this.$eventBusSearch.setTerm(this.termId, this.taxonomy);
-            
-            this.$eventBusSearch.updateStoreFromURL();
-
-            this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
-                this.isLoadingItems = isLoadingItems;
-            });
-
-            this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
-                this.adjustSearchControlHeight();
-                this.hasFiltered = hasFiltered;
-            });
-
-            this.$eventBusSearch.$on('advancedSearchResults', advancedSearchResults => {
-                this.advancedSearchResults = advancedSearchResults;
-            });
-
-            this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', (to) => {
-                /* This condition is to prevent an incorrect fetch by filter or metadata when we come from items
-                 * at collection level to items page at repository level
-                 */
-
-                if (this.isOnTheme || this.collectionId == to.params.collectionId) {
-                    this.prepareMetadata();
-                    this.prepareFilters();
-                }
-            });
-
-            if(this.$route.query && this.$route.query.advancedSearch) {
-                this.openAdvancedSearch = this.$route.query.advancedSearch;
-            }
-
-            this.$root.$on('openAdvancedSearch', (openAdvancedSearch) => {
-                this.openAdvancedSearch = openAdvancedSearch;
-            });
-
-        },
-        mounted() {
-            
-            this.prepareFilters();
-            this.prepareMetadata();
-            this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
-
-            // Setting initial view mode on Theme
-            if (this.isOnTheme) {
-                let prefsViewMode = !this.isRepositoryLevel ? 'view_mode_' + this.collectionId : 'view_mode';
-                if (this.$userPrefs.get(prefsViewMode) == undefined)
-                    this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
-                else {
-                    let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
-                    if (existingViewModeIndex >= 0)
-                        this.$eventBusSearch.setInitialViewMode(this.$userPrefs.get(prefsViewMode));
-                    else   
-                        this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
-                }
-                
-                // For view modes such as slides, we force pagination to request only 12 per page
-                let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
-                if (existingViewModeIndex >= 0) {
-                    if (!this.registeredViewModes[Object.keys(this.registeredViewModes)[existingViewModeIndex]].show_pagination) {
-                        this.$eventBusSearch.setItemsPerPage(12);
-                    }
-                }
-
-            } else {
-                let prefsAdminViewMode = !this.isRepositoryLevel ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
-                if (this.$userPrefs.get(prefsAdminViewMode) == undefined)
-                    this.$eventBusSearch.setInitialAdminViewMode('table');
-                else {
-                    let existingViewMode = this.$userPrefs.get(prefsAdminViewMode);
-                    if (existingViewMode == 'cards' || 
-                        existingViewMode == 'table' || 
-                        existingViewMode == 'records' || 
-                        existingViewMode == 'grid' || 
-                        existingViewMode == 'masonry')
-                        this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
-                    else
-                        this.$eventBusSearch.setInitialAdminViewMode('table');
-                }
-            }
-
-            this.showItemsHiddingDueSortingDialog();
-
-            // Watches window resize to adjust filter's top position and compression on mobile 
-            this.adjustSearchControlHeight();
-            window.addEventListener('resize', this.adjustSearchControlHeight);
-        },
-        beforeDestroy() {
-            this.removeEventListeners();
-
-            // Cancels previous Metadata Request
-            if (this.metadataSearchCancel != undefined)
-                this.metadataSearchCancel.cancel('Metadata search Canceled.');
-     
-            // Cancels previous Filters Request
-            if (this.filtersSearchCancel != undefined)
-                this.filtersSearchCancel.cancel('Filters search Canceled.');
-     
-            // Cancels previous Items Request
-            if (this.$eventBusSearch.searchCancel != undefined)
-                this.$eventBusSearch.searchCancel.cancel('Item search Canceled.');
-
         }
     }
 </script>

src/views/admin/pages/singles/collection-page.vue

@@ -17,6 +17,9 @@ import { mapActions } from 'vuex';
 
 export default {
     name: 'CollectionPage',
+    components: {
+        TainacanCollectionSubheader
+    },
     data(){
         return {
             collectionId: Number
@@ -31,14 +34,6 @@ export default {
             }
         }
     },
-    components: {
-        TainacanCollectionSubheader
-    },
-    methods: {
-        ...mapActions('collection', [
-            'fetchCollectionBasics'
-        ])
-    },
     created(){
         this.collectionId = this.$route.params.collectionId;
         
@@ -47,6 +42,11 @@ export default {
         // Loads to store basic collection info such as name, url, current_user_can_edit... etc.
         this.fetchCollectionBasics({ collectionId: this.collectionId, isContextEdit: true })
             .catch((error) => this.$console.error(error));
+    },
+    methods: {
+        ...mapActions('collection', [
+            'fetchCollectionBasics'
+        ])
     }
 }
 </script>

src/views/admin/pages/singles/item-page.vue

@@ -318,7 +318,6 @@
 
     export default {
         name: 'ItemPage',
-        mixins: [formHooks],
         components: {
             FileItem,
             DocumentItem,
@@ -326,6 +325,7 @@
             ExposersModal,
             AttachmentsList
         },
+        mixins: [formHooks],
         data() {
             return {
                 collectionId: Number,
@@ -355,6 +355,29 @@
                 return this.getTotalAttachments();
             }
         },
+        created() {
+            // Obtains item and collection ID
+            this.collectionId = this.$route.params.collectionId;
+            this.itemId = this.$route.params.itemId;
+
+            // Puts loading on Item Loading
+            this.isLoading = true;
+
+            // Obtains Item
+            this.fetchItem({ 
+                itemId: this.itemId,
+                contextEdit: true,    
+                fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html'       
+            })
+            .then((item) => {
+                this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                    {path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items')},
+                    {path: '', label: item.title}
+                ]);
+                this.loadMetadata();
+            });
+
+        },
         methods: {
             ...mapActions('item', [
                 'fetchItem',
@@ -388,29 +411,6 @@
                     trapFocus: true
                 });
             }
-        },
-        created() {
-            // Obtains item and collection ID
-            this.collectionId = this.$route.params.collectionId;
-            this.itemId = this.$route.params.itemId;
-
-            // Puts loading on Item Loading
-            this.isLoading = true;
-
-            // Obtains Item
-            this.fetchItem({ 
-                itemId: this.itemId,
-                contextEdit: true,    
-                fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html'       
-            })
-            .then((item) => {
-                this.$root.$emit('onCollectionBreadCrumbUpdate', [
-                    {path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items')},
-                    {path: '', label: item.title}
-                ]);
-                this.loadMetadata();
-            });
-
         }
     }
 </script>

src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue

@@ -181,6 +181,24 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
 export default {
     name: "CarouselCollectionsListTheme",
+    components: {
+        swiper,
+        swiperSlide
+    },
+    props: {
+        blockId: String,
+        selectedCollections: Array,
+        maxCollectionsNumber: Number,
+        arrowsPosition: String,
+        autoPlay: false,
+        autoPlaySpeed: Number,
+        loopSlides: Boolean,
+        hideName: Boolean,
+        showCollectionThumbnail: Boolean,
+        tainacanApiRoot: String,
+        tainacanBaseUrl: String,
+        className: String
+    },
     data() {
         return {
             collections: [],
@@ -221,23 +239,9 @@ export default {
             errorMessage: 'No collections found.'
         }
     },
-    components: {
-        swiper,
-        swiperSlide
-    },
-    props: {
-        blockId: String,
-        selectedCollections: Array,
-        maxCollectionsNumber: Number,
-        arrowsPosition: String,
-        autoPlay: false,
-        autoPlaySpeed: Number,
-        loopSlides: Boolean,
-        hideName: Boolean,
-        showCollectionThumbnail: Boolean,
-        tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String
+    created() {
+        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
+        this.fetchCollections();
     },
     methods: {
         fetchCollections() {
@@ -288,11 +292,7 @@ export default {
                 });
             
         },
-    },
-    created() {
-        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
-        this.fetchCollections();
-    },
+    }
 }
 </script>
 

src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.vue

@@ -138,22 +138,6 @@ import debounce from 'lodash/debounce.js';
 
 export default {
     name: "FacetsListTheme",
-    data() {
-        return {
-            facets: [],
-            collection: undefined,
-            facetsRequestSource: undefined,
-            searchString: '',
-            isLoading: false,
-            isLoadingCollection: false,
-            localMaxFacetsNumber: undefined,
-            localOrder: undefined,
-            tainacanAxios: undefined,
-            offset: undefined,
-            totalFacets: 0,
-            lastTerm: undefined
-        }
-    },
     props: {
         metadatumId: String,  
         metadatumType: String,  
@@ -173,6 +157,27 @@ export default {
         tainacanSiteUrl: String,
         className: String
     },
+    data() {
+        return {
+            facets: [],
+            collection: undefined,
+            facetsRequestSource: undefined,
+            searchString: '',
+            isLoading: false,
+            isLoadingCollection: false,
+            localMaxFacetsNumber: undefined,
+            localOrder: undefined,
+            tainacanAxios: undefined,
+            offset: undefined,
+            totalFacets: 0,
+            lastTerm: undefined
+        }
+    },
+    created() {
+        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
+        this.offset = 0;
+        this.fetchFacets();
+    },
     methods: {
         applySearchString: debounce(function(event) { 
 
@@ -283,12 +288,7 @@ export default {
                 default: return '54px';
             }
         }
-    },
-    created() {
-        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
-        this.offset = 0;
-        this.fetchFacets();
-    },
+    }
 }
 </script>
 

src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list-theme.vue

@@ -186,6 +186,30 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
 export default {
     name: "CarouselItemsListTheme",
+    components: {
+        swiper,
+        swiperSlide
+    },
+    props: {
+        blockId: String,
+        collectionId: String,  
+        searchURL: String,
+        selectedItems: Array,
+        loadStrategy: String,
+        maxItemsNumber: Number,
+        arrowsPosition: String,
+        autoPlay: false,
+        autoPlaySpeed: Number,
+        loopSlides: Boolean,
+        hideTitle: Boolean,
+        showCollectionHeader: Boolean,
+        showCollectionLabel: Boolean,
+        collectionBackgroundColor: String,
+        collectionTextColor: String,
+        tainacanApiRoot: String,
+        tainacanBaseUrl: String,
+        className: String
+    },
     data() {
         return {
             items: [],
@@ -225,29 +249,13 @@ export default {
             errorMessage: 'No items found.'
         }
     },
-    components: {
-        swiper,
-        swiperSlide
-    },
-    props: {
-        blockId: String,
-        collectionId: String,  
-        searchURL: String,
-        selectedItems: Array,
-        loadStrategy: String,
-        maxItemsNumber: Number,
-        arrowsPosition: String,
-        autoPlay: false,
-        autoPlaySpeed: Number,
-        loopSlides: Boolean,
-        hideTitle: Boolean,
-        showCollectionHeader: Boolean,
-        showCollectionLabel: Boolean,
-        collectionBackgroundColor: String,
-        collectionTextColor: String,
-        tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String
+    created() {
+        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
+  
+        if (this.showCollectionHeader)
+            this.fetchCollectionForHeader();
+
+        this.fetchItems();
     },
     methods: {
         fetchItems() {
@@ -339,15 +347,7 @@ export default {
                     });
             }
         }
-    },
-    created() {
-        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
-  
-        if (this.showCollectionHeader)
-            this.fetchCollectionForHeader();
-
-        this.fetchItems();
-    },
+    }
 }
 </script>
 

src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue

@@ -270,22 +270,6 @@ import debounce from 'lodash/debounce.js';
 
 export default {
     name: "DynamicItemsListTheme",
-    data() {
-        return {
-            items: [],
-            collection: undefined,
-            itemsRequestSource: undefined,
-            searchString: '',
-            isLoading: false,
-            isLoadingCollection: false,
-            localMaxItemsNumber: undefined,
-            localOrder: undefined,
-            tainacanAxios: undefined,
-            paged: undefined,
-            totalItems: 0,
-            errorMessage: 'No items found.'
-        }
-    },
     props: {
         collectionId: String,  
         showImage: Boolean,
@@ -310,6 +294,31 @@ export default {
         tainacanBaseUrl: String,
         className: String
     },    
+    data() {
+        return {
+            items: [],
+            collection: undefined,
+            itemsRequestSource: undefined,
+            searchString: '',
+            isLoading: false,
+            isLoadingCollection: false,
+            localMaxItemsNumber: undefined,
+            localOrder: undefined,
+            tainacanAxios: undefined,
+            paged: undefined,
+            totalItems: 0,
+            errorMessage: 'No items found.'
+        }
+    },
+    created() {
+        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
+        this.localOrder = this.order;
+  
+        if (this.showCollectionHeader)
+            this.fetchCollectionForHeader();
+       
+        this.fetchItems();
+    },
     methods: {
         applySearchString: debounce(function(event) { 
 
@@ -431,15 +440,6 @@ export default {
             });
             return _.values(partition);
         }
-    },
-    created() {
-        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
-        this.localOrder = this.order;
-  
-        if (this.showCollectionHeader)
-            this.fetchCollectionForHeader();
-       
-        this.fetchItems();
     }
 }
 </script>

src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.vue

@@ -171,6 +171,25 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
 export default {
     name: "CarouselTermsListTheme",
+    components: {
+        swiper,
+        swiperSlide
+    },
+    props: {
+        blockId: String,
+        selectedTerms: Array,
+        maxTermsNumber: Number,
+        arrowsPosition: String,
+        autoPlay: false,
+        autoPlaySpeed: Number,
+        loopSlides: Boolean,
+        hideName: Boolean,
+        showTermThumbnail: Boolean,
+        tainacanApiRoot: String,
+        tainacanBaseUrl: String,
+        className: String,
+        taxonomyId: String
+    },
     data() {
         return {
             terms: [],
@@ -211,24 +230,9 @@ export default {
             errorMessage: 'No terms found.'
         }
     },
-    components: {
-        swiper,
-        swiperSlide
-    },
-    props: {
-        blockId: String,
-        selectedTerms: Array,
-        maxTermsNumber: Number,
-        arrowsPosition: String,
-        autoPlay: false,
-        autoPlaySpeed: Number,
-        loopSlides: Boolean,
-        hideName: Boolean,
-        showTermThumbnail: Boolean,
-        tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String,
-        taxonomyId: String
+    created() {
+        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
+        this.fetchTerms();
     },
     methods: {
         fetchTerms() {
@@ -278,11 +282,7 @@ export default {
                 });
             
         },
-    },
-    created() {
-        this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
-        this.fetchTerms();
-    },
+    }
 }
 </script>
 

src/views/roles/pages/role-edition-form.vue

@@ -268,6 +268,59 @@
                 return _.groupBy(Object.keys(this.repositoryCapabilities), this.getCapabilityRelatedEntity);
             }
         },
+        created() {
+            this.roleSlug = this.$route.params.roleSlug;
+
+            if (this.roleSlug !== 'new') {
+                this.isLoadingRole = true;
+                this.fetchRole(this.roleSlug)
+                    .then((originalRole) => {
+                        this.role = JSON.parse(JSON.stringify(originalRole));
+                        this.isLoadingRole = false;
+                    }).catch(() => {
+                        this.isLoadingRole = false;
+                    });
+            } else if (this.roleSlug === 'new' && this.$route.query.template) {
+                this.isLoadingRole = true;
+                this.fetchRole(this.$route.query.template)
+                    .then((originalRole) => {
+                        this.role = JSON.parse(JSON.stringify(originalRole));
+                        this.role.name = this.role.name + ' ' + this.$i18n.get('(Copy)');
+                        this.role.slug = undefined;
+                        this.isLoadingRole = false;
+                    }).catch(() => {
+                        this.isLoadingRole = false;
+                    });
+            }   else {
+                this.role = {
+                    name: '',
+                    capabilities: {}
+                }
+            }
+
+            this.isLoadingCapabilities = true;
+            this.fetchCapabilities({ collectionId: undefined })
+                .then(() => {
+                    this.isLoadingCapabilities = false;
+                }).catch(() => {
+                    this.isLoadingCapabilities = false;
+                });
+
+            this.isLoadingCollections = true;
+            this.fetchAllCollectionNames()
+                .then((resp) => {
+                    resp.request
+                        .then((collections) => {
+                            this.collections = collections;
+                            this.isLoadingCollections = false;
+                        }).catch(() => {
+                            this.isLoadingCollections = false;
+                        });
+                })
+                .catch(() => {
+                    this.isLoadingCollections = false;
+                }); 
+        },
         methods: {
             ...mapActions('collection', [
                 'fetchAllCollectionNames'
@@ -334,59 +387,6 @@
                 else
                     return this.$i18n.get('Repository')
             }
-        },
-        created() {
-            this.roleSlug = this.$route.params.roleSlug;
-
-            if (this.roleSlug !== 'new') {
-                this.isLoadingRole = true;
-                this.fetchRole(this.roleSlug)
-                    .then((originalRole) => {
-                        this.role = JSON.parse(JSON.stringify(originalRole));
-                        this.isLoadingRole = false;
-                    }).catch(() => {
-                        this.isLoadingRole = false;
-                    });
-            } else if (this.roleSlug === 'new' && this.$route.query.template) {
-                this.isLoadingRole = true;
-                this.fetchRole(this.$route.query.template)
-                    .then((originalRole) => {
-                        this.role = JSON.parse(JSON.stringify(originalRole));
-                        this.role.name = this.role.name + ' ' + this.$i18n.get('(Copy)');
-                        this.role.slug = undefined;
-                        this.isLoadingRole = false;
-                    }).catch(() => {
-                        this.isLoadingRole = false;
-                    });
-            }   else {
-                this.role = {
-                    name: '',
-                    capabilities: {}
-                }
-            }
-
-            this.isLoadingCapabilities = true;
-            this.fetchCapabilities({ collectionId: undefined })
-                .then(() => {
-                    this.isLoadingCapabilities = false;
-                }).catch(() => {
-                    this.isLoadingCapabilities = false;
-                });
-
-            this.isLoadingCollections = true;
-            this.fetchAllCollectionNames()
-                .then((resp) => {
-                    resp.request
-                        .then((collections) => {
-                            this.collections = collections;
-                            this.isLoadingCollections = false;
-                        }).catch(() => {
-                            this.isLoadingCollections = false;
-                        });
-                })
-                .catch(() => {
-                    this.isLoadingCollections = false;
-                }); 
         }
     }
 </script>

src/views/roles/pages/roles-list.vue

@@ -255,6 +255,15 @@
                 return roles;
             }
         },
+        created() {
+            this.isLoadingRoles = true;
+            this.fetchRoles()
+                .then(() => {
+                    this.isLoadingRoles = false;
+                }).catch(() => {
+                    this.isLoadingRoles = false;
+                });
+        },
         methods: {
             ...mapActions('capability', [
                 'fetchRoles',
@@ -294,15 +303,6 @@
                         this.$forceUpdate();
                     })
             }
-        },
-        created() {
-            this.isLoadingRoles = true;
-            this.fetchRoles()
-                .then(() => {
-                    this.isLoadingRoles = false;
-                }).catch(() => {
-                    this.isLoadingRoles = false;
-                });
         }
     }
 </script>

src/views/theme-search/components/view-mode-masonry.vue

@@ -80,6 +80,14 @@ export default {
         itemsPerPage: Number,
         isFiltersMenuCompressed: Boolean
     },
+    data () {
+        return {
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
+            itemColumnWidth: Number,
+            containerWidthDiscount: Number,
+            masonryCols: {default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}
+        }
+    },
     watch: {
         isFiltersMenuCompressed() {
             if (this.$refs.masonryWrapper != undefined && 
@@ -103,13 +111,22 @@ export default {
             this.masonryCols = obj;
         }
     },
-    data () {
-        return {
-            thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
-            itemColumnWidth: Number,
-            containerWidthDiscount: Number,
-            masonryCols: {default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}
-        }
+    mounted() {
+
+        if (this.$refs.masonryWrapper != undefined && 
+            this.$refs.masonryWrapper.children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
+                this.recalculateItemsHeight();
+            } else
+                this.itemColumnWidth = 202;
+    },
+    created() {
+        window.addEventListener('resize', this.recalculateItemsHeight);  
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.recalculateItemsHeight);
     },
     methods: {
         ...mapGetters('search', [
@@ -154,23 +171,6 @@ export default {
             }
             this.$forceUpdate();
         }, 500)
-    },
-    mounted() {
-
-        if (this.$refs.masonryWrapper != undefined && 
-            this.$refs.masonryWrapper.children[0] != undefined && 
-            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
-            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
-                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
-                this.recalculateItemsHeight();
-            } else
-                this.itemColumnWidth = 202;
-    },
-    created() {
-        window.addEventListener('resize', this.recalculateItemsHeight);  
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.recalculateItemsHeight);
     }
 }
 </script>

src/views/theme-search/components/view-mode-records.vue

@@ -108,17 +108,17 @@ export default {
         isLoading: false,
         isFiltersMenuCompressed: Boolean
     },
-    computed: {
-        amountOfDisplayedMetadata() {
-            return this.displayedMetadata.filter((metadata) => metadata.display).length;
-        }
-    },
     data () {
         return {
             thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
             masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}
         }
     },
+    computed: {
+        amountOfDisplayedMetadata() {
+            return this.displayedMetadata.filter((metadata) => metadata.display).length;
+        }
+    },
     watch: {
         isFiltersMenuCompressed() {
             if (this.$refs.masonryWrapper != undefined && 
@@ -141,6 +141,23 @@ export default {
             this.masonryCols = obj;
         }
     },
+    mounted() {
+
+        if (this.$refs.masonryWrapper != undefined && 
+            this.$refs.masonryWrapper.children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
+                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
+                this.recalculateContainerWidth();
+            } else
+                this.itemColumnWidth = 202;
+    },
+    created() {
+        window.addEventListener('resize', this.recalculateContainerWidth);  
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.recalculateContainerWidth);
+    },
     methods: {
         goToItemPage(item) {
             window.location.href = item.url;   
@@ -174,23 +191,6 @@ export default {
             }
             this.$forceUpdate();
         }, 500)
-    },
-    mounted() {
-
-        if (this.$refs.masonryWrapper != undefined && 
-            this.$refs.masonryWrapper.children[0] != undefined && 
-            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
-            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
-                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
-                this.recalculateContainerWidth();
-            } else
-                this.itemColumnWidth = 202;
-    },
-    created() {
-        window.addEventListener('resize', this.recalculateContainerWidth);  
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.recalculateContainerWidth);
     }
 }
 </script>

src/views/theme-search/components/view-mode-slideshow.vue

@@ -310,6 +310,11 @@ import CircularCounter from './circular-counter.vue';
  
 export default {
     name: 'ViewModeSlideshow',
+    components: {
+        swiper,
+        swiperSlide,
+        CircularCounter
+    },
     props: {
         collectionId: Number,
         displayedMetadata: Array,
@@ -319,11 +324,6 @@ export default {
         hideControls: true,
         isSwiping: false
     },  
-    components: {
-        swiper,
-        swiperSlide,
-        CircularCounter
-    },
     data () {
         return {
             slideItems: [],
@@ -488,6 +488,26 @@ export default {
             }
         }
     },
+    mounted() {
+        this.minPage = this.page;
+        this.maxPage = this.page;
+
+        if (this.$refs.mySwiper.swiper != undefined) {
+            this.$refs.mySwiper.swiper.initialSlide = this.slideIndex;
+        }
+
+        // Adds clipped class to root html
+        document.documentElement.scrollTo(0,0);
+        document.documentElement.classList.add('is-clipped');
+    },
+    beforeDestroy() {
+        clearInterval(this.intervalId);
+        if (this.$refs.mySwiper.swiper)
+            this.$refs.mySwiper.swiper.destroy();
+
+        // Remove clipped class from root html
+        document.documentElement.classList.remove('is-clipped');
+    },
     methods: {
         ...mapActions('item', [
             'fetchItem',
@@ -626,26 +646,6 @@ export default {
         closeSlideViewMode() {
             this.$parent.onChangeViewMode(this.$parent.defaultViewMode);
         }
-    },
-    mounted() {
-        this.minPage = this.page;
-        this.maxPage = this.page;
-
-        if (this.$refs.mySwiper.swiper != undefined) {
-            this.$refs.mySwiper.swiper.initialSlide = this.slideIndex;
-        }
-
-        // Adds clipped class to root html
-        document.documentElement.scrollTo(0,0);
-        document.documentElement.classList.add('is-clipped');
-    },
-    beforeDestroy() {
-        clearInterval(this.intervalId);
-        if (this.$refs.mySwiper.swiper)
-            this.$refs.mySwiper.swiper.destroy();
-
-        // Remove clipped class from root html
-        document.documentElement.classList.remove('is-clipped');
     }
 }
 </script>