Move submit modal dialog error message from progress bar to alert box

In the submit modal dialog in chapters, the error message was displayed inside a progress bar. That was not a good idea since it was hard to read and the latter half of the message disappeared since it did not fit into the progress bar. The error message is now moved to a separate alert box above the progress bar.
apluslms · Jun 30, 2023 · 339be66 · 339be66
1 parent 91f9875
commit 339be66
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/assets/js/aplus.js b/assets/js/aplus.js
@@ -366,6 +366,7 @@ $(function() {
     var defaults = {
         loader_selector: ".modal-progress",
         loader_text_selector: ".progress-bar",
+        alert_text_selector: ".modal-submit-error",
         title_selector: ".modal-title",
         content_selector: ".modal-body",
         error_message_attribute: "data-msg-error",
@@ -382,6 +383,7 @@ $(function() {
         init: function() {
             this.loader = this.element.find(this.settings.loader_selector);
             this.loaderText = this.loader.find(this.settings.loader_text_selector);
+            this.alertText = this.loader.find(this.settings.alert_text_selector);
             this.title = this.element.find(this.settings.title_selector);
             this.content = this.element.find(this.settings.content_selector);
             this.messages = {
@@ -407,6 +409,7 @@ $(function() {
         open: function(data) {
             this.title.hide();
             this.content.hide();
+            this.alertText.hide();
             this.loaderText
                 .removeClass('progress-bar-danger').addClass('active')
                 .text(data || this.messages.loading);
@@ -418,9 +421,10 @@ $(function() {
         },
 
         showError: function(data) {
-            this.loaderText
-                .removeClass('active').addClass('progress-bar-danger')
-                .text(data || this.messages.error);
+            if (data) {
+                this.alertText.text(data).show();
+            }
+            this.loaderText.removeClass('active').addClass('progress-bar-danger').text(this.messages.error);
         },
 
         showContent: function(data) {

diff --git a/edit_course/tests.py b/edit_course/tests.py
@@ -33,8 +33,9 @@ def test_course_clone(self):
             'key_month': 'Test',
         }, follow=True)
         self.assertEqual(response.status_code, 200)
-        self.assertNotContains(response, "alert alert-danger")
-        self.assertContains(response, "alert alert-success")
+        stripped_content = response.content.decode("utf-8").replace("modal-submit-error alert alert-danger", "")
+        self.assertNotIn("alert alert-danger", stripped_content)
+        self.assertIn("alert alert-success", stripped_content)
 
         # Partial clone
         response = self.client.post(url, {
@@ -48,8 +49,9 @@ def test_course_clone(self):
             'key_month': 'Test',
         }, follow=True)
         self.assertEqual(response.status_code, 200)
-        self.assertNotContains(response, "alert alert-danger")
-        self.assertContains(response, "alert alert-success")
+        stripped_content = response.content.decode("utf-8").replace("modal-submit-error alert alert-danger", "")
+        self.assertNotIn("alert alert-danger", stripped_content)
+        self.assertIn("alert alert-success", stripped_content)
 
         instance = CourseInstance.objects.get(id=1)
         self.assertEqual(instance.url, instance_url)
@@ -104,8 +106,9 @@ def test_clone_from_sis(self):
             'sis': '123',
         }, follow=True)
         self.assertEqual(response.status_code, 200)
-        self.assertNotContains(response, "alert alert-danger")
-        self.assertContains(response, "alert alert-success")
+        stripped_content = response.content.decode("utf-8").replace("modal-submit-error alert alert-danger", "")
+        self.assertNotIn("alert alert-danger", stripped_content)
+        self.assertIn("alert alert-success", stripped_content)
 
         # The asserted values are coming from in sis_test.py
         sis_instance = CourseInstance.objects.get(course=instance.course, url="sis-test")

diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
@@ -3842,7 +3842,7 @@ msgid "TOTAL_NUMBER_OF_SUBMITTERS"
 msgstr "Total number of submitters"
 
 #: exercise/templates/exercise/_exercise_wait.html
-#: exercise/templates/exercise/exercise.html
+#: exercise/templates/exercise/exercise.html templates/base.html
 msgid "EXERCISE_ERROR_COMMUNICATION"
 msgstr ""
 "There was a problem loading the assignment. Try loading the page again "

diff --git a/locale/fi/LC_MESSAGES/django.po b/locale/fi/LC_MESSAGES/django.po
@@ -3849,7 +3849,7 @@ msgid "TOTAL_NUMBER_OF_SUBMITTERS"
 msgstr "Palauttaneita opiskelijoita yhteensä"
 
 #: exercise/templates/exercise/_exercise_wait.html
-#: exercise/templates/exercise/exercise.html
+#: exercise/templates/exercise/exercise.html templates/base.html
 msgid "EXERCISE_ERROR_COMMUNICATION"
 msgstr ""
 "Tehtävän lataaminen epäonnistui. Yritä uudelleen myöhemmin. "

diff --git a/templates/base.html b/templates/base.html
@@ -249,6 +249,9 @@ <h4>{% translate "SITE" %}</h4>
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
 				<div class="modal-progress">
+					<div class="modal-submit-error alert alert-danger" style="display:none">
+						{% translate "EXERCISE_ERROR_COMMUNICATION" %}
+					</div>
 					<div class="progress">
 						<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%"
 							data-msg-error="{% translate 'LOADING_FAILED' %}">