import { Component, ViewEncapsulation, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/switchMap'; import { Router, ActivatedRoute, Params, NavigationEnd } from '@angular/router'; import { Mail, MailService } from '../mail.service'; import { AppState } from '../app.state'; @Component({ selector: 'app-inbox-list', encapsulation: ViewEncapsulation.None, templateUrl: './mail-list.component.html' }) export class MailListComponent implements OnInit { public mails: Observable<Mail[]> | null = null; public type: string | null = null; public isAllSelected = false; public searchText: string | null = null; constructor( private service: MailService, private route: ActivatedRoute, public router: Router, private state: AppState ) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { this.unSelectAll(); this.searchText = ''; } }); this.state.subscribe('markAsRead', () => { this.markAllAsRead(); }); this.state.subscribe('markAsUnRead', () => { this.markAllAsUnRead(); }); this.state.subscribe('deleteChecked', () => { this.deleteAllCheckedMail(); }); } ngOnInit() { this.getMails(); } public getMails() { this.mails = this.route.params.switchMap((params: Params) => { this.type = params['type']; switch (this.type) { case 'inbox': return this.service.getInboxMails(); case 'starred': return this.service.getStarredMails(); case 'sent': return this.service.getSentMails(); case 'drafts': return this.service.getDraftMails(); case 'trash': return this.service.getTrashMails(); default: return this.service.getInboxMails(); } }); } public toggleAll() { const toggleStatus = !this.isAllSelected; this.mails?.subscribe(result => { result.forEach(mail => { mail.selected = toggleStatus; }); }); } public toggleOne() { this.mails?.subscribe(result => { this.isAllSelected = result.every(mail => { return mail.selected === true; }); }); } public unSelectAll() { this.isAllSelected = false; if (this.mails) { this.mails.subscribe(result => { result.forEach(mail => { mail.selected = false; }); }); } } public markAllAsRead() { this.mails?.subscribe(result => { result.forEach(mail => { if (mail.selected) { mail.unread = false; } }); }); } public markAllAsUnRead() { this.mails?.subscribe(result => { result.forEach(mail => { if (mail.selected) { mail.unread = true; } }); }); } public deleteAllCheckedMail() { this.mails?.subscribe(result => { result.forEach(mail => { if (mail.selected) { mail.trash = true; mail.sent = false; mail.draft = false; mail.starred = false; } }); }); this.getMails(); this.isAllSelected = false; } public goToDetail(mail: Mail) { mail.unread = false; this.router.navigate(['apps/email/mail-list/' + this.type, mail.id]); } public changeStarStatus(mail: Mail) { mail.starred = !mail.starred; } }