From b9b9b971f1f9667011eed797479fb3aef048e0e5 Mon Sep 17 00:00:00 2001
From: "christopher.tubbs" <christopher.tubbs@noaa.gov>
Date: Thu, 20 Jul 2023 13:11:45 -0500
Subject: [PATCH] Integrated the new json_editor with the SpecificationTemplate
 change_form and template_editor

---
 .../static/js/admin/json_editor.js            |   9 ++
 .../static/js/admin/template_editor.js        | 124 +-----------------
 .../specificationtemplate/change_form.html    |   3 +-
 3 files changed, 16 insertions(+), 120 deletions(-)

diff --git a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js
index a94e6ab9d..c56d1885b 100644
--- a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js
+++ b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/json_editor.js
@@ -1,5 +1,8 @@
 const $ = window.django.jQuery;
 
+/**
+ * A dedicated CodeMirror editor built for Django Admin Views
+ */
 export class JSONConfigurationEditor {
     /**
      * The element that stores the actual data that will be submitted to the server
@@ -146,10 +149,16 @@ function formatErrorMessages(message) {
 }
 
 if (!Object.keys(window).includes('DMOD')) {
+    /**
+     * A namespace for DMOD items
+     */
     window.DMOD = {};
 }
 
 if (!Object.keys(window.DMOD).includes('admin')) {
+    /**
+     * A namespace for DMOD admin items
+     */
     window.DMOD.admin = {};
 }
 
diff --git a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js
index 8183a06bf..841a800bb 100644
--- a/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js
+++ b/python/services/evaluationservice/dmod/evaluationservice/static/js/admin/template_editor.js
@@ -1,126 +1,12 @@
+import {JSONConfigurationEditor} from "./json_editor.js";
 const $ = window.django.jQuery;
-let configurationEditor = null;
-
-function shakeError() {
-    $("#json-errors").removeClass("cause-shake");
-    setTimeout(
-        function() {
-            $("#json-errors").addClass("cause-shake");
-        }, 10
-    );
-}
-
-function formErrorMessages(message) {
-    let messageLines = message.split("\n");
-    let outputMessageLines = [];
-
-    for (let line of messageLines) {
-        if (line.search(/[a-zA-Z]/g) < 0) {
-            break;
-        }
-
-        outputMessageLines.push(line);
-    }
-    return outputMessageLines;
-}
-
-function showErrorMessage(message) {
-    const lintState = configurationEditor.state.lint;
-    let errorMessages = [];
-    if (message == null) {
-        for (let marker of lintState.marked) {
-            if (marker.className.includes("error")) {
-                for (let errorMessage of formErrorMessages(marker.__annotation.message)) {
-                    errorMessages.push(errorMessage);
-                }
-            }
-        }
-    }
-    else {
-        errorMessages = formErrorMessages(message);
-    }
-
-    errorMessages = errorMessages.join(" ");
-
-    const errorBox = $("#json-errors");
-
-    errorBox.text(errorMessages);
-
-    if (errorMessages) {
-        errorBox.show();
-        shakeError();
-        errorBox.addClass("editor-error");
-        return true;
-    }
-    else {
-        errorBox.hide();
-        errorBox.removeClass("editor-error");
-        return false
-    }
-}
-
-function editorHasError() {
-    setTimeout(function() {
-        showErrorMessage();
-    }, 800);
-}
-
-function submitChanges(event) {
-    const foundError = showErrorMessage();
-
-    if (foundError) {
-        event.preventDefault();
-    }
-}
 
 $(document).ready(
     function() {
-        const field = $("#id_template_configuration");
-        field.hide();
-        let contents = field.val();
-
-        try {
-            const deserializedContent = JSON.parse(contents);
-            contents = JSON.stringify(deserializedContent, null, 4);
-        } catch (e) {
-            console.error("The data for the template configuration was invalid and could not be reformatted");
-        }
-
-        const editorArea = $("#template_editor")[0];
-        editorArea.value = contents;
-        configurationEditor = CodeMirror.fromTextArea(
-            editorArea,
-            {
-                mode: 'application/json',
-                json: true,
-                indentUnit: 4,
-                lineNumbers: true,
-                allowDropFileTypes: ['application/json'],
-                viewportMargin: Infinity,
-                matchBrackets: true,
-                autoCloseBrackets: true,
-                foldGutter: true,
-                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
-                lint: true
-            }
+        const editor = new JSONConfigurationEditor(
+            "#id_template_configuration",
+            "#template_editor"
         );
-
-        configurationEditor.on(
-            "change",
-            editorHasError
-        );
-
-        configurationEditor.on(
-            "change",
-            (_) => {
-                configurationEditor.save();
-                field.val(configurationEditor.getValue());
-            }
-        );
-
-        $('label[for="id_template_configuration"]').css("float", "none");
-
-        $('input[type="submit"]').on("click", submitChanges);
-        showErrorMessage();
+        editor.initialize();
     }
 );
\ No newline at end of file
diff --git a/python/services/evaluationservice/dmod/evaluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html b/python/services/evaluationservice/dmod/evaluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html
index 750be7788..4ca32c520 100644
--- a/python/services/evaluationservice/dmod/evaluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html
+++ b/python/services/evaluationservice/dmod/evaluationservice/templates/admin/evaluation_service/specificationtemplate/change_form.html
@@ -86,7 +86,8 @@
         margin: 5px;
     }
 </style>
-    <script src="{% static "js/admin/template_editor.js" %}"></script>
+    <script type="module" src="{%  static "js/admin/json_editor.js" %}"></script>
+    <script type="module" src="{% static "js/admin/template_editor.js" %}"></script>
 {% block object-tools %}
 {% if change %}{% if not is_popup %}
   <ul class="object-tools">