mail..

package.json

@@ -12,33 +12,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.0",
+    "@angular/animations": "^4.3.1",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.0",
+    "@angular/common": "^4.3.1",
-    "@angular/compiler": "^4.3.0",
+    "@angular/compiler": "^4.3.1",
-    "@angular/core": "^4.3.0",
+    "@angular/core": "^4.3.1",
     "@angular/flex-layout": "2.0.0-beta.8",
-    "@angular/forms": "^4.3.0",
+    "@angular/forms": "^4.3.1",
-    "@angular/http": "^4.3.0",
+    "@angular/http": "^4.3.1",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.0",
+    "@angular/platform-browser": "^4.3.1",
-    "@angular/platform-browser-dynamic": "^4.3.0",
+    "@angular/platform-browser-dynamic": "^4.3.1",
-    "@angular/router": "^4.3.0",
+    "@angular/router": "^4.3.1",
+    "@swimlane/ngx-datatable": "^9.3.1",
     "angular-in-memory-web-api": "^0.3.2",
     "core-js": "^2.4.1",
-    "firebase": "^4.1.3",
+    "firebase": "^4.1.5",
     "hammerjs": "^2.0.8",
     "ngx-perfect-scrollbar": "^4.5.2",
     "rxjs": "^5.4.2",
-    "zone.js": "^0.8.13"
+    "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.1",
+    "@angular/cli": "^1.2.4",
-    "@angular/compiler-cli": "^4.3.0",
+    "@angular/compiler-cli": "^4.3.1",
-    "@angular/language-service": "^4.3.0",
+    "@angular/language-service": "^4.3.1",
     "@types/jasmine": "^2.5.53",
     "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.83",
+    "@types/node": "^6.0.85",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",

src/app/app.module.ts

@@ -55,7 +55,6 @@ const appRoutes: Routes = [
 
         FuseLayoutModule,
 
-        // MailModule,
         ChatModule,
         ProjectModule,
 

src/app/core/modules/shared.module.ts

@@ -4,6 +4,8 @@ import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import {
@@ -20,6 +22,7 @@ import { FusePipesModule } from '../pipes/pipes.module';
     imports     : [
         FlexLayoutModule,
         MaterialModule,
+        NgxDatatableModule,
         CommonModule,
         FormsModule,
         FusePipesModule,
@@ -28,6 +31,7 @@ import { FusePipesModule } from '../pipes/pipes.module';
     exports     : [
         FlexLayoutModule,
         MaterialModule,
+        NgxDatatableModule,
         CommonModule,
         FormsModule,
         FuseMdSidenavHelperDirective,

src/app/core/scss/core.scss

@@ -1,4 +1,11 @@
+// ngx-datatable
+@import '~@swimlane/ngx-datatable/release/index.css';
+@import '~@swimlane/ngx-datatable/release/themes/material.css';
+@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+
+// Perfect Scrollbar
 @import "~perfect-scrollbar/src/css/main";
+
 // Fuse
 @import "fuse";
 

src/app/main/apps/mail/mail-details/mail-details.component.ts

@@ -15,6 +15,7 @@ export class MailDetailsComponent implements OnInit, OnDestroy
     showDetails = false;
 
     onCurrentMailChanged: Subscription;
+    onLabelsChanged: Subscription;
 
     constructor(
         private mailService: MailService
@@ -24,15 +25,19 @@ export class MailDetailsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-        // Set initial values
-        this.labels = this.mailService.labels;
-        this.mail = this.mailService.currentMail;
-
         // Subscribe to update the current mail
-        this.onCurrentMailChanged = this.mailService.onCurrentMailChanged
+        this.onCurrentMailChanged =
-                                        .subscribe(currentMail => {
+            this.mailService.onCurrentMailChanged
-                                            this.mail = currentMail;
+                .subscribe(currentMail => {
-                                        });
+                    this.mail = currentMail;
+                });
+
+        // Subscribe to update on label change
+        this.onLabelsChanged =
+            this.mailService.onLabelsChanged
+                .subscribe(labels => {
+                    this.labels = labels;
+                });
     }
 
     ngOnDestroy()

src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { Mail } from '../../mail.model';
 import { MailService } from '../../mail.service';
 import { Subscription } from 'rxjs/Subscription';
@@ -12,34 +12,21 @@ export class MailListItemComponent implements OnInit, OnDestroy
 {
     @Input() mail: Mail;
     labels: any[];
-    selected: boolean;
+    @HostBinding('class.selected') selected: boolean;
 
     onSelectedMailsChanged: Subscription;
+    onLabelsChanged: Subscription;
 
     constructor(
         private mailService: MailService
     )
     {
-
     }
 
     ngOnInit()
     {
         // Set the initial values
         this.mail = new Mail(this.mail);
-        this.labels = this.mailService.labels;
-
-        if ( this.mailService.selectedMails.length > 0 )
-        {
-            for ( const mail of this.mailService.selectedMails )
-            {
-                if ( mail.id === this.mail.id )
-                {
-                    this.selected = true;
-                    break;
-                }
-            }
-        }
 
         // Subscribe to update on selected mail change
         this.onSelectedMailsChanged =
@@ -59,6 +46,13 @@ export class MailListItemComponent implements OnInit, OnDestroy
                         }
                     }
                 });
+
+        // Subscribe to update on label change
+        this.onLabelsChanged =
+            this.mailService.onLabelsChanged
+                .subscribe(labels => {
+                    this.labels = labels;
+                });
     }
 
     ngOnDestroy()

src/app/main/apps/mail/mail-list/mail-list.component.ts

@@ -28,12 +28,6 @@ export class MailListComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-        // Get mails for the first time
-        this.mails = this.mailService.mails;
-
-        // Get current mail for the first time if available
-        this.currentMail = this.mailService.currentMail || null;
-
         // Subscribe to update mails on changes
         this.onMailsChanged =
             this.mailService.onMailsChanged
@@ -52,12 +46,17 @@ export class MailListComponent implements OnInit, OnDestroy
 
                         // Handle the location changes
                         const labelHandle  = this.route.snapshot.params.labelHandle,
+                              filterHandle = this.route.snapshot.params.filterHandle,
                               folderHandle = this.route.snapshot.params.folderHandle;
 
                         if ( labelHandle )
                         {
                             this.location.go('apps/mail/label/' + labelHandle);
                         }
+                        else if ( filterHandle )
+                        {
+                            this.location.go('apps/mail/filter/' + filterHandle);
+                        }
                         else
                         {
                             this.location.go('apps/mail/' + folderHandle);
@@ -83,12 +82,17 @@ export class MailListComponent implements OnInit, OnDestroy
     readMail(mailId)
     {
         const labelHandle  = this.route.snapshot.params.labelHandle,
+              filterHandle = this.route.snapshot.params.filterHandle,
               folderHandle = this.route.snapshot.params.folderHandle;
 
         if ( labelHandle )
         {
             this.location.go('apps/mail/label/' + labelHandle + '/' + mailId);
         }
+        else if ( filterHandle )
+        {
+            this.location.go('apps/mail/filter/' + filterHandle + '/' + mailId);
+        }
         else
         {
             this.location.go('apps/mail/' + folderHandle + '/' + mailId);

src/app/main/apps/mail/mail.component.html

@@ -102,4 +102,4 @@
 
     </md-sidenav-container>
 
-</div>
+</div>

src/app/main/apps/mail/mail.component.ts

@@ -12,23 +12,22 @@ export class MailComponent implements OnInit, OnDestroy
     hasSelectedMails: boolean;
     isIndeterminate: boolean;
     folders: any[];
+    filters: any[];
     labels: any[];
 
     onSelectedMailsChanged: Subscription;
+    onFoldersChanged: Subscription;
+    onFiltersChanged: Subscription;
+    onLabelsChanged: Subscription;
 
     constructor(
         private mailService: MailService
     )
     {
-
     }
 
     ngOnInit()
     {
-        // Get the values for the first time
-        this.labels = this.mailService.labels;
-        this.folders = this.mailService.folders;
-
         this.onSelectedMailsChanged =
             this.mailService.onSelectedMailsChanged
                 .subscribe(selectedMails => {
@@ -38,11 +37,32 @@ export class MailComponent implements OnInit, OnDestroy
                         this.isIndeterminate = (selectedMails.length !== this.mailService.mails.length && selectedMails.length > 0);
                     }, 0);
                 });
+
+        this.onFoldersChanged =
+            this.mailService.onFoldersChanged
+                .subscribe(folders => {
+                    this.folders = this.mailService.folders;
+                });
+
+        this.onFiltersChanged =
+            this.mailService.onFiltersChanged
+                .subscribe(folders => {
+                    this.filters = this.mailService.filters;
+                });
+
+        this.onLabelsChanged =
+            this.mailService.onLabelsChanged
+                .subscribe(labels => {
+                    this.labels = this.mailService.labels;
+                });
     }
 
     ngOnDestroy()
     {
         this.onSelectedMailsChanged.unsubscribe();
+        this.onFoldersChanged.unsubscribe();
+        this.onFiltersChanged.unsubscribe();
+        this.onLabelsChanged.unsubscribe();
     }
 
     toggleSelectAll()

src/app/main/apps/mail/mail.module.ts

@@ -53,7 +53,7 @@ const routes: Routes = [
     },
     {
         path      : '**',
-        redirectTo: 'inbox'
+        redirectTo: 'folder/inbox'
     }
 ];
 

src/app/main/apps/mail/mail.service.ts

@@ -3,7 +3,7 @@ import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/r
 import { Observable } from 'rxjs/Observable';
 import { Http } from '@angular/http';
 import { Mail } from './mail.model';
-import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class MailService implements Resolve<any>
@@ -17,13 +17,13 @@ export class MailService implements Resolve<any>
     labels: any[];
     routeParams: any;
 
-    onMailsChanged = new Subject<Mail[]>();
+    onMailsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
-    onSelectedMailsChanged = new Subject<Mail[]>();
+    onSelectedMailsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
-    onCurrentMailChanged = new Subject<Mail>();
+    onCurrentMailChanged: BehaviorSubject<any> = new BehaviorSubject([]);
 
-    onFoldersChanged = new Subject<any[]>();
+    onFoldersChanged: BehaviorSubject<any> = new BehaviorSubject([]);
-    onFiltersChanged = new Subject<any[]>();
+    onFiltersChanged: BehaviorSubject<any> = new BehaviorSubject([]);
-    onLabelsChanged = new Subject<any[]>();
+    onLabelsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
 
     constructor(
         private http: Http

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts

@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from '../../mail.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-mail-main-sidenav',
     templateUrl: './main-sidenav.component.html',
     styleUrls  : ['./main-sidenav.component.scss']
 })
-export class MainSidenavComponent implements OnInit
+export class MainSidenavComponent implements OnInit, OnDestroy
 {
     folders: any[];
     filters: any[];
@@ -14,6 +15,10 @@ export class MainSidenavComponent implements OnInit
     accounts: object;
     selectedAccount: string;
 
+    onFoldersChanged: Subscription;
+    onFiltersChanged: Subscription;
+    onLabelsChanged: Subscription;
+
     constructor(
         private mailService: MailService
     )
@@ -29,20 +34,29 @@ export class MainSidenavComponent implements OnInit
 
     ngOnInit()
     {
-        this.folders = this.mailService.folders;
+        this.onFoldersChanged =
-        this.filters = this.mailService.filters;
+            this.mailService.onFoldersChanged
-        this.labels = this.mailService.labels;
+                .subscribe(folders => {
+                    this.folders = folders;
+                });
 
-        this.mailService.onFoldersChanged.subscribe(folders => {
+        this.onFiltersChanged =
-            this.folders = this.mailService.folders;
+            this.mailService.onFiltersChanged
-        });
+                .subscribe(filters => {
+                    this.filters = filters;
+                });
 
-        this.mailService.onFiltersChanged.subscribe(folders => {
+        this.onLabelsChanged =
-            this.filters = this.mailService.filters;
+            this.mailService.onLabelsChanged
-        });
+                .subscribe(labels => {
+                    this.labels = labels;
+                });
+    }
 
-        this.mailService.onLabelsChanged.subscribe(labels => {
+    ngOnDestroy()
-            this.labels = this.mailService.labels;
+    {
-        });
+        this.onFoldersChanged.unsubscribe();
+        this.onFiltersChanged.unsubscribe();
+        this.onLabelsChanged.unsubscribe();
     }
 }