Adds CollectionEvent Page to router. Creates breadcrumb event logic for receiving paths from pages in CollectionSubheader.

This commit is contained in:
Mateus Machado Luna 2018-10-19 12:56:42 -03:00
parent 34e055bafe
commit 1bb26a25e3
13 changed files with 109 additions and 108 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

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

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

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

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

View File

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

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

View File

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

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>