Publication tab feature (#383)

* add publication "tab"
* add status, ensure all manuscript routes update "page"
* update pnpm lock file

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+    "root": true,
+    "env": { "node": true },
+    // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+    },
+    "plugins": ["@typescript-eslint", "prettier", "quasar"],
+    "extends": [
+        "plugin:@typescript-eslint/recommended",
+        // https://github.com/vuejs/eslint-plugin-vue/blob/44ff0e02cd0fd08b8cd7dee0127dbb5590446323/docs/user-guide/README.md#conflict-with-prettier
+        "plugin:vue/vue3-recommended",
+        "prettier"
+    ],
+    "rules": {
+        "prettier/prettier": [
+            "warn",
+            {
+                "singleQuote": true,
+                "jsxSingleQuote": true
+            }
+        ]
+    },
+    "ignorePatterns": ["auto-imports.d.ts"]
+}

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}

package.json

@@ -18,6 +18,7 @@
         "eslint": "^8.50.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-quasar": "^1.1.0",
         "eslint-plugin-vue": "^9.17.0",
         "laravel-vite-plugin": "^0.8.0",
         "lodash": "^4.17.21",
@@ -35,7 +36,6 @@
         "@vitejs/plugin-vue": "^4.3.4",
         "@vueuse/core": "^10.4.1",
         "dompurify": "^3.0.5",
-        "eslint-plugin-quasar": "^1.1.0",
         "pinia": "^2.1.6",
         "plugin-vue@latest": "link:@@vitejs/plugin-vue@latest",
         "quasar": "^2.12.7",

resources/src/auto-imports.d.ts

@@ -157,6 +157,7 @@ declare global {
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCurrentMRFStore: typeof import('./stores/CurrentMRFStore')['useCurrentMRFStore']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
@@ -315,7 +316,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'

resources/src/locales/en.json

@@ -231,7 +231,8 @@
     "your-email": "Your email",
     "your-first-name": "Your first name",
     "your-last-name": "Your last name",
-    "your-password": "Your password"
+    "your-password": "Your password",
+    "publication": "Publication"
   },
   "create-author-dialog": {
     "title": "Create a new author"

resources/src/locales/fr.json

@@ -231,7 +231,8 @@
     "your-email": "Votre courriel",
     "your-first-name": "Ton prénom",
     "your-last-name": "Votre nom de famille",
-    "your-password": "Votre mot de passe"
+    "your-password": "Votre mot de passe",
+    "publication": "Publication"
   },
   "create-author-dialog": {
     "title": "Créer un nouvel auteur"

resources/src/models/ManagementReviewStep/views/ManagementReviewStepsView.vue

@@ -111,6 +111,10 @@ const props = defineProps<{
     id: number;
 }>();
 
+const emit = defineEmits<{
+    (e: 'update-manuscript', manuscript: ManuscriptRecordResource): void;
+}>();
+
 const managementReviewSteps: Ref<ManagementReviewStepResourceList | null> =
     ref(null);
 const manuscriptRecord: Ref<ManuscriptRecordResource | null> = ref(null);
@@ -206,6 +210,7 @@ async function getManuscriptRecord() {
     await ManuscriptRecordService.find(props.id)
         .then((response) => {
             manuscriptRecord.value = response;
+            emit('update-manuscript', manuscriptRecord.value);
         })
         .catch((error) => {
             console.log(error);

resources/src/models/ManuscriptRecord/views/ManuscriptRecordFormView.vue

@@ -388,6 +388,10 @@ const props = defineProps<{
     id: number;
 }>();
 
+const emit = defineEmits<{
+    (e: 'update-manuscript', manuscript: ManuscriptRecordResource): void;
+}>();
+
 const loading = ref(true);
 const manuscriptResource: Ref<ManuscriptRecordResource | null> = ref(null);
 const manuscriptAuthorsCard = ref<InstanceType<
@@ -440,6 +444,7 @@ onMounted(async () => {
     await ManuscriptRecordService.find(props.id)
         .then((response) => {
             manuscriptResource.value = response;
+            emit('update-manuscript', manuscriptResource.value);
         })
         .catch((error) => {
             if (error.status == 403) {
@@ -479,6 +484,10 @@ const save = async () => {
             console.log(error);
         })
         .finally(() => {
+            //emit the event to the parent
+            if (manuscriptResource.value) {
+                emit('update-manuscript', manuscriptResource.value);
+            }
             loading.value = false;
             isDirty.value = false;
         });

resources/src/models/ManuscriptRecord/views/ManuscriptRecordProgressView.vue

@@ -180,6 +180,11 @@ const { t } = useI18n();
 const props = defineProps<{
     id: number;
 }>();
+
+const emit = defineEmits<{
+    (e: 'update-manuscript', manuscript: ManuscriptRecordResource): void;
+}>();
+
 const manuscriptRecord: Ref<ManuscriptRecordResource | null> = ref(null);
 
 const createdSubtitle = computed(() => {
@@ -316,6 +321,7 @@ async function getManuscriptRecord() {
     await ManuscriptRecordService.find(props.id)
         .then((response) => {
             manuscriptRecord.value = response;
+            emit('update-manuscript', manuscriptRecord.value);
         })
         .catch((error) => {
             console.log(error);
@@ -330,7 +336,7 @@ const showSubmittedToJournalDialog = ref(false);
 function submittedToJournal(record: ManuscriptRecordResource) {
     manuscriptRecord.value = record;
     showSubmittedToJournalDialog.value = false;
-    showUpdatedNotification();
+    showUpdatedNotification(record);
 }
 
 // accept for publication
@@ -339,18 +345,19 @@ const showAcceptedByJournalDialog = ref(false);
 function acceptedToJournal(record: ManuscriptRecordResource) {
     manuscriptRecord.value = record;
     showAcceptedByJournalDialog.value = false;
-    showUpdatedNotification();
+    showUpdatedNotification(record);
 }
 // withdraw manuscript
 const showWithdrawManuscriptDialog = ref(false);
 
 function withdrawManuscript(record: ManuscriptRecordResource) {
     manuscriptRecord.value = record;
     showWithdrawManuscriptDialog.value = false;
-    showUpdatedNotification();
+    showUpdatedNotification(record);
 }
 
-function showUpdatedNotification() {
+function showUpdatedNotification(record: ManuscriptRecordResource) {
+    emit('update-manuscript', record);
     $q.notify({
         message: t('manuscript-progress-view.manuscript-status-updated'),
         color: 'positive',

resources/src/pages/ManuscriptRecordPage.vue

@@ -73,11 +73,43 @@
                                 }}</q-item-label>
                             </q-item-section>
                         </q-item>
+                        <q-item
+                            clickable
+                            :disable="
+                                manuscript?.data.publication === undefined
+                            "
+                            :to="`/publication/${manuscript?.data.publication?.data.id}`"
+                        >
+                            <q-item-section avatar>
+                                <q-icon name="mdi-newspaper-variant-outline" />
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label>{{
+                                    $t('common.publication')
+                                }}</q-item-label>
+                                <q-item-label caption>
+                                    <span
+                                        v-if="
+                                            manuscript?.data.publication ==
+                                            undefined
+                                        "
+                                        >{{ $t('common.pending') }}
+                                    </span>
+                                    <PublicationStatusSpan
+                                        v-else
+                                        :status="
+                                            manuscript?.data.publication?.data
+                                                .status
+                                        "
+                                    />
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
                     </q-list>
                 </ContentCard>
             </div>
             <div class="col q-pr-md">
-                <RouterView />
+                <RouterView @update-manuscript="updateManuscript" />
             </div>
         </div>
     </MainPageLayout>
@@ -86,23 +118,24 @@
 <script setup lang="ts">
 import ContentCard from '@/components/ContentCard.vue';
 import MainPageLayout from '@/layouts/MainPageLayout.vue';
-import {
-    ManuscriptRecordResource,
-    ManuscriptRecordService,
-} from '@/models/ManuscriptRecord/ManuscriptRecord';
-const { t } = useI18n();
+import { ManuscriptRecordResource } from '@/models/ManuscriptRecord/ManuscriptRecord';
+import PublicationStatusSpan from '@/models/Publication/components/PublicationStatusSpan.vue';
+
+const loading = ref(true);
+const manuscript = ref<ManuscriptRecordResource | undefined>(undefined);
 
-const props = defineProps<{
+defineProps<{
     id: number;
 }>();
 
-const loading = ref(true);
-const manuscript = ref<ManuscriptRecordResource>();
-
-onMounted(async () => {
-    manuscript.value = await ManuscriptRecordService.find(props.id);
+/**
+ * this page depends on its child routes to load the manuscript record by
+ * emitting an event called 'update-manuscript'
+ */
+function updateManuscript(updatedManuscript: ManuscriptRecordResource) {
+    manuscript.value = updatedManuscript;
     loading.value = false;
-});
+}
 
 // display banner if the manuscript is reviewed but still needs to be published
 const showPublishBanner = computed(() => {