pkp/pkp-lib#9890 Add useSideMenu composable (#393)

* pkp/pkp-lib#9890 Add Dropup icon * pkp/pkp-lib#9890 Add useSideMenu composable * pkp/pkp-lib#9890 Use useSideMenu composable in SideMenu, SideNav and SideModal stories
pkp · Aug 19, 2024 · 83820ab · 83820ab
1 parent 4c752ac
commit 83820ab
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 128 deletions.
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -71,6 +71,7 @@ export const iconGallery = {
 			'DecreaseTextSize',
 			'DisableUser',
 			'Dropdown',
+			'Dropup',
 			'Edit',
 			'Email',
 			'EmailOpened',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -49,6 +49,7 @@ import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
 import DisableUser from './icons/DisableUser.vue';
 import Dropdown from './icons/Dropdown.vue';
+import Dropup from './icons/Dropup.vue';
 import Edit from './icons/Edit.vue';
 import Email from './icons/Email.vue';
 import EmailOpened from './icons/EmailOpened.vue';
@@ -110,6 +111,7 @@ const svgIcons = {
 	DecreaseTextSize,
 	DisableUser,
 	Dropdown,
+	Dropup,
 	Edit,
 	Email,
 	EmailOpened,

diff --git a/src/components/Icon/icons/Dropup.vue b/src/components/Icon/icons/Dropup.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12 8L19 16H5L12 8Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js
@@ -2,6 +2,7 @@ import {within, userEvent} from '@storybook/test';
 import {ref, inject} from 'vue';
 import SideModal from './SideModal.vue';
 import {useModal} from '@/composables/useModal.js';
+import {useSideMenu} from '@/composables/useSideMenu.js';
 import SideMenu from '../SideMenu/SideMenu.vue';
 import SideModalBody from './SideModalBody.vue';
 import SideModalLayoutBasic from './SideModalLayoutBasic.vue';
@@ -425,92 +426,96 @@ const SideModalWithSideMenu = {
 				value: 'dd-mm-yyy',
 			},
 		];
+
+		const {activeItemKey, setExpandedKeys} = useSideMenu('review_round_1');
+		const expandedKeys = setExpandedKeys(['workflow', 'review', 'publication']);
+
 		const items = [
 			{
 				label: 'Workflow',
+				key: 'workflow',
 				icon: 'Dashboard',
-				isCurrent: false,
 				items: [
 					{
 						label: 'Submission',
+						key: 'submission',
 						link: '#',
-						isCurrent: false,
 						colorStripe: 'border-stage-desk-review',
 					},
 					{
 						label: 'Review',
+						key: 'review',
 						link: '#',
-						isCurrent: false,
 						items: [
 							{
 								label: 'Review Round 1',
+								key: 'review_round_1',
 								link: '#',
-								isCurrent: true,
 							},
 							{
 								label: 'New Review Round',
+								key: 'new_review_round',
 								link: '#',
-								isCurrent: false,
 							},
 						],
 					},
 					{
 						label: 'Copyediting',
+						key: 'copyediting',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Production',
+						key: 'production',
 						link: '#',
-						isCurrent: false,
 					},
 				],
 			},
 			{
 				label: 'Publication',
+				key: 'publication',
 				icon: 'MySubmissions',
-				isCurrent: false,
 				isOpen: true,
 				items: [
 					{
 						label: 'Title & Abstract',
+						key: 'title_and_abstract',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Contributors',
+						key: 'contributors',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Metadata',
+						key: 'metadata',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'References',
+						key: 'references',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Galleys',
+						key: 'galleys',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Permissions & Disclosure',
+						key: 'permissions_and_disclosure',
 						link: '#',
-						isCurrent: false,
 					},
 					{
 						label: 'Issue',
+						key: 'issue',
 						link: '#',
-						isCurrent: false,
 					},
 				],
 			},
 		];
-		return {metadata, generalInformation, items};
+		return {metadata, generalInformation, items, activeItemKey, expandedKeys};
 	},
 	template: `
 		<SideModalBody>
@@ -523,7 +528,7 @@ const SideModalWithSideMenu = {
 				<SideModalLayout2Columns>
 					<template #left>
 						<div class="flex">
-							<SideMenu :items="items"></SideMenu>
+							<SideMenu :items="items" v-model:activeItemKey="activeItemKey" :expanded-keys="expandedKeys"></SideMenu>
 							<p class="px-5">
 								Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 								eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad