Header breadcrumbs now display proper name or title for collections and items.

src/admin/components/tainacan-header.vue

@@ -3,15 +3,15 @@
         <div class="level-left">
             <div class="level-item">
                 <h1 class="has-text-weight-bold is-uppercase has-text-primary">{{pageTitle}}</h1>
-                <nav class="breadcums">
+                <nav class="breadcrumbs">
                     <router-link tag="a" :to="$routerHelper.getCollectionsPath()">{{ $i18n.get('repository') }}</router-link> > 
-                    <span v-for="(pathItem, index) in arrayPath" :key="index">
+                    <span v-for="(pathItem, index) in arrayRealPath" :key="index">
                         <router-link 
                             tag="a" 
-                            :to="'/' + arrayPath.slice(0, index + 1).join('/')">
-                                {{ isNaN(pathItem) ? $i18n.get(pathItem) : getEntityName(arrayPath[index-1], pathItem) }}
+                            :to="'/' + arrayRealPath.slice(0, index + 1).join('/')">
+                                {{ arrayViewPath[index] }}
                         </router-link>
-                        <span v-if="index != arrayPath.length - 1"> > </span>
+                        <span v-if="index != arrayRealPath.length - 1"> > </span>
                     </span>   
                 </nav>
             </div>
@@ -34,49 +34,73 @@ export default {
             wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
             onSecondaryPage: false,
             pageTitle: '',
-            arrayPath: [],
+            arrayRealPath: [],
+            arrayViewPath: []
         }
     },
     methods: {
         ...mapActions('collection', [
-            'fetchCollection'
+            'fetchCollectionName'
         ]),
         ...mapGetters('collection', [
-            'getCollection'
+            'getCollectionName'
         ]),
         ...mapActions('item', [
-            'fetchItem'
+            'fetchItemTitle'
         ]),
         ...mapGetters('item', [
-            'getItem'
+            'getItemTitle'
         ]),
-        getEntityName(type, id) {
-            switch(type) {
-                case 'collections':
-                    //return this.getCollectionName(id);
-                break;
-                case 'items':
-                    //return this.getItemName(id);
-                break;
-                default:
-                return id;
+        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.fetchCollectionName(this.arrayRealPath[i])
+                                .then(collectionName => this.arrayViewPath.splice(i, 1, collectionName))
+                                .catch((error) => console.log(error));
+                        break;
+                        case 'items':
+                            this.fetchItemTitle(this.arrayRealPath[i])
+                                .then(itemTitle => this.arrayViewPath.splice(i, 1,itemTitle))
+                                .catch((error) => console.log(error));
+                        break;
+                    }
+                    
+                } else {
+                    this.arrayViewPath.splice(i, 1, this.$i18n.get(this.arrayRealPath[i])); 
+                }
+                
             }
-            return id;
-        }
+        },
     },
     watch: {
         '$route' (to, from) {
             this.onSecondaryPage = (to.params.collectionId != undefined);
-            this.arrayPath = to.path.split("/");
-            this.arrayPath = this.arrayPath.filter((item) => item.length != 0);
             this.pageTitle = this.$route.meta.title;
+
+            this.arrayRealPath = to.path.split("/");
+            this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
+            
+            this.generateViewPath();
         }
     },
+    mounted() {
+        console.log(this.arrayViewPath);
+    },
     created() {
         this.onSecondaryPage = (this.$route.params.collectionId != undefined);
-        this.arrayPath = this.$route.path.split("/");
-        this.arrayPath = this.arrayPath.filter((item) => item.length != 0);
         this.pageTitle = this.$route.meta.title;
+
+        this.arrayRealPath = this.$route.path.split("/");
+        this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
+        
+        this.generateViewPath();
     }
 }
 </script>

src/js/store/modules/collection/actions.js

@@ -54,6 +54,20 @@ export const fetchCollection = ({ commit }, id) => {
     });
 }
 
+export const fetchCollectionName = ({ commit }, id) => {
+    return new Promise((resolve, reject) =>{ 
+        axios.get('/collections/' + id + '?fetch_only=name')
+        .then(res => {
+            let collectionName = res.data;
+            commit('setCollectionName', collectionName.name);
+            resolve( collectionName.name );
+        })
+        .catch(error => {
+            reject(error);
+        })
+    });
+}
+
 export const deleteCollection = ({ commit }, id) => {
     return new Promise((resolve, reject) =>{ 
         axios.delete('/collections/' + id)

src/js/store/modules/collection/getters.js

@@ -9,3 +9,7 @@ export const getCollections = state => {
 export const getCollection = state => {
     return state.collection;
 }
+
+export const getCollectionName = state => {
+    return state.collectionName;
+}

src/js/store/modules/collection/index.js

@@ -5,7 +5,8 @@ import * as mutations from './mutations';
 const state = {
     items: [],
     collections: [],
-    collection: null
+    collection: null,
+    collectionName: ''
 };
 
 export default {

src/js/store/modules/collection/mutations.js

@@ -27,3 +27,7 @@ export const setFields = (state, fields) => {
 export const setCollection = (state, collection) => {
     state.collection = collection;
 }
+
+export const setCollectionName = (state, collectionName) => {
+    state.collectionName = collectionName;
+}

src/js/store/modules/item/actions.js

@@ -62,6 +62,20 @@ export const fetchItem = ({ commit }, item_id) => {
     });
 };
 
+export const fetchItemTitle = ({ commit }, id) => {
+    return new Promise((resolve, reject) =>{ 
+        axios.get('/items/' + id + '?fetch_only=title')
+        .then(res => {
+            let itemTitle = res.data;
+            commit('setItemTitle', itemTitle.title);
+            resolve( itemTitle.title );
+        })
+        .catch(error => {
+            reject(error);
+        })
+    });
+}
+
 export const sendItem = ( { commit }, { collection_id, status }) => {
     return new Promise(( resolve, reject ) => {
         axios.post('/collection/'+ collection_id + '/items/', {

src/js/store/modules/item/getters.js

@@ -6,3 +6,7 @@ export const getFields =  state => {
 export const getItem = state => {
     return state.item;
 }
+
+export const getItemTitle = state => {
+    return state.itemTitle;
+}

src/js/store/modules/item/index.js

@@ -5,7 +5,8 @@ import * as mutations from './mutations';
 const state = {
     item: [],
     fields: [],
-    error: []
+    error: [],
+    itemTitle: ''
 };
 
 

src/js/store/modules/item/mutations.js

@@ -4,6 +4,10 @@ export const setItem = ( state, item ) => {
     state.item = item;
 }
 
+export const setItemTitle = ( state, itemTitle ) => {
+    state.itemTitle = itemTitle;
+}
+
 export const setFields = ( state, field) => {
     state.fields = field;
 }