pkp/pkp-lib#9992 Migrate Announcements to SideModal

src/components/ListPanel/announcements/AnnouncementsListPanel.vue

@@ -41,7 +41,7 @@
 					/>
 				</template>
 			</list-panel>
-			<modal
+			<!--<modal
 				:close-label="t('common.close')"
 				name="form"
 				:title="activeFormTitle"
@@ -53,30 +53,30 @@
 					@set="updateForm"
 					@success="formSuccess"
 				/>
-			</modal>
+			</modal>-->
 		</slot>
 	</div>
 </template>
 
 <script>
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpForm from '@/components/Form/Form.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import Modal from '@/components/Modal/Modal.vue';
 import Search from '@/components/Search/Search.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import fetch from '@/mixins/fetch';
 import cloneDeep from 'clone-deep';
+import EditAnnouncementModal from '@/pages/announcements/EditAnnouncementModal.vue';
+import {useModal} from '@/composables/useModal';
+
+const {openSideModal, closeSideModal} = useModal();
 
 export default {
 	components: {
 		ListPanel,
 		Pagination,
-		PkpForm,
 		PkpHeader,
-		Modal,
 		Search,
 	},
 	mixins: [dialog, fetch, ajaxError],
@@ -155,7 +155,8 @@ export default {
 		closeFormModal(event) {
 			this.activeForm = null;
 			this.activeFormTitle = '';
-			this.isModalOpenedForm = false;
+			console.log('closeFormModal');
+			closeSideModal(EditAnnouncementModal);
 		},
 
 		/**
@@ -188,7 +189,13 @@ export default {
 			activeForm.method = 'POST';
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.addAnnouncementLabel;
-			this.isModalOpenedForm = true;
+
+			openSideModal(EditAnnouncementModal, {
+				title: this.activeFormTitle,
+				activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**
@@ -267,7 +274,13 @@ export default {
 			});
 			this.activeForm = activeForm;
 			this.activeFormTitle = this.editAnnouncementLabel;
-			this.isModalOpenedForm = true;
+
+			openSideModal(EditAnnouncementModal, {
+				title: this.editAnnouncementLabel,
+				activeForm,
+				onUpdateForm: this.updateForm,
+				onFormSuccess: this.formSuccess,
+			});
 		},
 
 		/**

src/components/Modal/ModalManager.vue

@@ -48,6 +48,6 @@ const component2 = computed(() => {
 });
 
 function close(modalId) {
-	modalStore.closeSideModal(true, modalId);
+	modalStore.closeSideModalById(true, modalId);
 }
 </script>

src/components/Modal/SideModalLayoutBasic.vue

@@ -0,0 +1,7 @@
+<template>
+	<div class="p-4">
+		<div class="bg-secondary p-4">
+			<slot></slot>
+		</div>
+	</div>
+</template>

src/composables/useModal.js

@@ -11,5 +11,10 @@ export function useModal() {
 		modalStore.openSideModal(component, props, opts);
 	}
 
-	return {openDialog, openSideModal};
+	function closeSideModal(component) {
+		console.log('useModal, closeSideModal');
+		modalStore.closeSideModal(component);
+	}
+
+	return {openDialog, openSideModal, closeSideModal};
 }

src/pages/announcements/EditAnnouncementModal.vue

@@ -0,0 +1,26 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<pkp-form
+				v-bind="activeForm"
+				@set="(...args) => emit('updateForm', ...args)"
+				@success="(...args) => emit('formSuccess', ...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},
+	activeForm: {type: Object, required: true},
+});
+const emit = defineEmits(['updateForm', 'formSuccess']);
+</script>

src/stores/modalStore.js

@@ -104,7 +104,21 @@ export const useModalStore = defineStore('modal', () => {
 		}
 	}
 
-	function closeSideModal(triggerLegacyCloseHandler = true, _modalId) {
+	function closeSideModal(component) {
+		console.log(
+			'closeSideModal:',
+			component,
+			sideModal1?.value?.component,
+			component === sideModal1?.value?.component,
+		);
+		if (sideModal1?.value?.component === component) {
+			closeSideModalById(false, sideModal1?.value?.modalId);
+		} else if (sideModal2?.value?.component === component) {
+			closeSideModalById(false, sideModal2?.value?.modalId);
+		}
+	}
+
+	function closeSideModalById(triggerLegacyCloseHandler = true, _modalId) {
 		let modalToClose = null;
 		if (sideModal1?.value?.modalId === _modalId && sideModal1?.value?.opened) {
 			modalToClose = sideModal1;
@@ -166,7 +180,7 @@ export const useModalStore = defineStore('modal', () => {
 
 	// Listener for close modal requests coming from legacy handler.
 	pkp?.eventBus?.$on('close-modal-vue', (_args) => {
-		closeSideModal(false, _args.modalId);
+		closeSideModalById(false, _args.modalId);
 	});
 
 	// Listener for open dialog modals coming from legacy handler.
@@ -192,6 +206,7 @@ export const useModalStore = defineStore('modal', () => {
 		closeDialog,
 		openSideModal,
 		closeSideModal,
+		closeSideModalById,
 		sideModal1,
 		sideModal2,
 	};