From 1bb26a25e3f02c127d1d08fc7e692e0bcd659f53 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 19 Oct 2018 12:56:42 -0300
Subject: [PATCH 1/3] Adds CollectionEvent Page to router. Creates breadcrumb
 event logic for receiving paths from pages in CollectionSubheader.

---
 .../edition/collection-edition-form.vue       |   2 +
 .../components/edition/item-edition-form.vue  |  22 +++
 src/admin/components/lists/events-list.vue    |   5 +-
 src/admin/components/lists/filters-list.vue   |   6 +-
 src/admin/components/lists/metadata-list.vue  |   4 +
 .../tainacan-collection-subheader.vue         | 134 ++++++------------
 src/admin/js/main.js                          |   3 +-
 src/admin/js/router.js                        |   1 +
 src/admin/js/utilities.js                     |   3 +
 src/admin/pages/lists/events-page.vue         |   3 +
 src/admin/pages/lists/items-page.vue          |   4 +
 src/admin/pages/singles/event-page.vue        |  21 +--
 src/admin/pages/singles/item-page.vue         |   9 +-
 13 files changed, 109 insertions(+), 108 deletions(-)

diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 22018a4b5..23ff992a6 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -811,6 +811,8 @@ 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;
 
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index f5f5b4e74..174a202fa 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -765,6 +765,12 @@ export default {
             // Puts loading on Draft Item creation
             this.isLoading = true;
 
+            // Updates Collection BreadCrumb
+            this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+                { path: '', label: this.$i18n.get('new') }
+            ]);
+
             // Creates draft Item
             let data = {collection_id: this.form.collectionId, status: 'auto-draft', comment_status: this.form.comment_status};
             this.fillExtraFormData(data);
@@ -976,6 +982,22 @@ export default {
             this.fetchItem(this.itemId).then(res => {
                 this.item = res;
 
+                // Updates Collection BreadCrumb
+                if (this.isOnSequenceEdit) {
+                    this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                        { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+                        { path: '', label: this.$i18n.get('sequence') },
+                        { path: '', label: this.item.title },   
+                        { path: '', label: this.$i18n.get('edit') }
+                    ]);
+                } else {
+                    this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                        { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+                        { path: this.$routerHelper.getItemPath(this.form.collectionId, this.itemId), label: this.item.title },
+                        { path: '', label: this.$i18n.get('edit') }
+                    ]);
+                }
+
                 // Fills hook forms with it's real values 
                 this.$nextTick()
                     .then(() => {
diff --git a/src/admin/components/lists/events-list.vue b/src/admin/components/lists/events-list.vue
index 23e81031d..8f7ad2cb6 100644
--- a/src/admin/components/lists/events-list.vue
+++ b/src/admin/components/lists/events-list.vue
@@ -144,7 +144,10 @@
             //     this.notApprove(eventId);
             // },
             goToEventPage(eventId) {
-                this.$router.push(this.$routerHelper.getEventPath(eventId));
+                if (this.$route.params.collectionId == undefined)
+                    this.$router.push(this.$routerHelper.getEventPath(eventId));
+                else
+                    this.$router.push(this.$routerHelper.getCollectionEventPath(this.$route.params.collectionId, eventId));
             }
         }
     }
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index f7e099ac3..3f52b86f3 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -215,7 +215,7 @@ export default {
             openedFilterId: '',
             formWithErrors: '',
             editForms: {},
-            allowedFilterTypes: [],
+            allowedFilterTypes: [], 
             selectedFilterType: {},
             choosenMetadatum: {},
             newIndex: 0,
@@ -451,10 +451,12 @@ export default {
             delete this.editForms[this.openedFilterId];
             this.openedFilterId = '';
         }
-
     },
    mounted() {
 
+        if (!this.isRepositoryLevel)
+            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('filter') }]);
+
         this.isRepositoryLevel = this.$route.name == 'FiltersPage' ? true : false;
         if (this.isRepositoryLevel)
             this.collectionId = 'default';
diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue
index 4b48fe608..1738212cf 100644
--- a/src/admin/components/lists/metadata-list.vue
+++ b/src/admin/components/lists/metadata-list.vue
@@ -760,6 +760,10 @@ export default {
         }
     },
     mounted() {
+
+        if (!this.isRepositoryLevel)
+            this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
+
         this.cleanMetadata();
         this.isLoadingMetadatumTypes = true;
         this.isLoadingMetadata = true;
diff --git a/src/admin/components/navigation/tainacan-collection-subheader.vue b/src/admin/components/navigation/tainacan-collection-subheader.vue
index b68d1fcc9..7e3ec96e8 100644
--- a/src/admin/components/navigation/tainacan-collection-subheader.vue
+++ b/src/admin/components/navigation/tainacan-collection-subheader.vue
@@ -28,7 +28,21 @@
                         <router-link 
                                 tag="a" 
                                 :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> > 
-                        <span 
+                        <router-link 
+                                tag="a" 
+                                :to="{ path: collectionBreadCrumbItem.url, query: { fromBreadcrumb: true }}">{{ collectionBreadCrumbItem.name }}</router-link> 
+                        <template v-for="(childBreadCrumbItem, index) of childrenBreadCrumbItems">
+                            <span :key="index"> > </span>
+                            <router-link    
+                                    :key="index"
+                                    v-if="childBreadCrumbItem.path != ''"
+                                    tag="a"
+                                    :to="childBreadCrumbItem.path">{{ childBreadCrumbItem.label }}</router-link>
+                            <span 
+                                    :key="index"
+                                    v-else>{{ childBreadCrumbItem.label }}</span>
+                        </template>
+                        <!-- <span 
                                 v-for="(pathItem, index) in arrayRealPath" 
                                 :key="index">
                             <router-link
@@ -39,7 +53,7 @@
                             </router-link>
                             <span v-if="index == arrayRealPath.length - 1">{{ arrayViewPath[index] }}</span>
                             <span v-if="index != arrayRealPath.length - 1 && arrayViewPath[index]"> > </span>
-                        </span>   
+                        </span>    -->
                     </nav>
                 </div>
             </div>
@@ -137,7 +151,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
 import ActivitiesIcon from '../other/activities-icon.vue';
 
 export default {
@@ -146,10 +160,10 @@ export default {
         return {
             activeRoute: 'ItemsList',
             pageTitle: '',
-            arrayRealPath: [],
-            arrayViewPath: [],
             activeRouteName: '',
-            collectionNameRequestCancel: undefined
+            collectionNameRequestCancel: undefined,
+            collectionBreadCrumbItem: {},
+            childrenBreadCrumbItems: []
         }
     },
     components: {
@@ -164,11 +178,6 @@ export default {
                 this.activeRoute = to.name;
 
                 this.pageTitle = this.$route.meta.title;
-
-                this.arrayRealPath = to.path.split("/");
-                this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
-                
-                this.generateViewPath();
             }
         }
     },
@@ -176,81 +185,8 @@ export default {
         ...mapActions('collection', [
             'fetchCollectionNameAndURL'
         ]),
-        ...mapGetters('collection', [
-            'getCollectionName',
-            'getCollection'
-        ]),
-        ...mapActions('item', [
-            'fetchItemTitle'
-        ]),
-        ...mapGetters('item', [
-            'getItemTitle'
-        ]),
-        ...mapActions('taxonomy', [
-            'fetchTaxonomyName'
-        ]),
-        ...mapGetters('taxonomy', [
-            'getTaxonomyName'
-        ]),
-        ...mapActions('event', [
-            'fetchEventTitle'
-        ]),
-        generateViewPath() {
-
-            for (let i = 0; i < this.arrayRealPath.length; i++) {
-                
-                this.arrayViewPath.push('');
-                
-                if (!isNaN(this.arrayRealPath[i]) && i > 0) {
-
-                    switch(this.arrayRealPath[i-1]) {
-                        case 'collections':
-                            // Cancels previous Request
-                            if (this.collectionNameRequestCancel != undefined)
-                                this.collectionNameRequestCancel.cancel('Collection name Canceled.');
-
-                            this.fetchCollectionNameAndURL(this.arrayRealPath[i])
-                                .then((resp) => {
-                                    resp.request
-                                        .then(collection => this.arrayViewPath.splice(i, 1, collection.name))
-                                        .catch((error) => this.$console.error(error));
-
-                                    this.collectionNameRequestCancel = resp.source;
-                                })
-                                .catch((error) => this.$console.error(error));
-
-                            break;
-                        case 'items':
-                            this.fetchItemTitle(this.arrayRealPath[i])
-                                .then(itemTitle => this.arrayViewPath.splice(i, 1, itemTitle))
-                                .catch((error) => this.$console.error(error));
-                            break;
-                        case 'taxonomies':
-                            this.fetchTaxonomyName(this.arrayRealPath[i])
-                                .then(taxonomyName => this.arrayViewPath.splice(i, 1, taxonomyName))
-                                .catch((error) => this.$console.error(error));
-                            break;
-                        case 'events':
-                            this.fetchEventTitle(this.arrayRealPath[i])
-                                .then(eventName => this.arrayViewPath.splice(i, 1, eventName))
-                                .catch((error) => this.$console.error(error));
-                            break;
-                    }
-                    
-                } else if (this.arrayRealPath[i-1] == 'sequence' && i > 0){
-                    if (this.$route.params.itemPosition != undefined) {
-                        this.arrayViewPath.splice(i, 1, this.$i18n.get('label_editing_item_number') + this.$route.params.itemPosition);
-                    } else
-                        this.arrayViewPath.splice(i, 1, this.$i18n.get('edit'));
-                } else {
-                    if(this.arrayRealPath[i] == 'undefined'){
-                        this.arrayViewPath.splice(i, 1, '');
-                    } else {
-                        this.arrayViewPath.splice(i, 1, this.$i18n.get(this.arrayRealPath[i]));
-                    }
-                }
-                
-            }
+        collectionBreadCrumbUpdate(breadCrumbItems) {
+            this.childrenBreadCrumbItems = breadCrumbItems;
         }
     },
     created() {
@@ -258,15 +194,31 @@ export default {
 
         this.pageTitle = this.$route.meta.title;
 
-        this.arrayRealPath = this.$route.path.split("/");
-        this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
-
-        this.generateViewPath();
+        this.$root.$on('onCollectionBreadCrumbUpdate', this.collectionBreadCrumbUpdate);
     },
-    beforeDestroy() {
+    mounted() {
+
         // Cancels previous Request
         if (this.collectionNameRequestCancel != undefined)
             this.collectionNameRequestCancel.cancel('Collection name Canceled.');
+            
+        this.fetchCollectionNameAndURL(this.id)
+            .then((resp) => {
+                resp.request
+                    .then(collection => this.collectionBreadCrumbItem = { url: this.$routerHelper.getCollectionPath(this.id), name: collection.name })
+                    .catch((error) => this.$console.error(error));
+                this.collectionNameRequestCancel = resp.source;
+            })
+            .catch((error) => this.$console.error(error));
+
+    },
+    beforeDestroy() {
+
+        // Cancels previous Request
+        if (this.collectionNameRequestCancel != undefined)
+            this.collectionNameRequestCancel.cancel('Collection name Canceled.');
+
+        this.$root.$on('onCollectionBreadCrumbUpdate', this.collectionBreadCrumbUpdate);
     }
 }
 </script>
diff --git a/src/admin/js/main.js b/src/admin/js/main.js
index 3a3051b87..bd856d720 100644
--- a/src/admin/js/main.js
+++ b/src/admin/js/main.js
@@ -93,7 +93,8 @@ Vue.use(eventBusSearch, { store: store, router: router});
 // Changing title of pages
 router.beforeEach((to, from, next) => {
     document.title = to.meta.title;
-    next();
+    if (next() != undefined)
+        next();
 });
 
 new Vue({
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index fd625de9e..d75b0f991 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -52,6 +52,7 @@ const routes = [
         { path: 'metadata', component: MetadataList, name: 'MetadataList', meta: {title: i18nGet('title_collection_metadata_edition'), icon: 'folder-multiple'} },
         { path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },
         { path: 'events', component: EventsPage, name: 'CollectionEventsPage', meta: {title: i18nGet('title_collection_events'), icon: 'flash'} },
+        { path: 'events/:eventId', name: 'EventPage', component: EventPage, meta: {title: i18nGet('title_event_page'), icon: 'flash'} },
         { path: 'sequence/:sequenceId', name: 'SavedSequenceEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item'), icon: 'folder-multiple'} },
         { path: 'sequence/:sequenceId/:itemPosition', name: 'SequenceEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item'), icon: 'folder-multiple'} },
     ]
diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js
index b711c5bbf..e18452aec 100644
--- a/src/admin/js/utilities.js
+++ b/src/admin/js/utilities.js
@@ -236,6 +236,9 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
         getImporterPath(importerType, sessionId) {
             return '/importers/' + importerType + '/' + sessionId;
         },
+        getCollectionEventPath(collectionId, eventId) {
+            return '/collections/' + collectionId + '/events/' + eventId;
+        },
         // New
         getNewCollectionPath() {
             return '/collections/new';
diff --git a/src/admin/pages/lists/events-page.vue b/src/admin/pages/lists/events-page.vue
index b22c369f4..91ea63053 100644
--- a/src/admin/pages/lists/events-page.vue
+++ b/src/admin/pages/lists/events-page.vue
@@ -285,6 +285,9 @@
             this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
         },
         mounted(){
+            if (!this.isRepositoryLevel)
+                this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('events') }]);
+
             if (this.$route.query.tab == 'processes' && this.isRepositoryLevel)
                 this.tab = 'processes';
 
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index b6807f0c8..86d71bd51 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1209,6 +1209,10 @@
             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';
diff --git a/src/admin/pages/singles/event-page.vue b/src/admin/pages/singles/event-page.vue
index e7319d300..65bec2792 100644
--- a/src/admin/pages/singles/event-page.vue
+++ b/src/admin/pages/singles/event-page.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
         <div class="is-fullheight">
-            <div class="page-container repository-level-page">
+            <div 
+                    class="page-container"
+                    :class="{ 'repository-level-page': $route.params.collectionId == undefined }">
                 <tainacan-title/>
                 <h1 class="event-titles">{{ event.description }}</h1>
                 <div
@@ -94,21 +96,20 @@
         created() {
             this.eventId = parseInt(this.$route.params.eventId);
 
-            this.fetchEvent(this.eventId);
+            this.fetchEvent(this.eventId).then(() => {
+
+                if (this.$route.params.collectionId != undefined)
+                    this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                        { path: this.$routerHelper.getCollectionEventsPath(this.$route.params.collectionId), label: this.$i18n.get('events') },
+                        { path: '', label: this.event.title}
+                    ]);
+            });
         }
 
     }
 </script>
 
 <style>
-    .back-hlight {
-        background-color: rgb(231, 255, 237);
-    }
-
-    .bottom-space-tainacan {
-        margin-bottom: 0.2rem;
-    }
-
     .event-titles {
         font-size: 20px;
         font-weight: 500;
diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue
index 976a3b675..aea1f0388 100644
--- a/src/admin/pages/singles/item-page.vue
+++ b/src/admin/pages/singles/item-page.vue
@@ -415,7 +415,11 @@
             });
             
             // Obtains Item
-            this.fetchItem(this.itemId).then(() => {
+            this.fetchItem(this.itemId).then((item) => {
+                this.$root.$emit('onCollectionBreadCrumbUpdate', [
+                    { path: this.$routerHelper.getCollectionPath(this.collectionId), label: this.$i18n.get('items') },
+                    { path: '', label: item.title}
+                ]);
                 this.loadMetadata();
             });
 
@@ -431,8 +435,7 @@
             this.fetchCollectionAllowComments(this.collectionId).then((collectionAllowComments) => {
                 this.collectionAllowComments = collectionAllowComments;
             });
-        }
-
+        } 
     }
 </script>
 

From a263ce072cfd34f1e3128567aaeee0e971eb83fb Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 22 Oct 2018 14:08:36 -0300
Subject: [PATCH 2/3] Makes query fromBreadcrumb force reloading items list
 event when route path hasn't changed.

---
 src/admin/js/router.js               | 2 +-
 src/admin/pages/lists/items-page.vue | 4 ++--
 src/js/event-bus-search.js           | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index d75b0f991..0e512d518 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -52,7 +52,7 @@ const routes = [
         { path: 'metadata', component: MetadataList, name: 'MetadataList', meta: {title: i18nGet('title_collection_metadata_edition'), icon: 'folder-multiple'} },
         { path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },
         { path: 'events', component: EventsPage, name: 'CollectionEventsPage', meta: {title: i18nGet('title_collection_events'), icon: 'flash'} },
-        { path: 'events/:eventId', name: 'EventPage', component: EventPage, meta: {title: i18nGet('title_event_page'), icon: 'flash'} },
+        { path: 'events/:eventId', name: 'CollectionEventPage', component: EventPage, meta: {title: i18nGet('title_event_page'), icon: 'flash'} },
         { path: 'sequence/:sequenceId', name: 'SavedSequenceEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item'), icon: 'folder-multiple'} },
         { path: 'sequence/:sequenceId/:itemPosition', name: 'SequenceEditionForm', component: ItemEditionForm, meta: {title:  i18nGet('title_edit_item'), icon: 'folder-multiple'} },
     ]
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 86d71bd51..ef0823907 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1069,7 +1069,7 @@
                                 '3': (this.isRepositoryLevel ? 'title' : null),
                                 '4': (this.isRepositoryLevel ? 'description' : null),
                             });
-
+                            
                             // Sorting metadata
                             if (this.isRepositoryLevel) {
                                 this.sortingMetadata.push({
@@ -1188,7 +1188,7 @@
                  * at collection level to items page at repository level
                  */
 
-                if (this.isOnTheme || this.collectionId === to.params.collectionId) {
+                if (this.isOnTheme || this.collectionId === to.params.collectionId || to.query.fromBreadcrumb) {
                     this.prepareMetadata();
                     this.prepareFilters();
                 }
diff --git a/src/js/event-bus-search.js b/src/js/event-bus-search.js
index d15823f8b..8558cb7e5 100644
--- a/src/js/event-bus-search.js
+++ b/src/js/event-bus-search.js
@@ -47,6 +47,7 @@ export default {
             },
             watch: {
                 '$route'  (to, from) {
+
                     // Should set Collection ID from URL only when in admin.
                     if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
                         this.collectionId = !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId);

From 8bffc50f45f9abe98cc55c0877980c1d3b33989c Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 22 Oct 2018 15:15:09 -0300
Subject: [PATCH 3/3] Adds new logic for creating breadcrumbs to repository
 level pages.

---
 .../edition/importer-edition-form.vue         |   6 +-
 .../edition/taxonomy-edition-form.vue         |  10 +-
 .../tainacan-collection-subheader.vue         |  17 +--
 .../components/navigation/tainacan-title.vue  | 113 +++---------------
 src/admin/js/utilities.js                     |   6 +-
 .../pages/lists/available-importers-page.vue  |   3 +-
 src/admin/pages/lists/collections-page.vue    |   3 +-
 src/admin/pages/lists/events-page.vue         |   3 +-
 src/admin/pages/lists/filters-page.vue        |   3 +-
 src/admin/pages/lists/items-page.vue          |   2 +-
 src/admin/pages/lists/metadata-page.vue       |   3 +-
 src/admin/pages/lists/taxonomies-page.vue     |   3 +-
 src/admin/pages/singles/event-page.vue        |   6 +-
 13 files changed, 53 insertions(+), 125 deletions(-)

diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue
index a0a06ea74..85563f865 100644
--- a/src/admin/components/edition/importer-edition-form.vue
+++ b/src/admin/components/edition/importer-edition-form.vue
@@ -1,7 +1,11 @@
 <template>
     <div 
             class="repository-level-page page-container">
-        <tainacan-title />
+        <tainacan-title 
+                :bread-crumb-items="[
+                    { path: $routerHelper.getAvailableImportersPath(), label: $i18n.get('importers') },
+                    { path: '', label: importerType != undefined ? importerType : $i18n.get('title_importer_page') }
+                ]"/>
         <form   
                 @click="formErrorMessage = ''"
                 class="tainacan-form" 
diff --git a/src/admin/components/edition/taxonomy-edition-form.vue b/src/admin/components/edition/taxonomy-edition-form.vue
index 733ddee16..8e558ccd9 100644
--- a/src/admin/components/edition/taxonomy-edition-form.vue
+++ b/src/admin/components/edition/taxonomy-edition-form.vue
@@ -1,7 +1,11 @@
 <template>
     <div>
         <div class="page-container repository-level-page">
-            <tainacan-title />
+            <tainacan-title 
+                    :bread-crumb-items="[
+                        { path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') },
+                        { path: '', label: (taxonomy!= null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') }
+                    ]"/>
             <b-tabs 
                     @change="onChangeTab($event)"
                     v-model="tabIndex">    
@@ -278,7 +282,7 @@
                         this.formErrorMessage = '';
                         this.editFormErrors = {};
 
-                        this.$router.push(this.$routerHelper.getPath());
+                        this.$router.push(this.$routerHelper.getTaxonomiesPath());
                     })
                     .catch((errors) => {
                         for (let error of errors.errors) {
@@ -350,7 +354,7 @@
                 this.editFormErrors[attribute] = undefined;
             },
             cancelBack(){
-                this.$router.push(this.$routerHelper.getPath());
+                this.$router.go(-1);
             },
             labelNewTerms(){
                 return ( this.form.allowInsert === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
diff --git a/src/admin/components/navigation/tainacan-collection-subheader.vue b/src/admin/components/navigation/tainacan-collection-subheader.vue
index 7e3ec96e8..afcbde42a 100644
--- a/src/admin/components/navigation/tainacan-collection-subheader.vue
+++ b/src/admin/components/navigation/tainacan-collection-subheader.vue
@@ -27,12 +27,13 @@
                     <nav class="breadcrumbs">
                         <router-link 
                                 tag="a" 
-                                :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> > 
+                                :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link>
+                        &nbsp;>&nbsp; 
                         <router-link 
                                 tag="a" 
                                 :to="{ path: collectionBreadCrumbItem.url, query: { fromBreadcrumb: true }}">{{ collectionBreadCrumbItem.name }}</router-link> 
                         <template v-for="(childBreadCrumbItem, index) of childrenBreadCrumbItems">
-                            <span :key="index"> > </span>
+                            <span :key="index">&nbsp;>&nbsp;</span>
                             <router-link    
                                     :key="index"
                                     v-if="childBreadCrumbItem.path != ''"
@@ -42,18 +43,6 @@
                                     :key="index"
                                     v-else>{{ childBreadCrumbItem.label }}</span>
                         </template>
-                        <!-- <span 
-                                v-for="(pathItem, index) in arrayRealPath" 
-                                :key="index">
-                            <router-link
-                                    v-if="index < arrayRealPath.length - 1" 
-                                    tag="a" 
-                                    :to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
-                                {{ arrayViewPath[index] }}
-                            </router-link>
-                            <span v-if="index == arrayRealPath.length - 1">{{ arrayViewPath[index] }}</span>
-                            <span v-if="index != arrayRealPath.length - 1 && arrayViewPath[index]"> > </span>
-                        </span>    -->
                     </nav>
                 </div>
             </div>
diff --git a/src/admin/components/navigation/tainacan-title.vue b/src/admin/components/navigation/tainacan-title.vue
index 539adf504..8d60d19d9 100644
--- a/src/admin/components/navigation/tainacan-title.vue
+++ b/src/admin/components/navigation/tainacan-title.vue
@@ -13,118 +13,44 @@
                 class="breadcrumbs">
             <router-link 
                     tag="a" 
-                    :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> > 
-            <span 
-                    v-for="(pathItem, index) in arrayRealPath" 
-                    :key="index">
-                <router-link 
-                        tag="a" 
-                        :to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
-                    {{ arrayViewPath[index] }}
-                </router-link>
-                <span v-if="index != arrayRealPath.length - 1"> > </span>
-            </span>   
+                    :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link>
+            <template v-for="(breadCrumbItem, index) of breadCrumbItems">
+                <span :key="index">&nbsp;>&nbsp;</span>
+                <router-link    
+                        :key="index"
+                        v-if="breadCrumbItem.path != ''"
+                        tag="a"
+                        :to="breadCrumbItem.path">{{ breadCrumbItem.label }}</router-link>
+                <span 
+                        :key="index"
+                        v-else>{{ breadCrumbItem.label }}</span>
+            </template>   
         </nav>
 
     </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
-
 export default {
     name: 'TainacanTitle',
     data(){
         return {
             isRepositoryLevel: true,
             pageTitle: '',
-            arrayRealPath: [],
-            arrayViewPath: [],
             activeRouteName: '',
-            entityName: ''
+            breadCrumbItem: {}
         }
     },
-    methods: {
-        ...mapActions('collection', [
-            'fetchCollectionNameAndURL'
-        ]),
-        ...mapGetters('collection', [
-            'getCollectionName'
-        ]),
-        ...mapActions('item', [
-            'fetchItemTitle'
-        ]),
-        ...mapGetters('item', [
-            'getItemTitle'
-        ]),
-        ...mapActions('taxonomy', [
-            'fetchTaxonomyName'
-        ]),
-        ...mapGetters('taxonomy', [
-            'getTaxonomyName'
-        ]),
-        ...mapActions('event', [
-            'fetchEventTitle'
-        ]),
-        ...mapActions('importer', [
-            'fetchAvailableImporters'
-        ]),
-        generateViewPath() {
-
-            for (let i = 0; i < this.arrayRealPath.length; i++) {
-                
-                this.arrayViewPath.push('');
-
-                if (!isNaN(this.arrayRealPath[i]) && i > 0) {
-                    
-                    switch(this.arrayRealPath[i-1]) {
-                        case 'collections':
-                            this.fetchCollectionNameAndURL(this.arrayRealPath[i])
-                                .then(collection => { this.arrayViewPath.splice(i, 1, collection.name); this.entityName = collection.name; })
-                                .catch((error) => this.$console.error(error));
-                            break;
-                        case 'items':
-                            this.fetchItemTitle(this.arrayRealPath[i])
-                                .then(itemName => { this.arrayViewPath.splice(i, 1, itemName); this.entityName = itemName; })
-                                .catch((error) => this.$console.error(error));
-                            break;
-                        case 'taxonomies':
-                            this.fetchTaxonomyName(this.arrayRealPath[i])
-                                .then(taxonomyName => this.arrayViewPath.splice(i, 1, taxonomyName))
-                                .catch((error) => this.$console.error(error));
-                            break;
-                        case 'events':
-                            this.fetchEventTitle(this.arrayRealPath[i])
-                                .then(eventName => this.arrayViewPath.splice(i, 1, eventName))
-                                .catch((error) => this.$console.error(error));
-                            break;
-        
-                    }
-                    
-                } else if (this.arrayRealPath[i-1] == 'importers' && i > 0){
-                    this.fetchAvailableImporters()
-                        .then(importers => { 
-                            this.arrayViewPath.splice(i, 1, importers[this.arrayRealPath[i]].name);
-                            if (i != this.arrayRealPath.length - 1)
-                                this.arrayRealPath.pop();
-                        })
-                        .catch((error) => this.$console.error(error));
-                } else {
-                    this.arrayViewPath.splice(i, 1, this.$i18n.get(this.arrayRealPath[i])); 
-                }
-            }
-        }
+    props: {
+        breadCrumbItems: Array
     },
     watch: {
         '$route' (to, from) {
             if (to.path != from.path) {
                 this.isRepositoryLevel = (to.params.collectionId == undefined);
-                this.pageTitle = this.$route.meta.title;
 
-                this.arrayRealPath = to.path.split("/");
-                this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
-                
-                this.generateViewPath();
+                this.activeRoute = to.name;
+                this.pageTitle = this.$route.meta.title;
             }
         }
     },
@@ -132,11 +58,6 @@ export default {
         this.isRepositoryLevel = (this.$route.params.collectionId == undefined);
         document.title = this.$route.meta.title;
         this.pageTitle = document.title;
-        
-        this.arrayRealPath = this.$route.path.split("/");
-        this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
-        
-        this.generateViewPath();
     }
 }
 </script>
diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js
index e18452aec..5eb7ab072 100644
--- a/src/admin/js/utilities.js
+++ b/src/admin/js/utilities.js
@@ -190,8 +190,8 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
         getItemsPath(query) {
             return '/items/?' + qs.stringify(query);
         },
-        getPath(query) {
-            return '/taxonomies/?' + qs.stringify(query);
+        getTaxonomiesPath() {
+            return '/taxonomies/'
         },
         getTaxonomyTermsPath(taxonomyId, query) {
             return '/taxonomyId/' + taxonomyId + '/terms/?' + qs.stringify(query);
@@ -206,7 +206,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
             return '/events/?' + qs.stringify(query);
         },
         getAvailableImportersPath() {
-            return '/importers/new';
+            return '/importers';
         },
         getProcessesPage(highlightedProcess) {
             if (highlightedProcess)
diff --git a/src/admin/pages/lists/available-importers-page.vue b/src/admin/pages/lists/available-importers-page.vue
index 3664613b8..ea323fc0d 100644
--- a/src/admin/pages/lists/available-importers-page.vue
+++ b/src/admin/pages/lists/available-importers-page.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="repository-level-page page-container">
-        <tainacan-title />
+        <tainacan-title
+                :bread-crumb-items="[{ path: '', label: $i18n.get('importers') }]" />
 
         <h3>{{ $i18n.get('label_available_importers') }}</h3>
         <p>{{ $i18n.get('info_available_importers_helper') }}</p>
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index fc221f980..e45f9dcdb 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="repository-level-page page-container">
         <b-loading :active.sync="isLoadingMetadatumMappers"/>
-        <tainacan-title />
+        <tainacan-title 
+                :bread-crumb-items="[{ path: '', label: this.$i18n.get('collections') }]"/>
         <div
                 class="sub-header"
                 v-if="$userCaps.hasCapability('edit_tainacan-collections')">
diff --git a/src/admin/pages/lists/events-page.vue b/src/admin/pages/lists/events-page.vue
index 91ea63053..2114f36b2 100644
--- a/src/admin/pages/lists/events-page.vue
+++ b/src/admin/pages/lists/events-page.vue
@@ -5,7 +5,8 @@
                     'repository-level-page': isRepositoryLevel,
                     'page-container': isRepositoryLevel
                 }">
-            <tainacan-title />
+            <tainacan-title 
+                :bread-crumb-items="[{ path: '', label: this.$i18n.get('events') }]"/>
             <div :class="{ 'above-subheader': isRepositoryLevel }">
 
                 <div 
diff --git a/src/admin/pages/lists/filters-page.vue b/src/admin/pages/lists/filters-page.vue
index 83c59ffaf..865372c9d 100644
--- a/src/admin/pages/lists/filters-page.vue
+++ b/src/admin/pages/lists/filters-page.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="repository-level-page page-container">
-        <tainacan-title />
+        <tainacan-title 
+                :bread-crumb-items="[{ path: '', label: this.$i18n.get('filters') }]"/>
         <filters-list/>
     </div>
 </template>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index ef0823907..07265e15e 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1184,7 +1184,7 @@
             });
 
             this.$eventBusSearch.$on('hasToPrepareMetadataAndFilters', (to) => {
-                /* This condition is to prevent a incorrect fetch by filter or metadata when we come from items
+                /* This condition is to prevent a incorrect fetch by filter or metadata when we coming from items
                  * at collection level to items page at repository level
                  */
 
diff --git a/src/admin/pages/lists/metadata-page.vue b/src/admin/pages/lists/metadata-page.vue
index f052bad9c..0fa1fc5a2 100644
--- a/src/admin/pages/lists/metadata-page.vue
+++ b/src/admin/pages/lists/metadata-page.vue
@@ -1,6 +1,7 @@
 <template>
         <div class="repository-level-page page-container">
-            <tainacan-title />
+            <tainacan-title 
+                    :bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/>
             <metadata-list/>
         </div>
 </template>
diff --git a/src/admin/pages/lists/taxonomies-page.vue b/src/admin/pages/lists/taxonomies-page.vue
index f017874c3..1e4fe5469 100644
--- a/src/admin/pages/lists/taxonomies-page.vue
+++ b/src/admin/pages/lists/taxonomies-page.vue
@@ -1,7 +1,8 @@
 <template>
     <div>
         <div class="repository-level-page page-container">
-            <tainacan-title />
+            <tainacan-title 
+                    :bread-crumb-items="[{ path: '', label: this.$i18n.get('taxonomies') }]"/>
             <div 
                     class="sub-header" 
                     v-if="$userCaps.hasCapability('edit_tainacan-taxonomies')">
diff --git a/src/admin/pages/singles/event-page.vue b/src/admin/pages/singles/event-page.vue
index 65bec2792..14fcedadc 100644
--- a/src/admin/pages/singles/event-page.vue
+++ b/src/admin/pages/singles/event-page.vue
@@ -4,7 +4,11 @@
             <div 
                     class="page-container"
                     :class="{ 'repository-level-page': $route.params.collectionId == undefined }">
-                <tainacan-title/>
+                <tainacan-title
+                        :bread-crumb-items="[
+                                { path: $routerHelper.getEventsPath(), label: $i18n.get('events') },
+                                { path: '', label: (event != undefined && event.title != undefined) ? event.title : $i18n.get('event') }
+                            ]"/>
                 <h1 class="event-titles">{{ event.description }}</h1>
                 <div
                         class="level"