pkp/pkp-lib#9890 Improve SideMenu API for less confusion

Author: jardakotesovec

src/components/SideMenu/SideMenu.vue

@@ -48,7 +48,8 @@ const props = defineProps({
 	 * - `label` (string, required): The label of the menu item.
 	 * - `key` (string, required): A unique key for each item.
 	 * - `link` (string, optional): The URL to navigate to when the item is clicked.
-	 * - `action` (string, optional): A function to be executed when the item is clicked.
+	 * - `state` (object, optional): Place to store item specific state. Item gets selected on click.
+	 * - `action` (string, optional): A function to be executed when the item is clicked. Gets selected only if also `state` is provided
 	 * - `actionArgs` (object, optional): An object to be passed as function arguments when the `item.action` is emitted.
 	 * - `badge` (object, optional): Contains `slot` (string) and other props for `<Badge>` customization.
 	 * - `colorStripe` (string, optional): A border class to add a color stripe to the item.

src/composables/useSideMenu.js

@@ -187,11 +187,15 @@ export function useSideMenu(_items, opts = {}) {
 					}
 					setActiveItemKey(item.key);
 				};
-			}
-
-			if (item.action) {
+			} else if (item.action) {
 				item.command = () => {
 					onActionFn(item.action, {...item.actionArgs, key: item.key});
+					if (item.state) {
+						setActiveItemKey(item.key);
+					}
+				};
+			} else if (item.state) {
+				item.command = () => {
 					setActiveItemKey(item.key);
 				};
 			}

src/pages/workflow/composables/useWorkflowMenu.js

@@ -28,10 +28,10 @@ export function useWorkflowMenu({
 	 * reviewRoundId: applicable when reviewRound is selected
 	 */
 	const selectedMenuState = computed(() => {
-		const actionArgs = selectedMenuItem.value?.actionArgs || {};
+		const state = selectedMenuItem.value?.state || {};
 
 		return {
-			...actionArgs,
+			...state,
 		};
 	});
 

src/pages/workflow/composables/useWorkflowNavigationConfig/useWorkflowNavigationConfigOJS.js

@@ -18,22 +18,20 @@ export function getPublicationItem({label, name}) {
 	return {
 		key: `publication_${name}`,
 		label: label,
-		action: 'selectMenu',
-		actionArgs: {
+		state: {
 			primaryMenuItem: 'publication',
 			secondaryMenuItem: name,
 			title: getPublicationTitle(label),
 		},
 	};
 }
 
-export function getWorkflowItem({stageId, label, isActive, isDisabled, items}) {
+export function getWorkflowItem({stageId, label, isActive, items}) {
 	return {
 		key: `workflow_${stageId}`,
 		label: label,
 		colorStripe: isActive ? StageColors[stageId] : null,
-		action: isDisabled ? undefined : 'selectMenu',
-		actionArgs: {
+		state: {
 			primaryMenuItem: 'workflow',
 			stageId: stageId,
 			title: getWorkflowTitle(label),
@@ -93,8 +91,7 @@ export function getReviewItem({stageId, reviewRound, isActive, title}) {
 		key: `workflow_${stageId}_${reviewRound.id}`,
 		label: t('workflow.reviewRoundN', {number: reviewRound.round}),
 		colorStripe: isActive ? StageColors[stageId] : null,
-		action: 'selectMenu',
-		actionArgs: {
+		state: {
 			primaryMenuItem: 'workflow',
 			stageId: stageId,
 			reviewRoundId: reviewRound.id,
@@ -134,7 +131,6 @@ export function useWorkflowNavigationConfigOJS(pageInitConfig) {
 				label: t('manager.publication.reviewStage'),
 				isActive:
 					activeStage.id === pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
-				isDisabled: externalReviewItems.length,
 				items: externalReviewItems,
 			}),
 		);

src/pages/workflow/composables/useWorkflowNavigationConfig/useWorkflowNavigationConfigOMP.js

@@ -21,8 +21,7 @@ function getMarketingItem({label, name}) {
 	return {
 		key: `marketing_${name}`,
 		label: label,
-		action: 'selectMenu',
-		actionArgs: {
+		state: {
 			primaryMenuItem: 'marketing',
 			secondaryMenuItem: name,
 			title: getMarketingTitle(label),