pkp/pkp-lib#9992 users stats export modal migrated to side modal

src/components/Container/StatsUsersPage.vue

@@ -1,25 +1,35 @@
 <script>
 import StatsPage from './StatsPage.vue';
 import Modal from '@/components/Modal/Modal.vue';
-
+import {useModal} from '@/composables/useModal';
+import UserExportModal from '@/pages/statsUsers/UserExportModal.vue';
 export default {
 	name: 'StatsUsersPage',
 	components: {
 		Modal,
 	},
 	extends: StatsPage,
-	data() {
-		return {isModalOpenedExport: false};
-	},
 	methods: {
+		/** Open Export Modal */
+		openExportModal() {
+			const {openSideModal} = useModal();
+
+			openSideModal(UserExportModal, {
+				title: this.t('manager.export.usersToCsv.label'),
+				usersReportForm: this.components.usersReportForm,
+				onSet: this.set,
+				onLoadExport: this.loadExport,
+			});
+		},
 		/**
 		 * Load the user export
 		 *
 		 * @param {String} url
 		 */
 		loadExport(url) {
 			window.location = url;
-			this.$modal.hide('export');
+			const {closeSideModal} = useModal();
+			closeSideModal(UserExportModal);
 		},
 	},
 };

src/pages/statsUsers/UserExportModal.vue

@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				v-bind="usersReportForm"
+				@set="(...args) => emit('set', ...args)"
+				@success="(...args) => emit('loadExport', ...args)"
+			/>
+		</SideModalLayoutBasic>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+defineProps({
+	title: {type: String, required: true},
+	usersReportForm: {type: Object, required: true},
+});
+const emit = defineEmits(['set', 'loadExport']);
+</script>