in laravel pass updated value from view to controller without submit button - laravel

I am tiring to store manager auth id, I have view page that contents of user tickets, in my database name called "ticket" in that table I have column name called "ticket_view_by_manager_id" in this column I am trying to store manager auth id, when manager open that ticket that time manager auth id, store in this "ticket_view_by_manager_id" column,
my controller
public function manager_assigned_Chat(Request $request, $ticket_id){
$this->validate($request, [
'ticket_view_by_manager_id' => 'required',
]);
$input = User_Ticket::find($ticket_id);
$input['ticket_view_by_manager_id'] = $request->submit;
$input->save();
}
my route
Route::post('user_ticket_chat{ticket_id}', 'Services\User_TicketController#manager_assigned_Chat')->name('user_ticket_chat{ticket_id}');
my view "showing all user ticket list"
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>slNo</th>
<th>Ticket ID</th>
<th>Subject</th>
<th>Status</th>
<th>Last Update</th>
<th>Created</th>
</tr>
</thead>
<tbody>
<form method="POST" action="{{ route('user_ticket_chat{ticket_id}')}}" enctype="multipart/form-data">
#csrf
#foreach ($my_tickets as $key=>$my_tickets_list)
<tr>
<td style="text-align:center"> {{ $key + 1 }} </td>
<td >{{ $my_tickets_list->ticket_id }}</td>
<td > <input type="hidden" name="submit" value="{{ Auth::user()->staff_id }}" href="ticket_chat{{ $my_tickets_list->ticket_id }}" >{{ $my_tickets_list->subject }}</td>
<td style="text-align:center">
#if($my_tickets_list->status == 'OPEN')
<span class="btn waves-effect waves-light btn-sm btn-success">OPEN</span>
#elseif($my_tickets_list->status == 'COMPLETE')
<span class="btn waves-effect waves-light btn-sm btn-info">COMPLETE</span>
#else($my_tickets_list->status == 'PENDING')
<span class="btn waves-effect waves-light btn-sm btn-danger">PENDING</span>
#endif
</td>
<td >{{$my_tickets_list->created_at->todatestring()}} </td>
<td >{{$my_tickets_list->updated_at->todatestring()}} </td>
</tr>
#endforeach
<input type="submit" value="Send.">
</form>
</tbody>
</table>

in your web.php
Route::post('user_ticket_chat','Services\User_TicketController#manager_assigned_Chat')->name('user_ticket_chat');
in your controller
public function manager_assigned_Chat(Request $request){
$this->validate($request,[
'ticket_id' => 'required',
]);
$input = User_Ticket::find($ticket_id);
$input->ticket_view_by_manager_id = Auth::user()->id; // or Auth::user()->staff_id; in your case
$input->save();
}
in blade view add meta tag :
<meta name="csrf-token" content="{{ csrf_token() }}">
in table :
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>slNo</th>
<th>Ticket ID</th>
<th>Subject</th>
<th>Status</th>
<th>Last Update</th>
<th>Created</th>
</tr>
</thead>
<tbody>
#foreach ($my_tickets as $key=>$my_tickets_list)
<tr>
<tdstyle="text-align:center"> {{ $key + 1 }} </td>
<td>{{ $my_tickets_list->ticket_id }}</td>
<td class="ticket" data-ticketid="{{ $my_tickets_list->ticket_id}}">{{ $my_tickets_list->subject }}</td>
<td style="text-align:center">
#if($my_tickets_list->status == 'OPEN')
<span class="btn waves-effect waves-light btn-sm btn-success">OPEN</span>
#elseif($my_tickets_list->status == 'COMPLETE')
<span class="btn waves-effect waves-light btn-sm btn-info">COMPLETE</span>
#else($my_tickets_list->status == 'PENDING')
<span class="btn waves-effect waves-light btn-sm btn-danger">PENDING</span>
#endif
</td>
<td>{{$my_tickets_list->created_at->todatestring()}} </td>
<td>{{$my_tickets_list->updated_at->todatestring()}} </td>
</tr>
#endforeach
</tbody>
</table>
now using Jquery AJAX request :
<script>
$(document).on('click','.ticket',function(){
var ticketID=$(this).attr('data-ticket');
$.ajax({
url:'/user_ticket_chat',
type:'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
dataType:'json',
data:{"ticket_id":ticketID},
success:function(response){
console.log(response);
},
error:function(){
alert('Error');
}
});
});
</script>

You should change your validator. It will be like, Please try this:
$this->validate($request, [
'submit' => 'required',
]);
Because your are not sending any info about ticket_view_by_manager_id from view.
Suggestion: may be your code is not well decorated. If you can please
have a look.

Related

How to make filter on table based on option select

I am working on a project (vue + laravel) where i need to fetch all table structure from db. So my table will be dynamically with all field(table header) and record. Now i need to do a filter(search) for each visible column. I have tryed some way but it does not work for me, I just dont know how to pass only column value for each option select value.
Collapse content is the option who will show on filter click and there should display the option for each column
<table class="table table-hover align-middle mb-0" :class="smallTable.smTable">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-for="(header, i) in visibleHeaders" :key="i" scope="col">
{{ header.name }}
</th>
<th v-if="actionHide">ACTION</th>
</tr>
</thead>
<!-- Collapsed content ./ -->
<thead class="collapse" id="collapseFilter">
<tr>
<th></th>
<th v-for="(header, i) in visibleHeaders" :key="i">
<div class="filter-table col-12 d-flex">
<select id="" class="form-select" >
<option v-for="(lead, i) in leads" >{{lead}}</option>
</select>
</div>
</th>
</tr>
</thead>
<!-- ./ Collapse contet -->
<tbody>
<tr v-show="leads.length" v-for="(lead, i) in leads" :key="i">
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="lead.id" />
</td>
<td v-for="(field, j) in lead" :key="j">
<span v-if="field == 'new'" class="badge badge-primary">
{{ field }}
</span>
<span v-else-if="field == 'contract'" class="badge badge-success">
{{ field }}
</span>
<span v-else>
{{ field }}
</span>
</td>
<td >
<button #click="editLead(lead.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-eye"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</table>
data() {
return {
headers: [],
leads: [],
fields: [],
}
}
mounted() {
axios.get('/leads/getfields')
.then(response => {
this.fields = response.data.map(field => {
return {
name: field,
visible: true,
}
});
}
this.getData();
});
}
getData() {
this.headers = this.fields.map(item => {
if (item.visible) {
return item.name;
}
});
axios.post('/leads/getleads?page=' + this.pagination.current_page, {
perPage: this.displayRecord,
fields: this.headers,
})
.then(response => {
this.leads = response.data.data;
this.pagination = response.data.meta
});
},

Laravel vue js 3 need to edit single record from table

I have this following:
<div class="modal-body" >
<form v-for="lead in editleads" id="" class="form-horizontal validate-form">
<input v-model="editl" type="text" class="form-control my-2 py-2" :placeholder="lead">
</form>
</div>
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-for="atr in column">
{{atr}}
</td>
<td>
<button #click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-pen-to-square"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
data() {
reurn {
headers: [],
leads: [],
...
}
},
editLead(id) {
axios.get('/leads/'+id+'/edit')
.then(response => {
this.editleads = response.data.leads
})
},
I want to edit each table record one by one. I mean to edit single record, but the problem is i return an array object from backend and i dont know how to edit each input. If i click now on form all input filled with same value. can someone help with this

Sort and Save table data using jquery sortable

Hi I am trying to set up a table with parent and child data which can be sorted by using the jquery sortable library, I am able to get the position and the respective ids of the data but unable to send the to the controller using jquery
HTML Part:
<tbody class="sort">
#foreach($menus as $menu)
<tr id = "{{ $menu->id }}" class="parent">
<td>{{$menu->name}}</td>
<td>{{ $menu->link }}</td>
#if($menu->sub == 1)
<td>Active</td>
#else
<td>In-Active</td>
#endif
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$menu->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
#if(count(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get())>0)
#foreach(App\Menu::where('parent_id',$menu->id)->orderBy('position','asc')->get() as $child)
<tr id="{{ $child->id }}">
<td>~{{$child->name}}</td>
<td>{{ $child->link }}</td>
<td></td>
<td class="text-right" >
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="{{$child->id}}" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
#endforeach
#endif
</tr>
#endforeach
</tbody>
Jquery part:
$(document).ready(function(){
$('.sort').sortable({
stop:function(event, ui){
var parameter = new Array();
var position = new Array();
$('.sort>tr').each(function(){
parameter.push($(this).attr("id"));
});
$(this).children().each(function(index) {
position.push(index + 1);
});
$.ajax({
url:"{{ route('menu.savePosition') }}",
method:"POST",
data:{"id":parameter,"position":position},
success:function(response){
console.log(response);
},
error:function(xhr,response){
console.log(xhr.status);
}
});
},
}).disableSelection();
});
Controller Part:
public function SavePosition(Request $req){
$position = ($req->all());
return $req->all();
// foreach($file as $pos){
// $id = $pos[1];
// $position = $pos[0];
// $menu = Menu::findOrFail($id);
// $menu->position = $position;
// $menu->save();
// }
}
After all this the console looks like the following :
please help me out fixing the issue
any help would be highly appreciated
Thanks in advance
Consider the following example.
$(function() {
$(".sort").sortable({
items: "> tbody > tr",
stop: function(event, ui) {
var parameter = $(this).sortable("toArray");
var position = [];
$.each(parameter, function(index, value) {
position.push(index + 1);
});
console.log(parameter, position);
$.ajax({
url: "{{ route('menu.savePosition') }}",
method: "POST",
data: {
"id": parameter,
"position": position
},
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.log(status, error);
}
});
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<table class="sort" width="340">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th>Status</th>
<td></td>
</tr>
</thead>
<tbody>
<tr id="item-1">
<td>Item 1</td>
<td>Link 1</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-1" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-2">
<td>Item 2</td>
<td>Link 2</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-2" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-3">
<td>Item 3</td>
<td>Link 3</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-3" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-4">
<td>Item 4</td>
<td>Link 4</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-4" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<tr id="item-5">
<td>Item 5</td>
<td>Link 5</td>
<td>Active</td>
<td class="text-right">
<i class="fe-edit-2" ></i>
<button data-toggle="tooltip" data-placement="top" data-id="item-5" title="" data-original-title="Delete" class="delete btn btn-danger ml-1 " type="submit"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
It's not clear why you are sending the position as the Array of items will already be in the order of the items. I did include it just in case you do need it for something else.
It's easier to use the toArray method: https://api.jqueryui.com/sortable/#method-toArray You will also want to properly define the items so that Sortable knows what the items should be.
Try this way.
$('#element').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '/your/url/here'
});
}
});

Laravel Cart not picking up food price

Am building an ordering system for restaurants
When one clicks order here it takes the user to the cart page>this is the link that takes the user to the cart page
<p class="btn-holder"><a href="{{ route('restaurants.cart',$restaurant->id)}}" class="btn btn-primary btn-block text-center" role="button" > Order this</a> </p>
but my cart page isn't displaying the food price.It displays it as 0 yet the price exists.
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:22%" class="text-center">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
<?php $total = 0 ?>
#if(session('cart'))
#foreach(session('cart') as $id => $details)
<?php $total += (int)$details['price'] *(int)$details['quantity'] ?>
<tr>
<td data-th="Product">
<div class="row">
{{-- <div class="col-sm-3 hidden-xs"><img src="{{ $details['photo'] }}" width="100" height="100" class="img-responsive"/></div> --}}
<div class="col-sm-9">
<h4 class="nomargin">{{ $details['name'] }}</h4>
</div>
</div>
</td>
<td data-th="Price">{{(int) $details['price'] }}</td>
<td data-th="Quantity">
<input type="number" value="{{ $details['quantity'] }}" class="form-control quantity" />
</td>
<td data-th="Subtotal" class="text-center">{{(int) $details['price'] *(int) $details['quantity'] }}</td>
<td class="actions" data-th="">
<button class="btn btn-info btn-sm update-cart" data-id="{{ $id }}"><i class="fa fa-refresh"></i></button>
<button class="btn btn-danger btn-sm remove-from-cart" data-id="{{ $id }}"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
#endforeach
#endif
</tbody>
<tfoot>
<tr class="visible-xs">
<td class="text-center"><strong>Total {{ $total }}</strong></td>
</tr>
<tr>
<td><i class="fa fa-angle-left"></i> Continue Shopping</td>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center"><strong>Total ${{ $total }}</strong></td>
</tr>
</tfoot>
</table>
#endsection
This is the Foods controller and function addToCart which adds items to cart
public function addToCart($id){
$food = Food::find($id);
if(!$food) {
abort(404);
}
$cart = session()->get('cart');
// if cart is empty then this the first product
if(!$cart) {
$cart = [
$id => [
"name" => $food->food_item,
"quantity" => 1,
"price" => $food->price,
]
];
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product added to cart successfully!');
}
// if cart not empty then check if this product exist then increment quantity
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product added to cart successfully!');
}
// if item not exist in cart then add to cart with quantity = 1
$cart[$id] = [
"name" => $food->food_item,
"quantity" => 1,
"price" => $food->price,
];
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product added to cart successfully!');
}
}

How to auto-populate form fields using vue and laravel

I'm developing a web application where I want to populate some field if I type computer_number I want to populate staff_old_name field that will select from staffs table.
This is what I've tried:
Template
<div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Computer Number</th>
<th>Old Name</th>
<th>New Name</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(staff, index) in staffs">
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.computer_number"/></span>
<span v-else>{{staff.computer_number}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.old_name"/></span>
<span v-else>{{staff.old_name}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.new_name"/></span>
<span v-else>{{staff.new_name}}</span>
</td>
<td>
<span v-if="staff.editmode"><input class="form-control" v-model="staff.remarks"/></span>
<span v-else>{{staff.remarks}}</span>
</td>
<td>
<span v-if="!staff.editmode"><button class="btn btn-info" type="button" #click="edit(staff)">Edit</button></span>
<span v-else><button class="btn btn-success" type="button" #click="save(staff)">Save</button></span>
<span><button type="button" class="btn btn-danger" #click="remove(index)"><i class="fa fa-trash"></i></button></span>
</td>
</tr>
</tbody>
</table>
<div class="box-footer">
<button class="btn btn-info" type="button" #click="cloneLast">Add Row</button>
</div>
</div>
Script
export default {
data() {
return {
staffs: [],
data_results: []
}
},
computed:{
autoComplete(){
this.data_results = [];
if(this.computer_number.length > 2){
axios.get('/api/staffs/autocomplete',{params: {computer_number: this.computer_number}}).then(response => {
console.log(response);
this.data_results = response.data;
});
}
}
},
methods: {
edit :function(obj){
this.$set(obj, 'editmode', true);
},
save : function(obj){
this.$set(obj, 'editmode', false);
},
remove: function(obj){
this.staffs.splice(obj,1);
},
cloneLast:function(obj){
//var lastObj = this.staffs[this.staffs.length-1];
//lastObj = JSON.parse(JSON.stringify(lastObj));
obj.editmode = true;
this.staffs.push(obj);
},
},
created() {
axios.get('/staff-names')
.then(response => this.staffs = response.data);
},
}
when I type the computer number I want the staff_old_name field populated base on staff name which is stored in staffs table.

Resources