ВЕСНА / THYMELEAF: Как заполнить список в форме и добавить еще одну строку в форму?

Question

У меня есть объект:

InvoiceData
    String name
    Date date
    List<InvoiceTask>

В InvoiceTask есть 3 поля:

InvoiceTask
    String name
    String project
    BigDecimal hours

Я создал формуляр тимиана, который создает объект InvoiceData и сохраняет его в моем экземпляре MongoDB, но он содержит только Name и Date. Я понятия не имею, как изменить эту форму, чтобы добавить не только задачу, но и несколько задач (возможно, с помощью кнопки «Добавить задачу» внутри формы).

Контроллер, перенаправляющий на add.html, выглядит следующим образом:

@RequestMapping(value = "/add/{id}")
public String addPage(@PathVariable("id") String id, Model model) {
    InvoiceData invoiceData = new InvoiceData();
    model.addAttribute("contractorid", id);
    model.addAttribute("invoicedata", invoiceData);
    return "add";
}

Контроллер, сохраняющий InvoiceData, выглядит следующим образом:

@RequestMapping(value = "/addinvoice/{id}", method = RequestMethod.POST, produces = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String addInvoice(@PathVariable("id") String id, InvoiceData data, Model model) {
    Contractor contractor = contractorRepository.findById(id).get();
    data.setData(contractor.getContractorData());
    if (contractor.getInvoices() == null) {
        contractor.setInvoices(new ArrayList<InvoiceData>());
    }
    contractor.getInvoices().add(data);
    invoiceDataRepository.save(data);
    contractorRepository.save(contractor);
    model.addAttribute("contractor", contractor);
    return "index";

и шаблон Thymeleaf для InvoiceData выглядит следующим образом ( у него еще нет списка InvoiceTask! ):

<form action="#" th:action="@{addinvoice/{id}(id=${contractorid})}" th:object="${invoicedata}" method="post">
            <ul class="form-style-1">
                <li>
                    <label>Name<span class="required">*</span></label>
                    <input type="text" th:field="*{name}" id="receptionDate">
                </li>
                <li>
                    <label>Date<span class="required">*</span></label>
                    <input type="date" th:field="*{orderDate}" id="orderDate">
                </li>
                <li>
                    <input type="submit" value="Submit" />
                </li>
            </ul>
        </form>

Я буду честен, я не знаю, с чего начать ...

Answer 1

Один из способов - создать класс-оболочку (DTO?) Для передачи счетов-фактур с соответствующими задачами. Для

@RequestMapping(value = "/add/{id}")
public String addPage(@PathVariable("id") String id, Model model) {
    InvoiceDataDTO invoiceData = new InvoiceDataDTO();

    for(int i = 1; i <= 5; i++) {
          invoiceData.addTask(new invoiceTask()) 
    }

    model.addAttribute("invoiceData", invoiceData);
    return "add";
}

В форме thymleaf вы должны отобразить построенный DTO следующим образом:

    <form action="#" th:action="@{/invoices/save}" th:object="${invoicesData}"
  method="post">
    <fieldset>
        <input type="submit" id="submitButton" th:value="Save">
        <input type="reset" id="resetButton" name="reset" th:value="Reset"/>
        <table>
            <thead>
                <tr>
                    <th> Name</th>
                    <th> Date</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="invoiceTask, itemStat : *{invoicesTaks}">
                    <td><input th:field="*{invoicesTasks[__${itemStat.index}__].name}" /></td>
                    <td><input th:field="*{invoicesTasks[__${itemStat.index}__].project}" /></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</form>

Как вы видите, вы получаете атрибут модели invoiceDataDTO с уже добавленными пустыми задачами.

После заполнения объекта вам нужно только сохранить.