Code cleanup

src/components/Container/ManageEmailsPage.vue

@@ -430,7 +430,7 @@ export default {
 
 				if (field.name === 'userGroupIds') {
 					field.assignableUserGroups =
-						this.currentMailable['assignableTemplateUserGroups'];
+						this.currentTemplate['assignableTemplateUserGroups'];
 					field.assignedUserGroupIds =
 						this.currentTemplate['assignedUserGroupIds'] || [];
 					field.isUnrestricted =

src/components/Form/fields/FieldEmailTemplateUnrestricted.vue

@@ -1,6 +1,5 @@
 <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"
@@ -10,39 +9,31 @@
 				type="checkbox"
 			/>
 			<label>
-				{{ t('admin.workflow.email.userGroup.assign.unrestricted') }}
+				<span class="font-bold">{{ label }}</span>
 				<sub>
-					{{ t('admin.workflow.email.userGroup.unrestricted.template.note') }}
+					{{ subNote }}
 				</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},
+	components: {},
 	extends: FieldBase,
 	props: {
 		isUnrestricted: {
 			type: Boolean,
 		},
+		subNote: {type: String, required: true},
 	},
-	data() {
-		return {};
-	},
-	computed: {},
-	created() {},
 	mounted() {
 		this.currentValue = this.isUnrestricted;
 	},
-	methods: {},
 };
 </script>
 

src/components/Form/fields/FieldEmailTemplateUserGroupSettings.vue

@@ -1,29 +1,55 @@
 <template>
 	<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="currentValue"
-					:value="group.id"
-					class="col-span-1"
-					name="userGroupIds"
-					type="checkbox"
-				/>
-				<label :for="group.id" class="col-span-1">{{ group.name }}</label>
-			</span>
-		</template>
+		<Accordion>
+			<AccordionPanel value="0">
+				<AccordionHeader class="flex gap-4">
+					<FormFieldLabel :label="label" class="cursor-pointer" />
+				</AccordionHeader>
+				<AccordionContent class="flex gap-2">
+					<span
+						v-for="group in assignableUserGroups"
+						:key="group.id"
+						class="flex gap-2"
+					>
+						<input
+							:id="`groupId-${group.id}`"
+							ref="input"
+							v-model="currentValue"
+							:value="group.id"
+							class="col-span-1 cursor-pointer"
+							name="userGroupIds"
+							type="checkbox"
+						/>
+						<label
+							:for="`groupId-${group.id}`"
+							class="col-span-1 cursor-pointer"
+						>
+							{{ group.name }}
+						</label>
+					</span>
+				</AccordionContent>
+			</AccordionPanel>
+		</Accordion>
 	</div>
 </template>
 
 <script>
 import FieldBase from '@/components/Form/fields/FieldBase.vue';
 import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
 
 export default {
 	name: 'UserGroupIds',
-	components: {FormFieldLabel},
+	components: {
+		FormFieldLabel,
+		Accordion,
+		AccordionPanel,
+		AccordionHeader,
+		AccordionContent,
+	},
 	extends: FieldBase,
 	props: {
 		assignedUserGroupIds: {
@@ -42,8 +68,6 @@ export default {
 			userGroupIds: [],
 		};
 	},
-	computed: {},
-	created() {},
 	mounted() {
 		this.currentValue = this.assignedUserGroupIds;
 	},