tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds new logic for creating breadcrumbs to repository level pages.

This commit is contained in:
Mateus Machado Luna 2018-10-22 15:15:09 -03:00
parent 45f7c38ad4
commit 33f0a4fbc5
13 changed files with 53 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/components/edition/importer-edition-form.vue
View File

@ -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"

10
src/admin/components/edition/taxonomy-edition-form.vue
View File

@ -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');

17
src/admin/components/navigation/tainacan-collection-subheader.vue
View File

@ -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>

113
src/admin/components/navigation/tainacan-title.vue
View File

@ -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>

6
src/admin/js/utilities.js
View File

@ -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)

3
src/admin/pages/lists/available-importers-page.vue
View File

@ -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>

3
src/admin/pages/lists/collections-page.vue
View File

@ -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')">

3
src/admin/pages/lists/events-page.vue
View File

@ -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

3
src/admin/pages/lists/filters-page.vue
View File

@ -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>

2
src/admin/pages/lists/items-page.vue
View File

@ -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
*/

3
src/admin/pages/lists/metadata-page.vue
View File

@ -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>

3
src/admin/pages/lists/taxonomies-page.vue
View File

@ -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')">

6
src/admin/pages/singles/event-page.vue
View File

@ -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"