pkp/pkp-lib#9295 optimise FieldIssueSelection component

Author: touhidurabir

src/components/Form/fields/FieldIssueSelection.vue

@@ -184,12 +184,11 @@ const showIssueDropdown = computed(() => {
 	return option?.isPublished !== null;
 });
 
-// TODO : need it ?
-// dynamic isRequired based on selection and props.isRequired
+// dynamic isRequired based on selection and `props.isRequired`
 const isIssueSelectionRequired = computed(() => {
-	// Only require issue selection if:
-	// 1. The field is marked as required (from PHP or JS)
-	// 2. AND the selected assignment type actually requires an issue (isPublished !== null)
+	// we are only going to require issue selection if:
+	// 	1. The field is marked as required (from PHP or JS)
+	// 	2. AND the selected assignment type actually requires an issue (isPublished !== null)
 	const selectedOption = assignmentOptions.value.find(
 		(opt) => opt.value === selectedAssignmentType.value,
 	);
@@ -204,8 +203,6 @@ const shouldFetchPublishedIssues = computed(() => {
 	return option?.isPublished;
 });
 
-// TODO : need this ?
-// better validation logic
 const isValid = computed(() => {
 	// If no assignment type selected, not valid
 	if (!selectedAssignmentType.value) {
@@ -232,18 +229,13 @@ const publicationStatus = computed(() => {
 	return option?.status || null;
 });
 
-// TODO : need this ?
 // validation error messages
 const validationErrors = computed(() => {
 	if (!isValid.value) {
 		// If assignment type requires issue but none selected
 		if (isIssueSelectionRequired.value && !selectedIssueId.value) {
 			return [t('publication.assignToIssue.validation.issueRequired')];
 		}
-		// If no assignment type selected
-		if (!selectedAssignmentType.value) {
-			return [t('publication.assignToIssue.validation.assignmentRequired')];
-		}
 	}
 	return [];
 });
@@ -258,16 +250,6 @@ watch(
 	{immediate: true},
 );
 
-// Watch for assignment type changes to update validation
-watch(
-	selectedAssignmentType,
-	() => {
-		// Trigger validation update when assignment type changes
-		// This ensures validationErrors computed property updates
-	},
-	{immediate: true},
-);
-
 const describedByErrorId = computed(() => {
 	return `${props.formId || 'form'}-${props.name}-error`;
 });
@@ -292,7 +274,7 @@ const onIssueChange = (fieldName, propName, newValue) => {
 const emitValue = () => {
 	if (props.isPhpForm) {
 		if (assignmentOptions.value.length > 0) {
-			emit('change', 'issueId', 'value', selectedIssueId.value);
+			emit('change', props.name, 'value', selectedIssueId.value);
 			emit('change', 'status', 'value', publicationStatus.value);
 		}
 	} else {
@@ -388,7 +370,7 @@ watch(
 
 		emitValue(); // emit the value change
 	},
-	{immediate: false}, // not run immediately since we handle it in onMounted
+	{immediate: false}, // not run immediately since it's been handled in onMounted
 );
 
 // emit initial required state
@@ -436,12 +418,13 @@ onMounted(async () => {
 .pkpFormGroup--issueSelection {
 	border: 1px solid #ddd;
 	border-radius: 2px;
+	padding-left: 0rem;
+	padding-right: 0rem;
 
 	.pkpFormGroup__heading {
-		border-bottom: 1px solid #ddd;
+		border-bottom: 0.1rem solid #ddd;
 		margin: -2rem 0rem 2rem 0rem;
-		padding: 1.5rem 0rem 2rem 0rem;
-		border-radius: 4px 4px 0 0;
+		padding: 1.5rem 2rem 2rem 2rem;
 		float: none;
 		width: 100%;
 		padding-inline-end: 2rem;
@@ -451,6 +434,8 @@ onMounted(async () => {
 		float: none;
 		width: 100%;
 		padding-inline-start: 0;
+		padding-left: 2rem !important;
+		padding-right: 2rem !important;
 
 		> * + * {
 			margin-top: 1.5rem;

src/pages/workflow/composables/useWorkflowVersionForm.js

@@ -122,7 +122,9 @@ export function useWorkflowVersionForm(
 					return {
 						data: null,
 						validationError: {
-							issueId: [t('publication.assignToIssue.validation.incomplete')],
+							issueId: [
+								t('publication.assignToIssue.validation.issueRequired'),
+							],
 						},
 					};
 				}
@@ -276,15 +278,7 @@ export function useWorkflowVersionForm(
 		cancelButton: {label: t('common.cancel')},
 	});
 
-	addGroup(
-		'default',
-		// FIXME: adding group breaking the page layout
-		// {
-		// 	pageId: 'default',
-		// 	label: t('publication.scheduledForPublication.versionStage.label'),
-		// 	description: t('publication.scheduledForPublication.versionStage.description'),
-		// }
-	);
+	addGroup('default');
 
 	onMounted(() => {
 		latestPublication = getLatestPublication(store.submission);
@@ -296,7 +290,6 @@ export function useWorkflowVersionForm(
 				label: t('publication.sendToTextEditor.label'),
 				options: buildPublicationOptions({withCreateOption: true}),
 				size: 'large',
-				// groupId: 'default', // FIXME: adding group breaking the page layout
 				isRequired: modeState.isTextEditorMode,
 				showWhen: !modeState.isTextEditorMode ? [] : undefined,
 			});
@@ -308,7 +301,6 @@ export function useWorkflowVersionForm(
 			description: t('publication.versionSource.create.description'),
 			options: buildPublicationOptions(),
 			size: 'large',
-			// groupId: 'default', // FIXME: adding group breaking the page layout
 			showWhen: !modeState.isCreateMode
 				? ['sendToVersion', 'create']
 				: undefined,
@@ -322,7 +314,6 @@ export function useWorkflowVersionForm(
 			options: store.versionStageOptions,
 			size: 'large',
 			value: store.selectedPublication?.versionStage || null,
-			// groupId: 'default', // FIXME: adding group breaking the page layout
 			isRequired: modeState.isPublishMode,
 			showWhen: modeState.isTextEditorMode
 				? ['sendToVersion', getUnassignedVersions()]