I decided to ask here I've been looking at google the whole day for an answer but I can't seem to understand on how to implement it. So basically, what I want to do is every time I insert data from a modal once it closes it would auto update the list of its parent view. In the past I would go about this by setting a timeout function upon researching I've stumbled upon Observables. Now what I want to know is how I can implement this on my current setup.
Here is my component.ts
import { Component } from '@angular/core';
import { NavController, NavParams, ModalController,FabContainer } from 'ionic-angular';
import { ModalCreateNewDirectoryPage } from '../../pages/modal-create-new-directory/modal-create-new-directory';
import {PopupUploadCsvPage} from '../../pages/popup-upload-csv/popup-upload-csv';
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api';
import {ModalShowPhonebookDirectoryPage} from '../../pages/modal-show-phonebook-directory/modal-show-phonebook-directory';
import { Observable } from 'rxjs/Observable';
import { AsyncPipe } from '@angular/common';
/**
* Generated class for the PhonebookPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-phonebook',
templateUrl: 'phonebook.html',
})
export class PhonebookPage {
items: Array<{title: string, icon:string}>;
infos:any;
fileHolder:any;
choice:boolean;
contacts:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryOpenModal:ModalController, public beaconProvider:BeaconRestApiProvider, public uploadPopupDirectoryModal: ModalController, public showPhoneBookDirectoryModal: ModalController ) {
this.getPhonebook();
}
ionViewDidLoad() {
console.log('ionViewDidLoad PhonebookPage');
}
createNewDirectory(fab: FabContainer){
console.log('This button creates a new directory');
const showCreateDirectoryModal = this.newDirectoryOpenModal.create(ModalCreateNewDirectoryPage);
fab.close();
showCreateDirectoryModal.present();
}
uploadNewDirectory(fab: FabContainer){
const showuploadPopup = this.uploadPopupDirectoryModal.create(PopupUploadCsvPage);
fab.close();
showuploadPopup.present();
}
getPhonebook() {
this.beaconProvider.getPhoneBookDirectories()
.then(data => {
this.infos = data;
}, (err) => {
console.log(err);
});
}
phonebookIdentity(phonebook){
var phonebook_id = phonebook.phonebook_id;
this.beaconProvider.showPhonebookDirectoryList(phonebook_id)
.then(data => {
const showDirectoryList = this.showPhoneBookDirectoryModal.create(ModalShowPhonebookDirectoryPage,{list:data});
showDirectoryList.present();
}, (err) => {
console.log(err);
});
}
}
and my modal component.ts which controls the modal form
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, ViewController,LoadingController,ToastController} from 'ionic-angular';
import { FormGroup, FormArray, FormBuilder, FormControl, Validators } from '@angular/forms';
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api';
/**
* Generated class for the ModalCreateNewDirectoryPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-modal-create-new-directory',
templateUrl: 'modal-create-new-directory.html',
})
export class ModalCreateNewDirectoryPage implements OnInit {
public createDirectoryForm: FormGroup;
//directoryInfo: { phonebook_name: string, number: string, personName: string, age: string, address: string} = { phonebook_name:'', number: '', personName: '', age: '', address:''};
constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryView:ViewController, public formBuilder: FormBuilder, public beaconProvider:BeaconRestApiProvider, public pageLoader: LoadingController, public toast : ToastController) {
}
/*ngOnInit(){
this.createDirectoryForm = this.formBuilder.group({
directoryName:['',Validators.required],
fields: this.formBuilder.array([
this.initFormChild(),
])
});
}*/
ngOnInit(){
this.createDirectoryForm = this.formBuilder.group({
directoryName:['',Validators.required],
fields:this.formBuilder.array([
this.initField(),
])
});
}
initField() {
return this.formBuilder.group({
number:['',Validators.required],
personName: ['',Validators.required],
age:['',Validators.required],
address:['',Validators.required],
});
}
addField() {
const control = <FormArray>this.createDirectoryForm.controls['fields'];
control.push(this.initField());
}
removeField(i: number) {
const control = <FormArray>this.createDirectoryForm.controls['fields'];
control.removeAt(i);
}
save(form){
console.log(form);
var i;
var phonebookName = form.controls.directoryName._value;
var fields_array = [];
var record_set = [];
var fields = form.controls.fields.controls;
phonebookName = {"phonebook_name":phonebookName};
var address,age,number,personName;
var directory_header = ['number','name','age','address'];
record_set.push(directory_header);
for(i = 0; i < fields.length ; i ++ ){
if(fields[i]._value.address !=""){
address = fields[i]._value.address;
}
else{
address = '_';
}
if(fields[i]._value.age !=""){
age = fields[i]._value.age;
}
else{
age = '_';
}
if(fields[i]._value.number !=""){
number = fields[i]._value.number;
}
else{
number = '_';
}
if(fields[i]._value.personName !=""){
personName = fields[i]._value.personName;
}
else{
personName = '_';
}
fields_array = [number,personName,age,address];
record_set.push(fields_array);
//console.log(i.controls.number._value);
//console.log(i.controls.personName._value);
}
var phonebookdetails_array = record_set;
this.beaconProvider.getPhonebookId(phonebookName).then((res) => {
var phonebookId = res;
var manual_phonebook_array = {"phonebook_id":phonebookId,"phonebook_content":phonebookdetails_array};
let loadingPage = this.pageLoader.create({
content: 'Processing your request...',
showBackdrop:false
});
loadingPage.present();
this.beaconProvider.addPhonebookDirectory(manual_phonebook_array).then((res)=>{
setTimeout(() => {
loadingPage.dismiss();
this.toast.create({
message: `Phonebook Directory Added`,
duration: 3000,
position: "top",
}).present();
this.closeNewDirectoryModal();
}, 5000);
},err=>{
console.log(err);
})
}, (err) => {
console.log(err);
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ModalCreateNewDirectoryPage');
}
closeNewDirectoryModal(){
this.newDirectoryView.dismiss();
}
}
I think this is enough to show what I want to happen but if not let me know.
