pkp/pkp-lib#9295 better implementation of composable

Author: touhidurabir

src/components/Form/Form.vue

@@ -493,29 +493,18 @@ export default {
 		 * @param {String} localeKey Optional locale key for multilingual props
 		 */
 		fieldChanged: function (name, prop, value, localeKey) {
-			// 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;
-						}
+			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});
-
-				// Remove any errors for this field
-				this.removeError(name, localeKey);
-			}
+				}
+				return field;
+			});
+			this.$emit('set', this.id, {fields: newFields});
+			this.removeError(name, localeKey);
 		},
 
 		/**
@@ -645,13 +634,6 @@ 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/pages/workflow/WorkflowPageOJS.vue

@@ -23,7 +23,6 @@ import WorkflowNotificationDisplay from './components/primary/WorkflowNotificati
 import WorkflowListingEmails from './components/primary/WorkflowListingEmails.vue';
 import WorkflowPaymentDropdown from './components/header/WorkflowPaymentDropdown.vue';
 import WorkflowPublicationForm from './components/publication/WorkflowPublicationForm.vue';
-import WorkflowPublicationFormIssue from './components/publication/WorkflowPublicationFormIssue.vue';
 import WorkflowPublicationJats from './components/publication/WorkflowPublicationJats.vue';
 import WorkflowPublicationVersionControl from './components/publication/WorkflowPublicationVersionControl.vue';
 import WorkflowChangeSubmissionLanguage from './components/publication/WorkflowChangeSubmissionLanguage.vue';
@@ -62,7 +61,6 @@ const Components = markRaw({
 	WorkflowPaymentDropdown,
 	WorkflowPrimaryBasicMetadata,
 	WorkflowPublicationForm,
-	WorkflowPublicationFormIssue,
 	WorkflowPublicationJats,
 	WorkflowPublicationVersionControl,
 	WorkflowChangeSubmissionLanguage,

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

@@ -19,6 +19,8 @@ import {useFetch} from '@/composables/useFetch';
 import {useForm} from '@/composables/useForm';
 import {useUrl} from '@/composables/useUrl';
 import {useDataChanged} from '@/composables/useDataChanged';
+import {useApp} from '@/composables/useApp';
+import {useWorkflowPublicationFormIssue} from '../../composables/useWorkflowPublicationFormIssue';
 
 const props = defineProps({
 	canEdit: {type: Boolean, required: true},
@@ -28,6 +30,8 @@ const props = defineProps({
 	publication: {type: Object, required: true},
 });
 
+const {isOJS} = useApp();
+
 const relativeUrl = computed(() => {
 	return `submissions/${props.submission.id}/publications/${props.publication.id}/_components/${props.formName}`;
 });
@@ -55,16 +59,31 @@ const displayNoFieldsEnabled = computed(() => {
 	return false;
 });
 
+const {set, form} = useForm(publicationForm);
+
 const customFns = {
 	metadata: metadataDataChange,
+	issue: issueDataChange,
 };
 
 const {triggerDataChange} = useDataChanged(customFns[props.formName]);
 
-const {set, form} = useForm(publicationForm);
-
 async function metadataDataChange() {
 	// Some metadata fields need extra data from db not in publication object
 	await fetchForm();
 }
+
+async function issueDataChange() {
+	await fetchForm();
+}
+
+watch(
+	form,
+	async (newForm) => {
+		if (newForm && props.formName === 'issue' && isOJS()) {
+			await useWorkflowPublicationFormIssue(newForm);
+		}
+	},
+	{immediate: true},
+);
 </script>

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

@@ -12,7 +12,6 @@ import WorkflowVersionSideModal from '@/pages/workflow/components/publication/Wo
 
 export const Actions = {
 	WORKFLOW_VIEW_PUBLISHED_SUBMISSION: 'workflowViewPublishedSubmission',
-	WORKFLOW_ASSIGN_TO_ISSUE: 'workflowAssignToIssue',
 	WORKFLOW_VIEW_ACTIVITY_LOG: 'workflowViewActivityLog',
 	WORKFLOW_VIEW_LIBRARY: 'workflowViewLibrary',
 	WORKFLOW_ASSIGN_TO_ISSUE_AND_SCHEDULE_FOR_PUBLICATION:

src/pages/workflow/composables/useWorkflowActions.js

@@ -1004,8 +1004,7 @@ export const PublicationConfig = {
 		}) => {
 			return [
 				{
-					// component: 'WorkflowPublicationForm',
-					component: 'WorkflowPublicationFormIssue',
+					component: 'WorkflowPublicationForm',
 					props: {
 						formName: 'issue',
 						submission,