pkp/pkp-lib#9295 fixed dynamic required and hidden field change emit

Author: touhidurabir

src/components/Form/Form.vue

@@ -13,6 +13,7 @@
 			type="hidden"
 			:name="name"
 			:value="value"
+			@change="fieldChanged"
 		/>
 		<FormLocales
 			v-if="availableLocales.length > 1"
@@ -70,6 +71,7 @@
 				@show-locale="showLocale"
 				@cancel="cancel"
 				@set-errors="setErrors"
+				@set-field-required="setFieldRequired"
 			/>
 		</div>
 	</form>
@@ -160,6 +162,7 @@ export default {
 			currentPage: '',
 			isSaving: false,
 			lastSaveTimestamp: -1,
+			fieldRequiredStates: {}, // track field required states for dynamic fields
 		};
 	},
 	computed: {
@@ -384,7 +387,19 @@ export default {
 				) {
 					return;
 				}
+
+				// Check if field has custom required state
+				if (field.name in this.fieldRequiredStates) {
+					const isFieldRequired = this.fieldRequiredStates[field.name];
+					// check if Field is required by dynamic update and return if not
+					// otherwise continue with default checks
+					if (!isFieldRequired) {
+						return;
+					}
+				}
+
 				let missingValue = false;
+
 				// Only require the primary locale by default for multilingual fields
 				let value = field.isMultilingual
 					? field.value[this.primaryLocale]
@@ -490,18 +505,29 @@ export default {
 		 * @param {String} localeKey Optional locale key for multilingual props
 		 */
 		fieldChanged: function (name, prop, value, localeKey) {
-			const newFields = this.fields.map((field) => {
-				if (field.name === name) {
-					if (localeKey) {
-						field[prop][localeKey] = value;
-					} else {
-						field[prop] = value;
+			// Check if this is a hidden field or normal field
+			const isHiddenField = this.hiddenFields && name in this.hiddenFields;
+
+			if (isHiddenField) {
+				const newHiddenFields = {...this.hiddenFields};
+				newHiddenFields[name] = value;
+				this.$emit('set', this.id, {hiddenFields: newHiddenFields});
+			} else {
+				const newFields = this.fields.map((field) => {
+					if (field.name === name) {
+						if (localeKey) {
+							field[prop][localeKey] = value;
+						} else {
+							field[prop] = value;
+						}
 					}
-				}
-				return field;
-			});
-			this.$emit('set', this.id, {fields: newFields});
-			this.removeError(name, localeKey);
+					return field;
+				});
+				this.$emit('set', this.id, {fields: newFields});
+
+				// Remove any errors for this field
+				this.removeError(name, localeKey);
+			}
 		},
 
 		/**
@@ -631,6 +657,13 @@ export default {
 		setErrors: function (errors) {
 			this.$emit('set', this.id, {errors: errors});
 		},
+
+		/**
+		 * Set the required state for a specific field
+		 */
+		setFieldRequired(fieldName, isRequired) {
+			this.fieldRequiredStates[fieldName] = isRequired;
+		},
 	},
 };
 </script>

src/components/Form/FormGroup.vue

@@ -45,6 +45,7 @@
 								:locales="availableLocales"
 								@change="fieldChanged"
 								@set-errors="setFieldErrors"
+								@set-field-required="setFieldRequired"
 							></component>
 						</div>
 					</div>
@@ -60,6 +61,7 @@
 						:locales="availableLocales"
 						@change="fieldChanged"
 						@set-errors="setFieldErrors"
+						@set-field-required="setFieldRequired"
 					></component>
 				</template>
 			</template>
@@ -242,6 +244,13 @@ export default {
 			}
 			this.$emit('set-errors', {...newErrors});
 		},
+
+		/**
+		 * Forward field required events to the form page
+		 */
+		setFieldRequired: function (fieldName, isRequired) {
+			this.$emit('set-field-required', fieldName, isRequired);
+		},
 	},
 };
 </script>

src/components/Form/FormPage.vue

@@ -13,6 +13,7 @@
 			:form-id="formId"
 			@change="fieldChanged"
 			@set-errors="setErrors"
+			@set-field-required="setFieldRequired"
 		/>
 		<ButtonRow
 			v-if="hasFooter"
@@ -234,6 +235,13 @@ export default {
 		setErrors: function (errors) {
 			this.$emit('set-errors', errors);
 		},
+
+		/**
+		 * Forward field required events to the form
+		 */
+		setFieldRequired: function (fieldName, isRequired) {
+			this.$emit('set-field-required', fieldName, isRequired);
+		},
 	},
 };
 </script>

src/components/Form/fields/FieldIssueSelection.vue

@@ -32,7 +32,7 @@
 						:name="props.name"
 						:label="t('issue.issue')"
 						:description="t('publication.assignToIssue.issueDescription')"
-						:is-required="isRequired"
+						:is-required="isIssueSelectionRequired"
 						:value="selectedIssueId"
 						:options="availableIssues"
 						:all-errors="{}"
@@ -88,7 +88,7 @@ const props = defineProps({
 	},
 	isRequired: {
 		type: Boolean,
-		default: false,
+		default: true,
 	},
 	isPhpForm: {
 		type: Boolean,
@@ -149,7 +149,7 @@ const fetchAssignmentOptions = async () => {
 };
 
 const fetchAssignmentType = async () => {
-	// we will not fetch if the assignment type is give for the publication
+	// will not fetch if the assignment type is give for the publication
 	// for example, it's can be given from the PHP form
 	if (props.assignmentType !== null) {
 		return;
@@ -184,18 +184,45 @@ const showIssueDropdown = computed(() => {
 	return option?.isPublished !== null;
 });
 
+// TODO : need it ?
+// 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)
+	const selectedOption = assignmentOptions.value.find(
+		(opt) => opt.value === selectedAssignmentType.value,
+	);
+
+	return props.isRequired && selectedOption?.isPublished !== null;
+});
+
 const shouldFetchPublishedIssues = computed(() => {
 	const option = assignmentOptions.value.find(
 		(opt) => opt.value === selectedAssignmentType.value,
 	);
 	return option?.isPublished;
 });
 
+// TODO : need this ?
+// better validation logic
 const isValid = computed(() => {
+	// If no assignment type selected, not valid
+	if (!selectedAssignmentType.value) {
+		return false;
+	}
+
 	const option = assignmentOptions.value.find(
 		(opt) => opt.value === selectedAssignmentType.value,
 	);
-	return option?.isPublished === null || selectedIssueId.value;
+
+	// If assignment type doesn't require issue selection, always valid
+	if (option?.isPublished === null) {
+		return true;
+	}
+
+	// If assignment type requires issue selection, check if issue is selected
+	return selectedIssueId.value !== null;
 });
 
 const publicationStatus = computed(() => {
@@ -205,23 +232,38 @@ const publicationStatus = computed(() => {
 	return option?.status || null;
 });
 
+// TODO : need this ?
+// validation error messages
 const validationErrors = computed(() => {
 	if (!isValid.value) {
-		return [t('publication.assignToIssue.validation.issueRequired')];
+		// 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 [];
 });
 
-// Emit validation errors to the form system
-// FIXME : NOT propagating to top level from component
 watch(
 	validationErrors,
 	(errors) => {
-		if (errors.length > 0) {
-			emit('set-errors', props.name, errors);
-		} else {
-			emit('set-errors', props.name, []);
-		}
+		errors.length > 0
+			? emit('set-errors', props.name, errors) // emit errors
+			: emit('set-errors', props.name, []); // clear errors
+	},
+	{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},
 );
@@ -262,9 +304,10 @@ const emitValue = () => {
 		}
 	} else {
 		const value = {
-			assignmentType: selectedAssignmentType.value, // User's assignment type selection
-			issueId: selectedIssueId.value, // User's issue selection
-			publicationStatus: publicationStatus.value, // Calculated status from user's selection
+			assignmentType: selectedAssignmentType.value,
+			issueId: selectedIssueId.value,
+			publicationStatus: publicationStatus.value,
+			isValid: isValid.value,
 		};
 
 		// TODO: Remove this after testing
@@ -339,6 +382,52 @@ watch(selectedIssueId, () => {
 	emitValue();
 });
 
+// Watch for changes and emit required state
+watch(
+	[selectedAssignmentType, selectedIssueId],
+	() => {
+		// Determine if field is currently required
+		let isCurrentlyRequired = true; // Default to required
+
+		if (selectedAssignmentType.value) {
+			const selectedOption = assignmentOptions.value.find(
+				(opt) => opt.value === selectedAssignmentType.value,
+			);
+
+			// If assignment type doesn't require issue selection, not required
+			if (selectedOption?.isPublished === null) {
+				isCurrentlyRequired = false;
+			}
+		}
+
+		// Emit the current required state
+		emit('set-field-required', props.name, isCurrentlyRequired);
+
+		emitValue(); // emit the value change
+	},
+	{immediate: false}, // not run immediately since we handle it in onMounted
+);
+
+// ✅ NEW: Function to emit initial required state
+const emitInitialRequiredState = () => {
+	// Determine if field is currently required based on initial values
+	let isCurrentlyRequired = true; // Default to required
+
+	if (selectedAssignmentType.value) {
+		const selectedOption = assignmentOptions.value.find(
+			(opt) => opt.value === selectedAssignmentType.value,
+		);
+
+		// If assignment type doesn't require issue selection, not required
+		if (selectedOption?.isPublished === null) {
+			isCurrentlyRequired = false;
+		}
+	}
+
+	// Emit the initial required state
+	emit('set-field-required', props.name, isCurrentlyRequired);
+};
+
 onMounted(async () => {
 	selectedAssignmentType.value = props.assignmentType || null;
 
@@ -354,12 +443,9 @@ onMounted(async () => {
 		await fetchIssues();
 	}
 
-	// FIXME : remove this once the emit issue for hidden field is fixed
-	if (props.isPhpForm) {
-		$('input[name="prePublishStatus"]').hide();
-	}
-
 	emitValue();
+
+	emitInitialRequiredState();
 });
 </script>
 

src/pages/workflow/components/publication/WorkflowPublicationForm.vue

@@ -57,6 +57,7 @@ const displayNoFieldsEnabled = computed(() => {
 
 const customFns = {
 	metadata: metadataDataChange,
+	issue: issueDataChange,
 };
 
 const {triggerDataChange} = useDataChanged(customFns[props.formName]);
@@ -67,4 +68,8 @@ async function metadataDataChange() {
 	// Some metadata fields need extra data from db not in publication object
 	await fetchForm();
 }
+
+async function issueDataChange() {
+	await fetchForm();
+}
 </script>