I have a list of a couple thousand people that has a search and filter functionality. The search box is doing a google like search as you type and there is a drop down to filter by the person's status. If you select the drop down and start typing quickly sometimes the results do not come back in the same order and the last one to return is rendered without the status filter, or without the search.
I would like to reject the previous promise if it is still pending any time a new search is fired. The problem is, the last search is being stored as a PromiseArray, which I can call reject on, but it does not seem to actually reject the promise.
I am using ember 1.5.1 and ember-data 1.0.0.beta.7 on ember-cli 0.0.28
Here is the generated person search controller:
Controller = Em.ArrayController.extend({
lastFetchedPage: 1,
searchTerms: "",
isFreshSearch: false,
statusToFilterBy: null,
statuses: (Em.computed(function() {
return this.get("store").find("status");
})).property(),
statusToFilterByDidChange: (function() {
return this.conductSearch();
}).observes("statusToFilterBy"),
searchTermsDidChange: (function() {
this.haltCurrentSearch();
this.set("searchTermsDirty", true);
return Em.run.debounce(this, this.conductSearch, 750);
}).observes("searchTerms"),
conductSearch: function() {
this.set("lastFetchedPage", 1);
this.set("isFreshSearch", true);
return this.fetchPeople();
},
haltCurrentSearch: function() {
if (this.get("currentSearch.isPending")) {
this.get("currentSearch").reject(new Error("Terms outdated"));
}
},
fetchPeople: function() {
var search;
search = this.get("store").find("person-summary", {
page: this.get("lastFetchedPage"),
terms: this.get("searchTerms"),
status_id: this.get("statusToFilterBy.id")
});
search.then((function(_this) {
return function(personSummaries) {
return _this.displayResults(personSummaries);
};
})(this));
this.set("currentSearch", search);
return this.set("searchTermsDirty", false);
},
displayResults: function(personSummaries) {
if (this.get("isFreshSearch")) {
this.set("isFreshSearch", false);
return this.set("model", personSummaries);
} else {
return personSummaries.forEach((function(_this) {
return function(personSummary) {
return _this.get("model").addRecord(personSummary);
};
})(this));
}
}
bottomVisibleChanged: function(person) {
if (person === this.get("lastPerson")) {
this.incrementProperty("lastFetchedPage");
return this.fetchPeople();
}
},
lastPerson: (Em.computed(function() {
var people;
people = this.get("model.content");
return people[people.length - 1];
})).property("model.#each")
});
Related
I want to add a test for my app which involves taking payment. In my apps local environment it uses a stubbed payment page where you only need to click a button to fail or authorise the payment, in all other environments it shows a form where card details need to be filled in.
I currently have the test setup to check whether or not we need to use the real or stubbed payment in each command.
function isRealPayment(page) {
return !page.api.globals.stubbedPayment;
}
module.exports = {
commands: {
verifyLoaded: function() {
if (isRealPayment(this)) {
return this.waitForElementVisible('#orderSummaryContainer');
}
return this.waitForElementVisible('#stubbedAuthorisedForm');
},
fillInPaymentDetails: function() {
if (isRealPayment(this)) {
this
.setValue('#cardNumber', '4444333322221111')
.setValue('#name', 'John Doe')
.setValue('#expiryMonth', '12')
.setValue('#expiryYear', '25')
.setValue('#securityCode', '123');
}
},
submitPayment: function() {
if (isRealPayment(this)) {
return this.click('#submitButton');
}
return this.click('#stubbedSubmitButton');
}
},
elements: {
orderSummaryContainer: '#orderSummaryDetailsTop',
cardNumber: '#cardNumber',
name: '#cardholderName',
expiryMonth: '#expiryMonth',
expiryYear: '#expiryYear',
securityCode: '#securityCode',
submitButton: '#submitButton',
stubbedAuthorisedForm: '.frm-AUTHORISED',
stubbedSubmitButton: '.frm-AUTHORISED > input[type="submit"]'
}
};
I would prefer it if I were able to define two different page objects, and choose which one to export based on the stubbedPayment global.
e.g
let realPaymentPage = {
commands: {
verifyLoaded: function() {
return this.waitForElementVisible('#orderSummaryContainer');
},
fillInPaymentDetails: function() {
this
.setValue('#cardNumber', '4444333322221111')
.setValue('#name', 'John Doe')
.setValue('#expiryMonth', '12')
.setValue('#expiryYear', '25')
.setValue('#securityCode', '123');
},
submitPayment: function() {
return this.click('#submitButton');
}
},
elements: {
orderSummaryContainer: '#orderSummaryDetailsTop',
cardNumber: '#cardNumber',
name: '#cardholderName',
expiryMonth: '#expiryMonth',
expiryYear: '#expiryYear',
securityCode: '#securityCode',
submitButton: '#submitButton'
}
};
let stubbedPaymentPage = {
commands: {
verifyLoaded: function() {
return this.waitForElementVisible('#authorisedForm');
},
fillInPaymentDetails: function() {
// Do nothing
},
submitPayment: function() {
return this.click('#submitButton');
}
},
elements: {
authorisedForm: '.frm-AUTHORISED',
submitButton: '.frm-AUTHORISED > input[type="submit"]'
}
};
if (browser.globals.stubbedPayment) {
module.exports = stubbedPaymentPage;
} else {
module.exports = realPaymentPage;
}
But I can't find a way to access the global variables when not in a page command. Is this possible? Or is there another way to load a different page object based on the test environment?
Sure you are. example solution:
Firstly lets create Global.js file.
Add path to the file inside nightwatch.json:
"globals_path": "Global.js"
In Global.js define before method (it is executed once before any of test):
var self = module.exports = {
environment: undefined,
before: function (done) {
// parseArgumentsAndGetEnv is function you need to implement on your own to find your env param
self.environment = parseArgumentsAndGetEnv(process.argv);
console.log("Run against: " + self.environment);
done();
}
};
Now in tests you can use this variable:
if (browser.globals.environment == 'Test') {
// do something
} else if (browser.globals.environment == 'Prod') {
// do something else
}
Profile:
_id: Pe0t3K8GG8,
videos: [
{id:'HdaZ8rDAmy', url:'VIDURL', rank: 2},
{id:'22vZ8mj9my', url:'VIDURL2', rank: 0},
{id:'8hyTlk8H^6', url:'VIDURL3', rank: 1},
]
The profile is displayed together with the list of videos. I have a Drag & Drop which updates the videos rank using a Server Method.
1) the database updates correctly on Drop.
2) To sort the videos Array - I declare a helper on the Profile Template and SORT the videos array based on a custom comparison function.
Template.Profile.helpers({
'videosSorted': function(){
let videos = (this.videos);
let videosSorted = videos.sort(function(a, b) {
return parseFloat(a.rank) - parseFloat(b.rank);
});
return videosSorted;
}
});
Problem:
A) In Blaze the {{#each videosSorted}} does not reactively update.
If I F5 refresh then i can see the new order.
I think the issue is because I am providing videosSorted which does not update on changes to the document in the db.
How can I make videosSorted reactive?
Update:
All related code:
Iron Router Controller - I subscribe and set the data context for the layout
ProfileController = RouteController.extend({
subscriptions: function() {
this.subscribe('profile',this.params.slug).wait();
},
data: function () {
//getting the data from the subscribed collection
return Profiles.findOne({'slug':this.params.slug});
},
})
Publication:
Meteor.publish('profile', function (slug) {
const profile = Profiles.find({"slug":slug});
if(profile){
return profile;
}
this.ready();
});
The Profile HTML template:
<template name="Profile">
<ul class="sortlist">
{{#each videosSorted}}
{{> Video}}
{{/each}}
</ul>
</template>
I am using mrt:jquery-ui - sortable function
Template.Profile.onRendered(function () {
thisTemplate = this;
this.$('.sortlist').sortable({
stop: function(e, ui) {
el = ui.item.get(0);
before = ui.item.prev().get(0);
after = ui.item.next().get(0);
if(!before) {
newRank = Blaze.getData(after).rank - 1
} else if(!after) {
newRank = Blaze.getData(before).rank + 1
}
else {
newRank = (Blaze.getData(after).rank +
Blaze.getData(before).rank) / 2
}
let queryData = {
_id: thisTemplate.data._id, //the id of the profile record
videos_objId: Blaze.getData(el).objId, //the id of the sub document to update
new_rank: newRank //the new rank to give it
};
//Update the sub document using a server side call for validation + security
Meteor.call("updateVideoPosition", queryData, function (error, result) {
if(!result){
console.log("Not updated");
}
else{
console.log("successfully updated Individual's Video Position")
}
});
}
})
});
And finally the Meteor method that does the updating
'updateVideoPosition': function (queryData){
let result = Individuals.update(
{_id: queryData._id, 'videos.objId': queryData.videos_objId },
{ $set:{ 'videos.$.rank' : queryData.new_rank } }
)
return result;
}
Note :
As i mentioned - the database updates correctly - and if i have an Incognito window open to the same page - i see the videos reactivly (magically !) switch to the new order.
The schema
const ProfileSchema = new SimpleSchema({
name:{
type: String,
}
videos: {
type: [Object],
optional:true,
},
'videos.$.url':{
type:String,
},
'videos.$.rank':{
type:Number,
decimal:true,
optional:true,
autoform: {
type: "hidden",
}
},
'videos.$.subCollectionName':{
type:String,
optional:true,
autoform: {
type: "hidden",
}
},
'videos.$.objId':{
type:String,
optional:true,
autoform: {
type: "hidden",
}
}
});
I came up with really crude solution, but I don't see other options right now. The simplest solution I can think of is to rerender template manually:
Template.Profile.onRendered(function () {
var self = this;
var renderedListView;
this.autorun(function () {
var data = Template.currentData(); // depend on tmeplate data
//rerender video list manually
if (renderedListView) {
Blaze.remove(renderedListView);
}
if (data) {
renderedListView = Blaze.renderWithData(Template.VideoList, data, self.$('.videos-container')[0]);
}
});
});
Template.VideoList.onRendered(function () {
var tmpl = this;
tmpl.$('.sortlist').sortable({
stop: function (e, ui) {
var el = ui.item.get(0);
var before = ui.item.prev().get(0);
var after = ui.item.next().get(0);
var newRank;
if (!before) {
newRank = Blaze.getData(after).rank - 1
} else if (!after) {
newRank = Blaze.getData(before).rank + 1
}
else {
newRank = (Blaze.getData(after).rank +
Blaze.getData(before).rank) / 2
}
let queryData = {
_id: tmpl.data._id, //the id of the profile record
videos_objId: Blaze.getData(el).objId, //the id of the sub document to update
new_rank: newRank //the new rank to give it
};
//Update the sub document using a server side call for validation + security
Meteor.call("updateVideoPosition", queryData, function (error, result) {
if (!result) {
console.log("Not updated");
}
else {
console.log("successfully updated Individual's Video Position")
}
});
}
});
});
Template.VideoList.helpers({
videosSorted: function () {
return this.videos.sort(function (a, b) {
return a.rank - b.rank;
});
}
});
And HTML:
<template name="Profile">
<div class="videos-container"></div>
</template>
<template name="VideoList">
<ul class="sortlist">
{{#each videosSorted}}
<li>{{url}}</li>
{{/each}}
</ul>
</template>
Reativeness was lost in your case because of JQuery UI Sortable. It doesn't know anything about Meteor's reactiveness and simply blocks template rerendering.
Probably you should consider using something more adopted for Meteor like this (I am not sure it fits your needs).
I want to display the records, but when I test it to display the data on console use record.get(''), it not work . even I tap the static code console.log('some thing'). It also cant display on my console.
The code in my controller:
it near the //-------here it is
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
config: {
refs: {
myTabPanel: '.makemoney #tabfirst',
},
control: {
myTabPanel: {
activate: 'onActivateTabPanel',
activeitemchange: 'onActiveItemChangeTabPanel'
}
}
},
launch: function(){
var products = Ext.getStore('productstore');
products.filterBy(function(record, id){
return record.get('loanname') === 'xixi22';
});
},
onActivateTabPanel: function(newActiveItem, viewport, oldActiveItem, eOpts) {
//test
console.log('hello the activatetabpanel is fire!');
//end test success
var tabs = Ext.getStore('loanliststore');
tabs.each(function(record) {
console.log('hello come on');//---------------------here it is
newActiveItem.add({
title: record.get('loanname')
});
console.log('');
});
},
onActiveItemChangeTabPanel: function(cmp, value, oldValue, eOpts) {
console.log('hello this is the activechangepanel is fire!');
var products = value.getStore();
products.clearFilter(true);
products.filterBy(function(record, id) {
return record.get('loanname') === value.getTitle();
});
}
});
Check by tabs.getCount() if it is greater then 0 then it should work. If not means there is no data populated in your store.
I have some specific problem.
I use MeteorJS and installed yogiben:admin. I tried to build some schema, but I have an error after updating something.
I want to add that I have subpages in page, maybe that's the problem?
That's what I get after adding items to my invoice:
http://s7.postimg.org/l0q52l27v/error.png
As I can see in the picture, the problem is with some modifier and with "After.Update.sum". I use function that use "sum".
In my "server/collections/invoices_item.js"
I have:
InvoicesItem.after.update(function(userId, doc, fieldNames, modifier, options) {
var sum = 0; InvoicesItem.find({ invoiceId: doc.invoiceId }).map(function(item) { sum += item.amount; }); Invoices.update({ _id: doc.invoiceId }, { $set: { totalAmount: sum }});
});
Than I saw that problem could be with "totalAmount:sum". I use Chrome, so I tried "console.log()" to see if the page takes my collection.
And it doesn't.
I use Chrome, so I tried to see what the console will give me. I have something like this: http://s4.postimg.org/rusm4wx9p/fakturka.png
I did sth like that in my code on server side:
Meteor.publish("fakturka", function(invoiceId) {
return Invoices.find({_id:invoiceId,ownerId:this.userId}, {});
});
And did that on client side:
this.InvoicesNewInsertController = RouteController.extend({
template: "InvoicesNew",
yieldTemplates: {
'InvoicesNewInsert': { to: 'InvoicesNewSubcontent'}
},
onBeforeAction: function() {
/*BEFORE_FUNCTION*/
this.next();
},
action: function() {
if(this.isReady()) { this.render(); } else { this.render("InvoicesNew"); this.render("loading", { to: "InvoicesNewSubcontent" });}
/*ACTION_FUNCTION*/
},
isReady: function() {
var subs = [
Meteor.subscribe("invoices_item"),
Meteor.subscribe("invoiceeeee"),
Meteor.subscribe("customers"),
Meteor.subscribe("fakturka", this.params.invoiceId),
Meteor.subscribe("invoices_item_empty_faktura"),
Meteor.subscribe("invoices_itemss_faktura", this.params.invoiceId)
];
var ready = true;
_.each(subs, function(sub) {
if(!sub.ready())
ready = false;
});
return ready;
},
data: function() {
return {
params: this.params || {},
invoices_item: InvoicesItem.find({}, {}),
invoiceeeee: Invoices.find({}, {}),
customers: Customers.find({}, {}),
fakturka: Invoices.findOne({_id:this.params.invoiceId}, {}),
invoices_item_empty_faktura: InvoicesItem.findOne({_id:null}, {}),
invoices_itemss_faktura: InvoicesItem.find({invoiceId:this.params.invoiceId}, {})
};
/*DATA_FUNCTION*/
},
onAfterAction: function() {
}
});
I'm sorry for so much code, but I really want to solve that problem and I want to give so much info as I could. Please, help me to solve my problem.
After removing that code from: both/collections/invoices.js
Schemas={};
Schemas.Invoicess = new SimpleSchema({
invoiceNumber:{
type:Number
},
date_issued:{
type:Date
},
date_due:{
type:Date
},
customerId:{
type:String
},
totalAmount:{
type:String
}
});
Invoices.attachSchema(Schemas.Invoicess);
"fakturka" is visible. After adding that code - "fakturka" in undefined.
Hello again everyone.
EDIT: I want to emphasize that I can find no docs on the solution for this.
I am using a route to perform a search query to my server. The server does all the data logic and such and returns a list of objects that match the keywords given. I am taking those results and feeding them to the model so that I can use the {{#each}} helper to iterate over each result.
The problem I am having is that the model does not want to refresh when the searchText (search input) changes. I've tried several things. I'm not worried about creating too many ajax requests as my server performs the search query in 2ms. Here's what I have now.
App.SearchView = Ember.View.extend({...
EDIT:
Thank you for the answer.
App.SearchView = Ember.View.extend({
didInsertElement: function () {
this._super();
Ember.run.scheduleOnce('afterRender', this, this.focusSearch);
},
focusSearch: function () {
$(".searchInput").focus().val(this.get("controller").get('searchTextI'));
}
});
App.SearchRoute = Ember.Route.extend({
model: function () {
return this.controllerFor('search').processSearch();
}
});
App.SearchController = Ember.ArrayController.extend({
searchTextI: null,
timeoutid: null,
processid: null,
updateSearch: function () {
if(this.get('timeoutid')) {clearTimeout(this.get('timeoutid')); }
var i = this.get('searchTextI');
var sc = this;
clearTimeout(this.get('processid'));
this.controllerFor('index').set('searchText', i); //set the search text on transition
if(i.length < 3) {
this.set('timeoutid', setTimeout(function () {
sc.controllerFor('index').set("transitioningFromSearch", true);
sc.transitionToRoute('index');
}, 1500));
} else {
var self = this;
this.set('processid', setTimeout(function() {
self.processSearch().then(function(result) {
self.set('content', result);
});
}, 1000));
}
}.observes('searchTextI'),
processSearch: function () {
return $.getJSON('http://api.*********/search', { 'token': guestToken, 'search_query': this.get('searchTextI') }).then(function(data) { if(data == "No Results Found.") { return []; } else { return data; } }).fail(function() { return ["ERROR."]; });
}
});
Don't observe anything within a route and don't define any computed properties. Routes are not the place for these. Apart from that, the model doesn't fire because controller is undefined.
One way to achieve what you want:
App.SearchRoute = Ember.Route.extend({
model: function () {
this.controllerFor('search').searchQuery();
}.observes('controller.searchText') //not triggering an ajax request...
});
App.SearchController = Ember.ArrayController.extend({
searchQuery: function() {
return $.getJSON('http://api.**************/search', { 'token': guestToken, 'search_query': t }).fail(function() {
return null; //prevent error substate.
});
}
onSearchTextChange: function() {
var controller = this;
this.searchQuery().then(function(result) {
controller.set('content', result);
});
}.observes('searchText')
});
Putting an observes on the model hook is not going to do anything. You should simply do what you were thinking of doing and say
processSearch: function () {
this.set('content', $.getJSON....);
}