pkp/pkp-lib#9992 Migrate error doi message modals to useDialog

pkp · Jun 25, 2024 · 5829257 · 5829257
1 parent e2081d9
commit 5829257
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 102 deletions.
diff --git a/src/components/ListPanel/doi/DoiFailedActionDialogBody.vue b/src/components/ListPanel/doi/DoiFailedActionDialogBody.vue
@@ -0,0 +1,16 @@
+<template>
+	<p>{{ t('manager.dois.update.partialFailure') }}</p>
+	<ul>
+		<li v-for="errorMessage in failedDoiActions" :key="errorMessage.index">
+			{{ errorMessage }}
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+defineProps({
+	failedDoiActions: {type: Array, required: true},
+});
+const {t} = useLocalize();
+</script>
diff --git a/src/components/ListPanel/doi/DoiFailedActionModal.vue b/src/components/ListPanel/doi/DoiFailedActionModal.vue
diff --git a/src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue b/src/components/ListPanel/doi/DoiItemViewErrorDialogBody.vue
@@ -0,0 +1,23 @@
+<template>
+	<p>{{ errorMessageAgencyPreamble }}</p>
+	<div class="depositErrorMessage">
+		<pre>{{ errorMessage }}</pre>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	errorMessageAgencyPreamble: {type: String, required: true},
+	errorMessage: {type: String, required: true},
+});
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+.depositErrorMessage {
+	background: rgb(234, 237, 238);
+	> pre {
+		white-space: pre-wrap;
+	}
+}
+</style>
diff --git a/src/components/ListPanel/doi/DoiItemViewErrorModal.vue b/src/components/ListPanel/doi/DoiItemViewErrorModal.vue
diff --git a/src/components/ListPanel/doi/DoiItemViewRegisteredMessage.vue b/src/components/ListPanel/doi/DoiItemViewRegisteredMessage.vue
diff --git a/src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue b/src/components/ListPanel/doi/DoiItemViewRegisteredMessageDialogBody.vue
@@ -0,0 +1,11 @@
+<template>
+	<p>{{ registeredMessageAgencyPreamble }}</p>
+	<p>{{ registeredMessage }}</p>
+</template>
+
+<script setup>
+defineProps({
+	registeredMessageAgencyPreamble: {type: String, required: true},
+	registeredMessage: {type: String, required: true},
+});
+</script>
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
@@ -178,8 +178,8 @@
 import Expander from '@/components/Expander/Expander.vue';
 import PkpTable from '@/components/Table/Table.vue';
 import TableCell from '@/components/Table/TableCell.vue';
-import DoiItemViewErrorModal from './DoiItemViewErrorModal.vue';
-import DoiItemViewRegisteredMessage from './DoiItemViewRegisteredMessage.vue';
+import DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
+import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
 import DoiItemVersionModal from './DoiItemVersionModal.vue';
 import {computed} from 'vue';
 import {useModal} from '@/composables/useModal';
@@ -465,11 +465,25 @@ export default {
 
 	methods: {
 		openViewErrorModal() {
-			const {openSideModal} = useModal();
-			openSideModal(DoiItemViewErrorModal, {
-				errorMessageAgencyPreamble:
-					this.registrationAgencyInfo['errorMessagePreamble'],
-				errorMessage: this.currentVersionDoiObjects[0]['errorMessage'],
+			const {openDialog} = useModal();
+
+			openDialog({
+				title: this.t('manager.dois.registration.viewError.title'),
+				bodyComponent: DoiItemViewErrorDialogBody,
+				bodyProps: {
+					errorMessageAgencyPreamble:
+						this.registrationAgencyInfo['errorMessagePreamble'],
+					errorMessage: this.currentVersionDoiObjects[0]['errorMessage'],
+				},
+				actions: [
+					{
+						label: this.t('common.ok'),
+						isPrimary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
 			});
 		},
 		openVersionModal() {
@@ -746,12 +760,25 @@ export default {
 			return this.isDeposited ? this.viewRecord() : this.triggerDeposit();
 		},
 		viewRecord() {
-			const {openSideModal} = useModal();
-			openSideModal(DoiItemViewRegisteredMessage, {
-				registeredMessageAgencyPreamble:
-					this.registrationAgencyInfo['registeredMessagePreamble'],
-				registeredMessage:
-					this.currentVersionDoiObjects[0]['registeredMessage'],
+			const {openDialog} = useModal();
+			openDialog({
+				title: this.t('manager.dois.registration.viewRecord.title'),
+				bodyComponent: DoiItemViewRegisteredMessageDialogBody,
+				bodyProps: {
+					registeredMessageAgencyPreamble:
+						this.registrationAgencyInfo['registeredMessagePreamble'],
+					registeredMessage:
+						this.currentVersionDoiObjects[0]['registeredMessage'],
+				},
+				actions: [
+					{
+						label: this.t('common.ok'),
+						isPrimary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
 			});
 		},
 		triggerDeposit() {
@@ -773,13 +800,6 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.depositErrorMessage {
-	background: rgb(234, 237, 238);
-	> pre {
-		white-space: pre-wrap;
-	}
-}
-
 .doiListItem__depositorDetails {
 	//width: 100%;
 	//max-width: 100%;

diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -214,7 +214,7 @@ import PkpFilterAutosuggest from '@/components/Filter/FilterAutosuggest.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import Search from '@/components/Search/Search.vue';
 import DoiStatusInfoModal from './DoiStatusInfoModal.vue';
-import DoiFailedActionModal from './DoiFailedActionModal.vue';
+import DoiFailedActionDialogBody from './DoiFailedActionDialogBody.vue';
 import fetch from '@/mixins/fetch';
 import ajaxError from '@/mixins/ajaxError';
 import {useModal} from '@/composables/useModal';
@@ -361,14 +361,29 @@ export default {
 		 * @param {Array} oldVal
 		 */
 		failedDoiActions(newVal, oldVal) {
-			const {openSideModal, isSideModalOpened} = useModal();
+			const {openDialog} = useModal();
 
 			if (newVal.length !== 0) {
-				openSideModal(DoiFailedActionModal, {
-					failedDoiActions: this.failedDoiActions,
+				openDialog({
+					title: this.t('manager.dois.update.failedCreation'),
+					actions: [
+						{
+							label: this.t('common.ok'),
+							isPrimary: true,
+							callback: (close) => {
+								this.failedDoiActions = [];
+								close();
+							},
+						},
+					],
+					bodyComponent: DoiFailedActionDialogBody,
+					bodyProps: {
+						failedDoiActions: this.failedDoiActions,
+					},
+					close: () => {
+						this.failedDoiActions = [];
+					},
 				});
-			} else if (isSideModalOpened(DoiFailedActionModal)) {
-				this.closeFailedDoiActionModal();
 			}
 		},
 	},
@@ -934,11 +949,6 @@ export default {
 				...props,
 			};
 		},
-		closeFailedDoiActionModal() {
-			const {closeSideModal} = useModal();
-			closeSideModal(DoiFailedActionModal);
-			this.failedDoiActions = [];
-		},
 	},
 };
 </script>

diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
@@ -53,6 +53,11 @@
 							</div>
 							<div class="modal-content p-4">
 								<div v-html="dialogProps.message" />
+								<component
+									:is="dialogProps.bodyComponent"
+									v-if="dialogProps.bodyComponent"
+									v-bind="dialogProps.bodyProps"
+								/>
 							</div>
 							<div class="flex items-center justify-end p-4">
 								<spinner v-if="isLoading" />