From 9d1730d9b1e79127f1c4e9f5e9d563aa1df8a9ac Mon Sep 17 00:00:00 2001
From: Taslan Graham <gtaslan1@gmail.com>
Date: Thu, 7 Nov 2024 23:10:41 -0500
Subject: [PATCH] pkp/pkp-lib#10571 WIP: add support for unrestricted templates

---
 src/components/Container/ManageEmailsPage.vue | 52 +++++++++++--------
 src/components/Form/FormGroup.vue             |  2 +
 .../fields/FieldEmailTemplateUnrestricted.vue | 52 +++++++++++++++++++
 .../FieldEmailTemplateUserGroupSettings.vue   | 11 +---
 src/pages/manageEmails/EditTemplateModal.vue  |  1 -
 5 files changed, 85 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Form/fields/FieldEmailTemplateUnrestricted.vue

diff --git a/src/components/Container/ManageEmailsPage.vue b/src/components/Container/ManageEmailsPage.vue
index 3f7225777..4e9b2442a 100644
--- a/src/components/Container/ManageEmailsPage.vue
+++ b/src/components/Container/ManageEmailsPage.vue
@@ -347,35 +347,16 @@ export default {
 			this.currentTemplate = template;
 			const {openSideModal} = useModal();
 
-			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, {
+			this.$nextTick(() =>
+				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,
-				});
-			});
+				}),
+			);
 		},
 
 		/**
@@ -425,6 +406,16 @@ export default {
 				});
 			}
 
+			// Remove user group fields if current mailable does not support specifying user group access
+			if (!this.currentMailable.canAssignUserGroupToTemplates) {
+				templateForm.fields = templateForm.fields.filter(
+					(field) => field.name !== 'userGroupIds',
+				);
+				templateForm.fields = templateForm.fields.filter(
+					(field) => field.name !== 'isUnrestricted',
+				);
+			}
+
 			templateForm.fields = templateForm.fields.map((field) => {
 				if (field.name === 'body') {
 					field.preparedContent = Object.keys(
@@ -437,6 +428,21 @@ export default {
 						};
 					});
 				}
+
+				if (field.name === 'userGroupIds') {
+					field.assignableUserGroups =
+						this.currentMailable['assignableTemplateUserGroups'];
+					field.assignedUserGroupIds =
+						this.currentTemplate['assignedUserGroupIds'] || [];
+					field.isUnrestricted =
+						this.currentTemplate['isUnrestricted'] || false;
+				}
+
+				if (field.name === 'isUnrestricted') {
+					field.isUnrestricted =
+						this.currentTemplate['isUnrestricted'] || false;
+				}
+
 				return field;
 			});
 
diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index d427190b1..9d2151acc 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -79,6 +79,7 @@ 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 FieldEmailTemplateUnrestricted from './fields/FieldEmailTemplateUnrestricted.vue';
 
 import {shouldShowFieldWithinGroup} from './formHelpers';
 
@@ -111,6 +112,7 @@ export default {
 		FieldUpload,
 		FieldUploadImage,
 		FieldEmailTemplateUserGroupSettings,
+		FieldEmailTemplateUnrestricted,
 	},
 	props: {
 		id: String,
diff --git a/src/components/Form/fields/FieldEmailTemplateUnrestricted.vue b/src/components/Form/fields/FieldEmailTemplateUnrestricted.vue
new file mode 100644
index 000000000..6e7c9535c
--- /dev/null
+++ b/src/components/Form/fields/FieldEmailTemplateUnrestricted.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="mt-4">
+		<FormFieldLabel :label="label" />
+		<span class="mb-4 mt-4 flex gap-2 border-b border-b-light italic">
+			<input
+				ref="input"
+				v-model="currentValue"
+				class="col-span-1"
+				name="isUnrestricted"
+				type="checkbox"
+			/>
+			<label>
+				Mark as unrestricted
+				<sub>
+					Unrestricted templates will be accessible to all user groups
+					associated with this template
+				</sub>
+			</label>
+		</span>
+
+		<FormFieldLabel :label="label" />
+	</div>
+</template>
+
+<script>
+import FieldBase from '@/components/Form/fields/FieldBase.vue';
+import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
+
+export default {
+	name: 'FieldEmailTemplateUnrestricted',
+	components: {FormFieldLabel},
+	extends: FieldBase,
+	props: {
+		isUnrestricted: {
+			type: Boolean,
+		},
+	},
+	data() {
+		return {};
+	},
+	computed: {},
+	created() {},
+	mounted() {
+		this.currentValue = this.isUnrestricted;
+	},
+	methods: {},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+</style>
diff --git a/src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue b/src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue
index e936f54a2..b223317d2 100644
--- a/src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue
+++ b/src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue
@@ -1,16 +1,15 @@
 <template>
-	<div>
+	<div class="mt-4">
 		<FormFieldLabel :label="label" />
 		<template v-for="group in assignableUserGroups" :key="group.id">
 			<span class="flex gap-2">
 				<input
 					ref="input"
-					v-model="userGroupIds"
+					v-model="currentValue"
 					: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>
@@ -46,14 +45,8 @@ export default {
 	computed: {},
 	created() {},
 	mounted() {
-		this.userGroupIds = this.assignedUserGroupIds;
 		this.currentValue = this.assignedUserGroupIds;
 	},
-	methods: {
-		updateCurrentValue(group) {
-			this.currentValue = this.userGroupIds;
-		},
-	},
 };
 </script>
 
diff --git a/src/pages/manageEmails/EditTemplateModal.vue b/src/pages/manageEmails/EditTemplateModal.vue
index 9579f0fd6..0ae12712d 100644
--- a/src/pages/manageEmails/EditTemplateModal.vue
+++ b/src/pages/manageEmails/EditTemplateModal.vue
@@ -23,7 +23,6 @@ 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']);