App wiping data from main page, while switching to secondary pages (IONIC 3)

Question

I have the page 'Orders' as main, where it has button to select the customer, and select the products.

When I click 'select client' method selectClient(), send to page 'select-client', where is a list, selecting the client, back to screen 'Orders''.

So far beauty, now comes the problem. I click on the button 'select products' method selectProduct(), mark all that I want in the list, when saved, back to screen 'Orders', but with the screen reset, only with the selected items.

Follows codes:

Orders.:

import { OrdersProvider, Orders } from '../../providers/orders/orders';
import { ClientProvider, Client } from '../../providers/client/client';
import { Storage } from '@ionic/storage';

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';

@IonicPage()
@Component({
selector: 'page-orders',
templateUrl: 'orders.html',
})
export class OrdersPage {

payment:  any[]     = [];
clients:  any[]     = [];
itens:    any[]     = [];
qtdItens: any       = 0;
valTotal: any       = 0;
totalST:  any       = 0;
totalIPI: any       = 0;
shownGroup: string  = null;

nomusu: string;
codven: string;
codigo: string;
razsoc: string;
dateNow: string = new Date().toISOString();

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private ordersProvider: OrdersProvider,
    private clientProvider: ClientProvider,
    public alertCtrl: AlertController,
    private storage: Storage) {
}

ionViewDidLoad() {
    this.getPayment();
    this.getAllClients();

    this.qtdItens = this.navParams.get('totalItens');
    this.valTotal = this.navParams.get('totalValor');
    this.totalST  = this.navParams.get('totalST');
    this.totalIPI = this.navParams.get('totalIPI');
    this.itens    = this.navParams.get('itensList');
    this.codigo   = this.navParams.get('codigo');
    this.razsoc   = this.navParams.get('razsoc');

    if(this.qtdItens == undefined) this.qtdItens = 0;
    if(this.valTotal == undefined) this.valTotal = 0;
    if(this.totalST == undefined) this.totalST = 0;
    if(this.totalIPI == undefined) this.totalIPI = 0;

    this.storage.get('nomusu').then(nomusu => {
        this.storage.get('codven').then(codven => {
            this.nomusu = nomusu;
            this.codven = codven;
        });
    });

    //console.log(this.qtdItens)
}

getPayment() {
    this.ordersProvider.getAll()
    .then((result: any[]) => {
        this.payment = result;
    });
}

getAllClients() {
    this.clientProvider.getAll('')
    .then((result: any[]) => {
        this.clients = result;
    });
}

selectProduct() {
    this.navCtrl.setRoot("SelectProductPage");
}

selectClient() {
    this.navCtrl.setRoot("SelectClientPage");
}

click() {
    this.alertCtrl.create({
        title: 'Pedido salvo!',
        subTitle: '',
        buttons: ['OK']
    }).present();
}

toggleGroup(group) {
    if (this.isGroupShown(group)) {
        this.shownGroup = null;
    } else {
        this.shownGroup = group;
    }
};

isGroupShown(group) {
    return this.shownGroup === group;
};

}

select-product.ts:

import { ProductProvider } from '../../providers/product/product';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Product } from '../../providers/product/product';
//import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@IonicPage()
@Component({
selector: 'page-select-product',
templateUrl: 'select-product.html',
})
export class SelectProductPage {
model: Product;
products: any[]    = [];
searchText: string = null;

totalItens: any = 0;
totalValor: any = 0;
totalST:    any = 0;
totalIPI:   any = 0;
totalDesc:  any = 0;

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private productProvider: ProductProvider,
    public alertCtrl: AlertController)
    {

    this.model = new Product();
}

ionViewDidLoad() {
    //console.log('ionViewDidLoad SelectProductPage');
    this.getAllProducts();
    this.sumQuanti('somar');
}

getAllProducts() {
    this.productProvider.getAll(this.searchText)
    .then((result: any[]) => {
        this.products = result;
    });
}

increment(item) {
    item.CON010 += 1;
}

decrement(item) {
    if(item.CON010 > 0) item.CON010 -= 1;
}

sumQuanti(tipo) {
    var sum = 0;

    this.products.forEach(function(item, index) {

        var quanti = parseInt(item.CON010, 10);
        if(isNaN(quanti)) quanti = 0;

        if(tipo == 'somar') {
            sum += quanti;
        } else {
            sum -= quanti * -1;
        }
    });

    this.totalItens = sum;

    return this.totalItens;
};

valorTotal(tipo) {
    var total = 0;

    this.products.forEach(function(item, index) {

        var quanti = parseInt(item.CON010, 10);
        if(isNaN(quanti)) quanti = 0;

        if(tipo == 'somar') {
            total += item.PRE001 * quanti;
        } else {
            total -= item.PRE001 * quanti * -1;
        }
    });

    this.totalValor = total;

    return this.totalValor;
}

valorST(tipo) {
    var st = 0;

    this.products.forEach(function(item, index) {

        var quanti = parseInt(item.CON010, 10);
        if(isNaN(quanti)) quanti = 0;

        if(tipo == 'somar') {
            st += item.PRE001 * quanti * 1.5;
        } else {
            st += item.PRE001 * quanti * 1.5 * -1;
        }

    });

    this.totalST = st;

    return this.totalST;
}

valorIPI(tipo) {
    var ipi = 0;

    this.products.forEach(function(item, index) {

        var quanti = parseInt(item.CON010, 10);
        if(isNaN(quanti)) quanti = 0;

        if(tipo == 'somar') {
            ipi += item.PRE001 * quanti * 10 / 100;
        } else {
            ipi += item.PRE001 * quanti * 10 / 100 * -1;
        }
    });

    this.totalIPI = ipi;

    return this.totalIPI;
}

filterProducts(ev: any) {
    this.getAllProducts();
}

scanProduct() {
/*    this.barcodeScanner.scan().then(barcodeData => {
        console.log(JSON.stringify(barcodeData))
    }).catch(err => {
        console.log('Error', err);
    });*/
}

saveItens() {
    var itens: any[] = [];

    for (var i = 0; i < this.products.length; i++) {
        var item = this.products[i];

        if(this.products[i].CON010 > 0) {
            itens.push(item);
        }
    }

    if(itens.length > 0) {
        this.navCtrl.push('OrdersPage', {
            totalItens: this.totalItens,
            totalValor: this.totalValor,
            totalST: this.totalST,
            totalIPI: this.totalIPI,
            itensList: itens
        });
    } else {
        this.alertCtrl.create({
            title: 'Nenhum produto foi selecionado!',
            subTitle: 'Por favor verifique!' ,
            buttons: ['OK']
        }).present();
    }

}
}

select-client.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, AlertController } from 'ionic-angular';
import { ClientProvider } from '../../providers/client/client';

@IonicPage()
@Component({
selector: 'page-select-client',
templateUrl: 'select-client.html',
})
export class SelectClientPage {

clients:      any[]  = [];
searchClient: string = null;

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private clientProvider: ClientProvider,
    public alertCtrl: AlertController) {
}


ionViewDidEnter() {
    this.getAllClients();
}

ionViewDidLoad() {

}

getAllClients() {
    this.clientProvider.getAll(this.searchClient)
    .then((result: any[]) => {
        this.clients = result;
    });
}

filterClients(ev: any) {
    this.getAllClients();
}

selectClient(codigo, razsoc) {
    if(codigo != '' && razsoc != '') {
        this.navCtrl.push('OrdersPage', {
            codigo: codigo,
            razsoc: razsoc
        });
    } else {
        this.alertCtrl.create({
            title: 'Nenhum cliente foi selecionado!',
            subTitle: 'Por favor verifique!' ,
            buttons: ['OK']
        }).present();
    }
}
}

Answer 1

When you use setroot() to navigate to the pages SelectProductPage and SelectClientPage, you "lose" the data you had on the page OrdersPage. So that this doesn’t happen, there are some options:

• You can use push() instead of setroot();
• or keep up with setroot(), but pass all parameters in browsing between pages;
• or open pages for selecting products and customers as Modals.