I have made a simple Datatable with search input,
Student.js
Vue.component('student-list',{
props: ['students'],
template:`
<div class="table-responsive">
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<tbody>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>
`,
computed:
{
searchResults: function(student){
var self = this;
return this.students.filter(
function(student){
if(this.searchQuery == '' || this.searchQuery == null) { return true; }
console.log(this.searchQuery);
return (student.toString().indexOf(this.searchQuery) != -1);
}
);
}
},
// v-if="searchResults(student)"
});
Vue.component('student',{
props: ['student'],
template:`
<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<i class="md-phone"></i>
<i class="ion-woman"></i>
<i class="ion-man"></i>
<i class="ion-android-settings"></i>
</td>
<td>
{{ student.address }}
</td>
<td>
{{ student.totalTopay }}
</td>
<td>
{{ student.lessonsTaken }}
</td>
<td>
{{ student.cancelCount }}
</td>
<td>
{{ student.phone }}
</td>
<td>
{{ student.momPhone }}
</td>
<td>
{{ student.dadPhone }}
</td>
<td>
{{ student.email }}
</td>
</tr>
`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
HTML
....
<div id="content-page">
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
....
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{ asset('js/students.js') }}"></script>
...
Now, for some reason whenever I leave the search blank it works as needed, but when I change the input field by typing in the text box(which his v-model is attached to the searchQuery variable), nothing changes, and when I call it (this.searchQuery) on the Dev Tools console, it says undefined. What am I missing?
Thanks in advance everyone!
I've edited your code a little bit to make it work and removed some lines of code, because I don't want to recreate the whole student object.
I passed the search-query as prop and added <student-list /> to your template.
In your filter function I replaced toString with JSON.stringify, because student is an object and toString prints out [object Object].
Also, I changed the props object and added their types.
And one last tiny error:
Interpolation inside attributes has been deprecated. Use v-bind or the
colon shorthand instead.
Don't use href="tel:{{ student.phone }}" use something like this instead :href="'tel:' + student.phone".
Vue.component('student-list',{
props: {
students: {
type: Array
},
searchQuery: {
type: String
}
},
template:`<div class="table-responsive">
searchQuery: {{searchQuery}}
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>`,
computed: {
searchResults() {
return this.students.filter(student => JSON.stringify(student).indexOf(this.searchQuery) != -1);
}
},
});
Vue.component('student',{
props: {
student: {
type: Object
}
},
template:`<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<a :href="'tel:' + student.phone" title="התקשר" class="table-action-btn">tel-icon</a>
</td>
</tr>`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="content-page">
<student-list :search-query="searchQuery" :students="[{
id: 1,
name: 'Peter',
lname: 'Parker',
phone: 12345
},{
id: 2,
name: 'Bat',
lname: 'Man',
phone: 1234
}]"></student-list>
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
</body>
</html>
And my second solution
Add this to your computed:
computed: {
searchQuery() {
return this.$parent.searchQuery || '';
},
...
}
...
You access the parent of student-list, but I think this is not a nice way, because you can't see from where do you get this data.
Hope this will help you a little bit.
Related
I'm a beginner in Laravel 7. I am trying to create a checkout form when purchasing items. The problem is whenever I try to delete the first item the 'The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST.' shows up. However, I am able to delete the following items under it that I put into the checkout form.
This is my CheckoutController
public function destroy($id)
{
Temp_order::where('id',$id)->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}
And this is the code for the table
<tbody>
#forelse ($order as $item)
<tr>
<td id="item_code">{{ $item->item_code }}</td>
<td class="cart_product_img" id="image">
<img src="" alt="Unavailable" style="width: 70px; height:70px"></img>
</td>
<td id="item_name">
{{ $item->item_name }}
</td>
<td id="price">
₱ {{ number_format($item->price, 2) }}
</td>
<td class="qty" id="qty">
<div class="qty-btn d-flex">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="300" name="quantity" value="{{ $item->quantity }}">
</div>
</div>
</td>
<td id="subtotal">
₱ {{ number_format($item->subtotal, 2) }}
</td>
<td>
<form action="{{ route('checkout.destroy', $item->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Remove</button>
</form>
</td>
</tr>
#empty
<tr>
<td>
<p> NO ITEMS IN CART </p>
</td>
</tr>
#endforelse
</tbody>
And this is my route
Route::get('/', function () {
return view('auth.login');
});
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
Route::resource('ordering', 'OrderingController')->middleware('auth');
Route::resource('inventory', 'InventoryController')->middleware('auth');
Route::resource('checkout', 'CheckoutController')->middleware('auth');
Can you help me masters?
Try to update CheckoutController
public function destroy(Temp_order $item)
{
$item->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}
My goal is to use react front end to setup a stripe checkout using node. I mapped the apiId using the key prop to iterate over all the items in my list. But there is an integration warning inside the console and I'm not sure why. I've added the js.stripe script src into my html file so I don't understand why an API call is not being made.
function checkout() {
stripe.redirectToCheckout({
items: items.map(item => ({
quantity: item.quantity,
price: item.apiId
})),
successUrl: "https://www.website.com/success",
cancelUrl: "https://www.website.com/canceled",
})
}
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Quanity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{items.map((item) => (
<tr key={item.apiId}>
<td>{item.name}</td>
<td>
<img
src={`/images/${item.apiId}.jpg`}
alt={item.name}
width={180}
/>
</td>
<td>{item.quantity}</td>
<td>{formatPrice(item.price)}</td>
</tr>
))}
<tr>
<td style={{ textAlign: "right" }} colSpan={3}>
Total:
</td>
<td>{formatPrice(totalPrice(items))}</td>
</tr>
<tr>
<td style={{ textAlign: "right" }} colSpan={4}>
<button onClick={checkout}>Complete checkout</button>
</td>
</tr>
</tbody>
</table>
</div>
)
}
The items field only accepts an array of SKU/Plans and a quantity. If you're using Prices you want to use lineItems: https://stripe.com/docs/js/checkout/redirect_to_checkout#stripe_checkout_redirect_to_checkout-options-lineItems
I have a little problem with my Thesis project.
I have a mongodb database with abour 400k entries styled like this:(i've translated the variables so if theres any typo, sorry);
var mongoose = require("mongoose");
var work_schema = new mongoose.Schema({
worktype: String,
ordernumber: String,
art_code: String,
qta: String,
number_of_operatos: String,
1_op_code: String,
2_op_code: String,
3_op_code: String,
4_op_code: String,
phase: String,
notes: String,
continued: String, //just a flag
date_start: String, // DD-MM-YYYY
date_end: String, // DD-MM-YYYY
time_start: String, //HH:MM:SS
time_end: String, //HH:MM:SS
datainiziopart: String, //this is the date parsed like this YYYYMMDD i needed it for another purpose
datafinepart: String, //this is the date parsed like this YYYYMMDD i needed it for another purpose
cronsec: String,
cronsec1: String,
cronsec2: String,
cronsec3: String,
cronsec4: String,
cronsec5: String,
cronsec6: String,
cronsec7: String,
operationtimesec: String,
designtimesec: String,
totalecausalisec: String,
ke: String,
author: {
id: {
type: mongoose.Schema.Types.ObjectId,
ref: "User"
},
username: String,
codicereparto: {
id: {
type: mongoose.Schema.Types.ObjectId,
ref: "Reparti"
},
nomereparto: String,
descrizionereparto: String
}
}
});
module.exports = mongoose.model("Work", work_schema);
As you can see the schema is not small at all, and having more than 400k entries, i need to query them when exporting/showing.
I used the limit function to show the latest entries.
I want to create a Page with a datepicker to query the data, or using the
date_start: String, // DD-MM-YYYY
or using the
datainiziopart // YYYYMMDD like <>=
Can you help me write the nodejs code to render a page with the result?
I use express if that can help.
i tried to do this
router.get("/risultati", function(req, res) {
Request.getAllRequestListingsCb(function (err, docs){
res.render('pannello/risultati', { rL: docs });
});
});
router.post("/ricercautente", function(req, res) {
var data = req.body.filtro;
var datadivisa = data.split(' - ');
var datestart= moment(datadivisa[0], 'DD-MM-YYYY').format('DD-MM-YYYY');
var dateend= moment(datadivisa[1], 'DD-MM-YYYY').format('DD-MM-YYYY');
//res.redirect("/pannello/utentetutti");
module.exports.getAllRequestListings = function (callback) {
var query = {"datainizio": {"$gte": new Date(datainizio), "$lt": new Date(datafine)}};
Lavori.find(query, callback);
};
res.redirect('pannello/risultati');
});
<div class="" align=center>
<form action="/ricercautente" method="post">
<input type="text" name="filtro" id="filtro" />
<button class="pure-button pure-button-warning" name="" id="" type="submit">Submit</button>
</form>
</div
and on another page
<tbody>
<% lavoritrovati.forEach(function(lavoro){ %>
<tr>
<td> <%=lavoro.author.codicereparto.nomereparto%> </td>
<td> <%=lavoro.tipodilavoro%> </td>
<td> <%=lavoro.ordineproduzione %> </td>
<td> <%=lavoro.codicearticolo %> </td>
<td> <%=lavoro.quantita %> </td>
<td> <%=lavoro.noperatori %> </td>
<td> <%=lavoro.codoperatori%> </td>
<td> <%=lavoro.codoperatori2%> </td>
<td> <%=lavoro.codoperatori3%> </td>
<td> <%=lavoro.codoperatori4%> </td>
<td> <%=lavoro.fase %> </td>
<td> <%=lavoro.note %> </td>
<td> <%=lavoro.datainizio %> </td>
<td> <%=lavoro.timestart %> </td>
<td> <%=lavoro.datafine %> </td>
<td> <%=lavoro.timeend %> </td>
<td> <%=lavoro.continuato %> </td>
<td> <%=lavoro.cronsec %> </td>
<td> <%=lavoro.cronsec1 %> </td>
<td> <%=lavoro.cronsec2 %> </td>
<td> <%=lavoro.cronsec3 %> </td>
<td> <%=lavoro.cronsec4 %> </td>
<td> <%=lavoro.cronsec5 %> </td>
<td> <%=lavoro.cronsec6 %> </td>
<td> <%=lavoro.cronsec7 %> </td>
<td> <%=lavoro.designtimesec %> </td>
<td> <%=lavoro.operationtimesec %> </td>
<td> <%=lavoro.ke %> </td>
<% }); %>
Here is my module.
module.exports = function (requestUser) {
let content = `
<div id="cpl">
<table id="currentpatientslists">
</table>
</div>
<div id="rp">
<h1>Requested Patients</h1>
</div>
<hr>
<div id="note" >Currently no patients</div>
<div id="rpl">
<table id="requestedpatientslists">
<tr>
<td width="30%"></td>
<td width="30%" class="right"><button>Accept</button></td>
<td width="30%" class="left"><button>Reject</button></td>
</tr>
</table>
</div>`;
return render(content);
}
In the requestedpatientslists table , I want to loop the data in the table row coming from requestUser which is an array. I want to loop it until requestUser.length. How can I do that?
You just need to loop over the users and create the rows for them first
module.exports = function(requestUser) {
// I'm guessing that the user has normal properties like name, etc?
const tableRows = requestUser.map(
user => `
<tr>
<td width="30%">${user.name}</td>
<td width="30%" class="right"><button>Accept</button></td>
<td width="30%" class="left"><button>Reject</button></td>
</tr>
`,
);
const content = `
<div id="cpl">
<table id="currentpatientslists">
</table>
</div>
<div id="rp">
<h1>Requested Patients</h1>
</div>
<hr>
<div id="note" >Currently no patients</div>
<div id="rpl">
<table id="requestedpatientslists">
${tableRows.join('\n')}
</table>
</div>`;
return render(content);
};
I'm trying to get Pagination working in Laravel. I've not used pagination before so am trying to use some examples from the docs and google results. I'm wondering if I need to turn 'pagination' on somewhere in config.
Here's my simple working controller:
public function get_index() {
$locations = Location::all();
return View::make('location.index')->with('locations', $locations)->render();
}
When I try and add pagination like this it breaks:
public function get_index() {
$locations = Location::paginate(5);
return View::make('location.index')->with('locations', $locations)->render();
}
..and I get the error:
Unhandled Exception
Message:
Error rendering view: [location.index]
Trying to get property of non-object
Here's my location.index view:
#layout('layouts.blank')
#section('content')
<div class="row">
<div class="twelve columns">
<div role="main" id="content">
<h3>Locations - All</h3>
#if($locations)
<table class="twelve">
<thead>
<tr>
<th style="text-align: left;">Address</th>
<th>Area</th>
<th>Region</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
#foreach($locations as $location)
<tbody>
<tr>
<td style="text-align: left;">{{ $location->company,', ',$location->add_name,', ',$location->add_city }}</td>
<td> – </td>
<td> – </td>
<td>{{ HTML::link('location/update/'.$location->id, '',array('class'=>"foundicon-edit updateicon")) }}</td>
<td>{{ HTML::link('location/delete/'.$location->id, '',array('class'=>"foundicon-remove warnicon")) }}</td>
</tr>
</tbody>
#endforeach
</table>
#else
Looks like we haven't added any locations, yet!
#endif
<p>{{ HTML::link('location/create', 'Create a location', array('class'=>"small radius button")) }}</p>
</div>
</div>
</div>
#endsection
I hadn't read deeply enough into the subject. It's now working and here's what I had to change in the view:
//from:
#foreach($locations as $location)
//to:
#foreach($locations->results as $location)
That returned just 5 results. Then to add links to the footer of my table I added this HTML/Blade:
<tfoot>
<tr>
<td colspan="5"> {{ $locations->links() }} </td>
</tr>
</tfoot>
Hope someone else benefits as I didn't find this terribly clear in the docs.