mail..

src/app/app.module.ts

@@ -5,7 +5,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
 import 'hammerjs';
-import { MailModule } from './main/apps/mail/mail.module';
 import { ChatModule } from './main/apps/chat/chat.module';
 import { ProjectModule } from './main/apps/dashboards/project/project.module';
 import { FuseLayoutService } from './core/services/layout.service';
@@ -18,13 +17,9 @@ import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/
 import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module';
 import { FuseLayoutModule } from './core/components/layout/layout.module';
 import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { environment } from 'environments/environment';
-import { MailListComponent } from './main/apps/mail/mail-list/mail-list.component';
-import { MailDetailsComponent } from './main/apps/mail/mail-details/mail-details.component';
-import { MailDataService } from './main/apps/mail/mail-data.service';
 import { HttpModule } from '@angular/http';
-import {InMemoryWebApiModule} from 'angular-in-memory-web-api';
-import {FuseFakeDbService} from './fuse-fake-db/fuse-fake-db.service';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 
 const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     suppressScrollX: true
@@ -54,7 +49,7 @@ const appRoutes: Routes = [
         SharedModule,
         RouterModule.forRoot(appRoutes),
 
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, { delay: 500 }),
+        InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
 
         PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
 
@@ -67,7 +62,6 @@ const appRoutes: Routes = [
         UIPageLayoutsModule
     ],
     providers   : [
-        MailDataService,
         FuseNavigationService,
         FuseLayoutService,
         FuseMatchMedia,

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

@@ -1,43 +0,0 @@
-import { Injectable } from '@angular/core';
-import {ActivatedRouteSnapshot, Resolve, Route, RouterStateSnapshot} from '@angular/router';
-import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
-
-@Injectable()
-export class MailDataService implements Resolve<any>
-{
-    constructor(
-        private http: Http
-    )
-    {
-    }
-
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
-    {
-        console.log(route.params);
-        console.log(route.paramMap.get('labelHandle'));
-
-        // route.params.subscribe(params => {
-        // });
-        return new Promise((resolve, reject) =>
-        {
-            console.log('resolve...');
-
-            this.http.get('api/mail-mails').subscribe(response =>
-            {
-                console.info(response);
-                resolve(response);
-            }, reject);
-        });
-    }
-
-    getMailsByFolder(handle)
-    {
-
-    }
-
-    saveMailSubject(subject)
-    {
-
-    }
-}

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

@@ -13,14 +13,12 @@
         </div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button md-button class="mat-icon-button" ng-click="vm.togglemailStatus('starred')"
-                    aria-label="Toggle starred">
+            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
                 <md-icon *ngIf="mail.starred">star</md-icon>
                 <md-icon *ngIf="!mail.starred">star_outline</md-icon>
             </button>
 
-            <button md-button class="mat-icon-button" ng-click="vm.togglemailStatus('important')"
-                    aria-label="Toggle important">
+            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
                 <md-icon *ngIf="mail.important">label</md-icon>
                 <md-icon *ngIf="!mail.important">label_outline</md-icon>
             </button>
@@ -118,7 +116,8 @@
     <div *ngIf="mail.attachments" class="mail-attachments">
 
         <div class="title">
-            <span>Attachments</span> ({{mail.attachments.length}})
+            <span>Attachments</span>
+            ({{mail.attachments.length}})
         </div>
 
         <div class="attachment-list" layout-wrap fxLayout="row">

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

@@ -1,5 +1,7 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {MailModel} from '../mail.model';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mail } from '../mail.model';
+import { MailService } from '../mail.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector   : 'fuse-mail-details',
@@ -8,16 +10,38 @@ import {MailModel} from '../mail.model';
 })
 export class MailDetailsComponent implements OnInit
 {
-    @Input('selectedMail') public mail: MailModel;
+    @Input('selectedMail') public mail: Mail;
     showDetails: boolean;
 
-    constructor()
+    constructor(
+        private route: ActivatedRoute,
+        private mailService: MailService
+    )
     {
         this.showDetails = false;
     }
 
     ngOnInit()
     {
+
+    }
+
+    toggleStar(event)
+    {
+        event.stopPropagation();
+
+        this.mail.toggleStar();
+
+        this.mailService.update(this.mail);
+    }
+
+    toggleImportant(event)
+    {
+        event.stopPropagation();
+
+        this.mail.toggleImportant();
+
+        this.mailService.update(this.mail);
     }
 
 }

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

@@ -35,16 +35,12 @@
         <div class="time">{{mail.time}}</div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button md-button class="mat-icon-button"
-                    ng-click="vm.togglemailStatus('starred', mail, $event)"
-                    aria-label="Toggle starred">
+            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
                 <md-icon *ngIf="mail.starred">star</md-icon>
                 <md-icon *ngIf="!mail.starred">star_outline</md-icon>
             </button>
 
-            <button md-button class="mat-icon-button"
-                    ng-click="vm.togglemailStatus('important', mail, $event)"
-                    aria-label="Toggle important">
+            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
                 <md-icon *ngIf="mail.important">label</md-icon>
                 <md-icon *ngIf="!mail.important">label_outline</md-icon>
             </button>

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

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MailModel } from '../../mail.model';
+import { Mail } from '../../mail.model';
+import { MailService } from '../../mail.service';
+import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
 
 @Component({
     selector   : 'fuse-mail-list-item',
@@ -8,14 +10,36 @@ import { MailModel } from '../../mail.model';
 })
 export class MailListItemComponent implements OnInit
 {
-    @Input() mail: MailModel;
+    @Input() mail: Mail;
 
-    constructor()
+    constructor(
+        private route: ActivatedRoute,
+        private mailService: MailService
+    )
     {
+
     }
 
     ngOnInit()
     {
+        this.mail = new Mail(this.mail);
     }
 
+    toggleStar(event)
+    {
+        event.stopPropagation();
+
+        this.mail.toggleStar();
+
+        this.mailService.update(this.mail);
+    }
+
+    toggleImportant(event)
+    {
+        event.stopPropagation();
+
+        this.mail.toggleImportant();
+
+        this.mailService.update(this.mail);
+    }
 }

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

@@ -1,15 +1,3 @@
-
-<button md-button (click)="onSave()">Save</button>
-
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-
-<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail" md-ripple (click)="selectMail(mail)"
-                     [ngClass]="{'selected-mail':mail === selectedMail}">
+<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail" md-ripple (click)="selectMail(mail.id)"
+                     [ngClass]="{'selected-mail':mail?.id === selectedMail?.id}">
 </fuse-mail-list-item>

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

@@ -1,8 +1,7 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {MailModel} from '../mail.model';
-import {MailDataService} from '../mail-data.service';
-import {Http} from '@angular/http';
-import {ActivatedRoute} from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
+import { Mail } from '../mail.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MailService } from '../mail.service';
 
 @Component({
     selector   : 'fuse-mail-list',
@@ -11,62 +10,44 @@ import {ActivatedRoute} from '@angular/router';
 })
 export class MailListComponent implements OnInit
 {
-    mails: MailModel[];
+    mails: Mail[];
 
-    @Input('selectedMail') public selectedMail: MailModel;
-    @Output() onMailSelect = new EventEmitter<MailModel>();
+    @Input('selectedMail') public selectedMail: Mail;
 
-    constructor(private mailDataService: MailDataService,
-                private http: Http,
-                private route: ActivatedRoute)
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private mailService: MailService
+    )
     {
-        route.data.subscribe(response =>
-        {
-            console.info(response.mailDB.json());
-            this.mails = response.mailDB.json().data;
-        });
     }
 
     ngOnInit()
     {
+        // Get mails for the first time
+        this.mails = this.mailService.mails;
 
-
+        // Subscribe to update mails on changes
+        this.mailService.onMailsUpdated
+            .subscribe(mails => {
+                console.log('mailsUpdated');
+                this.mails = mails;
+            });
     }
 
-    onSave()
+    selectMail(mailId)
     {
-        /*this.http.get('api/mails?important=true&labels=1').subscribe(response =>
-         {
-         console.log(response);
-         });*/
+        const labelHandle  = this.route.snapshot.params.labelHandle,
+              folderHandle = this.route.snapshot.params.folderHandle;
 
-        this.http.get('api/mail-mails').subscribe(response =>
+        if ( labelHandle )
         {
-            console.log(response.json());
-        });
-
-        /*this.http.get('api/mail/folders/0').subscribe(response =>
-         {
-         console.log(response);
-         });*/
-
-
-        /*this.http.post('api/mails', {id: '2', subject: 'Test test'}).subscribe(response =>
-         {
-         console.log(response);
-
-         this.http.get('api/mails/2').subscribe(response2 =>
-         {
-         console.log(response2);
-         });
-         });*/
-
-    }
-
-    selectMail(mail)
-    {
-        this.selectedMail = mail;
-        this.onMailSelect.emit(mail);
+            this.router.navigate(['apps/mail/label', labelHandle, mailId]);
+        }
+        else
+        {
+            this.router.navigate(['apps/mail', folderHandle, mailId]);
+        }
     }
 
 }

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

@@ -51,7 +51,7 @@
 
                     <div fxLayout="row" fxFill>
 
-                        <fuse-mail-list fxFlex [selectedMail]="selectedMail" (onMailSelect)="onMailSelect($event)"></fuse-mail-list>
+                        <fuse-mail-list fxFlex [selectedMail]="selectedMail"></fuse-mail-list>
 
                         <fuse-mail-details fxFlex [selectedMail]="selectedMail"></fuse-mail-details>
 

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

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { MailModel } from './mail.model';
-import { MailDataService } from './mail-data.service';
+import { Mail } from './mail.model';
+import { MailService } from './mail.service';
 
 @Component({
     selector   : 'fuse-mail',
@@ -10,23 +9,22 @@ import { MailDataService } from './mail-data.service';
 })
 export class MailComponent implements OnInit
 {
-    selectedMail: MailModel;
+    selectedMail: Mail;
 
     constructor(
-        private route: ActivatedRoute,
-        private mailDataService: MailDataService
+        private mailService: MailService
     )
     {
-        console.log('mail component inited');
+
     }
 
     ngOnInit()
     {
+        this.selectedMail = this.mailService.selectedMail;
 
-    }
-
-    onMailSelect(mail)
-    {
-        this.selectedMail = mail;
+        this.mailService.onSelectedMailUpdated
+            .subscribe(selectedMail => {
+                this.selectedMail = selectedMail;
+            });
     }
 }

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

@@ -1,7 +1,6 @@
-export class MailModel
+export class Mail
 {
     id: string;
-    subject: string;
     from: {
         name: string,
         avatar: string,
@@ -11,26 +10,47 @@ export class MailModel
         name: string,
         email: string
     }[];
+    subject: string;
     message: string;
     time: string;
     read: boolean;
     starred: boolean;
     important: boolean;
     hasAttachments: boolean;
-    attachments: [
-        {
-            type: string,
-            fileName: string,
-            preview: string,
-            url: string,
-            size: string
-        }
-        ];
+    attachments: {
+        type: string,
+        fileName: string,
+        preview: string,
+        url: string,
+        size: string
+    }[];
     labels: string[];
-    folders: any[];
+    folders: string[];
 
-    constructor()
+    constructor(mail)
     {
+        this.id = mail.id;
+        this.from = mail.from;
+        this.to = mail.to;
+        this.subject = mail.subject;
+        this.message = mail.message;
+        this.time = mail.time;
+        this.read = mail.read;
+        this.starred = mail.starred;
+        this.important = mail.important;
+        this.hasAttachments = mail.hasAttachments;
+        this.attachments = mail.attachments;
+        this.labels = mail.labels;
+        this.folders = mail.folders;
+    }
 
+    toggleStar()
+    {
+        this.starred = !this.starred;
+    }
+
+    toggleImportant()
+    {
+        this.important = !this.important;
     }
 }

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

@@ -6,37 +6,35 @@ import { MainSidenavComponent } from './sidenavs/main/main-sidenav.component';
 import { MailListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
 import { MailListComponent } from './mail-list/mail-list.component';
 import { MailDetailsComponent } from './mail-details/mail-details.component';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { HttpModule } from '@angular/http';
-import {MailDataService} from './mail-data.service';
+import { MailService } from './mail.service';
 
 const routes: Routes = [
     {
-        path    : 'label/:labelHandle',
+        path     : 'label/:labelHandle',
         component: MailComponent,
-        resolve     : {
-            mailDB: MailDataService
+        resolve  : {
+            mail: MailService
         }
     },
     {
-        path: 'label/:labelHandle/:mailId',
+        path     : 'label/:labelHandle/:mailId',
         component: MailComponent,
-        resolve     : {
-            mailDB: MailDataService
+        resolve  : {
+            mail: MailService
         }
     },
     {
         path     : ':folderHandle',
         component: MailComponent,
-        resolve     : {
-            mailDB: MailDataService
+        resolve  : {
+            mail: MailService
         }
     },
     {
-        path: ':folderHandle/:mailId',
+        path     : ':folderHandle/:mailId',
         component: MailComponent,
-        resolve     : {
-            mailDB: MailDataService
+        resolve  : {
+            mail: MailService
         }
     },
     {
@@ -55,11 +53,11 @@ const routes: Routes = [
     ],
     imports     : [
         SharedModule,
-        HttpModule,
-        RouterModule.forChild(routes),
-        InMemoryWebApiModule
+        RouterModule.forChild(routes)
     ],
-    providers   : []
+    providers   : [
+        MailService
+    ]
 })
 export class MailModule
 {

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

@@ -0,0 +1,198 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+import { Mail } from './mail.model';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class MailService implements Resolve<any>
+{
+    mails: Mail[];
+    selectedMail: Mail;
+    labels: any[];
+    folders: any[];
+
+    routeParams: any;
+
+    onMailsUpdated = new Subject<Mail[]>();
+    onSelectedMailUpdated = new Subject<Mail>();
+    onLabelsUpdated = new Subject<any[]>();
+    onFoldersUpdated = new Subject<any[]>();
+
+    constructor(
+        private http: Http
+    )
+    {
+
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        this.routeParams = route.params;
+
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getFolders(),
+                this.getLabels(),
+                this.getMails()
+            ]).then(
+                () => {
+                    if ( this.routeParams.mailId )
+                    {
+                        this.setSelectedMail(this.routeParams.mailId);
+                    }
+                    else
+                    {
+                        this.setSelectedMail(null);
+                    }
+
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    getFolders(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this.http.get('api/mail-folders')
+                .subscribe(response => {
+                    this.folders = response.json().data;
+                    this.onFoldersUpdated.next(this.folders);
+                    resolve(this.folders);
+                }, reject);
+        });
+    }
+
+    getLabels(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this.http.get('api/mail-labels')
+                .subscribe(response => {
+                    this.labels = response.json().data;
+                    this.onLabelsUpdated.next(this.labels);
+                    resolve(this.labels);
+                }, reject);
+        });
+    }
+
+    getMails(): Promise<Mail[]>
+    {
+        if ( this.routeParams.labelHandle )
+        {
+            return this.getMailsByLabel(this.routeParams.labelHandle);
+        }
+
+        return this.getMailsByFolder(this.routeParams.folderHandle);
+    }
+
+    getMailsByFolder(handle): Promise<Mail[]>
+    {
+        return new Promise((resolve, reject) => {
+
+            if ( handle === 'starred' || handle === 'important' )
+            {
+                this.http.get('api/mail-mails?' + handle + '=true')
+                    .subscribe(mails => {
+
+                        this.mails = mails.json().data.map(mail => {
+                            return new Mail(mail);
+                        });
+
+                        this.onMailsUpdated.next(this.mails);
+
+                        resolve(this.mails);
+
+                    }, reject);
+            }
+            else
+            {
+                this.http.get('api/mail-folders?handle=' + handle)
+                    .subscribe(folders => {
+
+                        const folderId = folders.json().data[0].id;
+
+                        this.http.get('api/mail-mails?folders=' + folderId)
+                            .subscribe(mails => {
+
+                                this.mails = mails.json().data.map(mail => {
+                                    return new Mail(mail);
+                                });
+
+                                this.onMailsUpdated.next(this.mails);
+
+                                resolve(this.mails);
+
+                            }, reject);
+                    });
+            }
+        });
+    }
+
+    getMailsByLabel(handle): Promise<Mail[]>
+    {
+        return new Promise((resolve, reject) => {
+            this.http.get('api/mail-labels?handle=' + handle)
+                .subscribe(labels => {
+
+                    const labelId = labels.json().data[0].id;
+
+                    this.http.get('api/mail-mails?labels=' + labelId)
+                        .subscribe(mails => {
+
+                            this.mails = mails.json().data.map(mail => {
+                                return new Mail(mail);
+                            });
+
+                            this.onMailsUpdated.next(this.mails);
+
+                            resolve(this.mails);
+
+                        }, reject);
+                });
+        });
+    }
+
+    getMailById(id): Promise<Mail>
+    {
+        return new Promise((resolve, reject) => {
+            this.http.get('api/mail-mails/' + id)
+                .subscribe(mail => {
+                    resolve(mail.json().data);
+                }, reject);
+        });
+    }
+
+    setSelectedMail(id)
+    {
+        this.selectedMail = this.mails.find(mail => {
+            return mail.id === id;
+        });
+
+        this.onSelectedMailUpdated.next(this.selectedMail);
+    }
+
+    update(mail)
+    {
+        return new Promise((resolve, reject) => {
+            this.http.post('api/mail-mails/' + mail.id, {...mail}).subscribe(response => {
+
+                console.log(response);
+
+                this.getMails().then(mails => {
+
+                    if ( mails && this.selectedMail )
+                    {
+                        this.setSelectedMail(this.selectedMail.id);
+                    }
+
+                    resolve(mails);
+
+                }, reject);
+            });
+        });
+    }
+
+}

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

@@ -22,12 +22,21 @@
 <!-- SIDENAV CONTENT -->
 <div class="content" perfect-scrollbar>
 
-    <a routerLink="/apps/mail/inbox">Inbox</a>
-    <a routerLink="/apps/mail/sent">Sent</a>
-    <a routerLink="/apps/mail/drafts">Drafts</a>
-    <a routerLink="/apps/mail/spam">Spam</a>
+    <md-list>
+        <div md-subheader>FOLDERS</div>
+        <md-list-item *ngFor="let folder of folders">
+            <a md-line [routerLink]="'/apps/mail/' + folder.handle">
+                {{ folder.title }}
+            </a>
+        </md-list-item>
 
-    <a routerLink="/apps/mail/true">Spam</a>
+        <div md-subheader>LABELS</div>
+        <md-list-item *ngFor="let label of labels">
+            <a md-line [routerLink]="'/apps/mail/label/' + label.handle">
+                {{ label.title }}
+            </a>
+        </md-list-item>
+    </md-list>
 
 </div>
 <!-- / SIDENAV CONTENT -->

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

@@ -1,4 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MailService } from '../../mail.service';
 
 @Component({
     selector   : 'fuse-mail-main-sidenav',
@@ -7,20 +8,35 @@ import {Component, OnInit} from '@angular/core';
 })
 export class MainSidenavComponent implements OnInit
 {
+    labels: any[];
+    folders: any[];
     accounts: object;
     selectedAccount: string;
 
-    constructor()
+    constructor(
+        private mailService: MailService
+    )
     {
         // Data
         this.accounts = {
             'creapond'    : 'johndoe@creapond.com',
             'withinpixels': 'johndoe@withinpixels.com'
         };
+
         this.selectedAccount = 'creapond';
     }
 
     ngOnInit()
     {
+        this.labels = this.mailService.labels;
+        this.folders = this.mailService.folders;
+
+        this.mailService.onLabelsUpdated.subscribe(labels => {
+            this.labels = this.mailService.labels;
+        });
+
+        this.mailService.onFoldersUpdated.subscribe(folders => {
+            this.folders = this.mailService.folders;
+        });
     }
 }