diff --git a/src/composables/useSideMenu.js b/src/composables/useSideMenu.js index 130754dc..8d421af5 100644 --- a/src/composables/useSideMenu.js +++ b/src/composables/useSideMenu.js @@ -74,12 +74,16 @@ export function useSideMenu(_items, opts = {}) { } function setActiveItemKey(key = '') { - activeItemKey.value = key; + if (!findItemByKey(items.value, key)) { + return false; + } + activeItemKey.value = key; const parentKeys = findParentKeys(items.value, key); if (parentKeys) { setExpandedKeys([...parentKeys, ...Object.keys(expandedKeys.value)]); } + return true; } function compareUrlPaths(url1, url2) { diff --git a/src/pages/dashboard/dashboardPageStore.js b/src/pages/dashboard/dashboardPageStore.js index 858874be..8a1ef887 100644 --- a/src/pages/dashboard/dashboardPageStore.js +++ b/src/pages/dashboard/dashboardPageStore.js @@ -158,6 +158,9 @@ export const useDashboardPageStore = defineComponentStore( }); }); + // Teoretically initFiltersFormFromQueryParams could be called only on the page load. + // Motivation to use watch here is to keep using the url as source of the truth, to + // catch bugs early, without testing all possible filters being loaded just from the url. watch( queryParamsUrl, (newQueryParamsUrl) => { @@ -369,6 +372,7 @@ export const useDashboardPageStore = defineComponentStore( { onClose: async () => { queryParamsUrl.workflowSubmissionId = null; + queryParamsUrl.workflowMenuKey = null; await fetchSubmissions(); }, }, diff --git a/src/pages/workflow/composables/useWorkflowDecisions.js b/src/pages/workflow/composables/useWorkflowDecisions.js index d9060458..4fd0188a 100644 --- a/src/pages/workflow/composables/useWorkflowDecisions.js +++ b/src/pages/workflow/composables/useWorkflowDecisions.js @@ -38,7 +38,15 @@ export const Actions = { function openDecisionPage(submission, decisionId, actionArgs = {}) { const queryParamsUrl = useUrlSearchParams(); - const currentPageUrl = `dashboard/editorial?${new URLSearchParams({...queryParamsUrl, workflowSubmissionId: submission.id}).toString()}`; + const urlSearchParams = new URLSearchParams({ + ...queryParamsUrl, + workflowSubmissionId: submission.id, + }); + + // Given that decision often change the stage - its better to let workflow page to calculate current stage + urlSearchParams.delete('workflowMenuKey'); + + const currentPageUrl = `dashboard/editorial?${urlSearchParams.toString()}`; const queryParams = {decision: decisionId, ret: currentPageUrl}; diff --git a/src/pages/workflow/composables/useWorkflowMenu.js b/src/pages/workflow/composables/useWorkflowMenu.js index 0c9bec06..b418605c 100644 --- a/src/pages/workflow/composables/useWorkflowMenu.js +++ b/src/pages/workflow/composables/useWorkflowMenu.js @@ -1,10 +1,12 @@ import {useSideMenu} from '@/composables/useSideMenu'; -import {computed} from 'vue'; -import {useSubmission} from '@/composables/useSubmission'; +import {computed, watch} from 'vue'; +import {useQueryParams} from '@/composables/useQueryParams'; -const {getReviewRound} = useSubmission(); - -export function useWorkflowMenu({menuItems, submission}) { +export function useWorkflowMenu({ + menuItems, + submission, + getInitialSelectionItemKey, +}) { const { sideMenuProps, setExpandedKeys, @@ -12,6 +14,12 @@ export function useWorkflowMenu({menuItems, submission}) { selectedItem: selectedMenuItem, } = useSideMenu(menuItems); + /** + * Url query params + */ + // Reactive query params parsed from the url + const queryParamsUrl = useQueryParams(); + /** * primaryMenuItem: workflow/publication/marketing * secondaryMenuItem: name of publication/marketing submenu @@ -26,30 +34,42 @@ export function useWorkflowMenu({menuItems, submission}) { }; }); + const selectedMenuKey = computed(() => { + return selectedMenuItem.value?.key || null; + }); + const menuTitle = computed(() => { return selectedMenuState.value?.title || ''; }); - const selectedReviewRound = computed(() => { - if (!selectedMenuState.value.reviewRoundId) { - return null; + function navigateToMenu(key) { + return setActiveItemKey(key); + } + + watch(submission, (newSubmission, oldSubmission) => { + // Once the submission is fetched, select relevant stage in navigation + if (!oldSubmission && newSubmission) { + // use the menu selection from the url, if it does exist, otherwise fallback + if (queryParamsUrl?.workflowMenuKey?.length) { + const doesKeyExist = navigateToMenu(queryParamsUrl?.workflowMenuKey); + if (doesKeyExist) { + return; + } + } + navigateToMenu(getInitialSelectionItemKey(newSubmission)); } - const reviewRound = getReviewRound( - submission.value, - selectedMenuState.value.reviewRoundId, - ); - return reviewRound; }); - function navigateToMenu(key) { - setActiveItemKey(key); - } + // Update selectedMenuKey in url when menu selection changes + watch(selectedMenuKey, (newSelectedMenuKey) => { + queryParamsUrl.workflowMenuKey = newSelectedMenuKey; + }); return { menuTitle, navigateToMenu, + selectedMenuKey, selectedMenuState, - selectedReviewRound, setExpandedKeys, sideMenuProps, }; diff --git a/src/pages/workflow/workflowStore.js b/src/pages/workflow/workflowStore.js index 2d4a68f0..6388fb69 100644 --- a/src/pages/workflow/workflowStore.js +++ b/src/pages/workflow/workflowStore.js @@ -1,4 +1,4 @@ -import {computed, watch, inject} from 'vue'; +import {computed, inject} from 'vue'; import {defineComponentStore} from '@/utils/defineComponentStore'; import { @@ -45,7 +45,19 @@ export const useWorkflowStore = defineComponentStore( submissionId: props.submissionId, }); - const {getExtendedStage, getExtendedStageLabel} = useSubmission(); + const selectedReviewRound = computed(() => { + if (!selectedMenuState.value.reviewRoundId) { + return null; + } + const reviewRound = getReviewRound( + submission.value, + selectedMenuState.value.reviewRoundId, + ); + return reviewRound; + }); + + const {getExtendedStage, getExtendedStageLabel, getReviewRound} = + useSubmission(); /** * Current Stage Indication @@ -90,18 +102,9 @@ export const useWorkflowStore = defineComponentStore( menuTitle, navigateToMenu, selectedMenuState, - selectedReviewRound, setExpandedKeys, sideMenuProps, - } = useWorkflowMenu({menuItems, submission}); - - /** When submission is loaded initially - select relevant menu */ - watch(submission, (newSubmission, oldSubmission) => { - // Once the submission is fetched, select relevant stage in navigaton - if (!oldSubmission && newSubmission) { - navigateToMenu(getInitialSelectionItemKey(newSubmission)); - } - }); + } = useWorkflowMenu({menuItems, submission, getInitialSelectionItemKey}); /** * Expose workflow actions