From aeaa864dfabed067ec13facea149222eed8ceb0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= Date: Tue, 16 Jan 2024 15:18:09 +0100 Subject: [PATCH] pkp/pkp-lib#9453 Initial Boilerplate --- package-lock.json | 13 +++--- package.json | 2 +- src/components/Container/Page.vue | 3 +- src/composables/useApiUrl.js | 19 +++++++++ .../ReviewerSubmissionPage.vue | 41 +++++++++++++++++++ .../reviewerSubmission/RoundHistoryModal.vue | 33 +++++++++++++++ .../reviewerSubmissionPageStore.js | 26 ++++++++++++ .../roundHistoryModalStore.js | 23 +++++++++++ 8 files changed, 150 insertions(+), 10 deletions(-) create mode 100644 src/composables/useApiUrl.js create mode 100644 src/pages/reviewerSubmission/ReviewerSubmissionPage.vue create mode 100644 src/pages/reviewerSubmission/RoundHistoryModal.vue create mode 100644 src/pages/reviewerSubmission/reviewerSubmissionPageStore.js create mode 100644 src/pages/reviewerSubmission/roundHistoryModalStore.js diff --git a/package-lock.json b/package-lock.json index 649ee775e..f03265233 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,7 +59,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", @@ -13936,9 +13936,9 @@ } }, "node_modules/prettier-plugin-tailwindcss": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz", - "integrity": "sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==", + "version": "0.5.11", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz", + "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==", "dev": true, "engines": { "node": ">=14.21.3" @@ -13947,13 +13947,13 @@ "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", - "@shufo/prettier-plugin-blade": "*", "@trivago/prettier-plugin-sort-imports": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-style-order": "*", @@ -13969,9 +13969,6 @@ "@shopify/prettier-plugin-liquid": { "optional": true }, - "@shufo/prettier-plugin-blade": { - "optional": true - }, "@trivago/prettier-plugin-sort-imports": { "optional": true }, diff --git a/package.json b/package.json index e375c074b..ed8310c13 100644 --- a/package.json +++ b/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", diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue index b01734ad4..42d056bb8 100644 --- a/src/components/Container/Page.vue +++ b/src/components/Container/Page.vue @@ -4,7 +4,7 @@ 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', @@ -12,6 +12,7 @@ export default { PkpDialog, PkpAnnouncer, ModalManager, + ReviewerSubmissionPage, }, extends: Container, data() { diff --git a/src/composables/useApiUrl.js b/src/composables/useApiUrl.js new file mode 100644 index 000000000..8f1ce1033 --- /dev/null +++ b/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}; +} diff --git a/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue new file mode 100644 index 000000000..6b2c35623 --- /dev/null +++ b/src/pages/reviewerSubmission/ReviewerSubmissionPage.vue @@ -0,0 +1,41 @@ + + + diff --git a/src/pages/reviewerSubmission/RoundHistoryModal.vue b/src/pages/reviewerSubmission/RoundHistoryModal.vue new file mode 100644 index 000000000..6f819df40 --- /dev/null +++ b/src/pages/reviewerSubmission/RoundHistoryModal.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js b/src/pages/reviewerSubmission/reviewerSubmissionPageStore.js new file mode 100644 index 000000000..4a8ae5c30 --- /dev/null +++ b/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, + }; + }, +); diff --git a/src/pages/reviewerSubmission/roundHistoryModalStore.js b/src/pages/reviewerSubmission/roundHistoryModalStore.js new file mode 100644 index 000000000..4327b5e07 --- /dev/null +++ b/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, + }; + }, +);