ui-lib#11686 Add email all authors feature to publication contributors - main

src/components/ListPanel/contributors/ContributorsEmailModal.vue

@@ -0,0 +1,27 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ title }}
+		</template>
+		<SideModalLayoutBasic>
+			<PkpForm
+				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/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -108,6 +108,7 @@
 				</template>
 			</ListPanel>
 		</slot>
+		<pkp-button :isLink="true" :disabled="isLoading" icon="Email" @click="openEmailAuthorsModal()">{{ t('grid.action.emailAllAuthors') }}</pkp-button>		
 	</div>
 </template>
 
@@ -120,6 +121,7 @@ import Orderer from '@/components/Orderer/Orderer.vue';
 import PkpHeader from '@/components/Header/Header.vue';
 import ContributorsPreviewModal from './ContributorsPreviewModal.vue';
 import ContributorsEditModal from './ContributorsEditModal.vue';
+import ContributorsEmailModal from './ContributorsEmailModal.vue';
 
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
@@ -145,6 +147,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		emailForm: {
+			type: Object,
+			required: true,
+		},
 		id: {
 			type: String,
 			required: true,
@@ -246,6 +252,18 @@ export default {
 			this.activeFormTitle = '';
 		},
 
+		/**
+		 * Clear email authors form when the modal is closed
+		 *
+		 * @param {Object} event
+		 */
+		closeFormEmailAuthorsModal(event) {
+			const {closeSideModal} = useModal();
+			closeSideModal(ContributorsEmailModal);
+			this.activeForm = null;
+			this.activeFormTitle = '';
+		},
+
 		/**
 		 * The add/edit form has been successfully
 		 * submitted.
@@ -306,6 +324,38 @@ export default {
 			});
 		},
 
+		/**
+		 * Open the modal to Email all authors
+		 */
+		openEmailAuthorsModal() {
+			let activeForm = cloneDeep(this.emailForm);
+			activeForm.action = this.contributorsApiUrl + '/email';
+			activeForm.method = 'POST';
+
+			const emails = this.items
+				.filter(item => item.email)
+				.map(item => item.email)
+				.join(', ');
+			activeForm.fields = activeForm.fields.map(field => {
+				if (field.name === 'to') {
+					field.value = emails;
+				}
+				return field;
+			});
+
+			this.activeForm = activeForm;
+			this.activeFormTitle = this.t('grid.action.emailAllAuthors');
+			const {openSideModal} = useModal();
+
+			openSideModal(ContributorsEmailModal, {
+				title: this.activeFormTitle,
+				activeForm: this.activeForm,
+				onFormSuccess: () => {
+					this.closeFormEmailAuthorsModal()
+				}
+			});
+		},
+
 		/**
 		 * Open delete modal
 		 *

src/managers/ContributorManager/contributorManagerStore.js

@@ -22,6 +22,10 @@ export const useContributorManagerStore = defineComponentStore(
 			dashboardStore.componentForms.contributorForm,
 		);
 
+		const {form: emailForm, setLocalesForSubmission: setEmailLocalesForSubmission} = useForm(
+			dashboardStore.componentForms.emailContributorForm,
+		);
+
 		setLocalesForSubmission(props.submission);
 
 		const {triggerDataChange} = useDataChanged();
@@ -30,6 +34,7 @@ export const useContributorManagerStore = defineComponentStore(
 			return {
 				canEditPublication: props.canEdit,
 				form: form.value,
+				emailForm: emailForm.value,
 				id: 'contributors',
 				items: props.publication.authors,
 				title: t('publication.contributors'),