Spring MVC editable table (Thymeleaf) - spring-boot

I have 2 entities - Invoice and InvoiceProduct. Invoice class has a field List of InvoiceProduct because Invoice has #OneToMany mapping on InvoiceProduct.
I want to send the List of InvoiceProduct to Thymeleaf with with editable fields with a Submit button. When I click on Submit button, the new edited List should be returned to the controller. However, I am able to send the list to the view, but when I send the edited list to controller, it is being passed as 'null'.
update-invoice.html:
<form action="#" th:action="#{/api/invoice/saveInvoice}" th:object="${invoice}" method="POST">
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>PID</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr th:each="temp : ${invoice?.invoiceProducts}" >
<td><input name="invoiceProducts[${tempStat.index}].productId" th:value="${temp.productId}"/></td>
<td><input name="invoiceProducts[${tempStat.index}].quantity" th:value="${temp.quantity}"/></td>
<td><input name="invoiceProducts[${tempStat.index}].price" th:value="${temp.price}"/></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
InvoiceController:
#PostMapping("/saveInvoice")
public String postInvoice(#ModelAttribute("invoice") Invoice invoice) {
logger.info("invoice products " + invoice.getInvoiceProducts());
return "dummy";
}
What else do I need to add so that my update-invoice.html passes the list to my controller ?

You can try something like below as an example for thymleaf:-
<form method="post" th:action="#{/users/}" th:object="${userInfo}" class="col card p-3 mb-5">
<div class="form-group">
<label for="firstName">First Name</label>
<input id="firstName" placeholder="Enter First Name" required type="text" th:field="*{firstName}"
class="form-control"/>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input id="lastName" placeholder="Enter Last Name" required type="text" th:field="*{lastName}"
class="form-control"/>
</div>
<div class="form-group">
<label for="role">Role</label>
<select id="role" required th:field="*{role}" class="form-control ">
<option value="" hidden>Select a role</option>
<option th:each="role : ${T(com.springhow.examples.springboot.thymeleaf.domain.entities.Role).values()}"
th:value="${role}"
th:text="${role}">
</option>
</select>
</div>
<input type="submit" class="btn btn-primary" value="Create User">
</form>
and into Controller:-
#RequestMapping(value = "/", method = RequestMethod.POST)
public String createUser(Model model, #ModelAttribute UserInfo userInfo) {
UserInfo user = userService.createUser(userInfo);
return "redirect:/users/";
}

Related

Button can't save first item when clicked

In a foreach loop, I have more than one item and each item has a button called "save". However, when I click on the first "save" button, it saves only the last item in my database.
#foreach($product_dr as $product)
<tr>
<td style="font-size: 20px;color: #101010">
<div class="form-group">
<input type="hidden" name="title" value="{{$product->title}}">
<label for="inputText3" class="col-form-label"></label>
{{$product->title}}
</div>
</td>
<td style="font-size: 20px;color: #2ec551">
<div class="form-group">
<input id="inputText4" VALUE="{{$product->price}}" type="text" name="price" class="form-control" placeholder="Amount" style="width: 100px">
</div>
</td>
<td style="font-size: 20px;color: #2ec551">
<div class="form-group">
<input id="inputText4" VALUE="1" type="number" name="amount" class="form-control" placeholder="Amount" style="width: 100px">
</div>
</td>
<td style="font-size: 20px;color: #2ec551">
<div class="form-group">
<input type="hidden" name="table" value="{{$table[0]->number}}">
<input type="hidden" name="table_number" value="{{$table[0]->number}}">
<label for="inputText3" class="col-form-label"></label>
{{$table[0]->number}}
</div>
</td>
<td>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<button class="btn btn-success" type="submit">Save</button>
</div>
</td>
</tr>
#endforeach
The name of the variables must be an array as such:
<input type="hidden" name="title[]" value="{{$product->title}}">
This way you will have an array on your backed that you can iterate. If not, you will only get one value for "title"

Laravel - How to apply Laravel old() helper function on dynamic input form

In Laravel-5.8 project, I am working on dynamic input form.
The main model is AppraisalGoal while the second model is AppraisalGoalDetail
Controller
public function create()
{
$goal = new AppraisalGoal();
$goaldetail = new AppraisalGoalDetail();
return view('appraisal.appraisal_goals.create')
->with('goal', $goal)
->with('goaldetail', $goaldetail) ;
}
public function store(StoreAppraisalGoalRequest $request)
{
DB::beginTransaction();
try {
$goal = new AppraisalGoal();
$goal->weighted_score = $request->weighted_score;
$goal->goal_title = $request->goal_title;
$goal->goal_description = $request->goal_description;
if ($request->appraisal_doc != "") {
$appraisal_doc = $request->file('appraisal_doc');
$new_name = rand() . '.' . $appraisal_doc->getClientOriginalExtension();
$appraisal_doc->move(public_path('storage/documents/appraisal_goal'), $new_name);
$goal->appraisal_doc = $new_name;
}
$goal->save();
foreach ( $request->activity as $key => $activity){
$startDate = Carbon::parse($request->start_date[$key]);
$endDate = Carbon::parse($request->end_date[$key]);
$insert_array = [
'kpi_description' => $request->kpi_description[$key],
'activity' => $request->activity[$key],
'start_date' => $startDate ->toDateTimeString(),
'end_date' => $endDate->toDateTimeString(),
];
AppraisalGoalDetail::create($insert_array );
}
DB::commit();
Session::flash('success', 'Goal is created successfully');
return redirect()->route(goals.index');
} catch (Exception $exception) {
DB::rollback();
Session::flash('error', 'Action failed! Please try again');
return redirect()->route('goals.index');
}
}
the create.blade view is shown below
<form action="{{route('goals.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<div class="card-body">
<div class="form-body">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Goal Title:<span style="color:red;">*</span></label>
<input type="text" name="goal_title" value="{{ old('goal_title', $goal->goal_title) }}" placeholder="Enter goal title here" class="form-control">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>Goal Description</label>
<textarea rows="2" name="goal_description" class="form-control" value="{{old('goal_description',$goal->goal_description)}}" placeholder="Enter Goal Description here ...">{{old('goal_description',$goal->goal_description)}}</textarea>
</div>
</div>
<div class="col-sm-12">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Activity<span style="color:red;">*</span></th>
<th scope="col">KPI<span style="color:red;">*</span></th>
<th scope="col">Start Date<span style="color:red;">*</span></th>
<th scope="col">End Date<span style="color:red;">*</span></th>
<th scope="col"><a class="btn btn-info addRow"><i class="fa fa-plus"></i></a></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="activity[]" class="form-control activity" ></td>
<td><input type="text" name="kpi_description[]" class="form-control kpi_description" ></td>
<td><input type="date" class="form-control start_date" placeholder="dd/mm/yyyy" name="start_date[]" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}"></td>
<td><input type="date" class="form-control end_date" placeholder="dd/mm/yyyy" name="end_date[]" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}"></td>
<td><a class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Weight(%):<span style="color:red;">*</span></label>
<input type="number" name="weighted_score" placeholder="Enter weighted score here" class="form-control" max="120">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Attachment:</label>
<div class="custom-file">
<input value="{{old('appraisal_doc',$goal->appraisal_doc)}}" type="file" name="appraisal_doc" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">{{ trans('global.save') }}</button>
</div>
</form>
AppraisalGoal is foreignkey to AppraisalGoalDetail. AppraisalGoalDetail is an Array.
The way the application operates is that, When the user clicks the submit button, the application saves into AppraisalGoal and pick its id and saves it with the other data into AppraisalGoalDetail.
However, the validation is giving issue. Whenever the user submits and the page is validated, all went blank upon showing the error page, meaning that I need to input them all over again.
I was able to resolve these ones that belong to AppraisalGoal model by using old() help function and it works:
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Goal Title:<span style="color:red;">*</span></label>
<input type="text" name="goal_title" value="{{ old('goal_title', $goal->goal_title) }}" placeholder="Enter goal title here" class="form-control">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>Goal Description</label>
<textarea rows="2" name="goal_description" class="form-control" value="{{old('goal_description',$goal->goal_description)}}" placeholder="Enter Goal Description here ...">{{old('goal_description',$goal->goal_description)}}</textarea>
</div>
</div>
I don't know how to resolve these ones that belong to AppraisalGoalDetail:
<tr>
<td><input type="text" name="activity[]" class="form-control activity" ></td>
<td><input type="text" name="kpi_description[]" class="form-control kpi_description" ></td>
<td><input type="date" class="form-control start_date" placeholder="dd/mm/yyyy" name="start_date[]" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}"></td>
<td><input type="date" class="form-control end_date" placeholder="dd/mm/yyyy" name="end_date[]" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}"></td>
<td><a class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>
</tr>
How do I get this corrected that the page should still retain the data after submit and validation error?
Thank you
When You get Validation Error & something fault in server..You redirect the page & withInput() function like this..
return redirect()->route('goals.index')->withInput(['goal_title' => $request->goal_title, 'goal_description' => $request->goal_description]);
It will sork & show your value which you give to update

How can I fetch detail of each perticular ID?

In My list view I have all the details of leave. But when I click on details It will display me a Pop-up. In Pop up box it has to fetch and give me all the details of particular field but instead of that it always give me details of last inserted record
Here Is code of my list file
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Employee Name</th>
<th>Leave Type</th>
<th>Leave Duration</th>
<th>Applied On</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if($allLeaves != null)
#foreach($allLeaves as $leave)
<tr>
<td> {{ $leave->username }} </td>
<td> {{ $leave->typeOfLeave }} </td>
<td>
{{ $leave->startDate }} To
{{ $leave->endDate }}
</td>
<td> {{ $leave->startDate }} </td>
<td>
#if($leave['status']=='Pending')
<span class="btn btn-warning">Pending</span>
#elseif($leave['status']=='Approved')
<span class="btn btn-success">Approved</span>
#else
<span class="btn btn-danger">Rejected</span>
#endif
</td>
<td>Details</td>
</tr>
</tbody>
</table>
and in same page i wrote code of fetch records
<form id="myform" class="form-horizontal" method="POST" action="{{ route('approve_leave', $leave->id) }}">
#csrf
<div class="card-body">
<div class="row">
<label class="col-md-6"><strong> Employee Name</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="emp_name" disabled value="{{$leave->username}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Leave Type</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="leavetype" disabled value="{{$leave->typeOfLeave}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Leave Duration</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="leaveduration" disabled value="{{ $leave->startDate }} To {{ $leave->endDate }}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Reason</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="reason" disabled value="{{$leave->reasonForLeave}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Applied on</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="appliedon" disabled value="{{$leave->startDate}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Action</strong></label>
<div class="col-md-6">
<select class="form-control" id="status" name="status" value="{{$leave->status}}">
<option value="Pending" selected="selected">Pending</option>
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
</select>
</div>
</div>
#endforeach
<br>
<div class="row">
<label class="col-md-6"><strong>Reason For Action</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="reason" name="reasonForAction" placeholder="Reason Of Action" style="border:none">
</div>
</div>
<br>
<div class="modal-footer">
<button type="submit" class="btn btn-info waves-effect" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
And This is the code i wrote in controller file
//Code Of list view
public function listOfLeave()
{
$allLeaves = LeaveManagement::all();
return view('pages.leavelist', compact('allLeaves'));
}
//Code of click on details button and fetch record of that particular id
public function handleLeave($id)
{
$leave = LeaveManagement::find($id);
return view('pages.leavelist', compact('leave', 'id'));
}
//code of approve reject leave and change the status of leave
public function approveLeave(Request $request ,$id)
{
$leave = LeaveManagement::find($id);
$leave->status = $request->get('status');
$leave->reasonForAction = $request->get('reasonForAction');
$leave->save();
return view('pages.leavelist');
}
If you want to show data according to user's id then you have to pass each field like data-fieldname and then you can fetch that field's data as shown in script.
Button:
<button type="button"
class="btn btn-xs btn-default confirm-modal"
data-toggle="modal"
data-target="#model"
data-id="{{ $singleRecord->id }}"
data-name="{{ $singleRecord->full_name }}"
data-leave_reason="{{ $singleRecord->leave_reason }}"
data-from_date="{{ date('d-F-Y', strtotime($singleRecord->from_date)) }}"
data-to_date="{{ date('d-F-Y', strtotime($singleRecord->to_date)) }}"
>Details </button>
And add script
<script type="text/javascript">
$('.confirm-modal').click(function (event) {
$('.employee_name').text($(this).data('name'));
$('#from_date').text($(this).data('from_date'));
$('#to_date').text($(this).data('to_date'));
$('#total_leaves').text($(this).data('total_leaves'));
$('.leave_reason').text($(this).data('leave_reason'));
})
</script>
In model div, add each id to display that data.
<div class="col-md-12">
<label for="to_date">To Date:</label>
<span id="to_date"></span>
Hope this helps :)
Edit your modal button and modal id like below,
<td>Details</td>
and your modal,
<div id="details_{{ $leave->id }}" class="modal fade edit-form" role="dialog">
or you can use javascript to populate your field,
<button type="button" class="btn btn-xs btn-default confirm-modal" data-toggle="modal" data-target="#details"
data-leave="{{ $leave }}">Details </button>
<script type="text/javascript">
$(document).on('click', '.confirm-modal', function(e){
var data = $(this).data('leave');
$('#emp_name').text(data.username);
$('#from_date').text(data.from_date');
$('#to_date').text(data.to_date);
$('#total_leaves').text(data.total_leaves);
$('#leave_reason').text(data.leave_reason);
})
</script>

How to perform arithmetic operations of two different data types in thymeleaf?

I have a piece of HTML where I need to multiply (or perform arithmetic operations) two values using thymeleaf.
Let's say my price is double and quantity is an integer.
Here's my sample code:
<fieldset class="form-inline" disabled >
<label for= "prodAmount">AMOUNT: </label>
<input type="number" class="form-control" th:text="${#aggregates.sum(product.![price * qty])}">
</fieldset>
Here's the error I'm getting:
Exception evaluating SpringEL expression: "#aggregates.sum(product.![price * qty])"
Also , I would also like to ask how to perform this when there's two or more values.
Here's my html form
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12 col-xs-12">
<form th:action="#{/product/product-list}" method="post" th:object="${productEntity}">
<input type="hidden" th:field="*{pid}" th:value="${pid}" >
<fieldset class="form-group">
<label for="product_name">Product Name</label>
<input type="text" class="form-control" th:field="*{pName}" th:value="${pName}">
</fieldset>
<fieldset class="form-group">
<label for="price">Price</label>
<input type="number" class="form-control" th:field="*{price}" th:value="${price}" placeholder="0">
</fieldset>
<fieldset class="form-group">
<label for="pQty">Quantity</label>
<input type="number" class="form-control" th:field="*{qty}" th:value="${qty}" placeholder = "0">
</fieldset>
<fieldset class="form-group">
<label for="status">Status</label>
<select class="form-control" id="select_status" th:field="*{status}" th:value="${status}">
<option value="0">AVAILABLE</option>
<option value ="1">NOT AVAILABLE</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="image">Image</label>
<input id="input-b2" name="input-b2" type="file" class="file"
data-show-preview="false" th:field="*{image}" th:value="${image}">
</fieldset>
</form>
</div>
<div class="col-lg-8 col-sm-12 col-xs-12">
<table class="table table-inverse table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Status</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${productTable} ">
<td th:text="${product.pid}"></td>
<td th:text="${product.pName}"></td>
<td th:text="${product.price}"></td>
<td th:text="${product.qty}"></td>
<td th:text="${product.status == '0'} ? 'Available' : 'Not Available'"></td>
<td th:text="${product.image}"></td>
<td>
<a th:href="#{/productlist/{id}(id = ${product.pid})}" class="btn btn-primary">Update</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row float-right">
<div class="col-xd-12">
<div>
<fieldset class="form-inline" disabled >
<label for= "prodAmount">AMOUNT: </label>
<input type="number" class="form-control" th:text="${#aggregates.sum(product.{price * qty})}">
</fieldset>
<button type="button" class="btn btn-primary">Checkout</button>
</div>
</div>
</div>
</div>
Product Controller:
#RequestMapping(value="/product-list")
public ModelAndView shopView() {
ModelAndView mav = new ModelAndView();
mav.addObject("productTable", pRepo.findAll());
mav.addObject("productEntity",new ProductEntity());
mav.setViewName("/productlist");
return mav;
}
#RequestMapping(value = "/{id}",method = RequestMethod.GET)
public ModelAndView getProduct(#ModelAttribute ProductEntity productEntity, #PathVariable int id) {
ModelAndView mav = new ModelAndView();
mav.addObject("productTable",pRepo.findAll());
mav.addObject("productEntity", pRepo.findOne(id));
mav.setViewName("/productlist");
return mav;
}

How do I assign an object to a member class in JSP

I am building a tour application. I have bookings which point to a tour modality but I haven't been able to assign the book modality when adding a new booking using JSLT.
Here's my JSP code:
<c:forEach items="${modalities}" var="modality">
<form:form method="POST" action="/book_tour" modelAttribute="booking">
<p>${modality.name}</p>
<jsp:setProperty name="booking" property="tourModality" value="${modality}"></jsp:setProperty>
<input name="modality" type="hidden" value="${modality}">
<div class="form-group">
<form:label path="calendarDate">Escoja una fecha</form:label>
<div class='input-group date' id='datetimepicker'>
<form:input path="calendarDate" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="input-group">
<form:label path="calendarDate">Hora: </form:label>
<form:select path="calendarDate">
<c:forEach items="${modality.tourHours}" var="tourHour">
<option>${tourHour.timeSlot}</option>
</c:forEach>
</form:select>
</div>
</div>
<input type="submit" class="btn btn-success" value="Reservar"/>
</form:form>

Resources