Merge branch 'breadcrumb-refactor' into develop

This commit is contained in:
Mateus Machado Luna 2018-10-22 15:16:01 -03:00
commit 87bdecf223
22 changed files with 162 additions and 232 deletions

View File

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

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"

View File

@ -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(() => {

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

View File

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

View File

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

View File

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

View File

@ -27,19 +27,22 @@
<nav 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
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>
: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">&nbsp;>&nbsp;</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>
</nav>
</div>
</div>
@ -137,7 +140,7 @@
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { mapActions } from 'vuex';
import ActivitiesIcon from '../other/activities-icon.vue';
export default {
@ -146,10 +149,10 @@ export default {
return {
activeRoute: 'ItemsList',
pageTitle: '',
arrayRealPath: [],
arrayViewPath: [],
activeRouteName: '',
collectionNameRequestCancel: undefined
collectionNameRequestCancel: undefined,
collectionBreadCrumbItem: {},
childrenBreadCrumbItems: []
}
},
components: {
@ -164,11 +167,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 +174,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 +183,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>

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>

View File

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

View File

@ -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: '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'} },
]

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

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>

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

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
@ -285,6 +286,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';

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>

View File

@ -1069,7 +1069,7 @@
'3': (this.isRepositoryLevel ? 'title' : null),
'4': (this.isRepositoryLevel ? 'description' : null),
});
// Sorting metadata
if (this.isRepositoryLevel) {
this.sortingMetadata.push({
@ -1184,11 +1184,11 @@
});
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
*/
if (this.isOnTheme || this.collectionId === to.params.collectionId) {
if (this.isOnTheme || this.collectionId === to.params.collectionId || to.query.fromBreadcrumb) {
this.prepareMetadata();
this.prepareFilters();
}
@ -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';

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>

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

View File

@ -1,8 +1,14 @@
<template>
<div>
<div class="is-fullheight">
<div class="page-container repository-level-page">
<tainacan-title/>
<div
class="page-container"
:class="{ 'repository-level-page': $route.params.collectionId == undefined }">
<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"
@ -94,21 +100,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;

View File

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

View File

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