Fixes routing issues caused by Vue 3 Migration #794.

This commit is contained in:
mateuswetah 2024-01-26 14:31:20 -03:00
parent 9738ac7dc2
commit 230f974f68
3 changed files with 94 additions and 77 deletions

View File

@ -560,6 +560,38 @@ AdminOptionsHelperPlugin.install = function (app, options = {}) {
console.log('Tainacan Admin loaded in ' + adminSpecialMode); console.log('Tainacan Admin loaded in ' + adminSpecialMode);
// Under these special modes, several routes do not need to exist
if (
adminSpecialMode === 'itemsMultipleSelectionMode' ||
adminSpecialMode === 'itemsSingleSelectionMode' ||
adminSpecialMode === 'itemsSearchSelectionMode' ||
adminSpecialMode === 'itemEditionMode'
) {
app.config.globalProperties.$router.removeRoute('HomePage');
app.config.globalProperties.$router.removeRoute('CollectionsPage');
app.config.globalProperties.$router.removeRoute('CollectionCreationForm');
app.config.globalProperties.$router.removeRoute('CollectionItemBulkAddPage');
app.config.globalProperties.$router.removeRoute('CollectionEditionForm');
app.config.globalProperties.$router.removeRoute('CollectionMetadataPage');
app.config.globalProperties.$router.removeRoute('CollectionFiltersPage');
app.config.globalProperties.$router.removeRoute('CollectionActivitiesPage');
app.config.globalProperties.$router.removeRoute('CollectionCapabilitiesPage');
app.config.globalProperties.$router.removeRoute('MappedCollectionCreationForm');
app.config.globalProperties.$router.removeRoute('FiltersPage');
app.config.globalProperties.$router.removeRoute('MetadataPage');
app.config.globalProperties.$router.removeRoute('TaxonomyPage');
app.config.globalProperties.$router.removeRoute('TaxonomyCreationForm');
app.config.globalProperties.$router.removeRoute('TaxonomyEditionForm');
app.config.globalProperties.$router.removeRoute('ActivitiesPage');
app.config.globalProperties.$router.removeRoute('CapabilitiesPage');
app.config.globalProperties.$router.removeRoute('AvailableImportersPage');
app.config.globalProperties.$router.removeRoute('ImporterEditionForm');
app.config.globalProperties.$router.removeRoute('ImporterCreationForm');
app.config.globalProperties.$router.removeRoute('ImporterMappingForm');
app.config.globalProperties.$router.removeRoute('ExportersPage');
app.config.globalProperties.$router.removeRoute('ExporterEditionForm');
}
for (let option in adminSpecialModes[adminSpecialMode]) for (let option in adminSpecialModes[adminSpecialMode])
app.config.globalProperties.$adminOptions[option] = adminSpecialModes[adminSpecialMode][option]; app.config.globalProperties.$adminOptions[option] = adminSpecialModes[adminSpecialMode][option];
} }

View File

@ -3,11 +3,6 @@ import mitt from 'mitt';
export default { export default {
install(app) { install(app) {
const router = app.config.globalProperties.$router;
const route = app.config.globalProperties.$route;
const store = app.config.globalProperties.$store;
const userPrefs = app.config.globalProperties.$userPrefs;
const emitter = mitt(); const emitter = mitt();
const bus = { const bus = {
@ -18,18 +13,18 @@ export default {
termId: undefined, termId: undefined,
searchCancel: undefined, searchCancel: undefined,
performAdvancedSearch(data) { performAdvancedSearch(data) {
store.dispatch('search/setAdvancedQuery', data); app.config.globalProperties.$store.dispatch('search/setAdvancedQuery', data);
this.updateURLQueries(); this.updateURLQueries();
}, },
addMetaquery( data ){ addMetaquery( data ){
if ( data && data.collection_id ){ if ( data && data.collection_id ){
store.dispatch('search/addMetaquery', data ); app.config.globalProperties.$store.dispatch('search/addMetaquery', data );
} }
this.updateURLQueries(); this.updateURLQueries();
}, },
addTaxquery( data ){ addTaxquery( data ){
if ( data && data.collection_id ){ if ( data && data.collection_id ){
store.dispatch('search/addTaxquery', data ); app.config.globalProperties.$store.dispatch('search/addTaxquery', data );
} }
this.updateURLQueries(); this.updateURLQueries();
}, },
@ -39,7 +34,7 @@ export default {
if (filterTag.argType !== 'postin') { if (filterTag.argType !== 'postin') {
if (filterTag.taxonomy) { if (filterTag.taxonomy) {
store.dispatch('search/removeTaxQuery', { app.config.globalProperties.$store.dispatch('search/removeTaxQuery', {
filterId: filterTag.filterId, filterId: filterTag.filterId,
label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label, label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
isMultiValue: filterTag.singleLabel ? false : true, isMultiValue: filterTag.singleLabel ? false : true,
@ -47,7 +42,7 @@ export default {
value: filterTag.value value: filterTag.value
}); });
} else { } else {
store.dispatch('search/removeMetaQuery', { app.config.globalProperties.$store.dispatch('search/removeMetaQuery', {
filterId: filterTag.filterId, filterId: filterTag.filterId,
label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label, label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
isMultiValue: filterTag.singleLabel ? false : true, isMultiValue: filterTag.singleLabel ? false : true,
@ -56,50 +51,50 @@ export default {
}); });
} }
} else { } else {
store.dispatch('search/removePostIn'); app.config.globalProperties.$store.dispatch('search/removePostIn');
} }
store.dispatch('search/removeFilterTag', filterTag); app.config.globalProperties.$store.dispatch('search/removeFilterTag', filterTag);
} }
this.updateURLQueries(); this.updateURLQueries();
}, },
addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) { addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) {
store.dispatch('search/addFetchOnly', metadatum ); app.config.globalProperties.$store.dispatch('search/addFetchOnly', metadatum );
store.dispatch('search/addFetchOnlyMeta', metadatumIDs); app.config.globalProperties.$store.dispatch('search/addFetchOnlyMeta', metadatumIDs);
this.updateURLQueries(); this.updateURLQueries();
if (!ignorePrefs) { if (!ignorePrefs) {
let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only'; let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only';
let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta'; let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta';
if (userPrefs.get(prefsFetchOnly) != metadatum) if (app.config.globalProperties.$userPrefs.get(prefsFetchOnly) != metadatum)
userPrefs.set(prefsFetchOnly, metadatum); app.config.globalProperties.$userPrefs.set(prefsFetchOnly, metadatum);
if (userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs) if (app.config.globalProperties.$userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs)
userPrefs.set(prefsFetchOnlyMeta, metadatumIDs); app.config.globalProperties.$userPrefs.set(prefsFetchOnlyMeta, metadatumIDs);
} }
}, },
cleanFetchOnly() { cleanFetchOnly() {
store.dispatch('search/cleanFetchOnly'); app.config.globalProperties.$store.dispatch('search/cleanFetchOnly');
}, },
removeFetchOnlyMeta( metadatum ){ removeFetchOnlyMeta( metadatum ){
store.dispatch('search/removeFetchOnlyMeta', metadatum ); app.config.globalProperties.$store.dispatch('search/removeFetchOnlyMeta', metadatum );
this.updateURLQueries(); this.updateURLQueries();
}, },
setPage(page) { setPage(page) {
store.dispatch('search/setPage', page); app.config.globalProperties.$store.dispatch('search/setPage', page);
this.updateURLQueries(); this.updateURLQueries();
}, },
resetPageOnStore() { resetPageOnStore() {
store.dispatch('search/setPage', 1); app.config.globalProperties.$store.dispatch('search/setPage', 1);
}, },
setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) { setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) {
store.dispatch('search/setItemsPerPage', itemsPerPage); app.config.globalProperties.$store.dispatch('search/setItemsPerPage', itemsPerPage);
this.updateURLQueries(); this.updateURLQueries();
if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) { if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) {
let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page'; let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page';
if (userPrefs.get(prefsPerPage) != itemsPerPage) { if (app.config.globalProperties.$userPrefs.get(prefsPerPage) != itemsPerPage) {
userPrefs.set(prefsPerPage, itemsPerPage) app.config.globalProperties.$userPrefs.set(prefsPerPage, itemsPerPage)
.catch(() => {}); .catch(() => {});
} }
} }
@ -108,76 +103,76 @@ export default {
let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by'; let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by';
if (orderBy.metakey) { if (orderBy.metakey) {
if (!userPrefs.get(prefsOrderBy) || orderBy.metakey != userPrefs.get(prefsOrderBy).metakey) if (!app.config.globalProperties.$userPrefs.get(prefsOrderBy) || orderBy.metakey != app.config.globalProperties.$userPrefs.get(prefsOrderBy).metakey)
userPrefs.set(prefsOrderBy, orderBy).catch(() => {}); app.config.globalProperties.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
} else { } else {
if (orderBy != userPrefs.get(prefsOrderBy)) if (orderBy != app.config.globalProperties.$userPrefs.get(prefsOrderBy))
userPrefs.set(prefsOrderBy, orderBy).catch(() => {}); app.config.globalProperties.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
} }
store.dispatch('search/setOrderBy', orderBy); app.config.globalProperties.$store.dispatch('search/setOrderBy', orderBy);
this.updateURLQueries(); this.updateURLQueries();
}, },
setOrder(order) { setOrder(order) {
let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order'; let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order';
if (userPrefs.get(prefsOrder) != order) { if (app.config.globalProperties.$userPrefs.get(prefsOrder) != order) {
userPrefs.set(prefsOrder, order) app.config.globalProperties.$userPrefs.set(prefsOrder, order)
.catch(() => {}); .catch(() => {});
} }
store.dispatch('search/setOrder', order); app.config.globalProperties.$store.dispatch('search/setOrder', order);
this.updateURLQueries(); this.updateURLQueries();
}, },
setStatus(status) { setStatus(status) {
store.dispatch('search/setStatus', status); app.config.globalProperties.$store.dispatch('search/setStatus', status);
this.updateURLQueries(); this.updateURLQueries();
}, },
setTotalItems(totalItems) { setTotalItems(totalItems) {
store.dispatch('search/setTotalItems', totalItems); app.config.globalProperties.$store.dispatch('search/setTotalItems', totalItems);
}, },
setSentenceMode(sentenceMode) { setSentenceMode(sentenceMode) {
store.dispatch('search/setSentenceMode', sentenceMode); app.config.globalProperties.$store.dispatch('search/setSentenceMode', sentenceMode);
}, },
setSearchQuery(searchQuery) { setSearchQuery(searchQuery) {
store.dispatch('search/setSearchQuery', searchQuery); app.config.globalProperties.$store.dispatch('search/setSearchQuery', searchQuery);
this.updateURLQueries(); this.updateURLQueries();
}, },
setViewMode(viewMode) { setViewMode(viewMode) {
store.dispatch('search/setViewMode', viewMode); app.config.globalProperties.$store.dispatch('search/setViewMode', viewMode);
this.updateURLQueries(); this.updateURLQueries();
let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode'; let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode';
if(userPrefs.get(prefsViewMode) != viewMode) { if(app.config.globalProperties.$userPrefs.get(prefsViewMode) != viewMode) {
userPrefs.set(prefsViewMode, viewMode) app.config.globalProperties.$userPrefs.set(prefsViewMode, viewMode)
.catch(() => {}); .catch(() => {});
} }
}, },
setAdminViewMode(adminViewMode) { setAdminViewMode(adminViewMode) {
store.dispatch('search/setAdminViewMode', adminViewMode); app.config.globalProperties.$store.dispatch('search/setAdminViewMode', adminViewMode);
this.updateURLQueries(); this.updateURLQueries();
let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode'; let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
if (userPrefs.get(prefsAdminViewMode) != adminViewMode) { if (app.config.globalProperties.$userPrefs.get(prefsAdminViewMode) != adminViewMode) {
userPrefs.set(prefsAdminViewMode, adminViewMode) app.config.globalProperties.$userPrefs.set(prefsAdminViewMode, adminViewMode)
.catch(() => { }); .catch(() => { });
} }
}, },
setInitialViewMode(viewMode) { setInitialViewMode(viewMode) {
store.dispatch('search/setViewMode', viewMode); app.config.globalProperties.$store.dispatch('search/setViewMode', viewMode);
this.updateURLQueries(); this.updateURLQueries();
}, },
setInitialAdminViewMode(adminViewMode) { setInitialAdminViewMode(adminViewMode) {
store.dispatch('search/setAdminViewMode', adminViewMode); app.config.globalProperties.$store.dispatch('search/setAdminViewMode', adminViewMode);
this.updateURLQueries(); this.updateURLQueries();
}, },
async setSelectedItemsForIframe(selectedItems, singleSelection) { async setSelectedItemsForIframe(selectedItems, singleSelection) {
if (singleSelection) if (singleSelection)
store.dispatch('search/cleanSelectedItems'); app.config.globalProperties.$store.dispatch('search/cleanSelectedItems');
store.dispatch('search/setSelectedItems', selectedItems); app.config.globalProperties.$store.dispatch('search/setSelectedItems', selectedItems);
let currentSelectedItems = store.getters['search/getSelectedItems']; let currentSelectedItems = app.config.globalProperties.$store.getters['search/getSelectedItems'];
if (window.history.replaceState) { if (window.history.replaceState) {
let searchParams = new URLSearchParams(window.location.search); let searchParams = new URLSearchParams(window.location.search);
@ -186,55 +181,45 @@ export default {
searchParams.append('selecteditems', selectedItem); searchParams.append('selecteditems', selectedItem);
let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash; let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
window.history.pushState({path: newurl}, '', newurl);
await router.push(newurl)
window.history.replaceState({ ...window.history.state, ...{ path: newurl } }, '')
} }
}, },
cleanSelectedItems() { cleanSelectedItems() {
store.dispatch('search/cleanSelectedItems'); app.config.globalProperties.$store.dispatch('search/cleanSelectedItems');
}, },
filterBySelectedItems(selectedItems) { async filterBySelectedItems(selectedItems) {
if ( route.name ) { await app.config.globalProperties.$router.replace({ path: app.config.globalProperties.$route.path, query: {} });
router.replace({ query: {} }); await app.config.globalProperties.$router.replace({ path: app.config.globalProperties.$route.path, query: { postin: selectedItems } });
router.replace({ query: { postin: selectedItems } });
} else {
router.replace({ query: {} });
router.replace({ query: { postin: selectedItems } });
}
}, },
highlightsItem(itemId) { highlightsItem(itemId) {
store.dispatch('search/highlightsItem', itemId); app.config.globalProperties.$store.dispatch('search/highlightsItem', itemId);
this.updateURLQueries(); this.updateURLQueries();
}, },
exitViewModeWithoutPagination() { exitViewModeWithoutPagination() {
app.config.globalProperties.$eventBusSearchEmitter.emit( 'exitViewModeWithoutPagination', true); app.config.globalProperties.$eventBusSearchEmitter.emit( 'exitViewModeWithoutPagination', true);
}, },
async updateURLQueries() { async updateURLQueries() {
const newQueries = store.getters['search/getPostQuery']; const newQueries = app.config.globalProperties.$store.getters['search/getPostQuery'];
await app.config.globalProperties.$router.replace({ path: app.config.globalProperties.$route.path, query: {} });
await app.config.globalProperties.$router.replace({ path: app.config.globalProperties.$route.path, query: newQueries });
await router.replace({ query: {} });
await router.replace({ query: newQueries });
}, },
updateStoreFromURL() { updateStoreFromURL() {
store.dispatch('search/setPostQuery', route.query); app.config.globalProperties.$store.dispatch('search/setPostQuery', app.config.globalProperties.$route.query);
}, },
loadItems() { loadItems() {
console.log('loadItems') console.log('loadItems')
console.log(JSON.parse(JSON.stringify(store.getters['search/getPostQuery']))) console.log(JSON.parse(JSON.stringify(app.config.globalProperties.$store.getters['search/getPostQuery'])))
// Forces fetch_only to be filled before any search happens // Forces fetch_only to be filled before any search happens
if (store.getters['search/getPostQuery']['fetch_only'] != undefined) { if (app.config.globalProperties.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {
app.config.globalProperties.$eventBusSearchEmitter.emit( 'isLoadingItems', true); app.config.globalProperties.$eventBusSearchEmitter.emit( 'isLoadingItems', true);
// Cancels previous Request // Cancels previous Request
if (this.searchCancel != undefined) if (this.searchCancel != undefined)
this.searchCancel.cancel('Item search Canceled.'); this.searchCancel.cancel('Item search Canceled.');
console.log('fetching') console.log('fetching')
store.dispatch('collection/fetchItems', { app.config.globalProperties.$store.dispatch('collection/fetchItems', {
'collectionId': this.collectionId, 'collectionId': this.collectionId,
'isOnTheme': route.meta && route.meta.isOnTheme, 'isOnTheme': app.config.globalProperties.$route.meta && app.config.globalProperties.$route.meta.isOnTheme,
'termId': this.termId, 'termId': this.termId,
'taxonomy': this.taxonomy 'taxonomy': this.taxonomy
}).then((resp) => { }).then((resp) => {
@ -267,9 +252,9 @@ export default {
this.taxonomy = taxonomy; this.taxonomy = taxonomy;
}, },
clearAllFilters() { clearAllFilters() {
store.dispatch('search/cleanFilterTags'); app.config.globalProperties.$store.dispatch('search/cleanFilterTags');
store.dispatch('search/cleanMetaQueries', { keepCollections: true }); app.config.globalProperties.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
store.dispatch('search/cleanTaxQueries'); app.config.globalProperties.$store.dispatch('search/cleanTaxQueries');
this.updateURLQueries(); this.updateURLQueries();
} }
} }

View File

@ -44,7 +44,7 @@ const routes = [
* https://router.vuejs.org/guide/migration/#Named-children-routes-with-an-empty-path-no-longer-appends-a-slash * https://router.vuejs.org/guide/migration/#Named-children-routes-with-an-empty-path-no-longer-appends-a-slash
*/ */
{ path: '/collections/:collectionId', redirect: { name: 'CollectionItemsPage' }}, { path: '/collections/:collectionId', redirect: { name: 'CollectionItemsPage' }},
{ path: 'items', component: ItemsPage, name: 'CollectionItemsPage', meta: {title: i18nGet('title_collection_page') }, meta: { isOnTheme: false } }, { path: 'items', component: ItemsPage, name: 'CollectionItemsPage', meta: {title: i18nGet('title_collection_page') }, props: { isOnTheme: false } },
{ path: 'items/:itemId/edit', name: 'ItemEditionForm', component: ItemEditionForm, meta: {title: i18nGet('title_edit_item') } }, { path: 'items/:itemId/edit', name: 'ItemEditionForm', component: ItemEditionForm, meta: {title: i18nGet('title_edit_item') } },
{ path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection') } }, { path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection') } },
{ path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page') } }, { path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page') } },
@ -83,7 +83,7 @@ const routes = [
{ path: '/exporters/', name: 'ExportersPage', component: AvailableExportersPage, meta: {title: i18nGet('title_exporters_page') } }, { path: '/exporters/', name: 'ExportersPage', component: AvailableExportersPage, meta: {title: i18nGet('title_exporters_page') } },
{ path: '/exporters/:exporterSlug', name: 'ExporterEditionForm', component: ExporterEditionForm, meta: {title: i18nGet('title_exporter_page') }}, { path: '/exporters/:exporterSlug', name: 'ExporterEditionForm', component: ExporterEditionForm, meta: {title: i18nGet('title_exporter_page') }},
{ path: '/:pathMatch(.*)*', redirect: { name: 'HomePage' } } { path: '/:pathMatch(.*)*', name: 'DefaultRedirect', redirect: { name: 'HomePage' } }
]; ];
export default createRouter({ export default createRouter({