From fb014196dfc0caad2680be41d375a0120cb64db7 Mon Sep 17 00:00:00 2001
From: ValantineSuh <fuhvalentinesuh@gmail.com>
Date: Wed, 14 Feb 2024 10:42:40 +0100
Subject: [PATCH] Search bar functionality

---
 app.py                      | 22 +++++++++++++++++++++-
 static/index.js             | 21 +++++++++++++++++++++
 templates/locationList.html | 31 +++++++++++++++++++++++++++++--
 3 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/app.py b/app.py
index 662c820..af9252c 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, redirect
+from flask import Flask, render_template, request, redirect, jsonify, Response
 import sqlite3
 from flask_sqlalchemy import SQLAlchemy
 
@@ -151,5 +151,25 @@ def employee():
     return render_template('add_employee.html')
 
 
+@app.route('/search', methods=['GET'])
+def search():
+    res = None
+
+    entity = request.args.get('entity')
+    query = request.args.get('query')
+
+    if entity == 'location':
+        data = Location.query.filter(Location.location_name.contains(query)).all()
+        res = jsonify([{ 
+            "location_name": r.location_name, "number_of_offices": r.number_of_offices, "head_quater_contact": r.number_of_offices
+        } for r in data])
+    # elif entity == 'location':
+    #     data = Location.query.filter(Location.location_name.contains(query)).all()
+    #     res = jsonify(data)
+    else:
+        res = Response("Invalid entity", status=400)
+
+    return res
+
 if __name__ == '__main__':
     app.run(host='localhost', port=8080, debug=True)
\ No newline at end of file
diff --git a/static/index.js b/static/index.js
index e69de29..d9e8703 100644
--- a/static/index.js
+++ b/static/index.js
@@ -0,0 +1,21 @@
+$(document).ready(function() {
+    $('#search-button').click(function() {
+      var query = $('#query').val();
+      $.ajax({
+        url: '/search',
+        type: 'GET',
+        data: { query: query },
+        success: function(response) {
+          var results = response;
+          var resultsHtml = '';
+          for (var i = 0; i < results.length; i++) {
+            resultsHtml += '<p>' + results[i] + '</p>';
+          }
+          $('#search-results').html(resultsHtml);
+        },
+        error: function(error) {
+          console.log('Search request failed:', error);
+        }
+      });
+    });
+  });
\ No newline at end of file
diff --git a/templates/locationList.html b/templates/locationList.html
index e259b3a..5b2f334 100644
--- a/templates/locationList.html
+++ b/templates/locationList.html
@@ -4,16 +4,42 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Online Inventory System</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script>
     <link
     rel="stylesheet"
     href="{{ url_for('static', filename='main.css') }}"
     />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <script>
+      $(document).ready(function(){
+         $('#search-button').on('click', function(){
+            var query = $('#query').val();
+            $.get('/search', {entity: 'location', query: query}, function(data){
+               $('#table-results').empty();
+               data.forEach(function(d){
+                  $('#table-results').append(`
+                  <tr>
+                    <td>${ d.location_name }</td>
+                    <td>${ d.number_of_offices}</td>
+                    <td>${d.head_quater_contact}</td>
+                    <td class="action">
+                      <a href="/edit_location/location.id"><i class="fa fa-edit" style="font-size:24px"></i></a>
+                      <a href="/delete_location/location.id"><i class="fa fa-trash-o" style="font-size:24px"></i></a>
+                    </td>
+                  </tr>
+                  `);
+               });
+            });
+         });
+      });
+   </script>
 </head>
 <body>
     <div class="header">
         <input type="search" id="query" name="search" placeholder="Search...">
-        <button>Submit</button>
+        <button id="search-button">Submit</button>
         <a href="#"><img src="{{ url_for('static', filename='logo.png') }}" alt=""></a>
     </div>
 
@@ -37,6 +63,7 @@ <h1>Welcome To Our Online Inventory System</h1>
     </marquee> -->
     <div class="marquee-container">
       <h1 class="marquee">Welcome To Our Online Inventory System</h1>
+      <div id="results"></div>
     </div>
     <div class="location-form">
       <a href="/add-location" class="btn1">Add Location</a>
@@ -49,7 +76,7 @@ <h1 class="marquee">Welcome To Our Online Inventory System</h1>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="table-results">
           {% for location in locations  %}
             <tr>
               <td>{{ location.location_name }}</td>