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

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