pkp/pkp-lib#10771 Persist also selected menu in workflow page (pkp#475)

* pkp/pkp-lib#10771 Persist also selected menu in workflow page

* pkp/pkp-lib#10771 remove correct query param when redirecting to decision page

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

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();
 					},
 				},

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

src/pages/workflow/composables/useWorkflowMenu.js

@@ -1,17 +1,25 @@
 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,
 		setActiveItemKey,
 		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,
 	};

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