pkp/pkp-lib#10571 WIP: Allow admins and managers to assign user group…

…s to email templates within a mailable

src/components/Container/ManageEmailsPage.vue

@@ -346,16 +346,36 @@ export default {
 			template = template || {};
 			this.currentTemplate = template;
 			const {openSideModal} = useModal();
-			this.$nextTick(() =>
-				openSideModal(EditTemplateModal, {
+
+			this.$nextTick(() => {
+				// Remove use group field if current mailable does not support specifying user group access
+				if (!this.currentMailable.canAssignUserGroupToTemplates) {
+					this.currentTemplateForm.fields =
+						this.currentTemplateForm.value.fields.filter(
+							(field) => field.name !== 'userGroupIds',
+						);
+				} else {
+					const userGroupField = this.currentTemplateForm.fields.find(
+						(field) => field.name === 'userGroupIds',
+					);
+					userGroupField.assignableUserGroups =
+						this.currentMailable['assignableTemplateUserGroups'];
+					userGroupField.assignedUserGroupIds = this.currentTemplate
+						? this.currentTemplate['assignedUserGroupIds']
+						: [];
+				}
+
+				return openSideModal(EditTemplateModal, {
 					title: this.currentTemplate
 						? t('manager.mailables.editTemplate')
 						: t('manager.emails.addEmail'),
 					currentTemplateForm: this.currentTemplateForm,
+					canAssignUserGroups:
+						this.currentMailable.canAssignUserGroupToTemplates,
 					onUpdateCurrentTemplateForm: this.updateCurrentTemplateForm,
 					onTemplateSaved: this.templateSaved,
-				}),
-			);
+				});
+			});
 		},
 
 		/**

src/components/Form/FormGroup.vue

@@ -78,6 +78,7 @@ import FieldTextarea from './fields/FieldTextarea.vue';
 import FieldUpload from './fields/FieldUpload.vue';
 import FieldSlider from './fields/FieldSlider.vue';
 import FieldUploadImage from './fields/FieldUploadImage.vue';
+import FieldEmailTemplateUserGroupSettings from './fields/FieldEmailTemplateUserGroupSettings.vue';
 
 import {shouldShowFieldWithinGroup} from './formHelpers';
 
@@ -109,6 +110,7 @@ export default {
 		FieldSlider,
 		FieldUpload,
 		FieldUploadImage,
+		FieldEmailTemplateUserGroupSettings,
 	},
 	props: {
 		id: String,

src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue

@@ -0,0 +1,62 @@
+<template>
+	<div>
+		<FormFieldLabel :label="label" />
+		<template v-for="group in assignableUserGroups" :key="group.id">
+			<span class="flex gap-2">
+				<input
+					ref="input"
+					v-model="userGroupIds"
+					:value="group.id"
+					class="col-span-1"
+					name="userGroupIds"
+					type="checkbox"
+					@change="updateCurrentValue(group)"
+				/>
+				<label :for="group.id" class="col-span-1">{{ group.name }}</label>
+			</span>
+		</template>
+	</div>
+</template>
+
+<script>
+import FieldBase from '@/components/Form/fields/FieldBase.vue';
+import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
+
+export default {
+	name: 'UserGroupIds',
+	components: {FormFieldLabel},
+	extends: FieldBase,
+	props: {
+		assignedUserGroupIds: {
+			type: Array,
+			required: true,
+			default: () => [],
+		},
+		assignableUserGroups: {
+			type: Array,
+			required: true,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			userGroupIds: [],
+		};
+	},
+	computed: {},
+	created() {},
+	mounted() {
+		this.userGroupIds = this.assignedUserGroupIds;
+		this.currentValue = this.assignedUserGroupIds;
+	},
+	methods: {
+		updateCurrentValue(group) {
+			this.currentValue = this.userGroupIds;
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+</style>

src/pages/manageEmails/EditTemplateModal.vue

@@ -23,6 +23,7 @@ import PkpForm from '@/components/Form/Form.vue';
 defineProps({
 	title: {type: String, required: true},
 	currentTemplateForm: {required: true, type: Object},
+	canAssignUserGroups: {default: false, type: Boolean},
 });
 
 const emit = defineEmits(['updateCurrentTemplateForm', 'templateSaved']);