pkp/pkp-lib#9497 Migrate pubid plugin to vue3 (#4598)

* pkp/pkp-lib#9497 Migrate pubid plugin to vue3 * pkp/pkp-lib#9497 Since forms are retrieved from individual endpoints, addJavascript needs to be called when loading editors.tpl * pkp/pkp-lib#9497 Migrate FieldTextUrn to vue3
pkp · Jan 20, 2025 · 3425e58 · 3425e58
1 parent 685cccf
commit 3425e58
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 64 deletions.
diff --git a/plugins/pubIds/urn/URNPubIdPlugin.php b/plugins/pubIds/urn/URNPubIdPlugin.php
@@ -345,10 +345,6 @@ public function addPublicationFormFields(string $hookName, FormComponent $form):
 
         $appyCheckNumber = $this->getSetting($form->submissionContext->getId(), 'urnCheckNo');
 
-        if ($appyCheckNumber) {
-            // Load the checkNumber.js file that is required for URN fields
-            $this->addJavaScript(Application::get()->getRequest(), TemplateManager::getManager(Application::get()->getRequest()));
-        }
         // If a pattern exists, use a DOI-like field to generate the URN
         if ($pattern) {
             $fieldData = [
@@ -470,12 +466,20 @@ public function loadUrnFieldComponent(string $hookName, array $args): void
         $templateMgr = $args[0];
         $template = $args[1];
 
-        if ($template !== 'workflow/workflow.tpl') {
+        if ($template !== 'dashboard/editors.tpl') {
             return;
         }
 
         $context = Application::get()->getRequest()->getContext();
         $suffixType = $this->getSetting($context->getId(), 'urnSuffix');
+
+        $appyCheckNumber = $this->getSetting($context->getId(), 'urnCheckNo');
+
+        if ($appyCheckNumber) {
+            // Load the checkNumber.js file that is required for URN fields
+            $this->addJavaScript(Application::get()->getRequest(), TemplateManager::getManager(Application::get()->getRequest()));
+        }
+
         if ($suffixType === 'default' || $suffixType === 'pattern') {
             $templateMgr->addJavaScript(
                 'field-pub-id-urn-component',

diff --git a/plugins/pubIds/urn/js/FieldPubIdUrn.js b/plugins/pubIds/urn/js/FieldPubIdUrn.js
@@ -11,9 +11,9 @@
  * @brief A Vue.js component for URN field, that is used for pattern suffixes and that considers check number.
  */
 
-pkp.Vue.component('field-pub-id-urn', {
+pkp.registry.registerComponent('FieldPubIdUrn', {
     name: 'FieldPubIdUrn',
-    extends: pkp.Vue.component('field-pub-id'),
+    extends: pkp.registry.getComponent('PkpFieldPubId'),
     props: {
         applyCheckNumber: {
             type: Boolean,
@@ -22,10 +22,10 @@ pkp.Vue.component('field-pub-id-urn', {
     },
     methods: {
         generateId() {
-            var id = pkp.Vue.component('field-pub-id').options.methods['generateId'].apply(this);
+            var id = pkp.registry.getComponent('PkpFieldPubId').methods['generateId'].apply(this);
             return this.applyCheckNumber
                 ? id + $.pkp.plugins.generic.urn.getCheckNumber(id, this.prefix)
                 : id;
         }
     },
-});
+})
diff --git a/plugins/pubIds/urn/js/FieldTextUrn.js b/plugins/pubIds/urn/js/FieldTextUrn.js
@@ -10,76 +10,77 @@
  *
  * @brief A Vue.js component for URN text form field, that is used for custom suffixes, and that considers adding a check number.
  */
-var template = pkp.Vue.compile('<div class="pkpFormField pkpFormField--text pkpFormField--urn" :class="classes">' +
-'			<form-field-label' +
-'				:controlId="controlId"' +
-'				:label="label"' +
-'				:localeLabel="localeLabel"' +
-'				:isRequired="isRequired"' +
-'				:requiredLabel="__(\'common.required\')"' +
-'				:multilingualLabel="multilingualLabel"' +
-'			/>' +
-'			<div' +
-'				v-if="isPrimaryLocale && description"' +
-'				class="pkpFormField__description"' +
-'				v-html="description"' +
-'				:id="describedByDescriptionId"' +
-'			/>' +
-'			<div class="pkpFormField__control" :class="controlClasses">' +
-'				<input' +
-'					class="pkpFormField__input pkpFormField--text__input pkpFormField--urn__input"' +
-'					ref="input"' +
-'					v-model="currentValue"' +
-'					:type="inputType"' +
-'					:id="controlId"' +
-'					:name="localizedName"' +
-'					:aria-describedby="describedByIds"' +
-'					:aria-invalid="!!errors.length"' +
-'					:required="isRequired"' +
-'					:style="inputStyles"' +
-'				/>' +
-'				<button' +
-'					v-if="applyCheckNumber"' +
-'					class="pkpButton pkpFormField--urn__button"' +
-'					@click.prevent="addCheckNumber"' +
-'				>' +
-'					{{ addCheckNumberLabel }}' +
-'				</button>' +
-'				<field-error' +
-'					v-if="errors.length"' +
-'					:id="describedByErrorId"' +
-'					:messages="errors"' +
-'				/>' +
-'				</div>' +
-'			</div>' +
-'		</div>');
 
-pkp.Vue.component('field-text-urn', {
+pkp.registry.registerComponent('FieldTextUrn', {
 	name: 'FieldTextUrn',
-	extends: pkp.Vue.component('field-text'),
+	extends: pkp.registry.getComponent('PkpFieldText'),
+	template:
+		'<div class="pkpFormField pkpFormField--text pkpFormField--urn" :class="classes">' +
+		'			<form-field-label' +
+		'				:controlId="controlId"' +
+		'				:label="label"' +
+		'				:localeLabel="localeLabel"' +
+		'				:isRequired="isRequired"' +
+		'				:requiredLabel="t(\'common.required\')"' +
+		'				:multilingualLabel="multilingualLabel"' +
+		'			/>' +
+		'			<div' +
+		'				v-if="isPrimaryLocale && description"' +
+		'				class="pkpFormField__description"' +
+		'				v-html="description"' +
+		'				:id="describedByDescriptionId"' +
+		'			/>' +
+		'			<div class="pkpFormField__control" :class="controlClasses">' +
+		'				<input' +
+		'					class="pkpFormField__input pkpFormField--text__input pkpFormField--urn__input"' +
+		'					ref="input"' +
+		'					v-model="currentValue"' +
+		'					:type="inputType"' +
+		'					:id="controlId"' +
+		'					:name="localizedName"' +
+		'					:aria-describedby="describedByIds"' +
+		'					:aria-invalid="!!errors.length"' +
+		'					:required="isRequired"' +
+		'					:style="inputStyles"' +
+		'				/>' +
+		'				<button' +
+		'					v-if="applyCheckNumber"' +
+		'					class="pkpButton pkpFormField--urn__button"' +
+		'					@click.prevent="addCheckNumber"' +
+		'				>' +
+		'					{{ addCheckNumberLabel }}' +
+		'				</button>' +
+		'				<field-error' +
+		'					v-if="errors.length"' +
+		'					:id="describedByErrorId"' +
+		'					:messages="errors"' +
+		'				/>' +
+		'				</div>' +
+		'			</div>' +
+		'		</div>',
 	props: {
 		addCheckNumberLabel: {
 			type: String,
-			required: true
+			required: true,
 		},
 		urnPrefix: {
 			type: String,
-			required: true
+			required: true,
 		},
 		applyCheckNumber: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	methods: {
 		/**
 		 * Add a check number to the end of the URN
 		 */
 		addCheckNumber() {
-			this.currentValue += $.pkp.plugins.generic.urn.getCheckNumber(this.currentValue, this.urnPrefix);
-		}
+			this.currentValue += $.pkp.plugins.generic.urn.getCheckNumber(
+				this.currentValue || '',
+				this.urnPrefix,
+			);
+		},
 	},
-	render: function(h) {
-		return template.render.call(this, h);
-	}
-});
+});