pkp/pkp-lib#9453 Initial Boilerplate

package.json

@@ -65,7 +65,7 @@
     "msw-storybook-addon": "^2.0.0--canary.122.b3ed3b1.0",
     "postcss": "^8.4.27",
     "prettier": "^3.0.2",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.5",

src/components/Container/Page.vue

@@ -4,14 +4,15 @@ import PkpDialog from '@/components/Modal/Dialog.vue';
 import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
-// store
+import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissionPage.vue';
 
 export default {
 	name: 'Page',
 	components: {
 		PkpDialog,
 		PkpAnnouncer,
 		ModalManager,
+		ReviewerSubmissionPage,
 	},
 	extends: Container,
 	data() {

src/composables/useApiUrl.js

@@ -0,0 +1,19 @@
+import {ref, computed} from 'vue';
+/**
+ *  Helper to construct url for API interactions
+ *  Query params are not included, as correct query param serialisation
+ *  is covered in useFetch
+ */
+
+export function useApiUrl(_path) {
+	if (typeof pkp === 'undefined' || !pkp?.context?.apiBaseUrl) {
+		throw new Error('pkp.context.apiBaseUrl is not configured');
+	}
+
+	// normalise to be ref even if its not passed as ref
+	const path = ref(_path);
+
+	const apiUrl = computed(() => `${pkp.context.apiBaseUrl}${path.value}`);
+
+	return {apiUrl};
+}

src/pages/reviewerSubmission/ReviewerSubmissionPage.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="mb-4 space-x-2">
+		<PkpButton
+			v-for="review in store.reviewRoundHistories"
+			:key="review.reviewRoundId"
+			@click="store.openRoundHistoryModal(review)"
+		>
+			{{ t('submission.round', {round: review.reviewRoundNumber}) }}
+		</PkpButton>
+	</div>
+	<SideModal
+		:open="store.isRoundHistoryModalOpened"
+		@close="store.closeRoundHistoryModal"
+	>
+		<RoundHistoryModal
+			v-bind="store.roundHistoryModalProps"
+		></RoundHistoryModal>
+	</SideModal>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+
+import SideModal from '@/components/Modal/SideModal.vue';
+import RoundHistoryModal from './RoundHistoryModal.vue';
+
+import {useTranslation} from '@/composables/useTranslation';
+
+import {useReviewerSubmissionPageStore} from './reviewerSubmissionPageStore';
+
+const {t} = useTranslation();
+
+const props = defineProps({
+	reviewRoundHistories: {
+		type: Object,
+		required: true,
+	},
+});
+
+const store = useReviewerSubmissionPageStore(props);
+</script>

src/pages/reviewerSubmission/RoundHistoryModal.vue

@@ -0,0 +1,33 @@
+<template>
+	<SideModalBody>
+		<template #title>Title TODO</template>
+		<div class="p-4">
+			<div class="bg-lightest p-5">
+				Here goes all metadata, submissionId: {{ store.submissionId }}, roundId:
+				{{ store.reviewRoundId }}
+
+				<div v-if="store.submission">
+					<div class="text-xl-bold">
+						{{ localize(store.submission.publications[0].title) }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import {useTranslation} from '@/composables/useTranslation';
+import {useRoundHistoryModalStore} from './roundHistoryModalStore';
+
+const props = defineProps({
+	submissionId: {type: Number, required: true},
+	reviewRoundId: {type: Number, required: true},
+});
+
+const {localize} = useTranslation();
+
+const store = useRoundHistoryModalStore(props);
+</script>

src/pages/reviewerSubmission/reviewerSubmissionPageStore.js

@@ -0,0 +1,26 @@
+import {ref} from 'vue';
+import {defineComponentStore} from '@/utils/defineComponentStore';
+
+export const useReviewerSubmissionPageStore = defineComponentStore(
+	'reviewerSubmissionPage',
+	(pageInitConfig) => {
+		const isRoundHistoryModalOpened = ref(false);
+		const roundHistoryModalProps = ref(null);
+		function openRoundHistoryModal({submissionId, reviewRoundId}) {
+			roundHistoryModalProps.value = {submissionId, reviewRoundId};
+			isRoundHistoryModalOpened.value = true;
+		}
+		function closeRoundHistoryModal() {
+			isRoundHistoryModalOpened.value = false;
+			roundHistoryModalProps.value = null;
+		}
+
+		return {
+			isRoundHistoryModalOpened,
+			openRoundHistoryModal,
+			closeRoundHistoryModal,
+			roundHistoryModalProps,
+			reviewRoundHistories: pageInitConfig.reviewRoundHistories,
+		};
+	},
+);

src/pages/reviewerSubmission/roundHistoryModalStore.js

@@ -0,0 +1,23 @@
+import {defineComponentStore} from '@/utils/defineComponentStore';
+
+import {useApiUrl} from '@/composables/useApiUrl';
+import {useFetch} from '@/composables/useFetch';
+
+export const useRoundHistoryModalStore = defineComponentStore(
+	'roundHistoryModal',
+	(props) => {
+		const {apiUrl: submissionApiUrl} = useApiUrl(
+			`submissions/${props.submissionId}`,
+		);
+		const {fetch: fetchSubmission, data: submission} =
+			useFetch(submissionApiUrl);
+
+		fetchSubmission();
+
+		return {
+			submission,
+			submissionId: props.submissionId,
+			reviewRoundId: props.reviewRoundId,
+		};
+	},
+);