From 33f0a4fbc587d9bd4d0a41c401e74f5a6d0347c8 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] 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 c6a4ab889..9bc0307d3 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 aebbb15bf..6c1a28628 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1189,7 +1189,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"