Skip to content

Commit

Permalink
Merge pull request #29 from CodeURJC-DAW-2022-23/feat/top-list-w/comm…
Browse files Browse the repository at this point in the history
…ents

feat: top list with comments
  • Loading branch information
franchescoURJC authored Mar 11, 2023
2 parents 5a27166 + 980cf2f commit f7773ed
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 103 deletions.
Original file line number Diff line number Diff line change
@@ -1,24 +1,66 @@
package net.daw.alist.controllers;

import net.daw.alist.models.Comment;
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 org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@Controller
public class TopListController {
@Autowired
private UserService userService;
@Autowired
private PostService postService;
@GetMapping("/top-list")
public String topList(Model model) {

private User userProfile;
private Post post;

@GetMapping("/top-list/{id}")
public String topList(Model model, Authentication authentication, @PathVariable long id){
Utils utils = new Utils(userService, postService);
utils.searchBarInitializer(model);

if(authentication == null){
model.addAttribute("isRegistered", false);
} else{
userProfile = (User) authentication.getPrincipal();
model.addAttribute("isRegistered", true);
model.addAttribute("loggedUserImagePath", userProfile.getImagePath());
}

post = postService.findByID(id).orElseThrow();

model.addAttribute("id", id);
model.addAttribute("posts", post);
model.addAttribute("title", post.getTitle());

List<Comment> comments = post.getComments();
model.addAttribute("comments", comments);

return "top-list";
}

@RequestMapping("/top-list/{id}/addComment")
public String addComment(@RequestParam String commentContent) throws SQLException, IOException {
User author = userService.findByID(userProfile.getId()).orElseThrow();
Comment comment = new Comment(author, commentContent, null);
post.addComment(comment);
postService.save(post);
return "redirect:/top-list/{id}";
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -167,9 +167,10 @@ public void init() throws IOException, SQLException {
Comment thirdComment = new Comment(peepo, "Lebron is the GOAT", null);
fourthPost.addComment(thirdComment);

commentRepository.save(firstComment);
commentRepository.save(secondComment);
commentRepository.save(thirdComment);
postRepository.save(firstPost);
postRepository.save(secondPost);
postRepository.save(thirdPost);
postRepository.save(fourthPost);

}
}
Expand Down
6 changes: 6 additions & 0 deletions back/src/main/java/net/daw/alist/services/PostService.java
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

import lombok.AllArgsConstructor;
import net.daw.alist.models.Post;
import net.daw.alist.models.User;
import net.daw.alist.repositories.PostRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Optional;

@Service
@AllArgsConstructor
Expand All @@ -30,6 +32,10 @@ public List<Post> findAll() {
return postRepository.findAll();
}

public Optional<Post> findByID(Long id){
return postRepository.findById(id);
}

public void save(Post post) {
postRepository.save(post);
}
Expand Down
5 changes: 5 additions & 0 deletions back/src/main/java/net/daw/alist/services/UserService.java
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import org.springframework.stereotype.Service;
import java.time.LocalDateTime;
import java.util.List;
import java.util.Optional;
import java.util.UUID;
import java.util.regex.Pattern;

Expand All @@ -33,6 +34,10 @@ public UserDetails loadUserByUsername(String userName) throws UsernameNotFoundEx
.orElseThrow(() -> new UsernameNotFoundException("User not found"));
}

public Optional<User> findByID(Long id){
return userRepository.findById(id);
}

public void saveUser(User user) {
userRepository.save(user);
}
Expand Down
41 changes: 26 additions & 15 deletions back/src/main/resources/static/styles/top-list.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,23 @@ p {

.commentBox {
background-color: white;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}

.commentSection{
background-color: white;
border-radius: var(--bs-border-radius);
padding-top: 1rem;
padding-bottom: 1rem;
}

.post,
.commentSection,
.comment {
width: 100%;
width: 95%;
margin: auto;
}

.postInfo,
.writeComment {
.postInfo {
border-top-left-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
}
Expand All @@ -41,6 +46,10 @@ p {
margin-right: 0.25em;
}

.topName{
font-weight: 600;
}

.comment-image {
margin-top: 0.1em;
}
Expand Down Expand Up @@ -71,18 +80,13 @@ input[type='text'] {
word-break: break-all;
}

li {
border-radius: 10px;
border: solid 3px;
border-color: #69c0a1;
}

li + li {
margin-top: 1rem;
}

ol li {
padding: 1em;
padding: 0.5em;
font-size: 20px;
font-weight: 600;
text-align: left;
Expand All @@ -101,9 +105,10 @@ ol {
margin-left: 1em;
}

.itemImage {
float: right;
margin-top: -8px;
.itemWrapper{
border-radius: 10px;
border: solid 3px;
border-color: #69c0a1;
}

.topic {
Expand All @@ -122,12 +127,18 @@ ol {
cursor: pointer;
}

.commentTitle{
border-bottom-style: solid;
border-width: 1px;
border-color: rgb(224, 224, 224);
}

@media only screen and (min-width: 768px) {
/* For desktop: */
.post,
.commentSection,
.comment {
width: 60%;
width: 40%;
margin: auto;
}
}
14 changes: 8 additions & 6 deletions back/src/main/resources/templates/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,16 @@ <h6 class="topics pe-1">
aria-current="true">
<div class="top w-75 m-auto">
<a class="text-black text-decoration-none" href="/top-list/{{id}}">
<h2 class="topName">{{title}}</h2>
<h1 class="topName">{{title}}</h1>
</a>
<ol class="m-auto p-0 w-100">
<ol class="m-auto p-0 w-100 d-flex flex-column gap-3">
{{#items}}
<li>
{{description}}
<img src={{imagePath}} alt="image" width="45" height="45" class="itemImage rounded-circle">
</li>
<div class="itemWrapper d-flex justify-content-center p-2">
<li class="ms-0 me-auto">
{{description}}
</li>
<img src={{imagePath}} alt="image" width="45" height="45" class="itemImage rounded-circle ms-auto me-2 mt-auto mb-auto">
</div>
{{/items}}
</ol>
</div>
Expand Down
106 changes: 29 additions & 77 deletions back/src/main/resources/templates/top-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,90 +13,42 @@
<link rel="stylesheet" type="text/css" href="/styles/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/styles/styles.css">
<link rel="stylesheet" type="text/css" href="/styles/top-list.css">
<title>AList | Top List</title>
<title>AList | {{title}}</title>
</head>

<body>
{{>navbar}}
<div class="post mt-3 mb-3">
<div class="postInfo border bg-white d-flex gap-3 py-3">
<img src="https://github.com/twbs.png" alt="twbs" width="75" height="75"
class="profileImg rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="topics">
<a class="topic" href="#">@Basketball</a>
<a class="topic" href="#">@NBA</a>
<a class="topic" href="#">@Sports</a>
</h6>
<a class="OP text-black text-decoration-none" href="#">
UserName
</a>
</div>
</div>
</div>
<div class="list-group m-auto">
<div class="bg-white text-black d-flex gap-3 py-3 text-center justify-content-*-center align-items-center"
aria-current="true">
<div class="top w-75 m-auto">
<h2 class="topName">TOPNAME</h2>
<ol class="m-auto p-0 w-100">
<li>
Lebron James
<img src="https://github.com/twbs.png" alt="twbs" width="45" height="45" class="itemImage rounded-circle">
</li>
<li>
Anthony Davis <img src="https://github.com/twbs.png" alt="twbs" width="45" height="45"
class="itemImage rounded-circle">
</li>
<li>
Kevin Durant <img src="https://github.com/twbs.png" alt="twbs" width="45" height="45"
class="itemImage rounded-circle">
</li>
</ol>
</div>
</div>
<div class="list-group-item d-flex">
<div class="w-auto m-auto">
<img class="upvoteIcon" src="/images/upvoteIcon.svg" alt="" width="35" height="35">
<img class="downvoteIcon" src="/images/downvoteIcon.svg" alt="" width="35" height="35">
</div>
<img class="shareIcon m-auto" src="/images/shareIcon.svg" alt="" width="35" height="35">
</div>
</div>
</div>
{{>post}}
<div class="commentSection mb-3">
<div class="writeComment p-3">
<div class="d-flex flex-row">
<img src="https://github.com/twbs.png" alt="Profile Photo" width="40" height="40"
class="own-comment-image rounded-circle flex-shrink-0">
<textarea class="commentBox form-control ml-1 shadow-none textarea"></textarea>
</div>
<div class="mt-2 d-flex justify-content-center">
<button class="btn btn-primary btn-sm shadow-none" type="button">Post comment</button>
</div>
</div>
<div class="commentBox pb-3">
<div class="comment w-100 p-3 d-flex justify-content-center flex-column gap-2">
<div class="userInfo w-100 d-flex align-items-center gap-2">
<img src="https://github.com/twbs.png" alt="twbs" width="33" height="33"
class=" comment-image rounded-circle flex-shrink-0">
<a class="username text-black text-decoration-none w-auto" href="#">
UserName
</a>
<p class="commentTitle text-muted pb-3">Comments</p>
{{#isRegistered}}
<form action="/top-list/{{id}}/addComment">
<div class="writeComment p-3">
<div class="d-flex flex-row">
<img src="{{loggedUserImagePath}}" alt="pfp" width="40" height="40"
class="own-comment-image rounded-circle flex-shrink-0">
<textarea class="commentBox form-control ml-1 shadow-none textarea" placeholder="Write a comment..." name="commentContent"></textarea>
</div>
<div class="mt-2 d-flex justify-content-center">
<button class="btn btn-primary btn-sm shadow-none" type="submit">Post comment</button>
</div>
</div>
</form>
{{/isRegistered}}
{{#comments}}
<div class="commentBox">
<div class="comment w-100 p-3 d-flex justify-content-center flex-column gap-2">
<div class="userInfo w-100 d-flex align-items-center gap-2">
<img src="{{author.imagePath}}" alt="pfp" width="33" height="33"
class="comment-image rounded-circle flex-shrink-0">
<a class="username text-black text-decoration-none w-auto" href="/user/{{author.username}}">
{{author.username}}
</a>
</div>
<p class="text-left">{{content}}</p>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
{{/comments}}
</div>

</body>
Expand Down

0 comments on commit f7773ed

Please sign in to comment.