I have a page: customers, where I have a list of customers.
There I have a button to edit the informations'customers.
When I click on this edit button I open a modal in another page: CustomerDetail.
So clicking in editing button I can modify the data in the modal, and when I save date I have a problem. Basically the info in the page customers are not update until I refresh the page.
So in my customerDetail.page.ts, when I click on save:
onUpdateCustomer(customer){
//...code...
updateCustomer.pipe(untilDestroyed(this)).subscribe(
(data) => {
this.loading = false;
this.showingUpdateMessage = true
this.goToCustomers();
},
(error) => {
console.log("error - update customer ", error);
}
);
}
I have tried using goToCustomers but it doesn't work properly
goToCustomers(){
this.router.navigate(["/customers"])
}
I Would not use window.location.reload() but I don't know how to do to have updated data without reload the page.
Imagine to have a page with a table (customers page), when click on edit button I call the other page CustomerDetail as:
openCreateCustomerPage() {
this.router.navigate(["/customerDetails"], {
queryParams: { customerCreate: true },
});
So I open the modal.
Related
I am navigating to this website https://www.twitch.tv/ and to register a new user.
I am performing those steps:
navigating to the page.
clicking on sign up button
moving to popup and clicking on log in
then a sign up pop up window comes up.
I am trying to get this window but my application does not recognize the page and I am getting an error. please mind the image attached:
this is my code:
describe('RegisterTwitchTv', function() {
it('Register New User', function() {
cy.visit('')
cy.title().should('eq', 'Twitch')
cy.get('button[data-a-target="signup-button"]').click()
// cy.on('window:confirm', ($alertElement) => {
// expect($alertElement).to.equal('Log in')
// }).click
cy.contains('Log in').click()
cy.window().then((win) => {
cy.get('button[class~="tw-pd-x-1"]').click()
})
})
})
but my code does not recognize the new window which is the one I want to handle.
Unfortunately accessing new windows via Cypress is not possible in its current version.
I would be a good practice to test this functionality using two isolated tests:
describe('RegisterTwitchTv', () => {
// Check the popup is opened
it('Register New User popup is opened', () => {
cy.visit('', {
onBeforeLoad(win) {
cy.stub(win, 'open');
}
});
cy.title().should('eq', 'Twitch')
cy.get('button[data-a-target="signup-button"]').click();
cy.contains('Log in').click();
cy.window()
.its('open')
.should('be.called');
});
// Check the login works
it('Register New User2 login', () => {
cy.visit('/login?popup=true');
cy.get('button[class~="tw-pd-x-1"]').click()
cy.get('#signup-username').type('test#test.com');
...
...
});
});
When I press refresh in a page, I want to show this modal:
But I want to prevent the page to reload except if I click the continue button.
This is the code
import dialog from '#catapulthealth/catapult-dialog';
.
.
.
componentDidMount() {
window.addEventListener('beforeunload', this.showModal);
}
showModal() {
return (
dialog({
title: 'We are processing your file',
body: 'Importing will continue even if you leave the page',
buttons: {
ok: 'Continue',
},
})
);
}
dialog, comes from a private library. How can I stop reloading the page?
You can use Cookie once you clicked on Button, so when page reloads you have to check whether the cookie is set or not. On the basis of cookie, you can show hide popup. Please check following code reference.
import cookie from "react-cookie";
setCookie() => {
let d = new Date();
d.setTime(d.getTime() + (minutes*60*1000));
cookie.set("onboarded", true, {path: "/", expires: d});
};
I am using star-rating plugin in vue js, and I am using v-model to show the ratings from db. Everything works fine as when user is not logged in and he/she tries to rate it shows an error "login to rate", but the stars dont reset to db value instead it shows the rating of not logged in user. Currently after the error msg I am refreshing the whole page. Is there a simple way to reset the stars instead of refreshing the whole page?
:show-rating="false" #rating-selected="setRating" v-model="rating"
v-bind:star-size="20"
above is the start rating and while clicking it calls a function where I am checking if user is logged in or not with an api call. Thanks in advance.
setRating: function (rating) {
axios.get('/checkuser').then(response => {
this.user = response.data;
if (this.user === "Logout") {
toastr.error('Please login to rate', 'Error', {
positionClass: 'toast-bottom-right'
});
window.location = "/menu/" + this.menu_id;
} else {
// save in to db
}
}).catch(error => {
// TODO: Handle error
});
},
You will have to reset rating object if it's not logged in.
setRating: function (rating) {
axios.get('/checkuser').then(response => {
...
if (this.user === "Logout") {
...
this.rating = 0; <=== reset rating here (in data, not the rating parameter)
}
...
})
...
},
managed to fix it by using "this.load()" after the api call, which refreshes all components. :)
I have a little bit of a problem with the angular navigator 2
I'm in my detail projects page and I have a component that is in my detail page that will show me the next project.
So in my component I recall the same page which is' /projects/id
when I click in the navigation bar it changes the id well but the content does not change and I do not understand why because I make a router. navigate of my page.
my init controller projectDetail
ngOnInit() {
this.nextProjectId = this.activedRoute.snapshot.queryParams.nextProject;
const id = this.activedRoute.snapshot.params.id
this.projectsService.projectsAll().then( (projects) => {
if (projects[this.nextProjectId]) {
this.nextProject = projects[this.nextProjectId];
} else {
this.nextProject = projects[0];
}
});
this.projectsService.projectFind(id).then( project => this.project = project);
}
my function navigate in component nextProject
nextProjectDetail(id, nextProject) {
const next = parseInt(nextProject, 0) + 1
this.router.navigate(['projects/', id], { queryParams: {nextProject: next }}).then(
function(){
console.log('navigate success');
},
function(){
console.log('navigate failure');
}
);
}
I even tried to use this function in the init of detail projects to see when the url changes but it doesn't work.
this.params.subscribe(params => {
console.log("dfsd");
});
there is another way to refresh the same page in a component on the same page?
thanks
I am using Ionic 2.
Page 1 (SearchPage) -> popover -> Page 2 (MapPage) -> Page 1 (SearchPage) (menuToggle not working)
I have a root page (SearchPage):
html
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
ts
presentPopover(event: Event): void {
let popover: Popover = this.popoverController.create(SearchPopOverPage, {
ev: event,
employeeModel: this.employeeModel
});
popover.present();
}
Popover
presentFilterMap(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(MapPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}
But when I try return to the root page (with a parameter), it displays the menu toggle button (3 lines), but when I click it it does not work (i.e. does nothing, where it should display the side menu).
ts (MapPage) file which returns to root:
this.nav.insert(0, SearchPage, {
employeeModel: this.employeeModel
});
If I try popToRoot(options), this works and the menu toggle button is working. However, it does not reload the page with the new parameter.
Any ideas how I should navigate back to the root page with a parameter please?
Thanks
UPDATE:
I have tried the following, but it does not go back to the root:
let options = {
employeeModel: this.employeeModel
};
this.nav.popToRoot(options);
UPDATE:
I have also tried changing the popovers call to the next page, but with little success. Now the back button on the MapPage works, but when I go to the root page, the menuToggle is still not responding to clicks.
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
}).then(() => {
this.viewCtrl.dismiss();
});
}
If I don't dismiss the popover,
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
then when I use the back button on the MapPage back to root, the popover is still there, and the menuToggle works as expected. But if I rather navigate back to the root page (which I need to do) then the popover is not there and the menuToggle is not responsive.
This means the issue is to do with the popover.
import { App } from 'ionic-angular';
constuctor(public app: App) {};
pushSignupPage() {
this.viewCtrl.dismiss().then(() => {
this.app.getRootNav().push(SignupPage);
});
}
this work for me. good luck
SOLUTION: Use events to handle the parameters and pop to root
let data = {
eModel: this.eModel
};
events.publish('employee:update', data);
this.nav.popToRoot();
In your SearchPage constructor:
events.subscribe('employee:update', (data) => {
//do whatever you need to do with your data:
let EModel = data[0].eModel;
});
when you navigate back from map page to search page
use :
this.navCtrl.push(SearchPage, { employeeModel: this.employeeModel });