From fd6f1220c2a3bf13ea149a234babda4341f7cf08 Mon Sep 17 00:00:00 2001
From: Carine Dengler <carine-dengler@logilab.fr>
Date: Mon, 5 Oct 2020 11:09:14 +0200
Subject: [PATCH] moved error message and changed how error message(s) are
 displayed in ui

---
 app/templates/macros/validate_length.html | 70 ++++++++++++++++-------
 app/templates/main/corpus_new.html        |  2 +-
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/app/templates/macros/validate_length.html b/app/templates/macros/validate_length.html
index 09ed6de4..bb0cab69 100644
--- a/app/templates/macros/validate_length.html
+++ b/app/templates/macros/validate_length.html
@@ -1,29 +1,55 @@
 {% macro validateLength(textArea, index, length) %}
     <script type="text/javascript">
-    document.getElementById("form").addEventListener("submit", (evt => validateLength(evt, "{{textArea}}", {{index}}, {{length}})));
-    function validateLength(evt, textArea, lengths){
-        textAreaElement = document.getElementById(textArea)
-        var text = textAreaElement.value;
-        lines = text.split(/\r\n|\n\r|\r|\n/);
-        fields = lines.map((x) => x.split(/\t+/));
-        for (const index in lengths) {
-            length = lengths[index];
-            var validatedField = fields[0][index];
-            for (let i=1; i < fields.length; i++){
-                fieldValue = fields[i][index]
-                if (fieldValue.length > length){
-                    evt.preventDefault();
-                    startPos = text.search(new RegExp(fieldValue));
-                    textAreaElement.setSelectionRange(startPos, startPos + fieldValue.length)
-                    textAreaElement.focus();
-                    var div = document.createElement("div");
-                    div.className = "alert alert-danger mt-3 mb-3";
-                    div.textContent = `column '${validatedField}': '${fieldValue}' is too long (maximum ${length} characters)`;
-                    var formElement = document.getElementById("form");
-                    formElement.insertBefore(div, formElement.firstChild);
+        document.getElementById("form").addEventListener("submit", (evt => validateLength(evt, "{{textArea}}", {{index}}, {{length}})));
+
+        function insertValidateLengthError(validatedField, fieldValue, length, siblingId) {
+            // create unique ID for each error message
+            validateLengthErrorId = `validateLengthError${Date.now()}`;
+            var validateLengthError = document.createElement("div");
+            validateLengthError.id = validateLengthErrorId;
+            validateLengthError.className = "alert alert-danger mt-3 mb-3";
+            validateLengthError.textContent = `column '${validatedField}': '${fieldValue}' is too long (maximum ${length} characters)`;
+            if (!siblingId) {
+                document.getElementById("tokensLabel").insertBefore(validateLengthError, parent.firstChild);
+            }
+            else {
+                document.getElementById(siblingId).after(validateLengthError);
+            }
+            return validateLengthErrorId;
+        };
+
+        function clearError(tokensLabel){
+            newTokensLabel = tokensLabel.cloneNode(false);
+            tokensLabel.parentNode.replaceChild(newTokensLabel, tokensLabel)
+        };
+
+        function validateLength(evt, textAreaId, lengths){
+            // clear previous error messages
+            clearError(document.getElementById("tokensLabel"))
+            textArea = document.getElementById(textAreaId)
+            var text = textArea.value;
+            lines = text.split(/\r\n|\n\r|\r|\n/);
+            fields = lines.map((x) => x.split(/\t+/));
+            for (const index in lengths) {
+                length = lengths[index];
+                var validatedField = fields[0][index];
+                var siblingId = "";
+                var highlighted = false;
+                for (let i=1; i < fields.length; i++){
+                    fieldValue = fields[i][index]
+                    if (fieldValue.length > length){
+                        siblingId = insertValidateLengthError(validatedField, fieldValue, length, siblingId);
+                        evt.preventDefault();
+                        // highlight first erroneous line
+                        if (!highlighted) {
+                            startPos = text.search(new RegExp(fieldValue));
+                            textArea.setSelectionRange(startPos, startPos + fieldValue.length)
+                            textArea.focus();
+                            highlighted = true;
+                        };
+                    };
                 };
             };
         };
-    };
 </script>
 {% endmacro %}
diff --git a/app/templates/main/corpus_new.html b/app/templates/main/corpus_new.html
index ba8f419c..77accaf3 100644
--- a/app/templates/main/corpus_new.html
+++ b/app/templates/main/corpus_new.html
@@ -34,7 +34,7 @@ <h1>Create a new corpus</h1>
         <legend>Data</legend>
         {{ upload_text.upload_text("tokens") }}
         <div class="form-group">
-            <label for="tokens">Tokens (as TSV content)</label>
+            <label for="tokens" id="tokensLabel">Tokens (as TSV content)</label>
             <small id="tsvHelp" class="form-text text-muted">The TSV should at least have the headers : form, lemma, POS, morph</small>
             <small>Example :</small>
             <pre>form	lemma	POS	morph