mercredi 10 avril 2019

How can 2 properties be in sync?

I am trying to create a webApp that mimics justeat funtionalities. In one of the products you can select the quantity on the ingredients. After sending the product to the ordini.component(order component) from crea-hamburger.component, i am trying to reset the product properties in to default. But somehow it changes the values that i have sent and saved in an object of ordini.component

object property in crea-hamburger/crea-hamburger.component:

prodotto: Prodotto = {
        id: undefined,
        nome: undefined,
        prezzo: this.prezzoHamburger,
        priorita: 1,
        isMenu: false,
        showOpzioni: false,
        opzioni: []        
    }  

Handling the quantity of products options

//lista ingredienti nella quale vengono salvate le opzioni
let ingrediente = this.prodotto.opzioni.find(opzione => opzione.id == objIngrediente.id); 
//L'indice dell'ingrediente nella lista originale
let indexIngrediente = this.creaHamburgerService.getIndex(objIngrediente.id);

 if(ingrediente == undefined || ingrediente == null){
                this.prodotto.opzioni.push({
                id: objIngrediente.id,
                nomeOpzione: objIngrediente.nome,
                opzioneSelezionata: undefined,
                priorita: 1,
                prezzo: objIngrediente.prezzo,
                quantita: objIngrediente.quantita + 1
                });            
//Aggiorno anche la lista che viene utilizzata per mostrare i dati sulla page
this.listaOpzioniSelezionate[indexIngrediente].quantita = objIngrediente.quantita + 1;
this.listaOpzioniSelezionate[indexIngrediente].prezzo = objIngrediente.prezzo;

properties classes in shared/ordini.service

export class Ordine implements IOrdine {
    prodotti?: Prodotto[];
    constructor(){
        this.prodotti = [];
    }
    id: number;
    totale: number;
    nomeCliente: string;
    consegnaDomicilio: boolean;
    citta: string;
    cap: number;
    indirizzo: string;
    citofono: string;
    internoScala?: string;
    numeroTelefono: number;
    data: Date;
    orario: string;
    note?: string;
    allergie?: boolean;
    noteAllergie?: string;
}
export class Prodotto implements IProdotto{
    id: number;
    nome: string;
    prezzo: number;
    priorita: number;    
    opzioni: Opzioni[];
    isMenu : boolean;
    showOpzioni: boolean;
    constructor(){
        this.opzioni = [];
    }
}
export class Opzioni implements IOpzioni{
    id: number;
    nomeOpzione: string;
    opzioneSelezionata?: string;
    priorita:number;
    prezzo: number;
    quantita?:number;
}

Sending product to ordini.service (order service) and trying to reset the object product

aggiornaOrdine(value){  
        this.calcolaPrezzoTot();
        this.prodotto.prezzo = this.prezzoTotOpzioni + this.prezzoHamburger;
        this.prodotto.nome = value.tipoHamburger;
        console.log(value.tipoHamburger)
        if(this.ordine.inserisciProdotto(this.prodotto)){ //inserisco il prodotto chiamando il servizio ordine
            this.toastr.success("Proddotto aggiunto correttamente");
            console.log(this.prodotto);

            setTimeout(() => {
                this.creaForm.reset();
                this.reimpostaOggettoProdotto();                
            }, 200);
        }
        else
            this.toastr.error("Qualcosa è andato storto, contattare l'amministratore");
    }


reimpostaOggettoProdotto(){
     this.prodotto.nome = undefined;
     this.prodotto.prezzo = this.prezzoHamburger;
     this.prodotto.opzioni = [];
     this.listaOpzioniSelezionate = listOpzioniPulita;
}

Ordini.service to receive product information and send it to ordini.component to display

export class OrdineService{
    ordine: Ordine;
    private ordineListProdotti;
    ordineListAggiornato; 
    private prezzoTotale;
    prezzoTotaleAggiornato;

    constructor(){
        this.ordine = new Ordine();
        this.ordineListProdotti = new BehaviorSubject(this.ordine.prodotti);
        this.ordineListAggiornato = this.ordineListProdotti.asObservable(); //VARIABILE UTILIZZATA DAI COMPONENTI PER INVIARE/RICEVERE DATI
        this.prezzoTotale = new BehaviorSubject<number>(this.ordine.totale);
        this.prezzoTotaleAggiornato = this.prezzoTotale.asObservable(); //VARIABILE UTILIZZATA DAI COMPONENTI PER INVIARE/RICEVERE DATI
    }

    /**
     * Inserisce il prodotto nell'oggetto Ordine
     * @param ObjProdotto 
     */
    inserisciProdotto(prodotto: Prodotto){
        let res: boolean = false;
        try {
            const nextId = this.ordine.prodotti.length;            
            prodotto.id = nextId;
            this.ordine.prodotti.push(prodotto);
            res = true;
        } 
        catch (error) {
            console.log(error.message);
            res = false;
        }
        //AGGIORNO LA LISTA ORDINE UTILIZZATA DALL'ORDINE COMPONENT
        this.ordineListProdotti.next(this.ordine.prodotti);
        this.calcoloPrezzoTotale();
        return res;
    }

}

the entire code is here if anyone couldn't understand from the shared code https://github.com/SDGItalySrl/Burger2Trip

Without resetting the object product everything show correctly (i need to reset everything to be able to send the next product):

https://drive.google.com/file/d/1-nk901AQcT9P-1KSifxgZODiXQiqgpRm/view?usp=sharing

After using reimpostaOggettoProdotto() function:

https://drive.google.com/open?id=1DGxbQYYrqoUx-HVgxVG3qW3fD0oIBPRm

Aucun commentaire:

Enregistrer un commentaire