追加したTodoの優先度をradioボタンに引き継いでチェックを入れたい

実現したいこと

Todoを追加後、そのTodoの優先度をラジオボタンに引き継いで、チェックを入れたいです。

前提

現在Todoアプリをspring bootを用いて作成しています。
Todoを追加する際、優先度を選ぶラジオボタンを設けており、（ex, 大○ 中○ 小○）

追加した後、todoと一緒にラジオボタンも表示したく、各Todoの優先度に基づいてラジオボタンにチェックが入った状態で表示したいです。

該当のソースコード

Todo.java

@Entity
@Data
@Table(name = "todos")
public class Todo {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Nullable
    @Column(name = "user_id", nullable = false)
    private Integer userId;

    @NotNull
    @NotBlank(message = "タイトルを入力してください")
    @Column(name = "title")
    private String title;

    @NotNull
    @NotBlank(message = "詳細を入力してください")
    @Column(name = "description")
    private String description;

    @NotNull
    @NotBlank(message = "日付を入力してください")
    @Column(name = "due_date")
    private String dueDate;

    @Column(name = "priority")
    private Integer priority = 2;

    @NotNull
    @Column(name = "is_completed")
    private Boolean isCompleted = false;

    @NotNull
    @Column(name = "is_deleted")
    private Boolean isDeleted = false;

    public Todo() {

    }

    public Todo(Integer id, Integer userId, String title, String description, String dueDate, Integer priority, Boolean isCompleted, Boolean isDeleted) {
        this.id = id;
        this.userId = userId;
        this.title = title;
        this.description = description;
        this.dueDate = dueDate;
        this.priority = priority;
        this.isCompleted = isCompleted;
        this.isDeleted = isDeleted;
    }
}

TodoController.java

@Controller
public class TodoController {

    @Autowired
    TodoRepository todoRepository;

    @Autowired
    TodoService todoService;

    @Autowired
    SecuritySession securitySession;

    @GetMapping("/todo/{id}")
    public String home(Model model,User user, Todo todo, @PathVariable("id")Integer id) {

        Integer userId = user.getId();
        String email = user.getEmail();
        if(userId == null) {
            return "redirect:/todo/"+userId;
        }
        if(!userId.equals(id)) {
            System.out.println("エラー");
            return  "redirect:/login";
        }

        List<Todo> list = todoRepository.find(userId);
        model.addAttribute("list", list);
        model.addAttribute("todo", new Todo(todo.getId(),user.getId(), todo.getTitle(), todo.getDescription(), todo.getDueDate(), todo.getPriority(), todo.getIsCompleted(), todo.getIsDeleted()));
        System.out.println(userId);
        System.out.println(id);
        System.out.println(securitySession.getEmail());
        return "home";
    }

    @PostMapping("/todo/{id}")
    public String createTodo(@Validated Todo todo,BindingResult result, User user) {
        Integer userId = user.getId();
        if(result.hasErrors()){
            return "home";
        }
        Todo userTodo = new Todo(todo.getId() ,user.getId(), todo.getTitle(), todo.getDescription(), todo.getDueDate(), todo.getPriority(), todo.getIsCompleted(), todo.getIsDeleted());
        todoService.addTodo(userTodo);
        return "redirect:/todo/" + userId;
    }

    @PostMapping("/todo/update/{id}")
    public String doneTodo(@RequestParam(name = "todoId",required = false)Integer todoId, User user) {
        Integer userId = user.getId();
        Todo updateTodo = todoService.findById(todoId);
        updateTodo.setIsCompleted(true);
        todoService.addTodo(updateTodo);
        return "redirect:/todo/"+userId;
    }

    @PostMapping("/todo/edit/{id}")
    public String editTodo(@RequestParam(name = "editId",required = false)Integer editId, Todo todo, User user ,Model model) {
        Integer userId = user.getId();
        Todo editTodo = todoService.findById(editId);
        Todo nextTodo = new Todo(editTodo.getId(),user.getId(),todo.getTitle(),todo.getDescription(), todo.getDueDate(),todo.getPriority(),todo.getIsCompleted(), todo.getIsDeleted());
        todoService.addTodo(nextTodo);
        model.addAttribute("nextTodo", nextTodo);
        return "redirect:/todo/"+userId;
    }

    @PostMapping("/todo/delete/{id}")
    public String deleteTodo(@RequestParam(name = "deleteId",required = false)Integer deleteId, User user) {
        Integer userId = user.getId();
        Todo deleteTodo = todoService.findById(deleteId);
        deleteTodo.setIsDeleted(true);
        todoService.addTodo(deleteTodo);
        return "redirect:/todo/"+userId;
    }
}

home.html

<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link th:href="@{/css/home.css}" rel="stylesheet"/>
    <title>Todo管理</title>
</head>
<body>
<h1>Todo管理</h1>
<div>
    <form method="post" th:action="@{/todo/}+${id}" th:object="${todo}">
        <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}"></p>
        <input th:field="*{title}" class="add-input" type="text" placeholder="タイトル">

        <p th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></p>
        <input th:field="*{description}" class="add-input" type="text" placeholder="詳細">

        <p th:if="${#fields.hasErrors('dueDate')}" th:errors="*{dueDate}"></p>
        <input th:field="*{dueDate}" class="add-input-third" type="date" placeholder="例: 2023/??/??"><br/>

        <div class="add-form">
            <span class="add-priority">Todoの重要度:</span>
            <input th:field="*{priority}" type="radio" name="priority" value="3">大
            <input th:field="*{priority}" type="radio" name="priority" value="2" th:checked="${todo.priority == 2}">中
            <input th:field="*{priority}" type="radio" name="priority" value="1">小
        </div>
        <div class="add-btn-content">
            <button class="add-btn" type="submit">追加</button>
        </div>
    </form>
</div>

<h2>やること一覧</h2>
<div>
    <form method="post" th:action="@{/todo/edit/}+${id}" th:object="${todo}" th:each="list:${list}">
        <div class="edit-todo" th:if="${!list.isCompleted}">
            <input class="edit-content" type="checkbox" th:value="${list.id}" name="todoId" form="done-todo">
            <input type="hidden" name="userId" th:value="${list.userId}">
            <input class="edit-content" type="text" name="title" th:value="${list.title}">
            <input class="edit-content" type="text" name="description" th:value="${list.description}">
            <input class="edit-content" type="date" name="dueDate" th:value="${list.dueDate}">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    優先度変更
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <input class="dropdown-input pr-2" name="priority" type="radio" th:value="3" th:checked="${list.priority}">大
                    <input name="priority" type="radio" th:value="2" th:checked="${list.priority}">中
                    <input name="priority" type="radio" th:value="1" th:checked="${list.priority}">小
                </div>
            </div>
            <input type="hidden" name="editId" th:value="${list.id}">
            <input class="update-btn" type="submit" value="更新">
        </div>
    </form>
    <form class="complete-btn-box" method="post" id="done-todo" th:action="@{/todo/update/}+${id}">
        <input type="hidden" name="todoId" th:value="${todo.id}">
        <input class="complete-btn" type="submit" value="チェックを入れて完了にする">
    </form>
</div>

<div class="complete-todo-box">
    <button type="button" class="btn btn-primary p-3" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        完了したTodo表示
    </button>
    <div class="collapse" id="collapseExample">
        <form class="p-2" method="post" th:action="@{/todo/delete/}+${id}" th:each="list:${list}">
            <div th:if="${!list.isDeleted}">
                <div th:if="${list.isCompleted}">
                    <input class="completed-todo" type="text" name="title" th:value="${list.title}" readonly>
                    <input type="hidden" name="deleteId" th:value="${list.id}">
                    <input class="delete-btn" type="submit" value="削除">
                </div>
            </div>
        </form>
    </div>
</div>
<form th:action="@{/logout}" method="post">
    <button class="logout-button" type="submit" value="ログアウト">ログアウト</button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

試したこと

追加したTodoはlistで回っているので

<input class="dropdown-input pr-2" name="priority" type="radio" th:value="3" th:checked="${todo.priority == list.priority}">大

上記のように追加したTodoの優先度が等しければチェックをいれる、というように考えていましたが、チェックははいりませんでした。

皆様のお力を貸していただけると幸いです。
宜しくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。

<input class="dropdown-input pr-2" name="priority" type="radio" th:value="3" th:checked="${list.priority == 3}">大
<input name="priority" type="radio" th:value="2" th:checked="${list.priority == 2}">中
<input name="priority" type="radio" th:value="1" th:checked="${list.priority == 1}">小

上記のように、listの優先度とvalueの値を比較させることで、無事解決できました。

投稿2023/03/03 15:58

ryo666-6

総合スコア3