Let's create a TODO application in Java 9 Create TODO display Sort by date and time + Set due date default to today's date

Hello. In this article, we will fine-tune the TODO that we have made so far.

TODO application creation link collection

1: [Understanding the super basics] A brief description of MVC 2: [Prepare a template] I want to create a template with Spring Initializr and do Hello world 3: [Connection / Settings / Data display with MySQL] Save temporary data in MySQL-> Get all-> Display on top 4: [POST function] Implementation of posting function 5: [PATCH function] Switch TODO display 6: [Easy to use JpaRepository] Implementation of search function [7: [Common with Thymeleaf template fragment] Create Header] (https://qiita.com/nomad_kartman/items/8c33eca2880c43a06e40) [8: [PUT function] Implementation of editing function] (https://qiita.com/nomad_kartman/items/66578f3f91a422f9207d) 9: Sort TODO display in chronological order + set due date default to today's date (now here)

Display TODO in order of newest creation date and time

According to the current specifications, the TODO list is displayed in chronological order of creation date and time.

In other words, the new TODO is at the bottom of the display.

It's fine, but let's sort this in order of registered date (that is, order of newest creation date)!

Sorting work is quite important because it is a work that follows when handling data!

Edit Todo Repository

java/com/example/todo/dao/TodoRepository.java

@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {

    List<TodoEntity> findByTitleContaining(String searchWord);

    //↓ Add
    List<TodoEntity> findAllByOrderByCreateTimeDesc();
}

A method to implement partial match search was added to Repository, but we will add a new findAllByOrderByCreateTimeDesc ().

By doing this, JpaRepository will pass all the data on the DB in a state where the creation date and time are sorted in descending order.

It's super convenient!

Edit TodoService

Then edit the service class.

java/com/example/todo/TodoService.java

    public List<TodoEntity> findAllTodo() {
        //return todoRepository.findAll();
       return todoRepository.findAllByOrderByCreateTimeDesc();
    }

The commented out part was the description so far, but I will call the function I made earlier.

By doing this, the list of TODOs displayed in / top will be sorted in descending order of creation date and time!

Set the TODO registration form date to today's date

Get today's date with JS and embed it in form

This time I will write JS directly in top.html (It is not so good to write it directly, but this time it is a simple application so let's do it w)

resources/templates/top.html

<script>
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    $("#date").val(`${yyyy}-${mm}-${dd}`);
</script>

It is OK if you write such a script just before the closing tag of the body.

By setting slice (-2), only the last two digits of the String are displayed.

By doing this, the one-digit number is displayed with 0 attached like 01, 05, and the two-digit number is displayed without 0 (only the last two digits of 012 are displayed. .)

Those who have referred to this TODO application creation procedure have already

resources/templates/top.html

<input type="date" id="date" name="deadline" class="col-9 my-0">

I think that it is, but in fact, since id = "date" is set here, today's date is passed by JQuery.

This is the fine adjustment for this time.

From the next time onward, I would like to touch on exception handling!