Yes, sure… the code for example for tab-open:
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AlertController, LoadingController, ToastController, ViewDidEnter, ViewDidLeave, ViewWillEnter } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { ApiService } from '../services/api.service';
import { GlobalService } from '../services/global.service';
import { Category } from '../models/category.model';
import { Item } from '../models/item.model';
import { Step } from '../models/step.model';
import { Router } from '@angular/router';
@Component({
selector: 'app-tab-open',
templateUrl: './tab-open.page.html',
styleUrls: ['./tab-open.page.scss'],
})
export class TabOpenPage implements OnInit, ViewDidEnter, ViewDidLeave {
mode: string;
alert;
dataLoaded: Promise<boolean>|null = null;
openItems: Category[];
item: Item|null;
constructor(
private api: ApiService,
private global: GlobalService,
private translate: TranslateService,
private router: Router,
private loadingCtrl: LoadingController,
private alertCtrl: AlertController,
private toastCtrl: ToastController) { }
ngOnInit() {
console.log("TabOpen::On Init");
if( this.global.currComponent == null ){
this.global.currComponent = 'list';
this.global.currPage = 'open';
}
this.mode = this.global.currComponent;
}
ionViewDidEnter(){
console.log("TabOpen::Did Enter");
if( this.mode == 'list'){
console.log("TabOpen::Did Enter Reloading list");
this.loadData();
}
}
ionViewDidLeave(){
console.log("TabOpen::Did Leave");
// Called when click on due
}
async loadData(){
this.dataLoaded = Promise.resolve(false);
await this.global.sessionLoaded;
let loadingString='';
this.translate.setDefaultLang(this.global.language);
this.translate.use(this.global.language);
this.translate.get('LOADING').subscribe((res: string) => {
loadingString = res;
});
this.global.loading = await this.loadingCtrl.create({
message: loadingString+'...'
});
console.log("TabOpen::loadData(): session loaded ");
let itemsLoaded = new Promise((resolve, reject)=>{
this.global.loading.present().then(() => {
this.api.getOpenItems().subscribe(res => {
console.log("TabOpen::loadData(): OpenItems loaded ");
let resData: any;
resData = res;
resData = resData.data;
this.openItems = resData;
this.global.categories = resData;
this.global.loading.dismiss();
resolve(true);
}, err => {
console.log("Error: "+ JSON.stringify(err) );
this.alert('Error', err.message);
this.global.loading.dismiss();
setTimeout(async () => {
this.global.loading.dismiss();
//this.input1.setFocus();
}, 2000);
reject(false);
});
});
});
await itemsLoaded;
console.log('TabOpen::loadData(): Items loaded');
this.dataLoaded = Promise.resolve(true);
}
doRefresh( event ){
this.loadData();
event.target.complete();
}
showItem( event: any ){
console.log("TabOpen::showItem() triggered");
this.global.currPage='open';
this.global.currComponent='show';
this.item = event;
this.mode = 'show';
}
showList( event: any){
console.log("TabOpen::showList() triggered");
this.global.currPage='open';
this.global.currComponent='list';
this.item = null;
this.mode = 'list';
}
}
And the tab-open.html:
<ion-content [fullscreen]="true">
<div *ngIf="mode == 'list' ">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Open Items</ion-title>
</ion-toolbar>
</ion-header>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<app-list *ngIf="dataLoaded"
[elements]="openItems"
title="Open Items"
source="TabOpen"
(item)="showItem($event)"
></app-list>
</div>
<div *ngIf="mode == 'show' ">
<ion-header [translucent]="true">
<ion-toolbar *ngIf=" item ">
<ion-buttons slot="start">
<h1><ion-icon name="chevron-back-outline" (click)="showList(item)"></ion-icon></h1>
</ion-buttons>
<ion-title>
{{ item.name }}
</ion-title>
</ion-toolbar>
</ion-header>
<app-show *ngIf="item"
[item]="item"
(backEvent)="showList($event)"
></app-show>
<ion-tabs>
<ion-tab-bar slot="bottom" id="show-tabs">
<ion-tab-button *ngFor="let step of item.nextSteps" (click)="execStep(step.id)">
<ion-icon name="{{step.icon}}"></ion-icon>
<ion-label>{{step.description}}
</ion-label>
</ion-tab-button>
<ion-tab-button (click)="delete()">
<ion-icon name="trash-outline"></ion-icon><ion-label>borrar</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>
And the show.component.ts:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AlertController, LoadingController, NavController, ToastController, ViewDidEnter, ViewDidLeave, ViewWillEnter } from '@ionic/angular';
import { ApiService } from 'src/app/services/api.service';
import { GlobalService } from 'src/app/services/global.service';
import { Comment } from 'src/app/models/comment.model';
import { Item } from 'src/app/models/item.model';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-show',
templateUrl: './show.component.html',
styleUrls: ['./show.component.scss'],
})
export class ShowComponent implements OnInit, ViewDidEnter, ViewDidLeave {
@Input() item: Item;
@Output() backEvent= new EventEmitter<Item>();
editName: boolean = false;
editDescription: boolean = false;
comment: string;
constructor(
private global: GlobalService,
private api: ApiService,
private translate: TranslateService,
private loadingCtrl: LoadingController,
private alertCtrl: AlertController,
private toastCtrl: ToastController,
private navCtrl: NavController,
private route: ActivatedRoute
) { }
ngOnInit() {
console.log("Component::show(): On Init");
if( this.item === undefined ){
this.item = this.global.item;
}
}
ionViewDidEnter(){
console.log("Component::show(): Did Enter");
}
ionViewDidLeave(){
console.log("Component::show(): Did Leave");
}
switchDescription(){
this.editDescription = true;
}
switchName(){
this.editName = true;
}
async updateItem(){
this.global.loading = await this.loadingCtrl.create({
message: 'Cargando....'
});
this.global.loading.present().then(() => {
this.api.putItem( this.item ).subscribe( res => {
this.global.loading.dismiss();
this.editDescription = false;
this.editName = false;
}, err => {
this.alert('Error', err.error.message);
this.global.loading.dismiss();
this.editDescription = false;
this.editName = false;
});
});
}
async createComment(){
console.log("Comment: "+this.comment);
if( this.comment.length > 0 ){
this.api.newComment(this.item.id, this.comment).subscribe( res => {
//this.updateData();
let comment = new Comment();
comment.content = this.comment;
this.item.comments.push(comment);
});
this.comment= '';
//this.updateData();
}else {
this.toast('Write a comment before sending it...');
this.comment= '';
}
}
async alert(title, message) {
const alert = await this.alertCtrl.create({
header: title,
message: message,
buttons: ['Ok']
});
await alert.present();
}
async delete(){
console.log("ShowPage::delete()");
const alert = await this.alertCtrl.create({
cssClass: 'my-custom-class',
header: 'Alert',
subHeader: 'Delete?',
message: 'Are you sure you want to delete the item?',
buttons: [{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Delete',
handler: () => {
console.log('Confirm delete');
this.sendDelete();
}
}]
});
await alert.present();
}
async sendDelete(){
this.global.loading = await this.loadingCtrl.create({
message: 'Cargando..'
});
this.global.loading.present().then(() => {
this.api.deleteItem(this.item.id).subscribe( res => {
this.global.loading.dismiss();
this.navCtrl.navigateRoot('/tabs');
});
});
}
async toast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom'
});
(await toast).present();
}
back(){
this.backEvent.emit(this.item);
this.item = null;
}
}
And finally the show.component.html:
<ion-card *ngIf="item">
<ion-card-title>
{{ item.name }}
<ion-icon name="create-outline" (click)="switchName()"></ion-icon>
</ion-card-title>
<ion-card-content>
<ion-row>
<ion-item *ngIf=" editName ">
<form (ngSubmit)="updateItem()">
<ion-textarea [(ngModel)]="item.name" name="name" rows="3"></ion-textarea>
<ion-button ion-button type="submit" block>Actualizar nombre</ion-button>
</form>
</ion-item>
</ion-row>
<ion-row>
<ion-col size="9" size-xs="12" *ngIf="item.parent">
<span>Parent: <u>{{ item.parent.name }}</u></span>
</ion-col>
<ion-col size="3" size-xs="12" style="text-align: right">
<ion-badge color="{{item?.statusLabel}}">{{item.statusName}}</ion-badge>
<ion-badge color="{{item?.dueState }}">{{ item.dueDate }}</ion-badge>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>