[SMD-151] Show error state on error screen

WIP add javascript event listener to detect if form is submitted empty

...

...

...

...

app/main/routes.py

@@ -112,9 +112,9 @@ def check_file(excel_file: FileStorage) -> str | None:
     """
     error = None
     if not excel_file:
-        error = "Select your returns template"
+        error = "Select your returns template."
     elif excel_file.content_type != MIMETYPE.XLSX:
-        error = "The selected file must be an XLSX"
+        error = "The selected file must be an XLSX."
     return error
 
 

app/static/src/js/custom.js

@@ -1 +1,78 @@
 // Your custom JS goes here...
+
+const noFileError = (
+    '<p class="govuk-error-message">\n' +
+    '    Some of your data is not what we expect, so we could not run the full checks.\n' +
+    '</p>\n' +
+    '<p class="govuk-error-message">\n' +
+    '    Fix these problems and re-upload:\n' +
+    '</p>\n' +
+    '<ul>\n' +
+    '    <li>Select your returns template.</li>' +
+    '</ul>\n')
+
+const noFileSummary = (
+    '<div role="alert">\n' +
+    '    <h2 class="govuk-error-summary__title">There is a problem</h2>\n' +
+    '    <div class="govuk-error-summary__body govuk-error-message">\n' +
+    '        <p class="govuk-error-message">\n' +
+    '            Some of your data is not what we expect, so we could not run the full checks.\n' +
+    '        </p>\n' +
+    '        <p class="govuk-error-message">\n' +
+    '            Fix these problems and re-upload:\n' +
+    '        </p>\n' +
+    '        <ul>\n' +
+    '            <li><a class="govuk-error-message" href="#ingest_spreadsheet">Select your returns template.</a></li>\n' +
+    '        </ul>\n' +
+    '    </div>\n' +
+    '</div>\n')
+
+
+document.addEventListener('DOMContentLoaded', function() {
+      "This event listener checks to see if a user submits an empty form and updates the DOM to display error messages. " +
+      "It is writen in such a way that if correct html classes cannot be found on the page the behaviour will default " +
+      "to standard error messageing e.g a new request will be made.";
+      // Find the form by its ID
+      var form = document.getElementById('submit_form');
+
+      // Add a submit event listener to the form
+      form.addEventListener('submit', function(event) {
+        // Get the value of the file input by its ID
+        var fileInput = document.getElementById('ingest_spreadsheet');
+
+        // Check if the file input is empty
+        if (fileInput.files.length === 0) {
+          fileInput.classList.add('govuk-file-upload--error');
+
+          var errorMessage = document.getElementById('error_message');
+          var errorSummary = document.getElementById('error_summary');
+          if (errorMessage && errorSummary) {
+            // If the error message and summary already exists, update its content
+            errorMessage.innerHTML = noFileError
+            errorSummary.innerHTML = noFileSummary
+          } else if (!errorMessage && !errorSummary){
+            // Create the error message and summary elements if they don't exist
+            errorMessage = document.createElement('p');
+            errorMessage.id = 'error_message';
+            errorMessage.className = 'govuk-error-message';
+            errorMessage.innerHTML = noFileError
+
+            errorSummary = document.createElement('div');
+            errorSummary.id = 'error_summary';
+            errorSummary.className = 'govuk-error-summary'
+            errorSummary.innerHTML = noFileSummary
+
+            // Insert into the DOM
+            var errorDiv = document.querySelector('.govuk-form-group');
+            errorDiv.classList.add('govuk-form-group--error');
+            errorDiv.prepend(errorMessage)
+
+            var container = document.getElementById('main_container');
+            container.prepend(errorSummary)
+          } else {
+            return
+          }
+          event.preventDefault();
+        }
+      });
+    });

app/templates/main/errorSummary.html

@@ -1,5 +1,5 @@
 {% macro errorSummary(pre_errors) %}
-    <div class="govuk-error-summary" data-module="govuk-error-summary">
+    <div class="govuk-error-summary" data-module="govuk-error-summary" id="error_summary">
         <div role="alert">
             <h2 class="govuk-error-summary__title">There is a problem</h2>
             <div class="govuk-error-summary__body govuk-error-message">
@@ -22,7 +22,7 @@ <h2 class="govuk-error-summary__title">There is a problem</h2>
 {% endmacro %}
 
 {% macro errorMessage(pre_errors) %}
-    <div class="govuk-error-message">
+    <div id="error_message" class="govuk-error-message">
         <p class="govuk-error-message">
             Some of your data is not what we expect, so we could not run the full checks.
         </p>

app/templates/main/upload.html

@@ -19,7 +19,7 @@
 {% set mainClasses = "govuk-!-width-two-thirds" %}
 
 {% block content %}
-    <div class="govuk-width-container">
+    <div class="govuk-width-container" id="main_container">
         {% if pre_error %}
             {{ errorSummary(pre_error) }}
         {% endif %}
@@ -50,20 +50,21 @@
         {% endif %}
 
         {{ uploadTable(local_authorities, fund, reporting_period) }}
-
         <div class="upload-data-container govuk-!-margin-top-5">
-            <form method="post" action="{{ url_for('main.upload') }}" enctype="multipart/form-data">
+            <form method="post" action="{{ url_for('main.upload') }}" enctype="multipart/form-data" id="submit_form">
                 <label class="govuk-heading-m">Upload your data return</label>
                 {% if pre_error %}
                     {{ govukFileUpload({'id': 'ingest_spreadsheet',
                      "hint": {"text": ""},
                      "label": {"text": ""},
+                     'attributes': {"accept": ".xlsx,.xls"},
                      "errorMessage": {"html": errorMessage(pre_error)},
                      'name': 'ingest_spreadsheet'}) }}
                 {% else %}
                     {{ govukFileUpload({'id': 'ingest_spreadsheet',
                      "hint": {"text": ""},
                      "label": {"text": ""},
+                     'attributes': {"accept": ".xlsx,.xls"},
                      'name': 'ingest_spreadsheet'}) }}
                 {% endif %}
                 <p class="govuk-body">When you upload your return, we’ll check it for missing data and formatting errors.</p>

app/templates/main/validation-errors.html

@@ -17,8 +17,8 @@
 {% set mainClasses = "govuk-!-width-full" %}
 
 {% block content %}
-    <div class="upload-data-container govuk-!-margin-top-5">
-        <form method="post" action="{{ url_for('main.upload') }}" enctype="multipart/form-data">
+    <div class="upload-data-container govuk-!-margin-top-5" id="main_container">
+        <form method="post" action="{{ url_for('main.upload') }}" enctype="multipart/form-data" id="submit_form">
             <h1 class="govuk-heading-l">There are errors in your return</h1>
             <p class="govuk-body">Fix these errors and re-upload your return.</p>
                 {{ errorTable(validation_errors) }}
@@ -28,7 +28,9 @@ <h2 class="govuk-heading-l">Errors fixed?</h2>
             {{ govukFileUpload({'id': 'ingest_spreadsheet',
              "hint": {"text": ""},
              "label": {"text": ""},
-             'name': 'ingest_spreadsheet'}) }}
+             'attributes': {"accept": ".xlsx,.xls"},
+             'name': 'ingest_spreadsheet',
+             }) }}
 
             {{ govukButton({
                 "element": "button",