Merge pull request #28 from CodeURJC-DAW-2022-23/feat/search-bar

feat: search bar

back/src/main/java/net/daw/alist/controllers/AdminPanelController.java

@@ -1,13 +1,25 @@
 package net.daw.alist.controllers;
 
+import net.daw.alist.services.PostService;
+import net.daw.alist.services.UserService;
+import net.daw.alist.utils.Utils;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 
 @Controller
 public class AdminPanelController {
 
+  @Autowired
+  private UserService userService;
+  @Autowired
+  private PostService postService;
+
   @GetMapping("/admin-panel")
-  public String adminPanel() {
+  public String adminPanel(Model model) {
+    Utils utils  = new Utils(userService, postService);
+    utils.searchBarInitializer(model);
     return "admin-panel";
   }
 

back/src/main/java/net/daw/alist/controllers/CreateListController.java

@@ -6,6 +6,8 @@
 import java.util.ArrayList;
 
 import net.daw.alist.services.PostService;
+import net.daw.alist.services.UserService;
+import net.daw.alist.utils.Utils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -35,11 +37,16 @@ public class CreateListController {
   @Autowired
   PostItemService postItemService;
 
+  @Autowired
+  private UserService userService;
+
   @Autowired
   PostService postService;
 
   @GetMapping("/create-list")
   public String createList(Model model) {
+    Utils utils  = new Utils(userService, postService);
+    utils.searchBarInitializer(model);
     List<String> topicOptions = topicService.getAllTopics();
     model.addAttribute("topicOptions", topicOptions);
     return "create-list";

back/src/main/java/net/daw/alist/controllers/PostController.java

@@ -1,8 +1,11 @@
 package net.daw.alist.controllers;
 
+import jdk.jshell.execution.Util;
 import net.daw.alist.models.Post;
 import net.daw.alist.models.User;
 import net.daw.alist.services.PostService;
+import net.daw.alist.services.UserService;
+import net.daw.alist.utils.Utils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -11,17 +14,22 @@
 import org.springframework.data.domain.Page;
 import org.springframework.security.core.Authentication;
 
+import java.util.List;
+
 @Controller
 public class PostController {
-
+  @Autowired
+  private UserService userService;
   @Autowired
   private PostService postService;
 
   @GetMapping({"/","/followed-users/"})
   public String home(Model model) {
+    Utils utils  = new Utils(userService, postService);
+    utils.searchBarInitializer(model);
     return "feed";
   }
-  
+
   @GetMapping("/posts")
   public String getNewPosts(Model model, @RequestParam int page) {
 

back/src/main/java/net/daw/alist/controllers/ProfileController.java

@@ -1,22 +1,30 @@
 package net.daw.alist.controllers;
 
+import net.daw.alist.models.Post;
 import net.daw.alist.models.User;
 
+import net.daw.alist.services.PostService;
 import net.daw.alist.services.UserService;
+import net.daw.alist.utils.Utils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.core.Authentication;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 
+import java.util.List;
 import java.util.Objects;
 
 @Controller
 public class ProfileController {
 
   @Autowired
-  UserService userService;
+  private UserService userService;
+
+  @Autowired
+  private PostService postService;
+
 
   private User userProfile;
   private User userSessionRepo;
@@ -36,6 +44,7 @@ public String user(
     Authentication authentication,
     @PathVariable String username
   ) {
+    profileSearchBarInitializer(model);
     userProfile = (User) userService.loadUserByUsername(username);
     String userProfileUsername = userProfile.getUsername();
     if (!Objects.equals(userProfileUsername, username)) {
@@ -60,6 +69,7 @@ public String user(
 
   @GetMapping("/user/{username}/following")
   public String following(Model model, @PathVariable String username) {
+    profileSearchBarInitializer(model);
     model.addAttribute("follow", "Followed by");
     model.addAttribute("user", userProfile);
     model.addAttribute("followList", userProfile.getFollowing());
@@ -68,6 +78,7 @@ public String following(Model model, @PathVariable String username) {
 
   @GetMapping("/user/{username}/followers")
   public String followers(Model model, @PathVariable String username) {
+    profileSearchBarInitializer(model);
     model.addAttribute("follow", "Followers of");
     model.addAttribute("user", userProfile);
     model.addAttribute("followList", userProfile.getFollowers());
@@ -107,4 +118,10 @@ private boolean isFollowed() {
     return userSessionRepo.getFollowing().contains(userProfile);
   }
 
+  public void profileSearchBarInitializer(Model model){
+    List<User> userList = userService.findAll();
+    model.addAttribute("searchSuggestedUsers", userList);
+    List<Post> postList = postService.findAll();
+    model.addAttribute("searchSuggestedPosts", postList);
+  }
 }

back/src/main/java/net/daw/alist/controllers/TopListController.java

@@ -1,13 +1,23 @@
 package net.daw.alist.controllers;
 
+import net.daw.alist.services.PostService;
+import net.daw.alist.services.UserService;
+import net.daw.alist.utils.Utils;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 
 @Controller
 public class TopListController {
-
+  @Autowired
+  private UserService userService;
+  @Autowired
+  private PostService postService;
   @GetMapping("/top-list")
-  public String topList() {
+  public String topList(Model model) {
+    Utils utils  = new Utils(userService, postService);
+    utils.searchBarInitializer(model);
     return "top-list";
   }
 

back/src/main/java/net/daw/alist/services/PostService.java

@@ -8,6 +8,8 @@
 import org.springframework.data.domain.PageRequest;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 @Service
 @AllArgsConstructor
 public class PostService {
@@ -19,11 +21,15 @@ public class PostService {
     public Page<Post> getPosts(int pageNumber) {
         return postRepository.findAll(PageRequest.of(pageNumber, pageSize));
     }
-    
+
     public Page<Post> getStarredPosts(int pageNumber, int user_id) {
         return postRepository.findPostsByFollows(user_id,PageRequest.of(pageNumber,pageSize));
     }
-
+
+    public List<Post> findAll() {
+        return postRepository.findAll();
+    }
+
     public void save(Post post) {
         postRepository.save(post);
     }

back/src/main/java/net/daw/alist/services/UserService.java

@@ -12,6 +12,7 @@
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.stereotype.Service;
 import java.time.LocalDateTime;
+import java.util.List;
 import java.util.UUID;
 import java.util.regex.Pattern;
 
@@ -106,4 +107,7 @@ public String register(User user) {
     public int enableUser(String email) {
         return userRepository.enableUser(email);
     }
+    public List<User> findAll() {
+        return userRepository.findAll();
+    }
 }

back/src/main/java/net/daw/alist/utils/Utils.java

@@ -1,21 +1,43 @@
 package net.daw.alist.utils;
 
+import net.daw.alist.models.Post;
+import net.daw.alist.models.User;
+import net.daw.alist.services.PostService;
+import net.daw.alist.services.UserService;
 import org.hibernate.engine.jdbc.BlobProxy;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.io.ClassPathResource;
 import org.springframework.core.io.Resource;
+import org.springframework.ui.Model;
 
 import javax.sql.rowset.serial.SerialBlob;
 import java.io.IOException;
 import java.sql.Blob;
 import java.sql.SQLException;
+import java.util.List;
 
 public class Utils {
+    public Utils(UserService userService, PostService postService) {
+        this.userService = userService;
+        this.postService = postService;
+    }
+
+    @Autowired
+    private UserService userService;
+    @Autowired
+    private PostService postService;
 
     public static Blob pathToImage(String path) throws IOException, SQLException {
         if (path == null) return null;
         Resource image = new ClassPathResource(path);
         Blob blob = BlobProxy.generateProxy(image.getInputStream(), image.contentLength());
         return new SerialBlob(blob);
     }
+    public void searchBarInitializer(Model model){
+        List<User> userList = userService.findAll();
+        model.addAttribute("searchSuggestedUsers", userList);
+        List<Post> postList = postService.findAll();
+        model.addAttribute("searchSuggestedPosts", postList);
+    }
 
 }

back/src/main/resources/static/scripts/load-data.js

@@ -32,4 +32,4 @@ const getData = (url, page) => {
 // show message: No more posts :(
 const showBottomReached = () => {
   $('.no-posts').removeClass('invisible').addClass('visible');
-};
+};

back/src/main/resources/static/scripts/navbar.js

@@ -0,0 +1,20 @@
+
+var url = window.location.href;
+var signOutButton = document.getElementById("sign-out");
+const profile = document.getElementsByClassName("profileNavIcon");
+const heart = document.getElementsByClassName("heartNavIcon");
+const compass = document.getElementsByClassName("compassNavIcon");
+
+
+if(url.includes("/user/") && (signOutButton != null && signOutButton.value =='')){
+  profile[0].innerHTML = "<i class=\"fa-solid fa-user fa-xl\"></i>";
+  profile[1].innerHTML = "<i class=\"fa-solid fa-user fa-xl\"></i>";
+} else if(url.includes("/followed-users/")){
+  heart[0].innerHTML = "<i class=\"fa-solid fa-heart fa-xl\"></i>";
+  heart[1].innerHTML = "<i class=\"fa-solid fa-heart fa-xl\"></i>";
+} else if(url.includes("/admin-panel") || url.includes("/top-list/") || url.includes("/user/")){
+} else{
+  compass[0].innerHTML = "<i class=\"fa-solid fa-compass fa-xl\"></i>";
+  compass[1].innerHTML = "<i class=\"fa-solid fa-compass fa-xl\"></i>";
+}
+

back/src/main/resources/static/scripts/searchbar.js

@@ -0,0 +1,45 @@
+const searchInputs = document.getElementsByClassName("searchBar");
+
+const cards = document.getElementsByClassName("card");
+const usernames = document.getElementsByClassName("header");
+const postTitles = document.getElementsByClassName("body");
+
+function filterSuggestions(searchInput){
+   searchInput.addEventListener("input", e => {
+     const value = e.target.value.toLowerCase();
+     for (let i = 0; i < cards.length; i++) {
+       const isVisible = usernames[i].textContent.toLowerCase().includes(value) ||
+                           postTitles[i].textContent.toLowerCase().includes(value);
+       cards[i].classList.toggle("hide", !isVisible);
+     }
+   })
+}
+
+filterSuggestions(searchInputs[0])
+filterSuggestions(searchInputs[1])
+
+function hideContainer() {
+  //[0]: desktop div [1]: mobile div
+  //hide suggestion box
+  document.getElementsByClassName("autoCompleteBox")[0].style.visibility = "hidden";
+  document.getElementsByClassName("autoCompleteBox")[1].style.visibility = "hidden";
+
+  //add border bottom radius
+  document.getElementsByClassName("searchBar")[0].style.borderBottomLeftRadius = "10px";
+  document.getElementsByClassName("searchBar")[1].style.borderBottomLeftRadius = "10px";
+  document.getElementsByClassName("searchWrapper")[0].style.borderBottomRightRadius = "10px";
+  document.getElementsByClassName("searchWrapper")[1].style.borderBottomRightRadius = "10px";
+}
+
+function showContainer() {
+  //[0]: desktop div [1]: mobile div
+  //reveal suggestion box
+  document.getElementsByClassName("autoCompleteBox")[0].style.visibility = "visible";
+  document.getElementsByClassName("autoCompleteBox")[1].style.visibility = "visible";
+
+  //remove border bottom radius
+  document.getElementsByClassName("searchBar")[0].style.borderBottomLeftRadius = "0px";
+  document.getElementsByClassName("searchBar")[1].style.borderBottomLeftRadius = "0px";
+  document.getElementsByClassName("searchWrapper")[0].style.borderBottomRightRadius = "0px";
+  document.getElementsByClassName("searchWrapper")[1].style.borderBottomRightRadius = "0px";
+}

back/src/main/resources/static/styles/navbar.css

@@ -14,6 +14,10 @@
   transition: height 0.001s;
 }
 
+.usernameSug{
+  font-weight: 600;
+}
+
 nav {
   border-bottom: 1px solid gray;
 }
@@ -23,23 +27,10 @@ i {
   cursor: pointer;
 }
 
-input {
-  padding-right: 0;
-  margin-right: 0;
-}
-
-form {
-  background-color: white;
-  border-radius: 5px;
-}
-
-.searchBtn {
-  color: black;
+.collapsing {
+  transition: none !important;
 }
 
 @media only screen and (min-width: 768px) {
   /* For desktop: */
-  form {
-    border: none;
-  }
 }