Jun 19, 2020
0
Level 1
foreach over writing records with javascript iteration of row
Hi, I am trying to make it possible to edit the rows of a submitted invoice. I am wanting to populate the table with saved info while still being able to save the new rows that is created by the JS script, so far it is only saving the new rows and copying over the current ones I have
@extends('layouts.backend')
@section('content')
<section class="section">
<div class="section-header">
<h1>Editing {{$invoice->invoice_no}}</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active" id="url_link"></div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-header">
<h5>{{$invoice->invoice_no}}</h5>
</div>
<div class="row border-top">
<div class="col-md-12 pt-3">
<form action="{{route('invoices.update', $invoice->id)}}" id="create_invoice" method="post">
@csrf
@method('patch')
<div class="form-row">
<div class="col-md-4">
<label for="client_name">Customer</label>
<select name="client_id" id="customer" class="form-control">
<option value="" selected>Select an Option</option>
@foreach ($clients as $client)
<option data-id="{{$client->id}}" {{$invoice->client_id == $client->id ? 'selected' : ''}} value="{{$client->id}}">{{$client->name}}
{{$client->surname}}</option>
@endforeach
</select>
</div>
<div class="col-md-4">
<label for="client_email">Email</label>
<input type="text" class="form-control" name="client_email" value="{{$invoice->clients->email}}" id="client_email" readonly>
</div>
<div class="col-md-4">
<label for="client_cell">Cell</label>
<input type="text" class="form-control" name="client_cell" value="{{$invoice->clients->cell}}" id="client_cell" readonly>
</div>
<div class="col-md-12 pt-1">
<a href="">| Or Add New Customer</a>
</div>
</div>
<div class="form-row pt-3">
<div class="col-md-8">
<label for="client_address">Address</label>
<input class="form-control" name="client_address" id="client_address" value="{{$invoice->clients->address}}" readonly>
</div>
<div class="col-md-2">
<label for="date">Date Created</label>
<input class="form-control" name="date" type="text" id="date"
value="{{$invoice->date}}">
</div>
<div class="col-md-2">
<label for="due_date">Due Date</label>
<input class="form-control" name="due_date" type="text" id="due_date"
value="{{$invoice->due_date}}">
</div>
</div>
<div class="form-row pt-3">
<div class="col-md-11">
<label for="title">Title</label>
<input type="text" name="title" value="{{$invoice->title}}" class="form-control">
</div>
<div class="col-md-1">
<label for="recurring">Recurring</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="recurring" value="1" {{$invoice->recurring == true ? 'checked' : ''}}>
<label class="form-check-label" for="recurring">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="recurring" value="0" {{$invoice->recurring == false ? 'checked' : ''}}>
<label class="form-check-label" for="recurring">
No
</label>
</div>
</div>
</div>
<hr>
<div class="form-row p-2">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-hover" id="tab_logic">
<div class="header">
<thead>
<tr>
<th class="text-center"> # </th>
<th class="text-center"> Item </th>
<th class="text-center" width="10%"> Qty </th>
<th class="text-center" width="15%"> Price </th>
<th class="text-center" width="15%"> Total </th>
</tr>
</thead>
</div>
<tbody>
@foreach($items as $item)
<tr>
<td class="text-center">1</td>
<td><input type="text" name='items[]'
placeholder='Enter Item Description' value="{{$item->item}}" class="form-control" />
</td>
<td><input type="number" name='qty[]' placeholder='Qty'
class="form-control qty" step="0" min="0" value="{{$item->qty}}"/></td>
<td>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='price[]' placeholder='Price'
class="form-control price" step="0.00" min="0" value="{{$item->price}}"/>
</div>
</td>
<td>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='total[]' placeholder='0.00'
class="form-control total" value="{{$item->total}}"/>
</div>
</td>
</tr>
@endforeach
<tr id='addr0'>
<td class="text-center">1</td>
<td><input type="text" name='items[]'
placeholder='Enter Item Description' class="form-control" />
</td>
<td><input type="number" name='qty[]' placeholder='Qty'
class="form-control qty" step="0" min="0" /></td>
<td>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='price[]' placeholder='Price'
class="form-control price" step="0.00" min="0" />
</div>
</td>
<td>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='total[]' placeholder='0.00'
class="form-control total" />
</div>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="form-row p-3 d-print-none">
<div class="col-md-12 text-right">
<button id="add_row" type="button" class="btn btn-primary pull-left">Add Row</button>
<button id="delete_row" type="button" class="btn btn-danger">Delete Row</button>
</div>
</div>
<div class="form-row p-3">
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-borderless" id="tab_logic_total">
<tbody>
<tr>
<th class="text-right">Sub Total</th>
<td class="text-center">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='subtotal' placeholder='0.00'
class="form-control" id="sub_total" value="{{$invoice->subtotal}}" readonly />
</div>
</td>
</tr>
<tr>
<th class="text-right">Discount</th>
<td class="text-center">
<div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="discount"
placeholder="0" name="discount" value="{{$invoice->discount}}">
<div class="input-group-prepend">
<span class="input-group-text">%</span>
</div>
</div>
</td>
</tr>
<tr>
<th class="text-right">Discounted</th>
<td class="text-center">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='discounted' id="discount_amount"
placeholder='0.00' class="form-control" readonly value="{{$invoice->discounted}}"/>
</div>
</td>
</tr>
<tr>
<th class="text-right">Total</th>
<td class="text-center">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">R</span>
</div>
<input type="number" name='total_amount' id="total_amount"
placeholder='0.00' class="form-control" value="{{$invoice->total}}" readonly />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="form-row p-3">
<div class="col-md-12">
<h5 class="text-center">Terms & Conditions</h5>
<textarea class="form-control text-left" name="terms"
rows="3">{!! $invoice->terms !!}</textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-sm btn-block btn-primary">Update Invoice</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('scripts')
<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxy/1.6.1/scripts/jquery.ajaxy.min.js"></script>
<script>
CKEDITOR.replace( 'ckeditor' );
</script>
<!-- Customer Info Generate -->
<script>
$urllink = $('#url_token').val();
document.getElementById('url_link').innerHTML = $urllink;
$('#customer').change(function(event){
var customerID = $(this).val();
$.ajax({
type: "POST",
url: "{{route('checkCustomer')}}",
data: {'id': customerID, '_token':'{{csrf_token()}}'},
cache: false,
dataType: "json",
success: function(data) {
$('#client_email').val(data.email);
$('#client_cell').val(data.cell);
$('#client_address').val(data.address);
},
error:function(){console.log("request failed");}
});
});
</script>
<!-- Invoice Calculator -->
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
calc();
});
$('#tab_logic tbody').on('keyup change',function(){
calc();
});
$('#discount').on('keyup change',function(){
calc_total();
});
});
function calc()
{
$('#tab_logic tbody tr').each(function(i, element) {
var html = $(this).html();
if(html!='')
{
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty*price);
calc_total();
}
});
}
function calc_total()
{
total=0;
$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
discount_sum=total/100*$('#discount').val();
$('#discount_amount').val(discount_sum.toFixed(2));
$('#total_amount').val((total-discount_sum).toFixed(2));
}
</script>
@endsection
Controller
public function update(Request $request, $id)
{
$invoice = Invoice::find($id);
$invoice->client_id = $request->client_id;
$invoice->date = $request->date;
$invoice->due_date = $request->due_date;
$invoice->title = $request->title;
$invoice->recurring = $request->recurring;
$invoice->subtotal = $request->subtotal;
$invoice->discount = $request->discount;
$invoice->discounted = $request->discounted;
$invoice->total = $request->total_amount;
$invoice->terms = $request->terms;
$invoice->save();
if ($invoice->save()) {
foreach ($request->items as $item) {
DB::table('invoice_item')->update([
'invoice_id' => $invoice->id,
'item' => $item,
'created_at' => now(),
]);
}
foreach($request->qty as $qty) {
DB::table('invoice_item')->where('invoice_id', $invoice->id)->update([
'qty' => $qty,
]);
}
foreach($request->price as $price) {
DB::table('invoice_item')->where('invoice_id', $invoice->id)->update([
'price' => $price,
]);
}
foreach($request->total as $total) {
DB::table('invoice_item')->where('invoice_id', $invoice->id)->update([
'total' => $total,
]);
}
}
return redirect(route('invoices.index'))->with('success','Invoice '.$invoice->invoice_no.' Updated Successfully');
}
Please or to participate in this conversation.