Feature/unit test for validations

sage_validation/file_validator/templates/upload.html

@@ -26,34 +26,43 @@
         </div>
 
         <!-- Success Message -->
-        <div id="successSection" class="hidden mt-4 bg-green-100 border border-green-400 text-green-700 p-4 rounded-lg">
-            <strong class="font-bold">Success:</strong>
-            <span id="successMessage" class="block mt-2"></span>
+        <div id="successSection"
+             class="hidden mt-4 mb-8 bg-green-100 border border-green-400 text-green-700 p-4 rounded-lg text-center">
+            <strong class="font-bold text-lg">Success!</strong>
+            <p id="successMessage" class="block mt-2 text-md"></p>
+        </div>
+        <div id="downloadSection" class="hidden mt-16 flex justify-center">
+            <a id="downloadLink" href="#"
+               class="w-full max-w-xs text-center bg-blue-600 text-white py-4 px-12 rounded-lg shadow-lg hover:bg-blue-700
+          focus:outline-none focus:ring focus:ring-blue-400 transition text-lg font-semibold block">
+                📥 Download Updated CSV
+            </a>
         </div>
     </div>
 
     <script>
-        const form = document.getElementById('uploadForm');
-        const fileInput = document.getElementById('fileInput');
-        const errorSection = document.getElementById('errorSection');
-        const errorList = document.getElementById('errorList');
-        const successSection = document.getElementById('successSection');
-        const successMessage = document.getElementById('successMessage');
-
-        form.addEventListener('submit', async function (e) {
+        document.getElementById('uploadForm').addEventListener('submit', async function (e) {
             e.preventDefault();
 
-            // Clear previous messages
+            const fileInput = document.getElementById('fileInput');
+            const errorSection = document.getElementById('errorSection');
+            const errorList = document.getElementById('errorList');
+            const successSection = document.getElementById('successSection');
+            const successMessage = document.getElementById('successMessage');
+            const downloadSection = document.getElementById('downloadSection');
+            const downloadLink = document.getElementById('downloadLink');
+
             errorList.innerHTML = '';
             successMessage.innerHTML = '';
             errorSection.classList.add('hidden');
             successSection.classList.add('hidden');
+            downloadSection.classList.add('hidden');
 
             const formData = new FormData();
             formData.append('file', fileInput.files[0]);
 
             try {
-                const response = await fetch('', {
+                const response = await fetch("{% url 'upload-file' %}", {
                     method: 'POST',
                     body: formData,
                     headers: {
@@ -66,28 +75,19 @@
                 if (response.ok && result.status === 'success') {
                     successMessage.innerText = result.message;
                     successSection.classList.remove('hidden');
+                    downloadLink.href = result.download_url;
+                    downloadSection.classList.remove('hidden');
                 } else if (response.status === 400 && result.status === 'error') {
-                    // Handle form errors from the backend
-                    if (Array.isArray(result.errors)) {
-                        result.errors.forEach(errorObj => {
-                            for (const [field, messages] of Object.entries(errorObj)) {
-                                messages.forEach(message => {
-                                    const li = document.createElement('li');
-                                    li.textContent = `${field}: ${message}`;
-                                    errorList.appendChild(li);
-                                });
-                            }
+                    for (const [field, messages] of Object.entries(result.errors)) {
+                        messages.forEach(message => {
+                            const li = document.createElement('li');
+                            li.textContent = `${field}: ${message}`;
+                            errorList.appendChild(li);
                         });
-                    } else {
-                        const li = document.createElement('li');
-                        li.textContent = result.errors;
-                        errorList.appendChild(li);
                     }
-
                     errorSection.classList.remove('hidden');
                 }
             } catch (error) {
-                // Handle unexpected errors
                 const li = document.createElement('li');
                 li.textContent = 'An unexpected error occurred. Please try again.';
                 errorList.appendChild(li);