Meteor: record in db updating, but data not changing on screen - mongodb

Here's a simplified version of what I have in one of my templates:
{{#each dataRecord}}
{{#if editingNow}}
<tr class="dataRow">
<td><button class="updateRecord" id="{{this._id}}">SAV</button></td>
<td><input type="text" id="{{this._id}}" value="{{this.f}}"></td></td>
</tr>
{{else}}
<tr class="dataRow">
<td><button class="edit" id="{{this._id}}">EDIT</button></td>
<td>{{this.f}}</td>
<td><button class="deleteRecord" id="{{this._id}}">DEL</button> </td>
</tr>
{{/if}}
{{/each}}
editingNow returns the value of boolean session variable which starts out as false. So when the page loads, the user sees the value of the 'f' field for each record and the EDIT button. The EDIT button flips the session variable to true and then the data is shown using an input element. The user can edit the data and click the button, which is now a SAVE button. That button updates the record using the _id and flips the session variable back to false.
The works as far as editing the data goes -- the record is definitely getting updated. I can check the value in the console and see that it has been changed. But the data that gets displayed in the table reverts back to the original value. I can see the change displayed in that field very briefly and then it flips back. Even weirder, if I click the EDIT button again, the table still displays the old value. The only way to see the updated data in that field is to restart the app.
This problem never occurred when I was using my local mongo db or when I was linking to my database on meteor.com. This has only started happening since I moved my app to modulus.io. Any ideas?
UPDATE
Although I could not figure out what was causing the reactive update problem in the template, with Ethaan's help, I was able to get a better understanding of the issue and find a work-around, so I've accepted the answer and hopefully we will get to the bottom of this eventually.

Seems like you have some allow/deny problems maybe?
Try with
Collection.allow({
insert:function(){return true;},
remove:function(){return true;},
update:function(){return true;},
})
Or check the connection with the database is succefull, go to the admin panel on modulus
Option 2
Clean the database and make a dummy insert on the server side.
First on the meteor shell run meteor reset.
OR If you have the application is on modulus.io use the mongo shell, and use this piece of code.
db.getCollectionNames().forEach(function(name) {
if (name.indexOf('system.') === -1) {
db.getCollection(name).drop();
}
})
Now when you are sure the database is empty, put this on the server side.
//Server Code.
Meteor.startup(function(){
if(Collection.find().count() == 0){
Collection.insert({serverInsert:"test from server"},function(err,result){
if(!err){
console.log("insert succefull")
}
})
}
})

Related

How to create a functional Search Bar in Ionic 4?

I'm currently developing a small Ionic 4 project for college that uses Google Firebase to save and store data, which will be used by the nursing course / class to make things easier for them when it comes to saving patients' data and test details.
In the page that shows all registered patients, I have an ion-searchbar which will be used to filter the patients by name and a ng-container with a *ngFor that pulls all registered patients from the database and puts them into ion-cards.
<ion-searchbar placeholder="Search..." expand="full" color="abwb" [(ngModel)]="searchQuery" (ionChange)="search()"></ion-searchbar>
<ng-container *ngFor="let patient of dBase">
<ion-card color="abwb">
<ion-card-header style="font-weight: bold">{{patient.name}}</ion-card-header>
<ion-card-content>
<ion-button [routerLink]="['/pat-prf', patient.id]" color="bwab">PROFILE<ion-icon name="person" slot="start"></ion-icon></ion-button>
<ion-button [routerLink]="['/pat-tst', patient.id]" color="bwab">TESTS<ion-icon name="list-box" slot="start"></ion-icon></ion-button>
</ion-card-content>
</ion-card>
</ng-container>
I managed to get the value from what's being typed into the search field to be displayed via a console.log() action, but I have no idea on how to make it actually go and search the database for the specified names OR to make the ng-container only show the cards with names that match.
I've been told I had to use a *ngIf to do such a thing, but I honestly got no idea how to use it properly for this kind of thing. Can anyone point me in the right direction?
You have two solutions, a Frontend solution and a Backend solution.
The Frontend solution
The frontend is to filter out the list that you have from the server. This is can use the Array.prototype.filter(). In order to make this work, the backend should return all the patients without pagination (Which can work for small list, but not preferred for big one).
// allPatients will contain all the results from the server and dBase will be filtered
private allPatients = [];
ngOnInit() {
this.httpClient.get(MY_API_TO_GET_PATIENTS)
.subscribe(response => this.allPatients = this.dBase = response )
}
search() {
this.dBase = allPatients.filter(item => item.name.includes(this.searchQuery));
}
The Backend solution
In this solution, we will send a request to the Backend that contains the search query. Then, the Backend will respond with the results that met the search query. Here we will need only to send a new request to the server each time the user enters a new value.
search() {
this.httpClient.get(MY_URL, {params: {searchQuery: this.searchQuery})
.subscribe(response => this.dBase = response )
}

Protractor can't find element by binding

I'm trying to find a element by binding, the problem is that the the element is an toast.
I'm using:
element(by.css('.btn-primary3')).click()
To simulate the click. As a result the toast does appear in the browser during the test.
Then I'm trying to store the element in a variable and test if the text value of the toast is equal to the expected value.
var toast = element(by.binding('toast.toast.title'));
expect(toast.getText()).toEqual('Inloggen mislukt');
But here the error pops up.
Failed: No element found using locator: by.binding("toast.toast.tile")
When I check the toast element in the the Chrome dev tools it shows up like this,
<div data-ng-repeat="toast in activeToasts">
<span data-ng-bind="toast.toast.title" class="ng-binding"> Inloggen mislukt</span>
</div>
I think the problem comes from the fact that that the span containing the binding doesn't exist on the dom when the page is loaded. It gets created when the button is clicked.
If this is the case, wait for the presence of the element after clicking the button:
element(by.css('.btn-primary3')).click();
var toast = element(by.binding('toast.toast.title'));
browser.wait(EC.presenceOf(toast), 5000);
expect(toast.getText()).toEqual('Inloggen mislukt');
May you should try:
<div data-ng-repeat="toast in activeToasts">
<span data-ng-bind="toast.toast.title" class="ng-binding"> Inloggen mislukt</span>
</div>

How do I auto-bind properties in nested repeat-templates in polymer?

I'm trying to make a simple extension of the table element. Where you can click a td, then it becomes editable, and when you edit the data it gets automatically persisted via a REST service.
Here's what I got so far
As you can see, you can click the td's and edit them, but the data does not get persisted to the other side (which is firebase in this case). That's because the data in the td's aren't bound anymore to the data-property from which they came. Can somebody tell me how I can bind them to that property again? Or any other way I can persist the data to the correct row and key?
As far as I know contenteditable change events are not supported by polymer.
You could use the onkeys to update the model manually.
In a on-* handler, you can access the named model instance using: e.target.templateInstance.model.:
<polymer-element name="x-foo">
<template>
<template repeat="{{user in users}}">
<div on-click="{{clickHandler}}">{{user.name}}</div>
</template>
</template>
<script>
Polymer('x-foo', {
clickHandler: function(e, detail, sender) {
console.log(sender.templateInstance.model.user.name);
}
});
</script>
</polymer-element>
Sevesta told me that it could only be done manually, so I gave every td extra data-attributes so I could identify them and then at the stopEditing() function I update the models manually.
See here.

How to run a test case in selenium IDE which requires user to fill in certain details

I am new to Selenium and exploring the IDE currently. I am supposed to automate a web page which requires user to fill in a row of details(It is a row of fields which asks user to fill in name,email ID , to and from dates etc).
I have created a test case and filled in all these details(recorded in IDE). When I play the test case, I observe that the details I have filled appears below the row and the IDE trying to fill in the same values. It errors out telling Name and email ID exist.
Is there anyway I can test this case successfully? I do not have access to the code nor the database.
Sounds like you need to create with new user info each time. I tend to use javascript to create a unique timestamped e-mail...
<tr>
<td>storeEval</td>
<td>'myemail' + Date.now() + '#testdomain.com'</td>
<td>emailAddress</td>
</tr>
<tr>
<td>echo</td>
<td>${emailAddress}</td>
<td></td>
</tr>
Sounds like an issue with duplicate details, the data appearing below the entry field will most likely be just auto complete. But from what you've described I think you'd need to use different data each time.
SeLite is a useful plugin that has an additional extension to it called SeLite Commands, which gives you extra commands which will input random data into fields (if you don't have any specific requirements on the data being input) it can generate random text, or random emails as well.
Both can be downloaded from here

delete item from a dojo.store.jsonrest

I started with this tutorial http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_tree/
after setting up my ServerSide Restfull Service everything is working so far. I made a contextmenu for the tree by:
<ul dojoType="dijit.Menu" id="contextMenu" style="display: none;">
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconDelete" onclick="pages.remove(tn.item.id);">delete page</li>
</ul>
<script type="dojo/connect">
var menu = dijit.byId("contextMenu");
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
tn = dijit.getEnclosingWidget(e.target);
// contrived condition: disable all menu items except the "New Page" item
dojo.forEach(menu.getChildren(), function(child){
if(child.label != "Neue Seite")
{
child.set('disabled', typeof tn.item == 'undefined');
}
});
});
</script>
Now I know on wich node the user made the right click for the contextmenu and delete it with "pages.remove(tn.item.id);" from the Database. To notify the tree I´m overriding the remove function:
remove: function(objectId){
this.onDelete({id: objectId});
return dojo.store.JsonRest.prototype.remove.apply(this, arguments);
}
Everything works as expected but if im now doing some other things with the items in the tree like drag n drop an item to the root i was deleting a child before. The tree isn't showing it correctly anymore. I think the remove method of the store only sends the DELETE query to the Server but don't removes the item from the store. How can i get the array of the items in store to check and maybe to delete items?
The dijit.Tree is a presentation of an underlying dojo.data model, and any changes that you want to make to the tree really need to be done to the underlying data store. See the description here: http://dojotoolkit.org/reference-guide/dijit/Tree.html#dijit-tree So, instead of overriding the remove function, you should instead use the dojo.data API to modify the store, and then rerender the tree to reflect the changes. The best source for looking at the various methods available is in the dojo nightly files. Specifically, the dojo.data files are here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/data/
var item = tree.fetchItemByIdentity("selectedItem"); //find the item you want to remove
store.deleteItem(item); //delete the item from the data store
store.save(); //save the change made to the store