diff --git a/client/js/catalog.js b/client/js/catalog.js
index 341fa72a81e109273313e489de3496b9b519ffff..1f1fccd959ab355e4c39d25325e8fa9ae153d8c0 100644
--- a/client/js/catalog.js
+++ b/client/js/catalog.js
@@ -1,41 +1,88 @@
-var recordsPerPage = 10;
var activePage;
-function numPages(){
- return Math.ceil(1000/10)-1;
+
+
+function debounce(func, delay=1000){
+ let timer = null;
+ return (...args) => {
+ clearTimeout(timer);
+ timer = setTimeout(() => func.apply(this, args), delay);
+ };
}
-prevPage = () => {
- activePage = document.getElementsByClassName("active").item(0).innerHTML;
- if (activePage > 1){
- activePage--;
- changePage(activePage);
+
+
+//Promise is to syncronize asyncronous process
+const input = document.getElementById("Searchinput");
+var myPromises = new Promise(function(resolve, reject){
+ const formdata = new FormData();
+ formdata.append("signal", "getTotalRows");
+ formdata.append('search', document.getElementById("Searchinput").value);
+ console.log(input.value);
+
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', '../../server/controllers/catalog.php', true);
+ xhr.send(formdata);
+ xhr.onreadystatechange = function(){
+ if (xhr.readyState === 4 && xhr.status === 200){
+ var responseData = JSON.parse(xhr.responseText);
+ if (responseData.success){
+ //if expected process occur during promise get the expected value
+ resolve(Math.ceil(responseData.total[0]/10)-1);
+ } else {
+ alert("error: " + responseData.message);
+ //unexpected process occur during promise
+ reject("error");
+ }
+ } else if (xhr.status === 404){
+ var response = JSON.parse(xhr.responseText);
+ console.log(response.message);
+ reject("error");
+ }
}
-}
+});
+var numPages;
+//get the value of promise
+myPromises.then(
+ function(value) {numPages = value;},
+ function(error) {numPages = error;}
+ );
+
+
+ prevPage = () => {
+ activePage = document.getElementsByClassName("active").item(0).innerHTML;
+ if (activePage > 1){
+ activePage--;
+ changePage(activePage);
+ }
+ }
+
nextPage = () => {
activePage = document.getElementsByClassName("active").item(0).innerHTML;
- if (activePage < numPages()){
+ if (activePage < numPages){
activePage++;
changePage(activePage);
}
}
-changePage = (page) => {
+function changePage(page){
var btnNext = document.getElementById("btnNext");
var btnPrev = document.getElementById("btnPrev");
var listingTable = document.getElementById("catalogview");
var pages = [document.getElementById("secondToRight"),
- document.getElementById("firstToRight"),
- document.getElementById("middle"),
- document.getElementById("firstToLeft"),
- document.getElementById("secondToLeft")];
+ document.getElementById("firstToRight"),
+ document.getElementById("middle"),
+ document.getElementById("firstToLeft"),
+ document.getElementById("secondToLeft")];
//XMLHttpRequest
const formdata = new FormData();
-
+
var row = (page)*10;
formdata.append('rows', row);
+ formdata.append('search', document.getElementById("Searchinput").value);
+ console.log(document.getElementById("Searchinput").value);
const xhr = new XMLHttpRequest();
xhr.open('POST', '../../server/controllers/catalog.php', true);
//sending
@@ -51,22 +98,22 @@ changePage = (page) => {
if (page < 1){
page = 1;
}
- if (page > numPages()){
- page = numPages();
+ if (page > numPages){
+ page = numPages;
}
listingTable.innerHTML ="";
-
+
for (var i = 0; i < 10 && itemList.length ; i++){
listingTable.innerHTML += `<button class="showItem">
- <img id="${itemList[i][0]}" src="../image/${itemList[i][2]}" alt="${itemList[i][1]}">
- <p>${itemList[i][1]}</p>
- <p>Rp${itemList[i][4]}</p>
- <p>Quantity:${itemList[i][5]}</p>
- <p>${itemList[i][6]}</p>
+ <img id="${itemList[i][0]}" src="../image/${itemList[i][2]}" alt="${itemList[i][1]}">
+ <p>${itemList[i][1]}</p>
+ <p>Rp${itemList[i][4]}</p>
+ <p>Quantity:${itemList[i][5]}</p>
+ <p>${itemList[i][6]}</p>
</button>`
}
- var endpage = numPages()-4;
+ var endpage = numPages-4;
for (var i = 0; i < pages.length; i++){
@@ -75,7 +122,7 @@ changePage = (page) => {
if (page-1 < 2){
pages[i].innerHTML = i+1;
pages[i].setAttribute("href", `javascript:changePage(${i+1})`);
- } else if (page > numPages()-2){
+ } else if (page > numPages-2){
pages[i].innerHTML = endpage + i;
pages[i].setAttribute("href", `javascript:changePage(${endpage + i})`);
} else {
@@ -88,9 +135,9 @@ changePage = (page) => {
pages[0].classList.add("active");
} else if (page == 2){
pages[1].classList.add("active");
- } else if (page == numPages()-1){
+ } else if (page == numPages-1){
pages[3].classList.add("active");
- } else if (page == numPages()){
+ } else if (page == numPages){
pages[4].classList.add("active");
} else {
pages[2].classList.add("active");
@@ -100,8 +147,8 @@ changePage = (page) => {
} else {
btnPrev.style.visibility = "visible";
}
-
- if (page == numPages()){
+
+ if (page == numPages){
btnNext.style.visibility = "hidden";
} else {
btnNext.style.visibility = "visible";
@@ -111,14 +158,14 @@ changePage = (page) => {
alert("error: " + responseData.message);
}
} catch (error){
-
+
}
} else if (xhr.status === 404){
var response = JSON.parse(xhr.responseText);
console.log(response.message);
}
}
-
-
-
+
+
+
}
\ No newline at end of file
diff --git a/client/js/navbar.js b/client/js/navbar.js
index 77c97a630df66271f389e12d9de98dd84529fc1c..de196a8272b85988751b12b9d79d977488e0b2dd 100644
--- a/client/js/navbar.js
+++ b/client/js/navbar.js
@@ -5,7 +5,7 @@ addnavbar = () => {
</a>
<img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
<div class="searchbar">
- <input id="Searchinput" type="text" placeholder="Search..." value="">
+ <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
<button class="search" onclick="">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
diff --git a/client/pages/catalog.php b/client/pages/catalog.php
index 90933273b726dee44ec3fe08b864d73be54343b5..fd105e48d938c874b42ca38212b3c8b45c04504c 100644
--- a/client/pages/catalog.php
+++ b/client/pages/catalog.php
@@ -14,6 +14,8 @@
<div class="tabgroup" id="tabgroup">
<script>
addnavbar();
+ const processChange = debounce(() => changePage(1));
+ document.getElementById("Searchinput").setAttribute("onkeypress", "processChange()");
</script>
</div>
<div class="pageview">
diff --git a/server/controllers/catalog.php b/server/controllers/catalog.php
index ed28c441b9a521088865a5619dca8e9e66775215..709371cf7dae57d692d8d228a64073e00d4dd716 100644
--- a/server/controllers/catalog.php
+++ b/server/controllers/catalog.php
@@ -3,17 +3,16 @@
if ($_SERVER["REQUEST_METHOD"] == "POST"){
$page = $_POST["rows"];
+ $search = $_POST["search"];
$conn = connect_database();
- $query = "SELECT * FROM `item` LIMIT ? , 10";
+ $query = "SELECT * FROM `item` WHERE `name` LIKE '%$search%' ORDER BY if (SUBSTRING(name, 1, length('$search'))='$search', 0, 1), name LIMIT $page , 10";
$stmt = $conn->prepare($query);
if (!$stmt){
die("Error in query preparation: ". $conn->error);
}
-
- $stmt->bind_param("i", $page);
$result = $stmt->execute();
if (!$result){
@@ -27,7 +26,32 @@
$response = array("success" => false, "message" => "Error: not found");
}
+ echo json_encode($response);
+ mysqli_close($conn);
+ } else if ($_SERVER["REQUEST_METHOD"] == "GET"){
+ $search = $_GET["search"];
+
+ $conn = connect_database();
+
+ $query = "SELECT COUNT(item_id) FROM `item` WHERE name LIKE '%$search%'";
+ $stmt = $conn->prepare($query);
+
+ if (!$stmt){
+ die("Error in query preparation: ". $conn->error);
+ }
+ $result = $stmt->execute();
+ if (!$result){
+ die("Error in query execution: " . $stmt->error);
+ }
+ $resultSet = $stmt->get_result();
+ $total = $resultSet->fetch_all();
+ if (!empty($total)){
+ $response = array("success" => true, "message" => "data sent", "total" => $total);
+ } else {
+ $response = array("success" => false, "message" => "Error: not found");
+ }
+
echo json_encode($response);
mysqli_close($conn);
}