Merge pull request #42 from octodemo/search_improvements

chore: Add styles for table and search functionality
octodemo · May 10, 2024 · 8a8cd40 · 8a8cd40
2 parents 4a4522d + ccd43de
commit 8a8cd40
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 72 deletions.
diff --git a/src/main/resources/static/js/search.js b/src/main/resources/static/js/search.js
@@ -0,0 +1,29 @@
+document.getElementById('searchForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    var input = document.getElementById('search').value;
+    var resultsDiv = document.getElementById('searchResults');
+    resultsDiv.innerHTML = 'Loading...';
+
+    fetch('/search?q=' + encodeURIComponent(input))
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    })
+    .then(data => {
+        resultsDiv.innerHTML = '';
+        for (var i = 0; i < data.length; i++) {
+            var item = data[i];
+            var highlightedItem = item.replace(new RegExp(input, 'gi'), function(match) {
+                return '<strong>' + match + '</strong>';
+            });
+            resultsDiv.innerHTML += '<p>' + highlightedItem + '</p>';
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        resultsDiv.innerHTML = 'An error occurred while performing the search.';
+    });
+});
diff --git a/src/main/resources/static/js/styles.js b/src/main/resources/static/js/styles.js
@@ -1,3 +1,42 @@
+function addStyles() {
+    let css = `
+        body {
+            background-color: #f2f2f2;
+            font-family: Arial, sans-serif;
+            padding: 0 15px;
+            max-width: 1200px;
+            margin: auto;
+        }
+        table {
+            border-collapse: collapse;
+            width: 100%;
+            margin-top: 50px;
+            box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        th, td {
+            text-align: left;
+            padding: 8px;
+        }
+        .actions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .clear {
+            color: #f44336;
+        }
+    `;
+
+    let style = document.createElement('style');
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    document.head.appendChild(style);
+}
+
+addStyles();
+
 let themeColors;
 if (window.enableSearchFeature) {
     themeColors = {

diff --git a/src/main/resources/static/js/upload_csv.js b/src/main/resources/static/js/upload_csv.js
@@ -0,0 +1,37 @@
+document.getElementById('csvFile').addEventListener('change', function() {
+    if (this.value) {
+        document.getElementById('uploadForm').style.display = 'block';
+    } else {
+        document.getElementById('uploadForm').style.display = 'none';
+    }
+});
+
+document.getElementById('uploadForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    var formData = new FormData();
+    formData.append('file', document.getElementById('csvFile').files[0]);
+
+    fetch('/import', {
+        method: 'POST',
+        body: formData
+    }).then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.text();
+    }).then(data => {
+        console.log('File uploaded successfully: ' + data);
+        // clear the file input and hide the form
+        document.getElementById('csvFile').value = '';
+        document.getElementById('uploadForm').style.display = 'none';
+
+        // Wait for 1 second before reloading the page
+        setTimeout(function() {
+            location.reload();
+        }, 1000);
+    }).catch(error => {
+        console.error('There has been a problem with your fetch operation: ', error);
+        document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
+    });
+});
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -3,35 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <style>
-        body {
-            background-color: #f2f2f2;
-            font-family: Arial, sans-serif;
-            padding: 0 15px;
-            max-width: 1200px;
-            margin: auto;
-        }
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            margin-top: 50px;
-            box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        th, td {
-            text-align: left;
-            padding: 8px;
-        }
-        .actions {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .clear {
-            color: #f44336;
-        }
-    </style>
     <script th:inline="javascript">
         /*<![CDATA[*/
         window.enableSearchFeature = /*[[${enableSearchFeature}]]*/ 'default';
@@ -57,53 +28,17 @@ <h1>Inventory Records</h1>
         </form>
         <label for="csvFile" class="modern-button">Import from CSV</label>
         <div id="errorMessage" style="color: red;"></div>
-        <script>
-            document.getElementById('csvFile').addEventListener('change', function() {
-                if (this.value) {
-                    document.getElementById('uploadForm').style.display = 'block';
-                } else {
-                    document.getElementById('uploadForm').style.display = 'none';
-                }
-            });
-
-            document.getElementById('uploadForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-
-                var formData = new FormData();
-                formData.append('file', document.getElementById('csvFile').files[0]);
-
-                fetch('/import', {
-                    method: 'POST',
-                    body: formData
-                }).then(response => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return response.text();
-                }).then(data => {
-                    console.log('File uploaded successfully: ' + data);
-                    // clear the file input and hide the form
-                    document.getElementById('csvFile').value = '';
-                    document.getElementById('uploadForm').style.display = 'none';
-
-                    // Wait for 1 second before reloading the page
-                    setTimeout(function() {
-                        location.reload();
-                    }, 1000);
-                }).catch(error => {
-                    console.error('There has been a problem with your fetch operation: ', error);
-                    document.getElementById('errorMessage').textContent = 'Error: ' + error.message;
-                });
-            });
-        </script>
+        <script src="js/upload_csv.js"></script>
+        <script src="js/search.js"></script>
         <br><br>
         <div id="searchFeature">
-            <form action="/search" method="get">
-            <label for="search">Search for item:</label>
-            <input type="text" id="search" name="q" />
-            <button type="submit">Search</button>
+            <form id="searchForm" action="/search" method="get">
+                <label for="search">Search for item:</label>
+                <input type="text" id="search" name="q" />
+                <button type="submit">Search</button>
             </form>
         </div>
+        <div id="searchResults"></div>
         <br />
         <div>
             <a th:if="${currentPage > 0}" th:href="@{/?(page=${currentPage - 1})}">Previous</a>