🔧refactor: add pagination and search component js for users

D10S0VSkY-OSS · Nov 11, 2023 · 3245d4c · 3245d4c
1 parent 2ce0c05
commit 3245d4c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 27 deletions.
diff --git a/sld-dashboard/app/home/templates/deploys-list.html b/sld-dashboard/app/home/templates/deploys-list.html
@@ -373,7 +373,6 @@ <h5 class="modal-title" id="DeleteModalLongTitle-{{deploy.id}}">Delete Deploy
 
 {% endblock content %}
 
-<!-- Specific Page JS goes HERE  -->
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}
 <script src="/static/assets/js/pagination.js"></script>

diff --git a/sld-dashboard/app/home/templates/users-list.html b/sld-dashboard/app/home/templates/users-list.html
@@ -36,7 +36,7 @@ <h2 class="h4">All users</h2>
             <div class="col col-md-6 col-lg-3 col-xl-4">
                 <div class="input-group">
                     <span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
-                    <input type="text" class="form-control" id="search" onkeyup="search()" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
+                    <input type="text" class="form-control" id="myInput" onkeyup="search()" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
                 </div>
             </div>
             <div class="col-4 col-md-2 col-xl-1 pl-md-0 text-right">
@@ -50,10 +50,9 @@ <h2 class="h4">All users</h2>
                     <div class="dropdown-menu dropdown-menu-xs dropdown-menu-right">
                         <span class="dropdown-item font-weight-bold text-dark">Show</span>
                         <a class="dropdown-item d-flex font-weight-bold" href="/users-list">All<span class="icon icon-small ml-auto"><span class="fas fa-check"></span></span></a>
-                        <a class="dropdown-item font-weight-bold" href="/users-list/50">50</a>
-                        <a class="dropdown-item font-weight-bold" href="/users-list/100">100</a>
-                        <a class="dropdown-item font-weight-bold" href="/users-list/200">200</a>
-                        <a class="dropdown-item font-weight-bold" href="/users-list/300">300</a>
+                        <a class="dropdown-item font-weight-bold" href="/users-list/50">5</a>
+                        <a class="dropdown-item font-weight-bold" href="/users-list/100">20</a>
+                        <a class="dropdown-item font-weight-bold" href="/users-list/200">50</a>
                     </div>
                 </div>
             </div>
@@ -74,7 +73,7 @@ <h2 class="h4">All users</h2>
                     <th></th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody id="myTable">
                 <!-- Item -->
                 {% for user in users | sort(attribute='id') %}
                 <tr>
@@ -140,31 +139,20 @@ <h2 class="h4">All users</h2>
             <div class="font-weight-bold small"><b></b><b></b></div>
         </div>
     </div>
+ <!-- Pagination -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item" id="previous-page"><a class="page-link" href="#">Previous</a></li>
+    <!-- Page numbers will be dynamically inserted here -->
+    <li class="page-item" id="next-page"><a class="page-link" href="#">Next</a></li>
+  </ul>
+</nav>
     {% include 'includes/footer.html' %}
 
 </main>
 
 {% endblock content %}
-
 <!-- Specific Page JS goes HERE  -->
 {% block javascripts %}
-<script>
-function search() {
-  const input = document.getElementById('search')
-  const filter = input.value.toLowerCase()
-  const table = document.getElementById('table')
-  const tr = [...table.getElementsByTagName('tr')]
-
-  tr.forEach((t) => {
-    const foundMatch = [...t.getElementsByTagName('td')].some((td) => {
-      return td.innerHTML.toLowerCase().indexOf(filter) > -1
-    })
-    if (foundMatch) {
-      t.style.display = ''
-    } else {
-      t.style.display = 'none'
-    }
-  })
-}
-</script>
+<script src="/static/assets/js/pagination.js"></script>
 {% endblock javascripts %}