Call tab always go to Call Page

[jordibc]

• Restart tabs state after call selection (go back to Call Page)

Instead of going to CallingPage if it was already there before leaving the tab.

[jordibc]

Tried things like:

-    this.navCtrl.push(CallingPage, {'phoneNumber': this.phoneNumber});
+
+    this.navCtrl.push('CallingPage', {'phoneNumber': this.phoneNumber});
+    this.viewCtrl.dismiss();
+
+//    this.appCtrl.getRootNavs()[0].push(CallingPage, {'phoneNumber': this.phoneNumber});
+//    this.appCtrl.getRootNavs().push('CallingPage', {'phoneNumber': this.phoneNumber});
+//    this.navCtrl.push(CallingPage, {'phoneNumber': this.phoneNumber});
   }

and

this.navCtrl.setRoot(TabsPage);

(and other kinds of root pages), and nothing. There is no simple way I can find that doesn't go through changing the ion-tab component.

[jordibc]

Hey @MurhafSousli , thanks for jumping in.

Sure:

Type a number, press "CALL", then go to another tab ("History", for example), and finally go back to the "Call" tab.

Current behavior: it goes to the CallingPage, that is. the page that shows the rates.
Expected behavior: it goes to the CallPage, that is, the page with the dialer, ready to insert a new number.

[MurhafSousli]

@jordibc How about opening it using ModalController, You can add a custom css class to adjust the dialog size

in call.ts

constructor(public modalCtrl: ModalController) {
}

call() {
    this.modalCtrl.create(
       CallingPage, 
       {phoneNumber: this.phoneNumber},  
       {cssClass: 'calling-dialog'}
    ).present();
}

User won't be able to go to a different tab while calling dialog is opened.

[jordibc]

Thanks for the suggestion. Alas, when I do that this is what I get:

which looks very different than actually going to that page, right?

[MurhafSousli]

@jordibc Sorry for the delay,
Yes after you set cssClass you can override the style easily

e.g. to make a full size dialog

.calling-dialog {
   .modal-wrapper {
       width: 100%;
       height: 100%;
   }
}

If you would like to make calling dialog small (which isn't a bad idea), then <header> should be removed in this case

[jordibc]

There's a problem there, cssClass was not added until 3.1 and we are using 2.3.3, right?

[MurhafSousli]

@jordibc we are using ionic 3, cssClass should work. if you look again at the ModalController Doc
you will see the parameter of the create function

create(component, data, opts)

where the cssClass is in the third parameter opts

ignore the second parameter, it is for passing data to the component which we won't use

So the usage will be

/** Create dialog instance */
const callingDialog = this.modal.create(CallingComponent, null,  { cssClass: 'calling-dialog' });

/** Get user choice once the dialog is dismissed */
callingDialog.onDidDismiss(choice => {
     console.log(choice);
});

/** Open the dialog */
callingDialog.present();

I forgot to mention that calling.ts should not be lazy because it is not a page anymore. now it is just a component that you pass to the ModalController

but call.ts is a page and should be lazy, so I can think about the following structure

src (folder)
  call (folder)
       calling-dialog (folder)
              calling.ts
              calling.html
              calling.scss
       
       call.module.ts
       call.ts
       call.html
       call.scss
       call.service.ts

[jordibc]

I give up. I've tried using the directory structure that you suggest, making it a stand-alone component (not a lazily-loaded IonicPage), putting the cssClass in calling.scss and call.scss, and nothing, nothing ever works beyond having the dialog appear as a small box as I put in the picture before.

I'd like to defer this to someone that knows instead of keep on trying randomly failing stuff due to my incompetence :)

[adrianq]

Ok, no worries @jordibc :) I have unassigned it to you. Thank you for the effort and we will come back to this in the mid term!