From 8bc5717cee3cfcea3b185609a7fcd8724ddd17bf Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Wed, 15 Jan 2025 12:27:38 +0100
Subject: [PATCH] pkp/pkp-lib#9497 Migrate pubid plugin to vue3

---
 plugins/pubIds/urn/URNPubIdPlugin.php  |  13 +--
 plugins/pubIds/urn/js/FieldPubIdUrn.js |   8 +-
 plugins/pubIds/urn/js/FieldTextUrn.js  | 114 ++++++++++++-------------
 3 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/plugins/pubIds/urn/URNPubIdPlugin.php b/plugins/pubIds/urn/URNPubIdPlugin.php
index ea353855528..6c008e74b3d 100644
--- a/plugins/pubIds/urn/URNPubIdPlugin.php
+++ b/plugins/pubIds/urn/URNPubIdPlugin.php
@@ -319,10 +319,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 = [
@@ -467,12 +463,19 @@ 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
index 2bb0a45b38c..f86e5cff517 100644
--- 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;
         }
     },
-});
\ No newline at end of file
+})
diff --git a/plugins/pubIds/urn/js/FieldTextUrn.js b/plugins/pubIds/urn/js/FieldTextUrn.js
index f7625f4cfdb..04a640b1abb 100644
--- a/plugins/pubIds/urn/js/FieldTextUrn.js
+++ b/plugins/pubIds/urn/js/FieldTextUrn.js
@@ -4,82 +4,82 @@
 /**
  * @file plugins/pubIds/urn/js/FieldTextUrn.js
  *
- * Copyright (c) 2014-2021 Simon Fraser University
- * Copyright (c) 2003-2021 John Willinsky
+ * Copyright (c) 2014-2025 Simon Fraser University
+ * Copyright (c) 2003-2025John Willinsky
  * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
  *
  * @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">' +
+	'			<FormFieldLabel' +
+	'				:controlId="controlId"' +
+	'				:label="label"' +
+	'				:locale-label="localeLabel"' +
+	'				:is-required="isRequired"' +
+	'				:required-label="t(\'common.required\')"' +
+	'				:multilingual-label="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"' +
+	'				/>' +
+	'				<PkpButton' +
+	'					v-if="applyCheckNumber"' +
+	'					class="pkpButton pkpFormField--urn__button"' +
+	'					@click.prevent="addCheckNumber"' +
+	'				>' +
+	'					{{ addCheckNumberLabel }}' +
+	'				</PkpButton>' +
+	'				<FieldError' +
+	'					v-if="errors && errors.length"' +
+	'					:id="describedByErrorId"' +
+	'					:messages="errors"' +
+	'				/>' +
+'			</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);
-	}
-});
\ No newline at end of file
+});