pkp/pkp-lib#11826 [Frontend] Settings - Tasks & Discussions Templates

public/globals.js

@@ -232,6 +232,7 @@ window.pkp = {
 		'common.loaded': 'Loaded',
 		'common.loading': 'Loading',
 		'common.me': 'Me',
+		'common.months': 'months',
 		'common.moreActions': 'More Actions',
 		'common.name': 'Name',
 		'common.navigation.user': 'User Navigation',
@@ -242,6 +243,8 @@ window.pkp = {
 		'common.numberedMore': '{$number} more',
 		'common.numero': 'No',
 		'common.ok': 'OK',
+		'common.oneMonth': '1 month',
+		'common.oneWeek': '1 week',
 		'common.order': 'Order',
 		'common.orderDown': 'Decrease position of {$itemTitle}',
 		'common.orderUp': 'Increase position of {$itemTitle}',
@@ -287,6 +290,7 @@ window.pkp = {
 		'common.viewMoreDetails': 'View more details',
 		'common.viewWithName': 'View {$name}',
 		'common.warning': 'Warning',
+		'common.weeks': 'weeks',
 		'common.yes': 'Yes',
 		'common.yesContinue': 'Yes, Continue',
 		'common.yetToBegin': 'Yet to begin',
@@ -916,6 +920,10 @@ window.pkp = {
 		'reviewerManager.reviewerStatus': 'Reviewer status',
 		'search.searchResults': 'Search Results',
 		semicolon: '{$label}: ',
+		'stage.copyediting': 'Copyediting Stage',
+		'stage.production': 'Production Stage',
+		'stage.review': 'Review Stage',
+		'stage.submission': 'Submission Stage',
 		'stageParticipants.notify.message': 'Message',
 		'stats.context.downloadReport.description':
 			'Download a CSV/Excel spreadsheet with usage statistics for this journal matching the following parameters.',
@@ -1088,6 +1096,26 @@ window.pkp = {
 		'taskTemplate.apply': 'Apply Template',
 		'taskTemplate.applyConfirmation':
 			"Applying this template will replace information in related fields on the form. These changes won't be saved unless you choose to save. Continue?",
+		'taskTemplates.add': 'Add template',
+		'taskTemplates.addInStage': 'Add Task and Discussion Template in {$stage}',
+		'taskTemplates.confirmAutoAdd': 'Confirm Automatic Addition',
+		'taskTemplates.confirmAutoAddDisable':
+			'Are you sure you want to stop automatically adding this task/discussion template when a submission reaches the <b>{$stage}</b>?',
+		'taskTemplates.confirmAutoAddEnable':
+			'Are you sure you want this task/discussion template to be automatically added when a submission reaches the <b>{$stage}</b>?',
+		'taskTemplates.confirmEmailTemplate':
+			'Applying this email template will replace the discussion text in the form. The changes will not be saved unless you choose to save. Do you want to continue?',
+		'taskTemplates.description':
+			'Use this space to create templates for tasks and discussions. These templates automatically fill in the task name, due date, description, and roles, giving you a head start.',
+		'taskTemplates.dueDateFromCreationDate':
+			'{$dueDate} from the creation date',
+		'taskTemplates.edit': 'Edit Task and Discussion Template',
+		'taskTemplates.templateAutoAdd':
+			'Automatically add this task and discussion when a submission reaches a specific stage',
+		'taskTemplates.templateAutoAddInStage':
+			'Automatically add this task and/or discussion when a submission reaches the stage',
+		'taskTemplates.templateName': 'Task and discussion template name',
+		'taskTemplates.title': 'Tasks and Discussions Templates',
 		'user.affiliation': 'Affiliation',
 		'user.affiliations': 'Affiliations',
 		'user.affiliations.deleteModal.message':

src/components/Container/SettingsPage.vue

@@ -9,6 +9,7 @@ import DateTimeForm from '@/components/Form/context/DateTimeForm.vue';
 import DoiSetupSettingsForm from '@/components/Form/context/DoiSetupSettingsForm.vue';
 import DoiRegistrationSettingsForm from '@/components/Form/context/DoiRegistrationSettingsForm.vue';
 import ReviewerRecommendationManager from '@/managers/ReviewerRecommendationManager/ReviewerRecommendationManager.vue';
+import TaskTemplateManager from '@/managers/TaskTemplateManager/TaskTemplateManager.vue';
 
 export default {
 	name: 'SettingsPage',
@@ -22,6 +23,7 @@ export default {
 		DoiSetupSettingsForm,
 		DoiRegistrationSettingsForm,
 		ReviewerRecommendationManager,
+		TaskTemplateManager,
 	},
 	extends: Page,
 	data() {

src/components/Table/TableColGroup.vue

@@ -3,9 +3,15 @@
 		:id="groupId"
 		:colspan="tableContext.columnsCount.value"
 		scope="colgroup"
-		class="whitespace-nowrap border-b border-light bg-tertiary px-2 py-4 text-start text-lg-medium text-secondary first:border-s first:ps-3 last:border-e last:pe-3"
+		class="whitespace-nowrap border-b border-light bg-tertiary p-2 text-start text-lg-medium text-secondary first:border-s first:ps-3 last:border-e last:pe-3"
 	>
-		<slot />
+		<div class="flex w-full items-center gap-2">
+			<slot />
+
+			<div v-if="$slots.action" class="ms-auto">
+				<slot name="action" :group-id="groupId" />
+			</div>
+		</div>
 	</th>
 </template>
 

src/managers/DiscussionManager/DiscussionManager.vue

@@ -44,7 +44,7 @@
 						"
 					>
 						<TableRow>
-							<TableColGroup>
+							<TableColGroup class="py-4">
 								<Icon
 									:icon="itemStatus.icon"
 									class="h-5 w-5"

src/managers/DiscussionManager/DiscussionManagerTemplates.vue

@@ -43,7 +43,7 @@
 									: t('discussion.name')
 							}}
 						</span>
-						- {{ template.name }}
+						- {{ template.title }}
 					</div>
 					<div class="mt-1 text-base-normal text-secondary">
 						{{

src/managers/DiscussionManager/useDiscussionManagerActions.js

@@ -3,7 +3,7 @@ import {useModal} from '@/composables/useModal';
 import {useFetch} from '../../composables/useFetch';
 import {useUrl} from '../../composables/useUrl';
 import {useDiscussionManagerStatusUpdater} from './useDiscussionManagerStatusUpdater';
-import DiscussionManagerForm from './DiscussionManagerForm.vue';
+import DiscussionManagerFormModal from './DiscussionManagerFormModal.vue';
 import DiscussionManagerFormDisplay from './DiscussionManagerFormDisplay.vue';
 
 export const Actions = {
@@ -50,11 +50,11 @@ export function useDiscussionManagerActions() {
 		const {openSideModal, closeSideModal} = useModal();
 
 		function onCloseFn() {
-			closeSideModal(DiscussionManagerForm);
+			closeSideModal(DiscussionManagerFormModal);
 		}
 
 		openSideModal(
-			DiscussionManagerForm,
+			DiscussionManagerFormModal,
 			{
 				submission,
 				submissionStageId,
@@ -96,11 +96,11 @@ export function useDiscussionManagerActions() {
 		const {openSideModal, closeSideModal} = useModal();
 
 		function onCloseFn() {
-			closeSideModal(DiscussionManagerForm);
+			closeSideModal(DiscussionManagerFormModal);
 		}
 
 		openSideModal(
-			DiscussionManagerForm,
+			DiscussionManagerFormModal,
 			{
 				status: workItem.status,
 				submission,

src/managers/DiscussionManager/useDiscussionManagerForm.js

@@ -208,13 +208,13 @@ export function useDiscussionManagerForm(
 
 	function setValuesFromTemplate(template) {
 		isTask.value = template.type === 'Task';
-		setValue('title', template.name);
+		setValue('title', template.title);
 		setValue('description', template.content);
 
 		const selectedParticipants =
 			allParticipants.value
 				.filter((p) =>
-					template.taskDetails?.participantRoles?.includes(p.roleId),
+					template.userGroups?.find((userGroup) => userGroup.id === p.roleId),
 				)
 				.map((p) => p.id) || [];
 		setValue('participants', selectedParticipants);
@@ -224,11 +224,8 @@ export function useDiscussionManagerForm(
 		if (isTask.value) {
 			setValue('taskInfoAssignee', selectedParticipants);
 
-			if (template.taskDetails.dueDate) {
-				setValue(
-					'dateDue',
-					getRelativeTargetDate(template.taskDetails.dueDate),
-				);
+			if (template.dueDate) {
+				setValue('dateDue', getRelativeTargetDate(template.dueDate));
 			}
 		} else {
 			setValue('dateDue', null);

src/managers/TaskTemplateManager/TaskTemplateManager.mdx

@@ -0,0 +1,17 @@
+import {
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
+} from '@storybook/addon-docs/blocks';
+
+import * as TaskTemplateManager from './TaskTemplateManager.stories.js';
+
+<Meta of={TaskTemplateManager} />
+
+# Tasks and Discussions Templates
+
+This component displays the tasks and discussions templates in the settings area.
+
+<ArgTypes />

src/managers/TaskTemplateManager/TaskTemplateManager.stories.js

@@ -0,0 +1,154 @@
+import {within, userEvent} from 'storybook/test';
+import {http, HttpResponse} from 'msw';
+import TaskTemplateManager from './TaskTemplateManager.vue';
+import {
+	TemplatesDataMock,
+	getTemplate,
+} from '@/mockFactories/taskDiscussionTemplates';
+import {emailTemplateMock} from '@/mockFactories/emailTemplateMock';
+
+export default {
+	title: 'Managers/TaskTemplateManager',
+	component: TaskTemplateManager,
+};
+
+const baseArgs = {
+	templates: [
+		...TemplatesDataMock,
+		getTemplate({
+			id: 4,
+			title: 'Ethical Approval',
+			stageId: 1,
+			userGroups: [{id: 65536}],
+			dueDate: 'P3M',
+		}),
+		getTemplate({
+			id: 5,
+			title: 'Adherence to Policy and Guidelines',
+			stageId: 1,
+			include: false,
+		}),
+		getTemplate({id: 6, title: 'Language Review', stageId: 1}),
+		getTemplate({
+			id: 7,
+			title: 'Analysis of the Method',
+			stageId: 1,
+			include: false,
+		}),
+		getTemplate({
+			id: 8,
+			title: 'Lorem ipsum dolor sit amet',
+			stageId: 3,
+		}),
+		getTemplate({
+			id: 9,
+			title: 'Consectetur adipiscing elit',
+			stageId: 3,
+			include: false,
+		}),
+		getTemplate({
+			id: 10,
+			title: 'Sed do eiusmod tempor incididunt ut',
+			stageId: 4,
+			include: false,
+		}),
+		getTemplate({
+			id: 11,
+			title: 'labore et dolore magna aliqua',
+			stageId: 5,
+		}),
+		getTemplate({
+			id: 12,
+			title: 'Ut enim ad minim veniam',
+			stageId: 5,
+			include: false,
+		}),
+		getTemplate({
+			id: 13,
+			title: 'Quis nostrud exercitation ullamco',
+			stageId: 5,
+			include: false,
+		}),
+	],
+};
+
+const renderComponent = (args) => ({
+	components: {TaskTemplateManager},
+	setup() {
+		return {args};
+	},
+	template: `<TaskTemplateManager v-bind="args" />`,
+});
+
+const mswHandlers = [
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/editTaskTemplates',
+		() => {
+			return HttpResponse.json({data: baseArgs.templates});
+		},
+	),
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/mailables/DISCUSSION_NOTIFICATION_SUBMISSION',
+		() => {
+			return HttpResponse.json(
+				emailTemplateMock['DISCUSSION_NOTIFICATION_SUBMISSION'],
+			);
+		},
+	),
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/mailables/DISCUSSION_NOTIFICATION_REVIEW',
+		() => {
+			return HttpResponse.json(
+				emailTemplateMock['DISCUSSION_NOTIFICATION_REVIEW'],
+			);
+		},
+	),
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/mailables/DISCUSSION_NOTIFICATION_COPYEDITING',
+		() => {
+			return HttpResponse.json(
+				emailTemplateMock['DISCUSSION_NOTIFICATION_COPYEDITING'],
+			);
+		},
+	),
+
+	http.get(
+		'https://mock/index.php/publicknowledge/api/v1/mailables/DISCUSSION_NOTIFICATION_PRODUCTION',
+		() => {
+			return HttpResponse.json(
+				emailTemplateMock['DISCUSSION_NOTIFICATION_PRODUCTION'],
+			);
+		},
+	),
+];
+
+export const Default = {
+	render: renderComponent,
+	args: baseArgs,
+	parameters: {
+		msw: {
+			handlers: mswHandlers,
+		},
+	},
+};
+
+export const AddNewTemplate = {
+	render: renderComponent,
+	args: baseArgs,
+	parameters: {
+		msw: {
+			handlers: mswHandlers,
+		},
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(
+			within(canvas.getByText('Submission Stage').closest('th')).getByText(
+				'Add template',
+			),
+		);
+	},
+};