summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorrealtradam <[email protected]>2024-07-11 19:18:30 -0400
committerrealtradam <[email protected]>2024-07-11 19:18:30 -0400
commit32195042c7e3fd75f25323b9036a2481e48fd6f8 (patch)
treea483d63e3ec9a294dfdf876a0c7ae883af7dc48b
parentd5ab38e1bc8a5519720f413cee6573fbe31da986 (diff)
downloadspring-blog-32195042c7e3fd75f25323b9036a2481e48fd6f8.tar.gz
spring-blog-32195042c7e3fd75f25323b9036a2481e48fd6f8.zip
add editing to articles
-rw-r--r--src/main/java/com/blog/web/controllers/ArticleController.java20
-rw-r--r--src/main/java/com/blog/web/services/ArticleService.java4
-rw-r--r--src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java23
-rw-r--r--src/main/resources/templates/articles/edit.html61
-rw-r--r--src/main/resources/templates/index.html1
-rw-r--r--src/main/resources/templates/layout.html53
-rw-r--r--src/main/resources/templates/post.html49
7 files changed, 162 insertions, 49 deletions
diff --git a/src/main/java/com/blog/web/controllers/ArticleController.java b/src/main/java/com/blog/web/controllers/ArticleController.java
index 9d096f5..2b32070 100644
--- a/src/main/java/com/blog/web/controllers/ArticleController.java
+++ b/src/main/java/com/blog/web/controllers/ArticleController.java
@@ -7,6 +7,7 @@ import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import java.util.List;
@@ -38,4 +39,23 @@ public class ArticleController {
articleService.saveArticle(article);
return "redirect:/articles";
}
+
+ @GetMapping("/articles/edit/{articleId}")
+ public String editArticleForm(@PathVariable("articleId") long articleId, Model model) {
+ ArticleDto article = articleService.findArticleById(articleId);
+ model.addAttribute("article", article);
+ return "articles/edit";
+ }
+
+ @PostMapping("/articles/edit/{articleId}")
+ public String updateArticle(@PathVariable("articleId") Long articleId, @ModelAttribute("article") ArticleDto article) {
+ article.setId(articleId);
+ articleService.updateArticle(article);
+ return "redirect:/articles";
+ }
+
+ @GetMapping("/articles")
+ public String getArticles() {
+ return "redirect:/";
+ }
}
diff --git a/src/main/java/com/blog/web/services/ArticleService.java b/src/main/java/com/blog/web/services/ArticleService.java
index 8d80c8a..870a290 100644
--- a/src/main/java/com/blog/web/services/ArticleService.java
+++ b/src/main/java/com/blog/web/services/ArticleService.java
@@ -9,4 +9,8 @@ public interface ArticleService {
List<ArticleDto> findAllArticles();
Article saveArticle(Article article);
+
+ ArticleDto findArticleById(long articleId);
+
+ void updateArticle(ArticleDto articleDto);
}
diff --git a/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java b/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
index 3daf92c..dd8bade 100644
--- a/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
+++ b/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
@@ -28,6 +28,29 @@ public class ArticleServiceImpl implements ArticleService {
return articleRepository.save(article);
}
+ @Override
+ public ArticleDto findArticleById(long articleId) {
+ Article article = articleRepository.findById(articleId).get();
+ return mapToArticleDto(article);
+ }
+
+ @Override
+ public void updateArticle(ArticleDto articleDto) {
+ Article article = mapToArticle(articleDto);
+ }
+
+ private Article mapToArticle(ArticleDto articleDto) {
+ Article article = Article.builder()
+ .id(articleDto.getId())
+ .title(articleDto.getTitle())
+ .photoUrl(articleDto.getPhotoUrl())
+ .content(articleDto.getContent())
+ .createdOn(articleDto.getCreatedOn())
+ .updatedOn(articleDto.getUpdatedOn())
+ .build();
+ return article;
+ }
+
private ArticleDto mapToArticleDto(Article article) {
return ArticleDto.builder()
.id(article.getId())
diff --git a/src/main/resources/templates/articles/edit.html b/src/main/resources/templates/articles/edit.html
new file mode 100644
index 0000000..ccfbe85
--- /dev/null
+++ b/src/main/resources/templates/articles/edit.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en"
+ xmlns:th="http://www.thymeleaf.org"
+ xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
+ layout:decorate="~{layout}"
+>
+<body layout:fragment="content">
+
+<div class="flex justify-center bg-white p-12">
+ <form th:action="@{/articles/edit/{articleId}(articleId=${article.id})}" th:object="${article}" method="post" class="w-full max-w-lg">
+ <input type="hidden" th:field="*{id}">
+ <div class="flex flex-wrap -mx-3 mb-6">
+ <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+ <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ for="title">
+ Title
+ </label>
+ <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+ id="title"
+ type="text"
+ name="title"
+ th:field="*{title}"
+ placeholder="Yep">
+ <p class="text-red-500 text-xs italic">Please fill out this field.</p>
+ </div>
+ <div class="w-full md:w-1/2 px-3">
+ <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ for="photoUrl">
+ Photo URL
+ </label>
+ <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+ id="photoUrl"
+ type="text"
+ name="photoUrl"
+ th:field="*{photoUrl}"
+ placeholder="Doe">
+ </div>
+ </div>
+ <div class="flex flex-wrap -mx-3 mb-6">
+ <div class="w-full px-3">
+ <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ for="content">
+ Content
+ </label>
+ <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+ id="content"
+ type="text"
+ name="content"
+ th:field="*{content}"
+ placeholder="Doe">
+ </div>
+ </div>
+ <div class="flex flex-wrap mb-2">
+ </div>
+ <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Create</button>
+
+ </form>
+</div>
+
+</body>
+</html> \ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 611ef92..ed98605 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -108,6 +108,7 @@
<div th:text="${article.title}" class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p th:text="${article.content}" class="text-gray-800 font-serif text-base px-6 mb-5"></p>
</a>
+ <a th:href="@{/articles/edit/{articleId}(articleId=${article.id})}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 ml-4 text-sm rounded">Edit</a>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
<div class="flex items-center justify-between">
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
index 3a93a87..407ecd9 100644
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -26,6 +26,57 @@
</head>
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
+<nav class="bg-gray-900 p-4 mt-0 w-full">
+ <div class="container mx-auto flex items-center">
+ <div class="flex text-white font-extrabold">
+ <a class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
+ 👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
+ </a>
+ </div>
+ <div class="flex pl-4 text-sm">
+ <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
+ <li class="mr-2">
+ <a class="inline-block py-2 px-2 text-white no-underline" href="/">HOME</a>
+ </li>
+ <li class="mr-2">
+ <a class="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" href="/articles/new">NEW</a>
+ </li>
+ <li class="mr-2">
+ <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
+ </li>
+ <li class="mr-2">
+ <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</nav>
+
+<!--slide in nav-->
+<div id="header" class="bg-white fixed w-full z-10 top-0 hidden animated" style="opacity: .95;">
+ <div class="bg-white">
+ <div class="flex flex-wrap items-center content-center">
+ <div class="flex w-1/2 justify-start text-white font-extrabold">
+ <a class="flex text-gray-900 no-underline hover:text-gray-900 hover:no-underline pl-2" href="#">
+ 👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
+ </a>
+ </div>
+ <div class="flex w-1/2 justify-end content-center">
+ <p class="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span class="pr-2">Share this</span> 👉</p>
+ <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
+ <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
+ </a>
+ <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
+ <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
+ </a>
+ </div>
+ </div>
+
+ </div>
+ <!--Progress bar-->
+ <div id="progress" class="h-1 bg-white shadow" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
+</div>
+
<!--Header-->
<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg'); height: 60vh; max-height:460px;">
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
@@ -37,6 +88,8 @@
</div>
</div>
+
+
<div layout:fragment="content" ></div>
<footer class="bg-gray-900">
diff --git a/src/main/resources/templates/post.html b/src/main/resources/templates/post.html
index bf86f96..a775ff2 100644
--- a/src/main/resources/templates/post.html
+++ b/src/main/resources/templates/post.html
@@ -22,56 +22,7 @@
<body class="bg-white font-sans leading-normal tracking-normal">
<!--Nav-->
-<nav class="bg-gray-900 p-4 mt-0 w-full">
- <div class="container mx-auto flex items-center">
- <div class="flex text-white font-extrabold">
- <a class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
- 👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
- </a>
- </div>
- <div class="flex pl-4 text-sm">
- <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
- <li class="mr-2">
- <a class="inline-block py-2 px-2 text-white no-underline" href="index.html">HOME</a>
- </li>
- <li class="mr-2">
- <a class="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" href="#">LINK</a>
- </li>
- <li class="mr-2">
- <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
- </li>
- <li class="mr-2">
- <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
- </li>
- </ul>
- </div>
- </div>
-</nav>
-
-<!--slide in nav-->
-<div id="header" class="bg-white fixed w-full z-10 top-0 hidden animated" style="opacity: .95;">
- <div class="bg-white">
- <div class="flex flex-wrap items-center content-center">
- <div class="flex w-1/2 justify-start text-white font-extrabold">
- <a class="flex text-gray-900 no-underline hover:text-gray-900 hover:no-underline pl-2" href="#">
- 👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
- </a>
- </div>
- <div class="flex w-1/2 justify-end content-center">
- <p class="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span class="pr-2">Share this</span> 👉</p>
- <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
- <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
- </a>
- <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
- <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
- </a>
- </div>
- </div>
- </div>
- <!--Progress bar-->
- <div id="progress" class="h-1 bg-white shadow" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
-</div>
<!--Title-->