From f1b9662122abed09ccf74b2eda034e7a45730e60 Mon Sep 17 00:00:00 2001
From: Bobby <bobbyskhs@gmail.com>
Date: Tue, 3 May 2022 22:04:04 -0400
Subject: citizens pagination

---
 interface/views/citizens.ejs | 149 ++++++++++++++++++++++++++++---------------
 1 file changed, 99 insertions(+), 50 deletions(-)

(limited to 'interface/views')

diff --git a/interface/views/citizens.ejs b/interface/views/citizens.ejs
index 2244713..2cb4ecf 100644
--- a/interface/views/citizens.ejs
+++ b/interface/views/citizens.ejs
@@ -4,10 +4,22 @@
     <%- include('partials/head') %>
     <style>
       .ui.menu {
-        margin: 0;
+        margin-top: 0;
       }
-      .ui.table {
-        margin: 0;
+      .scrollY {
+        max-height: calc(100vh - 8rem);
+        margin-top: 1rem;
+        overflow-y: scroll;
+      }
+      .ui.table thead tr:first-child > th {
+        position: sticky !important;
+        top: 0;
+        z-index: 2;
+      }
+      .ui.table tfoot tr:first-child > th {
+        position: sticky !important;
+        bottom: 0;
+        z-index: 2;
       }
     </style>
   </head>
@@ -58,57 +70,94 @@
     </div>
 
     <%- include('partials/navbar') %>
-    <table class="ui selectable table">
-      <thead>
-        <tr>
-          <th>First Name</th>
-          <th>Last Name</th>
-          <th>Address</th>
-          <th>Mobile Number</th>
-          <th>Date of Birth</th>
-          <th>Gender</th>
-          <th>Marital Status</th>
-          <th>Village Name</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <% for(var i=0; i < citizens.length; i++) { %>
-        <tr>
-          <td><%= citizens[i].first_name %></td>
-          <td><%= citizens[i].last_name %></td>
-          <td><%= citizens[i].address %></td>
-          <td><%= citizens[i].mobile_num %></td>
-          <td><%= citizens[i].dob %></td>
-          <td><%= citizens[i].gender %></td>
-          <td><%= citizens[i].marital_status %></td>
-          <td><%= citizens[i].village_name %></td>
-          <td>
-            <div class="ui teal buttons">
-              <div
-                class="ui button"
-                onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')"
-              >
-                Edit
-              </div>
-              <div class="ui floating dropdown icon button">
-                <i class="dropdown icon"></i>
-                <div class="menu">
-                  <div
-                    class="item"
-                    onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')"
-                  >
-                    <i class="delete icon"></i> Delete
+
+    <!-- Drop down for selecting limit -->
+
+    <div class="ui container">
+      <div class="ui floating labeled icon dropdown button">
+        <i class="list icon"></i>
+        <span class="text">Items</span>
+        <div class="menu">
+          <div class="item" onclick="redirectToLimit(10)">10</div>
+          <div class="item" onclick="redirectToLimit(25)">25</div>
+          <div class="item" onclick="redirectToLimit(50)">50</div>
+          <div class="item" onclick="redirectToLimit(100)">100</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scrollY">
+      <table class="ui selectable table">
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Address</th>
+            <th>Mobile Number</th>
+            <th>Date of Birth</th>
+            <th>Gender</th>
+            <th>Marital Status</th>
+            <th>Village Name</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% for(var i=0; i < citizens.length; i++) { %>
+          <tr>
+            <td><%= citizens[i].first_name %></td>
+            <td><%= citizens[i].last_name %></td>
+            <td><%= citizens[i].address %></td>
+            <td><%= citizens[i].mobile_num %></td>
+            <td><%= citizens[i].dob %></td>
+            <td><%= citizens[i].gender %></td>
+            <td><%= citizens[i].marital_status %></td>
+            <td><%= citizens[i].village_name %></td>
+            <td>
+              <div class="ui teal buttons">
+                <div
+                  class="ui button"
+                  onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')"
+                >
+                  Edit
+                </div>
+                <div class="ui floating dropdown icon button">
+                  <i class="dropdown icon"></i>
+                  <div class="menu">
+                    <div
+                      class="item"
+                      onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')"
+                    >
+                      <i class="delete icon"></i> Delete
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </td>
-        </tr>
-        <% } %>
-      </tbody>
-    </table>
+            </td>
+          </tr>
+          <% } %>
+        </tbody>
+        <!-- Display a pagination -->
+        <tfoot>
+          <tr>
+            <th colspan="9">
+              <div class="ui right floated pagination menu">
+                <a class="icon item" id="pageLeft">
+                  <i class="left chevron disabled icon"></i>
+                </a>
+
+                <a class="icon item" id="pageRight">
+                  <i class="right chevron disabled icon"></i>
+                </a>
+              </div>
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
   </body>
   <%- include('partials/scripts') %>
+  <script>
+    const count = "<%= count %>";
+  </script>
   <script src="/citizens.js"></script>
 </html>
-- 
cgit v1.2.3