pkp/pkp-lib#6278 Add reload capability to submission wizard

Author: jardakotesovec

src/components/Container/SubmissionWizardPage.vue

@@ -13,7 +13,10 @@ import autosave from '@/mixins/autosave';
 import dialog from '@/mixins/dialog';
 import localizeSubmission from '@/mixins/localizeSubmission';
 import localStorage from '@/mixins/localStorage';
+import {getCurrentInstance} from 'vue';
 import {useDate} from '@/composables/useDate';
+import {useDataChangedProvider} from '@/composables/useDataChangedProvider';
+import {useFetch} from '@/composables/useFetch';
 import {useModal} from '@/composables/useModal';
 
 export default {
@@ -24,10 +27,24 @@ export default {
 		File,
 		Modal,
 		SubmissionFilesListPanel,
-		DataCitationManager
+		DataCitationManager,
 	},
 	extends: Page,
 	mixins: [ajaxError, autosave, dialog, localizeSubmission, localStorage],
+	setup() {
+		const instance = getCurrentInstance();
+
+		const {triggerDataChange} = useDataChangedProvider(async () => {
+			await Promise.all([
+				instance.proxy.reloadSubmission(),
+				instance.proxy.reloadPublication(),
+			]);
+		});
+
+		return {
+			triggerDataChange,
+		};
+	},
 	data() {
 		return {
 			/** A unique string. See autosave mixin below. */
@@ -611,6 +628,28 @@ export default {
 			this.publication = newPublication;
 		},
 
+		/**
+		 * Reload the submission from the API
+		 */
+		async reloadSubmission() {
+			const {data, fetch} = useFetch(this.submissionApiUrl);
+			await fetch();
+			if (data.value) {
+				this.submission = data.value;
+			}
+		},
+
+		/**
+		 * Reload the publication from the API
+		 */
+		async reloadPublication() {
+			const {data, fetch} = useFetch(this.publicationApiUrl);
+			await fetch();
+			if (data.value) {
+				this.publication = data.value;
+			}
+		},
+
 		/**
 		 * Complete the submission
 		 *

src/managers/DataCitationManager/dataCitationManagerStore.js

@@ -1,17 +1,17 @@
-import {computed, onUnmounted, ref, toRefs} from 'vue';
-import {useUrl} from '@/composables/useUrl';
-import {useFetch} from '@/composables/useFetch';
+import {computed, toRefs} from 'vue';
 import {defineComponentStore} from '@/utils/defineComponentStore';
 import {useExtender} from '@/composables/useExtender';
+import {useDataChanged} from '@/composables/useDataChanged';
 import {useDataCitationManagerConfig} from './useDataCitationManagerConfig';
 import {useDataCitationManagerActions} from './useDataCitationManagerActions';
 
 export const useDataCitationManagerStore = defineComponentStore(
 	'dataCitationManager',
 	(props) => {
-
 		const extender = useExtender();
-		const dataCitationManagerConfig = extender.addFns(useDataCitationManagerConfig());
+		const dataCitationManagerConfig = extender.addFns(
+			useDataCitationManagerConfig(),
+		);
 		const columns = computed(() => dataCitationManagerConfig.getColumns());
 		const topItems = computed(() => dataCitationManagerConfig.getTopItems());
 
@@ -22,26 +22,23 @@ export const useDataCitationManagerStore = defineComponentStore(
 			});
 		}
 
-		const {
-			submission,
-			publication,
-		} = toRefs(props);
-		
-		const { apiUrl } = useUrl(`dataCitations/publications/${publication.value.id}`);
-		const {data: apiResponse, fetch: fetchDataCitations} = useFetch(apiUrl, {
-			method: 'GET',
-		});
+		const {submission, publication} = toRefs(props);
+
+		// Get data citations directly from publication prop
+		const dataCitations = computed(
+			() => publication.value?.dataCitations ?? [],
+		);
 
-		fetchDataCitations();
-		const dataCitations = computed(() => { return apiResponse.value?.items ?? []; });
+		// Use triggerDataChange to notify parent to refetch submission/publication
+		const {triggerDataChange} = useDataChanged();
 
 		/**
 		 * Actions
 		 */
 		const dataCitationManagerActions = useDataCitationManagerActions();
 
 		function dataUpdateCallback() {
-			fetchDataCitations();
+			triggerDataChange();
 		}
 
 		function getActionArgs(additionalArgs = {}) {
@@ -52,7 +49,7 @@ export const useDataCitationManagerStore = defineComponentStore(
 				...additionalArgs,
 			};
 		}
-		function dataCitationAddDataCitation({}) {
+		function dataCitationAddDataCitation() {
 			dataCitationManagerActions.dataCitationAddDataCitation(
 				getActionArgs({}),
 				dataUpdateCallback,