From c879bf653bd5472e4e2dda7eec1d94af66d01b55 Mon Sep 17 00:00:00 2001
From: John Watkins <watkinsj18@cardiff.ac.uk>
Date: Thu, 9 Dec 2021 14:49:40 +0000
Subject: [PATCH] Users can add tags and the search query is sent to the
correct route with query filter added
---
.../web/restControllers/ShopSearch.java | 33 +++++++++--
src/main/resources/static/js/searchBar.js | 57 +++++++++++++++++++
src/main/resources/templates/index.html | 10 ++--
3 files changed, 91 insertions(+), 9 deletions(-)
create mode 100644 src/main/resources/static/js/searchBar.js
diff --git a/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java b/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
index be68a82..e2c0250 100644
--- a/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
+++ b/src/main/java/com/example/clientproject/web/restControllers/ShopSearch.java
@@ -1,22 +1,45 @@
package com.example.clientproject.web.restControllers;
+import com.example.clientproject.data.shops.Shops;
+import com.example.clientproject.data.shops.ShopsRepo;
+import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
+import java.util.Locale;
+import java.util.stream.Collectors;
@RestController
public class ShopSearch {
+ @Autowired
+ ShopsRepo shopsRepo;
+
@GetMapping("/shop/search")
public String searchShops(@RequestParam(value = "q", required = false) String query,
@RequestParam(value = "p", required = false) Integer page,
- @RequestParam(value = "t", required = false) List<Integer> tags){
- System.out.println(tags);
- System.out.println(query);
- System.out.println(page);
+ @RequestParam(value = "t", required = false) List<String> tags){
+ final Integer itemsPerPage = 6;
+
+ //Get all the active shops
+ List<Shops> allShops = shopsRepo.findActiveShops();
+
+ //Filter the shops using the query provided
+ if(query != null){
+ allShops = allShops
+ .stream()
+ .filter(s -> s.getShopName().toLowerCase(Locale.ROOT).strip().contains(query.toLowerCase(Locale.ROOT).strip()))
+ .collect(Collectors.toList());
+ }
+
+ //Filter using the tags provided
+
+ //Paginate
+
+ //Convert to required format
- return "here";
+ return allShops.toString();
}
}
diff --git a/src/main/resources/static/js/searchBar.js b/src/main/resources/static/js/searchBar.js
new file mode 100644
index 0000000..560f827
--- /dev/null
+++ b/src/main/resources/static/js/searchBar.js
@@ -0,0 +1,57 @@
+var tags = [];
+var query = "";
+var page = 1;
+
+var searchBar = document.getElementById("main-search");
+var tagGroup = document.getElementById("search-tag-group");
+
+function updateSearch(e){
+ page = 1;
+ query = searchBar.value;
+ doSearch()
+}
+
+function removeTag(i){
+ tags.splice(i, 1);
+ page=1;
+ updateUI()
+ doSearch()
+}
+
+function addTag(e){
+ if(e.key== "Enter"){
+ if (searchBar.value != ""){
+ page = 1;
+ query = "";
+ tags.push(searchBar.value.toLowerCase());
+ searchBar.value = "";
+ updateUI();
+ doSearch();
+ }
+ }
+}
+
+function updateUI(){
+ tagGroup.innerHTML = "";
+ for(let [i,tag] of tags.entries()){
+ tagGroup.innerHTML += `
+ <div class="control mr-3">
+ <div class="tags has-addons">
+ <span class="tag gradient">${tag}</span>
+ <a class="tag is-delete" onclick="removeTag(${i})"></a>
+ </div>
+ </div>`
+ }
+}
+
+function doSearch(){
+ let url = "/shop/search"
+ url += "?q=" + query
+ url += "&p=" + page.toString()
+ for (let t of tags){
+ url += "&t=" + t.toString()
+ }
+ fetch(url)
+ .then(e=>e.text())
+ .then(data=>console.log(data))
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 7d36dcf..a914e5b 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -62,15 +62,16 @@
<div class="container is-full-width is-flex is-justify-content-center is-align-items-center is-flex-direction-column mb-4">
<h1 class="title is-3">Where else can I earn rewards?</h1>
<div class="control has-icons-left mb-2" style="width: 60%;">
- <input class="input" type="text" placeholder="Enter Brands or keywords e.g. Vegan, Clothing etc..">
+ <input class="input" type="text" placeholder="Enter Brands or keywords e.g. Vegan, Clothing etc.."
+ oninput="updateSearch(event)" onkeydown="addTag(event)" id="main-search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
<!--Tags-->
- <div class="field is-grouped is-grouped-multiline" style="width: 60%;">
- <div th:each="tag: ${tags}" th:include="fragments/tag.html :: tag"
- th:with="text=${tag}"></div>
+ <div class="field is-grouped is-grouped-multiline" style="width: 60%;" id="search-tag-group">
+<!-- <div th:each="tag: ${tags}" th:include="fragments/tag.html :: tag"-->
+<!-- th:with="text=${tag}"></div>-->
</div>
</div>
@@ -97,5 +98,6 @@
</div>
</div>
</div>
+ <script src="/js/searchBar.js"></script>
</body>
</html>
--
GitLab