Object Child Lists in Thymeleaf Forms and Spring MVC

Viewed 241

I'm stuck with some use-case in building an app for hackathon management software . Here is the problem: I got Team class and a Member class with one to many relationship (Member is a child class to Team) One team has many members. So, when im creating a team in form, i want a form for members inside. Something like this Form for adding team

So,when add member is clicked, i want to add new input row in table and save member in memory (update the team object) ,same for delete( delete row). And finally when save is clicked : Saving a team with members and other details.(First is team saved, then for each member in list teamID for member is set and then saved)

Here is my thymeleaf

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org" >
<head>
  <meta charset="UTF-8">
  <title>Team</title>
  <link rel="stylesheet" th:href="@{/style/header.css}">
</head>
<body>

<div th:replace="fragments/header :: header"></div>

<div class="container">

  <div th:if="${team.teamID > 0 }">
    <div><h1>Details for team:</h1></div>

    <form  th:object="${team}" >

      <div class="form-group">
        <label hidden >ID:</label>
        <input hidden readonly th:field="${team.teamID}" type="text" >
      </div>
      <div class="form-group">
        <label >Name:</label>
        <input readonly th:field="${team.name}" type="text" >
      </div>
      <div class="form-group">
        <label >Administrator:</label>
        <input readonly th:field="${team.administrator.name}" type="text" >
      </div>


      <div class="form-group">
        <label >Hackathon:</label>
        <input readonly th:field="${team.hackathon.name}" type="email" >
      </div>
      <div class="form-group">
        <label >Mentor:</label>
        <input readonly th:field="${team.mentor.name}" type="text" >
      </div>



      <div th:if="${ not#lists.isEmpty(members)}"> Members:
        <table border="1">
          <tr>
            <th>Name</th>
            <th>Last name</th>
            <th>Mail</th>
            <th>Role</th>


          </tr>
          <tr th:each="member : ${members}">
            <td><span th:text="${member.name}" ></span></td>
            <td><span th:text="${member.lastName}" ></span></td>
            <td><span th:text="${member.mail}" ></span></td>
            <td><span th:text="${member.role}" ></span></td>



          </tr>

        </table>
      </div>


    </form>

  </div>


<div th:unless="${team.teamID >  0}">
  <div><h1>Enter details for team:</h1></div>

  <form  th:object="${team}" th:action="@{/administrator/addTeam}" method="post">

    <div class="form-group">
      <label >Name:</label>
      <input  th:field="${team.name}" type="text" >
    </div>


    <div>
      <form th:action="@{'/judge/findHackathons'}" method="get">
        <div>
          <label >Hackathon:</label>
          <select name="hackathon">
            <option th:each="hackathon : ${hackathons}"
                    th:value="${hackathon.hackathonid}" th:text="${hackathon.name}">hackathon</option>

          </select>
        </div>

      </form>

    </div>

    <div class="form-group">
      <form th:action="@{'/mentor/findMentors'}" method="get">
        <div>
          <label >Mentor:</label>
          <select name="mentor">
            <option th:each="mentor : ${mentors}"
                    th:value="${mentor.mentorID}" th:text="${mentor.name}">mentor</option>

          </select>
        </div>

      </form>

    </div>
    <div>
      <form  th:action="@{/administrator/updateTeam}" th:object="${team}"
            method="post" >
        <fieldset>
          <button  type="submit" th:value="addMember"  name = "addMember">
            <i>Add member</i>
          </button>

          <table border="1">
            <thead>
            <tr>
              <th >Name </th>
              <th >Last name</th>
              <th >Mail</th>
              <th >Role</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member, itemStat : *{members}">
              <td><input type="text"
                         th:field="*{members[__${itemStat.index}__].name}"/></td>
              <td><input type="text"
                         th:field="*{members[__${itemStat.index}__].lastName}"/>
              <td><input type="text"
                         th:field="*{members[__${itemStat.index}__].mail}"/>
              <td><input type="text"
                         th:field="*{members[__${itemStat.index}__].role}"/>
              <td>
              <span >
                               <button type="submit"
                                       th:value="*{members[__${itemStat.index}__].id.memberID}">

                                   <i > Delete</i>
                               </button>
                            </span>
            </td>
            </tr>
            </tbody>
          </table>
        </fieldset>
      </form>


    </div>


  </form>

</div>
    <button type="submit" >Save</button>
  </form>
</div>


</div>


</body>
</html>

Team:

public class Team {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long teamID;

    private String name;



    @OneToMany(mappedBy = "team",cascade = CascadeType.ALL,fetch = FetchType.EAGER)
    private List<Member> members;




    @OneToMany(mappedBy = "team",cascade = CascadeType.ALL,fetch = FetchType.EAGER)
    @ToString.Exclude
    private Set<Mark> marks;


    @ManyToOne
    @JoinColumn(name = "mentorid",insertable = false, updatable = false)
    @ToString.Exclude
    private Mentor mentor;


    @ManyToOne
    @JoinColumn(name = "administratorid",insertable = false, updatable = false)
    @ToString.Exclude
    private Administrator administrator;


    @ManyToOne
    @JoinColumn(name = "hackathonid",insertable = false, updatable = false)
    @ToString.Exclude
    private Hackathon hackathon;
}

Member:

public class Member {

    @EmbeddedId
    private MemberId id;

    private String name;

    private String mail;

    private String lastName;

    private String role;

    @ManyToOne(fetch = FetchType.EAGER)
    @JoinColumn(name="teamid",insertable = false, updatable = false )
    private Team team;
}

I dont know how to handle it in a controller. Can someone suggest me what is the proper way of doing it? I google it a lot but there are just a few examples of it and i dont understand it clearly. Im stuck trying to fix this.Thanks in advance

0 Answers
Related