Skip to content

Commit

Permalink
#83 - Implement the view for child comments
Browse files Browse the repository at this point in the history 
Implement the view for child comments.
  • Loading branch information
@laphayen
laphayen committed Jun 29, 2024
1 parent 903e1e1 commit 7ea2b01
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 29 deletions.
63 changes: 40 additions & 23 deletions src/main/resources/templates/articles/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ <h1>첫번째 글</h1>
<div class="row g-5">
<section class="col-md-3 col-lg-4 order-md-last">
<aside>
<p><span id="nickname">Uno</span></p>
<p><a id="email" href="mailto:djkehh@gmail.com">uno@mail.com</a></p>
<p><time id="created-at" datetime="2022-01-01T00:00:00">2022-01-01</time></p>
<p><span id="nickname">laphayen</span></p>
<p><a id="email" href="mailto:laphayen@gmail.com">laphayen@mail.com</a></p>
<p><time id="created-at" datetime="2022-01-01T00:00:00">2024-04-06</time></p>
<p><span id="hashtag" class="badge text-bg-secondary mx-1"><a class="text-reset">#java</a></span></p>
</aside>
</section>
Expand All @@ -47,11 +47,11 @@ <h1>첫번째 글</h1>

<div class="row g-5">
<section>
<form class="row g-3" id="comment-form">
<form class="row g-3 comment-form">
<input type="hidden" class="article-id">
<div class="col-md-9 col-lg-8">
<label for="comment-textbox" hidden>댓글</label>
<textarea class="form-control" id="comment-textbox" placeholder="댓글 쓰기.." rows="3" required></textarea>
<textarea class="form-control comment-textbox" id="comment-textbox" placeholder="댓글 쓰기.." rows="3" required></textarea>
</div>
<div class="col-md-3 col-lg-4">
<label for="comment-submit" hidden>댓글 쓰기</label>
Expand All @@ -60,41 +60,58 @@ <h1>첫번째 글</h1>
</form>

<ul id="article-comments" class="row col-md-10 col-lg-8 pt-3">
<li>
<form class="comment-form">
<li class="parent-comment">
<form class="comment-delete-form">
<input type="hidden" class="article-id">
<div class="row">
<div class="col-md-10 col-lg-9">
<strong>laphayen</strong>
<small><time>2024-04-06</time></small>
<p>
<p class="mb-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="col-2 mb-3 align-self-center">
<button type="submit" class="btn btn-outline-danger" id="delete-comment-button">삭제</button>
<button type="submit" class="btn btn-outline-danger">삭제</button>
</div>
</div>
</form>
</li>
<li>

<ul class="row me-0">
<li class="child-comment">
<form class="comment-delete-form">
<input type="hidden" class="article-id">
<div class="row">
<div class="col-md-10 col-lg-9">
<strong>laphayen</strong>
<small><time>2024-04-06</time></small>
<p class="mb-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="col-2 mb-3 align-self-center">
<button type="submit" class="btn btn-outline-danger">삭제</button>
</div>
</div>
</form>
</li>
</ul>

<div class="row">
<div class="col-md-10 col-lg-9">
<strong>laphayen2</strong>
<small><time>2024-04-06</time></small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="col-2 mb-3">
<button type="submit" class="btn btn-outline-danger" hidden>삭제</button>
</div>
<details class="col-md-10 col-lg-9 mb-4">
<summary>댓글 달기</summary>
<form class="comment-form">
<input type="hidden" class="article-id">
<input type="hidden" class="parent-comment-id">
<textarea class="form-control comment-textbox" placeholder="댓글 쓰기.." rows="2" required></textarea>
<button class="form-control btn btn-primary mt-2" type="submit">쓰기</button>
</form>
</details>
</div>
</li>
</ul>

</section>
</div>

Expand Down
23 changes: 17 additions & 6 deletions src/main/resources/templates/articles/detail.th.xml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?xml version="1.0"?>
<thlogic>
<attr sel="#header" th:replace="header :: header" />
<attr sel="#footer" th:replace="footer :: footer" />
<attr sel="#header" th:replace="~{header :: header}" />
<attr sel="#footer" th:replace="~{footer :: footer}" />

<attr sel="#article-main" th:object="${article}">
<attr sel="#article-header/h1" th:text="*{title}" />
Expand All @@ -24,19 +24,30 @@
</attr>

<attr sel=".article-id" th:name="articleId" th:value="*{id}" />
<attr sel="#comment-form" th:action="@{/comments/new}" th:method="post">
<attr sel="#comment-textbox" th:name="content" />
<attr sel=".comment-form" th:action="@{/comments/new}" th:method="post">
<attr sel=".comment-textbox" th:name="content" />
</attr>

<attr sel="#article-comments" th:remove="all-but-first">
<attr sel="li[0]" th:each="articleComment : ${articleComments}">
<attr sel="form" th:action="'/comments/' + ${articleComment.id} + '/delete'" th:method="post">
<attr sel=".parent-comment[0]" th:each="articleComment : ${articleComments}">
<attr sel=".comment-delete-form" th:action="'/comments/' + ${articleComment.id} + '/delete'" th:method="post">
<attr sel="div/strong" th:text="${articleComment.nickname}" />
<attr sel="div/small/time" th:datetime="${articleComment.createdAt}" th:text="${#temporals.format(articleComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
<attr sel="div/p" th:text="${articleComment.content}" />
<attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${articleComment.userId} == ${#authentication.name}" />
</attr>
<attr sel="ul" th:if="${!articleComment.childComments.isEmpty()}" th:remove="all-but-first">
<attr sel=".child-comment[0]" th:each="childComment : ${articleComment.childComments}">
<attr sel=".comment-delete-form" th:action="'/comments/' + ${childComment.id} + '/delete'" th:method="post">
<attr sel="div/strong" th:text="${childComment.nickname}" />
<attr sel="div/small/time" th:datetime="${childComment.createdAt}" th:text="${#temporals.format(childComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
<attr sel="div/p" th:text="${childComment.content}" />
<attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${childComment.userId} == ${#authentication.name}" />
</attr>
</attr>
</attr>
</attr>
<attr sel=".parent-comment-id" th:name="parentCommentId" th:value="${articleComment.id}" />
</attr>

<attr sel="#pagination">
Expand Down

0 comments on commit 7ea2b01

Please sign in to comment.