I9992

src/components/Composer/Composer.vue

@@ -253,18 +253,6 @@
 						</div>
 					</template>
 				</field-prepared-content>
-				<modal
-					:close-label="t('common.close')"
-					:name="fileAttacherModalId"
-					:title="attachFilesLabel"
-					:open="isModalOpenedFileAttacher"
-					@close="resetFocusAfterAttachment"
-				>
-					<file-attacher
-						:attachers="attachers"
-						@attached:files="addAttachments"
-					/>
-				</modal>
 				<field-error
 					v-if="errors.attachments"
 					:id="id + '-attachments-error'"
@@ -287,21 +275,18 @@
 import FieldAutosuggestPreset from '@/components/Form/fields/FieldAutosuggestPreset.vue';
 import FieldError from '@/components/Form/FieldError.vue';
 import FieldPreparedContent from '@/components/Form/fields/FieldPreparedContent.vue';
-import FileAttacher from '@/components/FileAttacher/FileAttacher.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Search from '@/components/Search/Search.vue';
+import FileAttacherModal from './FileAttacherModal.vue';
 import ajaxErrorCallback from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog';
 import preparedContent from '@/mixins/preparedContent';
-
+import {useModal} from '@/composables/useModal';
 export default {
 	name: 'Composer',
 	components: {
 		FieldAutosuggestPreset,
 		FieldError,
 		FieldPreparedContent,
-		FileAttacher,
-		Modal,
 		Search,
 	},
 	mixins: [ajaxErrorCallback, dialog, preparedContent],
@@ -555,7 +540,6 @@ export default {
 			searchPhrase: '',
 			searchResults: [],
 			showSearchResultCount: 10,
-			isModalOpenedFileAttacher: false,
 		};
 	},
 	computed: {
@@ -586,7 +570,13 @@ export default {
 						icon: 'upload',
 						text: self.t('common.attachFiles'),
 						onAction() {
-							self.isModalOpenedFileAttacher = true;
+							const {openSideModal} = useModal();
+
+							openSideModal(FileAttacherModal, {
+								title: self.attachFilesLabel,
+								attachers: self.attachers,
+								onAddAttachments: self.addAttachments,
+							});
 						},
 					});
 					editor.settings.toolbar += ' | pkpAttachFiles';
@@ -753,7 +743,8 @@ export default {
 				}),
 			];
 			this.emitChange({attachments});
-			this.isModalOpenedFileAttacher = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(FileAttacherModal);
 		},
 
 		/**
@@ -916,20 +907,6 @@ export default {
 			});
 		},
 
-		/**
-		 * Reset the focus when the attachment modal is closed
-		 */
-		resetFocusAfterAttachment() {
-			this.isModalOpenedFileAttacher = false;
-			this.$nextTick(() => {
-				if (this.$refs.attachedFiles) {
-					this.$refs.attachedFiles.focus();
-				} else {
-					this.setFocusIn(this.$el.querySelector('.composer__body'));
-				}
-			});
-		},
-
 		/**
 		 * Search for email templates
 		 */

src/components/Composer/FileAttacherModal.vue

@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<FileAttacher
+				:attachers="attachers"
+				@attached:files="(...args) => emit('addAttachments', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import FileAttacher from '@/components/FileAttacher/FileAttacher.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	attachers: {type: Object, required: true},
+});
+
+const emit = defineEmits(['addAttachments']);
+</script>

src/components/Container/ManageEmailsPage.stories.js

@@ -97,71 +97,6 @@ const ManageEmailsPageWithDataAndTemplate = {
 				</div>
 			</template>
 		</list-panel>
-		<modal
-			:close-label="t('common.close')"
-			name="mailable"
-			:open="isModalOpenedMailable"
-			:title="currentMailable ? currentMailable.name : ''"
-			@close="closeMailableModal"
-		>
-			<template v-if="currentMailable">
-				<p>{{ currentMailable.description }}</p>
-				<p>
-					Add and edit templates that you would like to make available to the
-					user when they are sending this email. The default will be loaded
-					automatically, and the user will be able to quickly load any other
-					templates you add here.
-				</p>
-				<list-panel :items="currentMailable.emailTemplates">
-					<template #header>
-						<pkp-header>
-							<h3>Templates</h3>
-							<template #actions>
-								<pkp-button @click="openTemplate()">Add Template</pkp-button>
-							</template>
-						</pkp-header>
-					</template>
-					<template #item-subtitle="{item}">
-						{{ localize(item.name) }}
-					</template>
-					<template #item-actions="{item}">
-						<badge v-if="item.key === currentMailable.emailTemplateKey">
-							Default
-						</badge>
-						<pkp-button @click="openTemplate(item)">Edit</pkp-button>
-						<pkp-button
-							v-if="item.key === currentMailable.emailTemplateKey && item.id"
-							:is-warnable="true"
-							@click="confirmResetTemplate(item)"
-						>
-							Reset
-						</pkp-button>
-						<pkp-button
-							v-else-if="item.id"
-							:is-warnable="true"
-							@click="confirmRemoveTemplate(item)"
-						>
-							Remove
-						</pkp-button>
-					</template>
-				</list-panel>
-			</template>
-		</modal>
-		<modal
-			:close-label="t('common.close')"
-			name="template"
-			:open="isModalOpenedTemplate"
-			:title="currentTemplate ? 'Edit Template' : 'Add Template'"
-			@close="closeTemplateModal"
-		>
-			<pkp-form
-				ref="templateForm"
-				class="manageEmails__templateForm"
-				v-bind="currentTemplateForm"
-				@set="updateCurrentTemplateForm"
-				@success="templateSaved"
-			></pkp-form>
-		</modal>
 	</div>
 `,
 	data() {

src/components/Container/ManageEmailsPage.vue

@@ -4,6 +4,12 @@ import Modal from '../Modal/Modal.vue';
 import PkpFilter from '../Filter/Filter.vue';
 import Search from '../Search/Search.vue';
 import dialog from '../../mixins/dialog';
+import EditMailableModal from '@/pages/manageEmails/EditMailableModal.vue';
+import EditTemplateModal from '@/pages/manageEmails/EditTemplateModal.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useModal} from '@/composables/useModal';
+
+const {t} = useLocalize();
 
 export default {
 	name: 'ManageEmailsPage',
@@ -36,8 +42,6 @@ export default {
 			mailables: [],
 			/** The URL to the `/mailables` endpoint in the REST API. */
 			mailablesApiUrl: '',
-			/**  Used to reset focus when a modal is closed.  */
-			resetFocusTo: {},
 			/** The value of the search input.  */
 			searchPhrase: '',
 			/** A "clean" copy of the form to add or edit an `EmailTemplate`. The `currentTemplateForm` is a copy of this form that has been modified to add or edit a specific template. */
@@ -296,8 +300,8 @@ export default {
 		 * Fired when the mailable modal is closed
 		 */
 		closeMailableModal() {
-			this.isModalOpenedMailable = false;
-			this.resetFocus();
+			const {closeSideModal} = useModal();
+			closeSideModal(EditMailableModal);
 			setTimeout(() => {
 				this.currentMailable = {};
 				this.currentTemplate = {};
@@ -315,9 +319,15 @@ export default {
 		openMailable(mailable) {
 			if (mailable.supportsTemplates) {
 				this.getMailable(mailable, (mailable) => {
-					this.resetFocusTo = document.activeElement;
 					this.currentMailable = mailable;
-					this.isModalOpenedMailable = true;
+					const {openSideModal} = useModal();
+					openSideModal(EditMailableModal, {
+						title: mailable ? mailable.name : '',
+						mailable: this.currentMailable,
+						onOpenTemplate: this.openTemplate,
+						onConfirmResetTemplate: this.confirmRemoveTemplate,
+						onConfirmRemoveTemplate: this.confirmRemoveTemplate,
+					});
 				});
 			} else {
 				this.getTemplate(mailable.emailTemplateKey, (template) => {
@@ -334,9 +344,18 @@ export default {
 		 */
 		openTemplate(template) {
 			template = template || {};
-			this.resetFocusTo = document.activeElement;
 			this.currentTemplate = template;
-			this.$nextTick(() => (this.isModalOpenedTemplate = true));
+			const {openSideModal} = useModal();
+			this.$nextTick(() =>
+				openSideModal(EditTemplateModal, {
+					title: this.currentTemplate
+						? t('manager.mailables.editTemplate')
+						: t('manager.emails.addEmail'),
+					currentTemplateForm: this.currentTemplateForm,
+					onUpdateCurrentTemplateForm: this.updateCurrentTemplateForm,
+					onTemplateSaved: this.templateSaved,
+				}),
+			);
 		},
 
 		/**
@@ -355,17 +374,6 @@ export default {
 			this.activeFilters = newFilters;
 		},
 
-		/**
-		 * A helper function to move the focus back to the element
-		 * it was last at. This is usually used with modals to restore
-		 * the focus after a modal is closed.
-		 */
-		resetFocus() {
-			if (this.resetFocusTo) {
-				this.resetFocusTo.focus();
-			}
-		},
-
 		/**
 		 * Setup the form to edit an email template
 		 *
@@ -455,9 +463,9 @@ export default {
 		 * Fired when the email template modal has been closed
 		 */
 		closeTemplateModal() {
-			this.isModalOpenedTemplate = false;
+			const {closeSideModal} = useModal();
+			closeSideModal(EditTemplateModal);
 			if (this.currentMailable.supportsTemplates) {
-				this.resetFocus();
 				setTimeout(() => {
 					this.currentTemplate = {};
 				}, 300);

src/components/Container/StatsContextPage.vue

@@ -1,5 +1,7 @@
 <script>
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
+import ContextDownloadReportModal from '@/pages/statsContext/ContextDownloadReportModal.vue';
+import {useModal} from '@/composables/useModal';
 
 export default {
 	name: 'StatsContextPage',
@@ -8,6 +10,26 @@ export default {
 		return {isModalOpenedDownloadReport: false};
 	},
 	methods: {
+		/**
+		 * Open download report modal, for context
+		 */
+		openDownloadReportModal() {
+			const {openSideModal} = useModal();
+			openSideModal(ContextDownloadReportModal, {
+				timelineDescription: this.getTimelineDescription(),
+				dateRangeDescription: this.getDateRangeDescription(),
+				onDownloadReport: this.downloadReport,
+			});
+		},
+
+		/**
+		 * Close download report modal, for context
+		 */
+		closeDownloadReportModal() {
+			const {closeSideModal} = useModal();
+			closeSideModal(ContextDownloadReportModal);
+		},
+
 		/**
 		 * The params to send with each GET request
 		 *

src/components/Container/StatsIssuesPage.vue

@@ -1,6 +1,7 @@
 <script>
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-
+import IssueDownloadReportModal from '@/pages/statsIssues/IssueDownloadReportModal.vue';
+import {useModal} from '@/composables/useModal';
 export default {
 	name: 'StatsIssuesPage',
 	extends: StatsPublicationsPage,
@@ -10,6 +11,27 @@ export default {
 		};
 	},
 	methods: {
+		/**
+		 * Open download report modal, for issues
+		 */
+		openDownloadReportModal() {
+			const {openSideModal} = useModal();
+			openSideModal(IssueDownloadReportModal, {
+				searchPhrase: this.searchPhrase,
+				timelineDescription: this.getTimelineDescription(),
+				dateRangeDescription: this.getDateRangeDescription(),
+				onDownloadReport: this.downloadReport,
+			});
+		},
+
+		/**
+		 * Close download report modal, for issues
+		 */
+		closeDownloadReportModal() {
+			const {closeSideModal} = useModal();
+			closeSideModal(IssueDownloadReportModal);
+		},
+
 		/**
 		 * Set items and itemsMax from the API call result
 		 */