I am trying to make a filter for my table but i see a problem there. Maybe the problem is from table structure couse i fetch all structure as it is on mysql. Does anyone help to make this filter in right way.
The collapse content under comment is the head i display when i want to filter
<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-if="!isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>ACTION</th>
</tr>
</thead>
<!-- Collapsed content ./ -->
<thead class="collapse" id="collapseFilter">
<tr>
<th>#</th>
<th v-for="(header, index) in visibleHeaders" scope="col">
<select id="" class="form-select" >
<option v-for="column in leads">
<div v-for="(atr, key, index) in column">
{{atr}}
</div>
</option>
</select>
</th>
</tr>
</thead>
<!-- ./ Collapse contet -->
<tbody>
<tr v-show="leads.length" v-for="column in leads" >
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-if="!isHidden[index]" v-for="(atr, key, index) in column">
<div v-if="atr == 'new'">
<span class="badge bg-info">{{ atr }}</span>
</div>
<div v-else-if="atr == 'contract'">
<span class="badge bg-success">{{ atr }}</span>
</div>
<div v-else>
<span >{{ atr }}</span>
</div>
</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-eye"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
If i try to loop only v-for="column in lead"
Related
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
I want to add the selected users to a separate table from the list of all users. Similar to the Trello feature, just # and tag their name. I have no idea what to write this function. Any ideas?
This is the form on my interface, and I do not know what to do next in the controller and the form block.
<div class="tab-pane fade" id="group-add-members" role="tabpanel">
<div class="users-manage" data-filter-list="form-group-users">
<div class="mb-3">
<div class="form-group row">
<textarea class="form-control col" name="group-description"
placeholder="Add users by email, each email separated by
commas
e.g: matt#.edu.com, joe#edu.com" rows="3">
</textarea>
</div>
<div class="row align-items-center">
<div class="col">
<button class="btn btn-outline-primary" type="button">
<i class="fad fa-user-plus"></i>Add</button>
<span> or </span>
</div>
<div class="d-none d-md-block col-4 col-lg-5 text-right">
</div>
</div>
<div class="row align-items-center mt-2">
<div class="d-block d-md-none d-sm-block ml-2">
</div>
</div>
</div>
<hr>
<h6>Member info</h6>
<div class="row justify-content-center">
<div class="table-responsive mt-3">
<table class="stripe" id="example" style="width:100%">
<thead>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>\
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-left">My name</td>
<td class="text-left">qnv164#edu.com</td>
<td class="text-left">123456789</td>
<td>
<span class="ic-dark"><i class="fad fa-trash-alt"></i></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- end div table responsive -->
</div>
<!-- end div row -->
</div>
</div>
{{ profile->description ?? 'Not Available' }}
I would like to know how to put a list of the last 5 items in the dashboard using backpack?
I made the table
<div class="table-responsive">
<table class="table table-hover m-0 table-actions-bar">
<thead>
<tr>
<th>
<div class="btn-group dropdown">
<button type="button" class="btn btn-light btn-xs dropdown-toggle waves-effect waves-light"
data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</th>
<th>Titolo Post</th>
<th>Data</th>
<th>Stato</th>
<th>Categria</th>
<th>Azione</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<h5 class="m-0 font-weight-medium"></h5>
</td>
<td>
<i class="mdi mdi-map-marker text-primary"></i>
</td>
<td>
<i class="mdi mdi-clock-outline text-success"></i>
</td>
<td>
<i class="mdi mdi-currency-usd text-warning"></i>
</td>
<td>
<i class="mdi mdi-pencil"></i>
<i class="mdi mdi-close"></i>
</td>
</tr>
</tbody>
</table>
</div>
I made the table inside the jumbotron.blade.php then the function that prints you on screen the last 5 posts I put it here? within the dashboard method?
$recentPost : Article::orderBy('id', 'desc')>limit(5)->get()
any other solution?
This line will get you the last 5 articles.
$articles = Article::orderBy('id', 'desc')->limit(5)->get();
You need to pass it to the view. Ex:
return view('dashboard', ['articles' => $articles]);
And loop the articles on the blade file table. Ex:
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
#foreach($articles as $article)
<tr>
<th scope="row">{{ $article->id }}</th>
<td>{{ $article->title }}</td>
<td>{{ $article->author }}</td>
<td>{{ $article->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>
I'm using larashop admin panel.The datatable shows blank spaces below the datatable..The height blank spaces increases with increase in datatable entries.I don't know what to do..
I tried some css.but none of them helped me.
#extends('templates.admin.layout')
#section('title', 'All Courses')
#section('content')
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Courses <i class="fa fa-plus"></i> Create New </h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-buttons" class="table table-responsive">
<thead>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#if(count($courses))
#foreach ($courses as $row)
<tr>
<td>{{$row->name}}</td>
<td>
<i class="fa fa-pencil" title="Edit"></i>
<i class="fa fa-trash-o" title="Delete"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#stop
The screenshot of the issue is provided..please check...
https://i.stack.imgur.com/avqf5.png
I have question on it for the vue.js I already have a library vue.js in my web application site. Now my problem is when i try to use the Form Input Bindings the v-model this line of code here below
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
what i notice is it says
Use of undefined constant test - assumed 'test'
So i try to see the solution on this one by adding a # beacuase laravel is using blade template. Now when i add a # the error is gone but the render goes this way {{ test }} . Why does it not rendered correctly in my browser?. Can someone help me figured this thing out?. Any help is muchly appreciated. TIA.
Here is my code
#extends('layouts.app')
#section('title', 'Cases New Invoice | RMTG')
#section('content')
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">Cases New Invoice</li>
</ol>
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-file"></i>
New Invoice</div>
<div class="card-body">
<div class="form-group">
<div class="form-row">
<div class="col-md-6" >
<div class="table-responsive">
<form action="" method="post">
{{ csrf_field() }}
<table class="table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th width="150px;">Contact Name: </th>
<td>{{ $opp->contacts }}</td>
</tr>
<tr>
<th>Case Number:</th>
<td>OPP -{{ $opp->code }}</td>
</tr>
<tr>
<th>Case Name:</th>
<td>{{ $opp->tax_year }}</td>
</tr>
<tr>
<th>Item Code:</th>
<td>
<div id="app-item">
<select name="itemCode" class="form-control">
<option v-for="item in items" v-bind:value="item.value">
#{{ item.text }}
</option>
</select>
</div>
</td>
</tr>
<tr>
<th>Notes: </th>
<td>
<input type="text" name="notes" class="form-control" />
</td>
</tr>
<tr>
<th>Amount: </th>
<td><input v-model="test" type="text" name="amount" class="form-control" required />
</td>
</tr>
<tr>
<th>VAT 20% Amt: </th>
<td>
<input type="text" name="vatAmount" class="form-control" />
</td>
</tr>
<tr>
<th>Total Amount: </th>
<td>
<input type="text" name="totalAmount" class="form-control" />
</td>
</tr>
</thead>
</table>
<div class="pull-right">
<button type="submit" class="btn btn-success">
<i class="fa fa-save" aria-hidden="true" style="font-size:24px"></i> Save
</button>
</div>
</form>
</div>
</div>
<div class="col-md-6" >
<h3>Amount Due: £ #{{ test }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//Item code
new Vue({
el: '#app-item',
data: {
items:[
{ text:'Tax Returns', value: 'Tax Returns' },
{ text:'UTR Filing', value: 'UTR Filing'}
]
}
})
</script>
#endsection