I11291 v4

public/globals.js

@@ -190,6 +190,7 @@ window.pkp = {
 		'common.deselect': 'Deselect',
 		'common.details': 'Details',
 		'common.download': 'Download',
+		'common.dueDate': 'Due Date',
 		'common.edit': 'Edit',
 		'common.editItem': 'Edit {$name}',
 		'common.emailTemplates': 'Email Templates',
@@ -210,6 +211,7 @@ window.pkp = {
 		'common.lastActivity': 'Last activity recorded on {$date}.',
 		'common.loaded': 'Loaded',
 		'common.loading': 'Loading',
+		'common.me': 'Me',
 		'common.moreActions': 'More Actions',
 		'common.name': 'Name',
 		'common.navigation.user': 'User Navigation',
@@ -263,6 +265,9 @@ window.pkp = {
 		'common.viewWithName': 'View {$name}',
 		'common.yes': 'Yes',
 		'common.yesContinue': 'Yes, Continue',
+		'common.yetToBegin': 'Yet to begin',
+		'common.inProgress': 'In Progress',
+		'common.closed': 'Closed',
 		'context.context': 'Journal',
 		'contributor.listPanel.preview': 'Preview',
 		'contributor.listPanel.preview.abbreviated': 'Abbreviated',
@@ -374,6 +379,38 @@ window.pkp = {
 			'Confirm Delete of Incomplete Submissions',
 		'dashboard.submitRevisions': 'Submit revisions',
 		'dashboard.toBePublishedInIssue': 'To be published in issue {$issue}',
+		'discussion.title': 'Desk Review Tasks & Discussions',
+		'discussion.description':
+			'Use this space to start discussions, assign tasks to others, or create your personal task list to help you move this submission to the next stage.',
+		'discussion.form.templatesLabel': 'Templates to get you started!',
+		'discussion.form.description':
+			'Open for What? Open to What? Beyond Content',
+		'discussion.form.detailsDescription':
+			'Use this space to share essential information.',
+		'discussion.form.detailsNameDescription':
+			'Please enter the name for this task and discussion.',
+		'discussion.form.detailsParticipantsDescription':
+			'You have the option to assign participants or allocate it solely to yourself.',
+		'discussion.form.discussionDescription':
+			'You can start a discussion thread here by adding a message. This space is also available for providing a brief overview of the task, including any key details, goals, or specific instructions to help guide the assignees.',
+		'discussion.form.taskInfoLabel': 'Enter task information',
+		'discussion.form.taskInformation': 'Task Information',
+		'discussion.form.taskInfoDescription':
+			'Please enter the tasks details here to help manage this task effectively.',
+		'discussion.form.taskInfoAssigneesLabel':
+			'Responsible to complete this task',
+		'discussion.form.taskInfoAssigneesDescription':
+			'If there is a specific participant designated to complete this task, please assign it to them here.',
+		'discussion.form.taskInfoDueDateDescription':
+			'If there is a deadline for this task, you can indicate it here. The due date will be communicated and established for each participant assigned to this task.',
+		'discussion.form.createDontStartTask': 'Create Task (Do Not Start)',
+		'discussion.form.startTaskUponSaving': 'Begin Task Upon Saving',
+		'discussion.template.taskDescription':
+			'This task template auto-fills the task name, due date, description, and roles. After selecting the template, you can modify any details before saving the task.',
+		'discussion.template.discussionDescription':
+			'This discussion template pre-fills the name, participants, and starting message. You can adjust the details before starting.',
+		'discussion.messageFrom': 'Message from {$from}',
+		'discussion.addNewMessage': 'Add New Message',
 		'doi.manager.versions.countStatement': 'There are {$count} versions.',
 		'doi.manager.versions.modalTitle': 'DOIs for all versions',
 		'doi.manager.versions.view': 'View all',
@@ -790,6 +827,8 @@ window.pkp = {
 		'submission.citations': 'References',
 		'submission.contributors': 'List of Contributors',
 		'submission.copyediting': 'Copyediting',
+		'submission.discussion': 'Discussion',
+		'submission.task': 'Task',
 		'submission.files': 'Files',
 		'submission.files.downloadAll': 'Download All Files',
 		'submission.finalDraft': 'Draft Files',
@@ -851,12 +890,6 @@ window.pkp = {
 		'submission.wizard.submissionCancel': 'Cancel submission',
 		'submissions.declined': 'Declined',
 		'submissions.incomplete': 'Incomplete',
-		'tasks.discussions.title': 'Desk Review Tasks & Discussions',
-		'tasks.discussions.description':
-			'Use this space to start discussions, assign tasks to others, or create your personal task list to help you move this submission to the next stage.',
-		'tasks.discussions.form.title': 'Desk Review Discussions and Tasks',
-		'tasks.discussions.form.description':
-			'Open for What? Open to What? Beyond Content',
 		'user.affiliation': 'Affiliation',
 		'user.affiliations': 'Affiliations',
 		'user.affiliations.deleteModal.message':

src/components/Form/FormFieldLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<label :for="controlId" class="pkpFormFieldLabel">
+	<label v-if="label" :for="controlId" class="pkpFormFieldLabel">
 		<template v-if="localeLabel">
 			<span class="aria-hidden">{{ localeLabel }}</span>
 			<span class="-screenReader">{{ multilingualLabel }}</span>

src/components/Form/FormGroup.vue

@@ -1,12 +1,13 @@
 <template>
 	<fieldset class="pkpFormGroup -pkpClearfix" :class="spacingStyle">
-		<div v-if="label" class="pkpFormGroup__heading">
-			<legend class="pkpFormGroup__legend">{{ label }}</legend>
-			<div
-				v-if="description"
-				v-strip-unsafe-html="description"
-				class="pkpFormGroup__description semantic-defaults"
-			></div>
+		<div v-if="label || groupComponent" class="pkpFormGroup__heading">
+			<template v-if="groupComponent">
+				<component
+					:is="groupComponent.component"
+					v-bind="groupComponent.props"
+				></component>
+			</template>
+			<FormGroupHeader v-else :heading="label" :description="description" />
 		</div>
 		<div class="pkpFormGroup__fields">
 			<template v-for="field in fieldsInGroup">
@@ -24,7 +25,7 @@
 						>
 							<component
 								:is="field.component"
-								v-bind="field"
+								v-bind="{...field, ...field.componentProps}"
 								:all-errors="errors"
 								:locale-key="locale.key"
 								:form-id="formId"
@@ -39,7 +40,7 @@
 				<template v-else>
 					<component
 						:is="field.component"
-						v-bind="field"
+						v-bind="{...field, ...field.componentProps}"
 						:key="field.name"
 						:all-errors="errors"
 						:form-id="formId"
@@ -55,6 +56,7 @@
 </template>
 
 <script>
+import FormGroupHeader from './FormGroupHeader.vue';
 import FieldAffiliations from './fields/FieldAffiliations.vue';
 import FieldArchivingPn from './fields/FieldArchivingPn.vue';
 import FieldAutosuggestPreset from './fields/FieldAutosuggestPreset.vue';
@@ -89,6 +91,7 @@ import {shouldShowFieldWithinGroup} from './formHelpers';
 export default {
 	name: 'FormGroup',
 	components: {
+		FormGroupHeader,
 		FieldAffiliations,
 		FieldArchivingPn,
 		FieldAutosuggestPreset,
@@ -123,6 +126,7 @@ export default {
 		label: String,
 		description: String,
 		pageId: String,
+		groupComponent: Object,
 		fields: Array,
 		errors: Object,
 		formId: String,

src/components/Form/FormGroupHeader.vue

@@ -0,0 +1,30 @@
+<template>
+	<component
+		:is="headingElement"
+		class="mb-2 inline-block text-2xl-bold font-bold"
+	>
+		{{ heading }}
+	</component>
+	<div
+		v-if="description"
+		v-strip-unsafe-html="description"
+		class="semantic-defaults text-lg-normal"
+	></div>
+</template>
+
+<script setup>
+defineProps({
+	heading: {
+		type: String,
+		default: () => '',
+	},
+	headingElement: {
+		type: String,
+		default: () => 'h3',
+	},
+	description: {
+		type: String,
+		default: () => '',
+	},
+});
+</script>

src/components/Form/fields/FieldOptions.vue

@@ -82,10 +82,16 @@
 							:disabled="option.disabled"
 						/>
 					</template>
-					<span
-						v-strip-unsafe-html="option.label"
-						class="pkpFormField--options__optionLabel"
-					/>
+					<div class="flex flex-col">
+						<span
+							v-strip-unsafe-html="option.label"
+							class="pkpFormField--options__optionLabel"
+						/>
+						<span
+							v-strip-unsafe-html="option.subLabel"
+							class="pkpFormField--options__optionLabel"
+						/>
+					</div>
 					<Orderer
 						v-if="isOrderable"
 						:item-id="option.value"

src/components/FormDisplay/FieldOptionsDisplay.vue

@@ -0,0 +1,39 @@
+<template>
+	<component :is="headingElement" class="text-lg mb-1 inline-block font-bold">
+		{{ field.label }}
+	</component>
+	<div class="flex flex-col gap-y-2">
+		<div
+			v-for="(option, i) of selectedValues"
+			:key="option.value"
+			class="flex flex-col text-lg-normal"
+		>
+			<span>
+				<template v-if="field.showNumberedList">{{ i + 1 }}.</template>
+				{{ option.label }}
+			</span>
+			<span v-if="option.subLabel">
+				{{ option.subLabel }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+
+const props = defineProps({
+	field: {type: Object, required: true},
+	headingElement: {required: true, type: String},
+});
+
+const selectedValues = computed(() => {
+	if (!props.field?.value?.length) {
+		return '-';
+	}
+
+	return props.field.options.filter((option) =>
+		props.field.value.includes(option.value),
+	);
+});
+</script>