Merge pull request #67 from Slam256/feature/pagination

Feature/pagination
wkambale · Jul 23, 2024 · 83f80f8 · 83f80f8
2 parents 210d66e + 7b77808
commit 83f80f8
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -58,14 +58,35 @@
         </script>
     <!-- Schema Markup data ends -->
 
-    <!-- Link to external CSS -->
-    <link rel="stylesheet" href="src/css/styles.css">
-</head>
-
-<body>
-    <div class="header">
-        <h1>Kidnappings & Missing Persons in Uganda</h1>
-    </div>
+        <!-- Link to external CSS -->
+        <link rel="stylesheet" href="src/css/styles.css">
+    </head>
+    <body>
+        <header class="header">
+            <h1>Kidnappings & Missing Persons in Uganda</h1>
+            <h2>#March To Parliament - 23rd/July/2024</h2>
+        </header>
+        <section class="filters">
+            <span>Filter by:</span>
+            <div class="filter-and-search">
+                <div class="content__buttons buttons">
+                    <button data-category="All" class="active">All</button>
+                    <button data-category="Missing">Missing</button>
+                    <button data-category="Arrested">Arrested</button>
+                    <button data-category="Fallen">Fallen</button>
+                    <button data-category="Kidnapped">Kidnapped</button>
+                    <button data-category="Released">Released</button>
+                </div>
+                <input type="text" id="searchInput"
+                    placeholder="Search Person's Name...">
+            </div>
+            <div id="persons" class="persons"></div>
+            <div id="pagination" class="pagination">
+                <button id="prevPage">Previous</button>
+                <span id="currentPage"></span>
+                <button id="nextPage">Next</button>
+            </div>
+        </div>
 
     <div class="content">
         <span class="content__sort-by">Filter by:</span>

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -267,6 +267,20 @@ button:hover {
     color: var(--white);
 }
 
+.pagination {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.pagination button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    border-radius: 20px;
+    border: none;
+    color: var(--black);
+}
+
 @media screen and (max-width: 480px) {
     .footer-nav {
         flex-direction: column;

diff --git a/src/js/scripts.js b/src/js/scripts.js
@@ -44,6 +44,9 @@
  }
 
 document.addEventListener("DOMContentLoaded", function() {
+    let allData = [];
+    let currentPage = 1;
+    const itemsPerPage =12;
 
     // onkeyup event, call searchFunction
     document.getElementById('searchInput').addEventListener('keyup', searchFunction);
@@ -73,45 +76,60 @@ document.addEventListener("DOMContentLoaded", function() {
         `;
     }
 
-    // Function to filter persons based on search input
+    // function to sort data based on taken_time
+    function sortData(data) {
+        return data.sort((a, b) => {
+            const dateA = a.taken_time ? parseCustomDateFormat(a.taken_time) : new Date(0);
+            const dateB = b.taken_time ? parseCustomDateFormat(b.taken_time) : new Date(0);
+            return dateB - dateA; // Sort in descending order (newest first)
+        });
+    }
+
     function searchFunction() {
         let input = document.getElementById('searchInput');
         let filter = input.value.toLowerCase();
-        let persons = document.getElementById('persons');
-        let blog = persons.getElementsByClassName('card');
-
-        for (let i = 0; i < blog.length; i++) {
-            let txtValue = blog[i].textContent || blog[i].innerText;
-            if (txtValue.toLowerCase().indexOf(filter) > -1) {
-                blog[i].style.display = '';
-            } else {
-                blog[i].style.display = 'none';
-            }
-        }
+        let filteredData = allData.filter(card => 
+            card.name.toLowerCase().includes(filter) ||
+            card.status.toLowerCase().includes(filter) ||
+            card.last_known_location.toLowerCase().includes(filter)
+        );
+        displayPage(1, sortData(filteredData));
+        updatePaginationControls(filteredData.length);
     }
 
-    // Function to filter persons based on category
     function filterCategory(category) {
-        let persons = document.getElementById('persons');
-        let person = persons.getElementsByClassName('card');
-
-        for (let i = 0; i < person.length; i++) {
-            if (category === 'All' || person[i].getAttribute('data-category') === category) {
-                person[i].style.display = '';
-            } else {
-                person[i].style.display = 'none';
-            }
-        }
+        let filteredData = category === 'All' ? allData : allData.filter(card => card.status === category);
+        displayPage(1, sortData(filteredData));
+        updatePaginationControls(filteredData.length);
     }
 
-    // Hydrate the data to HTML.
+    function displayPage(page, data) {
+        const startIndex = (page - 1) * itemsPerPage;
+        const endIndex = startIndex + itemsPerPage;
+        const pageItems = data.slice(startIndex, endIndex);
+
+        const container = document.querySelector("#persons");
+        container.innerHTML = ''; // Clear previous content
+        pageItems.forEach((card) => {
+            container.innerHTML += createCard(card);
+        });
+    }
+
+    function updatePaginationControls(totalItems) {
+        const totalPages = Math.ceil(totalItems / itemsPerPage);
+        document.getElementById('currentPage').textContent = `Page ${currentPage} of ${totalPages}`;
+
+        document.getElementById('prevPage').disabled = (currentPage === 1);
+        document.getElementById('nextPage').disabled = (currentPage === totalPages);
+    }
+
+    // Fetch and display data
     fetch("data.json")
         .then((response) => response.json())
         .then((data) => {
-            const container = document.querySelector("#persons");
-            data.forEach((card) => {
-                container.innerHTML += createCard(card);
-            });
+            allData = sortData(data);
+            displayPage(currentPage, allData);
+            updatePaginationControls(allData.length);
         })
         .catch((error) => console.error("Error fetching data:", error));
 
@@ -129,4 +147,27 @@ document.addEventListener("DOMContentLoaded", function() {
             button.classList.add('active');
         });
     });
+
+    // Event listeners for pagination buttons
+    document.getElementById('prevPage').addEventListener('click', () => {
+        if (currentPage > 1) {
+            currentPage--;
+            let activeCategory = document.querySelector('.buttons button.active').getAttribute('data-category');
+            let filteredData = activeCategory === 'All' ? allData : allData.filter(card => card.status === activeCategory);
+            displayPage(currentPage, filteredData);
+            updatePaginationControls(filteredData.length);
+        }
+    });
+
+    document.getElementById('nextPage').addEventListener('click', () => {
+        let activeCategory = document.querySelector('.buttons button.active').getAttribute('data-category');
+        let filteredData = activeCategory === 'All' ? allData : allData.filter(card => card.status === activeCategory);
+        const totalPages = Math.ceil(filteredData.length / itemsPerPage);
+        if (currentPage < totalPages) {
+            currentPage++;
+            displayPage(currentPage, filteredData);
+            updatePaginationControls(filteredData.length);
+        }
+    });
+
 });