From 6640d8783e8f4eedaba85cd94261f83c8a9d53b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 28 Aug 2024 22:38:59 +0200
Subject: [PATCH] Submission listing WIP

---
 .../SubmissionSummaryModal.vue                | 18 ++---
 .../composables/useSummarySideNav.js          | 62 +++++++++++-------
 .../submissionSummaryStore.js                 | 65 +++++++++----------
 3 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue b/src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue
index d8596253e..14e45fddd 100644
--- a/src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue
+++ b/src/pages/dashboard/SubmissionSummaryModal/SubmissionSummaryModal.vue
@@ -4,15 +4,15 @@
 			{{ submissionId }}
 		</template>
 		<template #title>
-			<span v-if="currentPublication" class="underline">
-				{{ currentPublication.authorsStringShort }}
+			<span v-if="selectedPublication" class="underline">
+				{{ selectedPublication.authorsStringShort }}
 			</span>
 		</template>
-		<template v-if="currentPublication" #description>
+		<template v-if="selectedPublication" #description>
 			{{
 				localizeSubmission(
-					currentPublication.fullTitle,
-					currentPublication.locale,
+					selectedPublication.fullTitle,
+					selectedPublication.locale,
 				)
 			}}
 		</template>
@@ -30,11 +30,7 @@
 		</template>
 		<SideModalLayoutMenu2Columns>
 			<template #menu>
-				<SideMenu
-					:items="summaryStore.menuItems"
-					v-bind="summaryStore.sideMenuProps"
-					@action="summaryStore.selectMenuItem"
-				></SideMenu>
+				<SideMenu v-bind="summaryStore.sideMenuProps"></SideMenu>
 			</template>
 			<template #heading>{{ summaryStore.stageTitle }}</template>
 			<template
@@ -162,5 +158,5 @@ const stageLabel = computed(
 	() => submission.value && getExtendedStageLabel(submission.value),
 );
 
-const {submission, currentPublication} = storeToRefs(summaryStore);
+const {submission, selectedPublication} = storeToRefs(summaryStore);
 </script>
diff --git a/src/pages/dashboard/SubmissionSummaryModal/composables/useSummarySideNav.js b/src/pages/dashboard/SubmissionSummaryModal/composables/useSummarySideNav.js
index cc61fd83a..8fe65a3c8 100644
--- a/src/pages/dashboard/SubmissionSummaryModal/composables/useSummarySideNav.js
+++ b/src/pages/dashboard/SubmissionSummaryModal/composables/useSummarySideNav.js
@@ -17,11 +17,11 @@ export function useSummarySideNav() {
 			),
 		};
 
-		return `${t('comma', {value: t('manager.workflow')})} ${StageTitles[stageId]} `;
+		return `${t('semicolon', {label: t('manager.workflow')})} ${t(StageTitles[stageId])} `;
 	}
 
 	function getPublicationTitle(publicationMenuTitle) {
-		return `${t('comma', {value: t('submission.publication')})} ${publicationMenuTitle}`;
+		return `${t('semicolon', {label: t('submission.publication')})} ${publicationMenuTitle}`;
 	}
 
 	function getReviewItems(submission) {
@@ -56,6 +56,7 @@ export function useSummarySideNav() {
 				actionArgs: {
 					reviewRoundId: reviewRound.id,
 					stageId: pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
+					title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW),
 				},
 			});
 		});
@@ -87,18 +88,19 @@ export function useSummarySideNav() {
 			{
 				key: `workflow_${pkp.const.WORKFLOW_STAGE_ID_SUBMISSION}`,
 				label: 'Submission',
-				title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_SUBMISSION),
 				colorStripe:
 					activeStage.id === pkp.const.WORKFLOW_STAGE_ID_SUBMISSION
 						? 'border-stage-desk-review'
 						: null,
 				action: 'selectStage',
-				actionArgs: {stageId: pkp.const.WORKFLOW_STAGE_ID_SUBMISSION},
+				actionArgs: {
+					stageId: pkp.const.WORKFLOW_STAGE_ID_SUBMISSION,
+					title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_SUBMISSION),
+				},
 			},
 			{
 				key: `workflow_${pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW}`,
 				label: 'Review',
-				title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW),
 				colorStripe:
 					activeStage.id === pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW
 						? 'border-stage-in-review'
@@ -107,7 +109,12 @@ export function useSummarySideNav() {
 				items: externalReviewItems,
 				action: !externalReviewItems.length ? 'selectStage' : undefined,
 				actionArgs: !externalReviewItems.length
-					? {stageId: pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW}
+					? {
+							stageId: pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
+							title: getWorkflowTitle(
+								pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
+							),
+						}
 					: undefined,
 			},
 			{
@@ -119,7 +126,10 @@ export function useSummarySideNav() {
 						? 'border-stage-copyediting'
 						: null,
 				action: 'selectStage',
-				actionArgs: {stageId: pkp.const.WORKFLOW_STAGE_ID_EDITING},
+				actionArgs: {
+					stageId: pkp.const.WORKFLOW_STAGE_ID_EDITING,
+					title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_EDITING),
+				},
 			},
 			{
 				key: `workflow_${pkp.const.WORKFLOW_STAGE_ID_PRODUCTION}`,
@@ -130,7 +140,10 @@ export function useSummarySideNav() {
 						? 'border-stage-copyediting'
 						: null,
 				action: 'selectStage',
-				actionArgs: {stageId: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION},
+				actionArgs: {
+					stageId: pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
+					title: getWorkflowTitle(pkp.const.WORKFLOW_STAGE_ID_PRODUCTION),
+				},
 			},
 		];
 	}
@@ -151,30 +164,37 @@ export function useSummarySideNav() {
 					{
 						key: 'publication_titleAbstract',
 						label: t('publication.titleAbstract'),
-						title: getPublicationTitle(t('publication.titleAbstract')),
 						action: 'selectPublicationMenu',
-						actionArgs: {publicationMenu: 'titleAbstract'},
+						actionArgs: {
+							publicationMenu: 'titleAbstract',
+							title: getPublicationTitle(t('publication.titleAbstract')),
+						},
 					},
 					{
 						label: t('publication.contributors'),
-						title: getPublicationTitle(t('publication.contributors')),
 						action: 'selectPublicationMenu',
-						actionArgs: {publicationMenu: 'contributors'},
+						actionArgs: {
+							publicationMenu: 'contributors',
+							title: getPublicationTitle(t('publication.contributors')),
+						},
 					},
 					{
 						key: 'publication_metadata',
 						label: t('article.metadata'),
-						title: getPublicationTitle(t('article.metadata')),
 						action: 'selectPublicationMenu',
-						actionArgs: {publicationMenu: 'metadata'},
+						actionArgs: {
+							publicationMenu: 'metadata',
+							title: getPublicationTitle(t('article.metadata')),
+						},
 					},
 					{
 						key: 'citations',
 						label: t('submission.citations'),
-						title: getPublicationTitle(t('submission.citation')),
-
 						action: 'selectPublicationMenu',
-						actionArgs: {publicationMenu: 'citations'},
+						actionArgs: {
+							publicationMenu: 'citations',
+							title: getPublicationTitle(t('submission.citation')),
+						},
 					},
 					{
 						label: 'Galleys',
@@ -195,11 +215,5 @@ export function useSummarySideNav() {
 		return menuItems;
 	}
 
-	function getTitle(itemKey) {
-		if (itemKey.startsWith('publication_')) {
-			return `${t('semicolon', {value: t('submission.publication')})}`;
-		}
-	}
-
-	return {getMenuItems, getTitle};
+	return {getMenuItems};
 }
diff --git a/src/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js b/src/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js
index e693d02cc..bd849dba4 100644
--- a/src/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js
+++ b/src/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js
@@ -16,6 +16,8 @@ export const useSubmissionSummaryStore = defineComponentStore(
 	(props) => {
 		const dashboardPage = props.pageInitConfig.dashboardPage;
 
+		const {getReviewRound, getCurrentReviewRound} = useSubmission();
+
 		/**
 		 * Fetch submission details
 		 */
@@ -60,21 +62,16 @@ export const useSubmissionSummaryStore = defineComponentStore(
 					newSubmission.publications[newSubmission.publications.length - 1].id;
 				fetchSelectedPublication();
 
-				selectedMenuState.value = {
-					stageId: newSubmission.stageId,
-				};
 				if (
 					newSubmission.stageId === pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW
 				) {
-					selectedMenuState.value = {
-						stageId: newSubmission.stageId,
-						reviewRoundId: getCurrentReviewRound(
-							newSubmission,
-							pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
-						)?.id,
-					};
 					setActiveItemKey(
-						`workflow_${newSubmission.stageId}_${selectedMenuState.value.reviewRoundId}`,
+						`workflow_${newSubmission.stageId}_${
+							getCurrentReviewRound(
+								newSubmission,
+								pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW,
+							)?.id
+						}`,
 					);
 				} else {
 					setActiveItemKey(`workflow_${newSubmission.stageId}`);
@@ -87,15 +84,32 @@ export const useSubmissionSummaryStore = defineComponentStore(
 		/**
 		 * Handling navigation
 		 */
+		const {getMenuItems} = useSummarySideNav();
+		const menuItems = computed(() => {
+			if (!submission.value) {
+				return [];
+			}
+			return getMenuItems(submission.value);
+		});
+
+		const {
+			sideMenuProps,
+			setExpandedKeys,
+			setActiveItemKey,
+			selectedItem: selectedMenuItem,
+		} = useSideMenu(menuItems);
+
+		const selectedMenuState = computed(() => {
+			console.log('selectedMenuState:', selectedMenuItem.value?.actionArgs);
+			return selectedMenuItem.value?.actionArgs || {};
+		});
 
-		const {sideMenuProps, setExpandedKeys, setActiveItemKey} = useSideMenu();
 		setExpandedKeys([
 			'workflow',
 			'publication',
 			`workflow_${pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW}`,
 		]);
-		const selectedMenuState = ref({});
-		const {getReviewRound, getCurrentReviewRound} = useSubmission();
+
 		const selectedReviewRound = computed(() => {
 			if (!selectedMenuState.value.reviewRoundId) {
 				return null;
@@ -107,18 +121,6 @@ export const useSubmissionSummaryStore = defineComponentStore(
 			return reviewRound;
 		});
 
-		const {getMenuItems} = useSummarySideNav();
-		const menuItems = computed(() => {
-			if (!submission.value) {
-				return [];
-			}
-			return getMenuItems(submission.value);
-		});
-
-		function selectMenuItem(action, actionArgs) {
-			selectedMenuState.value = actionArgs;
-		}
-
 		/**
 		 * Handle user actions
 		 *
@@ -142,14 +144,7 @@ export const useSubmissionSummaryStore = defineComponentStore(
 		const _editorWorkflowConfigFns = useEditorWorkflowConfig();
 		const _editorPublicationConfigFns = useEditorPublicationConfig();
 		const stageTitle = computed(() => {
-			if (!submission.value) {
-				return '';
-			}
-			return _editorWorkflowConfigFns.getTitle({
-				submission: submission.value,
-				selectedStageId: selectedMenuState.value.stageId,
-				selectedReviewRound: selectedReviewRound.value,
-			});
+			return selectedMenuState.value?.title || '';
 		});
 
 		const primaryItems = computed(() => {
@@ -242,9 +237,7 @@ export const useSubmissionSummaryStore = defineComponentStore(
 			/**
 			 * Navigation
 			 * */
-			menuItems,
 			sideMenuProps,
-			selectMenuItem,
 
 			/**
 			 * Summary