From c3cb5c89427b8ac8bfb0e225e310b9ef4837e107 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 18 Jul 2017 19:34:12 +0300 Subject: [PATCH] mail.. --- src/app/app.module.ts | 12 +- src/app/main/apps/mail/mail-data.service.ts | 43 ---- .../mail-details/mail-details.component.html | 9 +- .../mail-details/mail-details.component.ts | 32 ++- .../mail-list-item.component.html | 8 +- .../mail-list-item.component.ts | 30 ++- .../mail/mail-list/mail-list.component.html | 16 +- .../mail/mail-list/mail-list.component.ts | 77 +++---- src/app/main/apps/mail/mail.component.html | 2 +- src/app/main/apps/mail/mail.component.ts | 22 +- src/app/main/apps/mail/mail.model.ts | 46 ++-- src/app/main/apps/mail/mail.module.ts | 34 ++- src/app/main/apps/mail/mail.service.ts | 198 ++++++++++++++++++ .../sidenavs/main/main-sidenav.component.html | 19 +- .../sidenavs/main/main-sidenav.component.ts | 20 +- 15 files changed, 385 insertions(+), 183 deletions(-) delete mode 100644 src/app/main/apps/mail/mail-data.service.ts create mode 100644 src/app/main/apps/mail/mail.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 36ecd1ef..4a69a6e5 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/main/apps/mail/mail-data.service.ts b/src/app/main/apps/mail/mail-data.service.ts deleted file mode 100644 index a48545c0..00000000 --- a/src/app/main/apps/mail/mail-data.service.ts +++ /dev/null @@ -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 -{ - constructor( - private http: Http - ) - { - } - - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | 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) - { - - } -} diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html index e16aea85..10da4bfd 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/apps/mail/mail-details/mail-details.component.html @@ -13,14 +13,12 @@
- - @@ -118,7 +116,8 @@
- Attachments ({{mail.attachments.length}}) + Attachments + ({{mail.attachments.length}})
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.ts b/src/app/main/apps/mail/mail-details/mail-details.component.ts index 856c72f8..6708bf97 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.ts +++ b/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); } } diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html index 0513b70b..41ccbd50 100644 --- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html @@ -35,16 +35,12 @@
{{mail.time}}
- - diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts index 6298e808..288cb613 100644 --- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts +++ b/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); + } } diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html index a5da02c8..8cd5b8b7 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list.component.html @@ -1,15 +1,3 @@ - - - -
-
-
-
-
-
-
-
- - + diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.ts b/src/app/main/apps/mail/mail-list/mail-list.component.ts index c9d15962..794f821b 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.ts +++ b/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(); + @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]); + } } } diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html index 978f60b3..220b82ab 100644 --- a/src/app/main/apps/mail/mail.component.html +++ b/src/app/main/apps/mail/mail.component.html @@ -51,7 +51,7 @@
- + diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index 57d6d2ce..82649721 100644 --- a/src/app/main/apps/mail/mail.component.ts +++ b/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; + }); } } diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts index 99a24b3b..b61e420f 100644 --- a/src/app/main/apps/mail/mail.model.ts +++ b/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; } } diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts index 8b25dc17..88f486d5 100644 --- a/src/app/main/apps/mail/mail.module.ts +++ b/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 { diff --git a/src/app/main/apps/mail/mail.service.ts b/src/app/main/apps/mail/mail.service.ts new file mode 100644 index 00000000..4a2bead1 --- /dev/null +++ b/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 +{ + mails: Mail[]; + selectedMail: Mail; + labels: any[]; + folders: any[]; + + routeParams: any; + + onMailsUpdated = new Subject(); + onSelectedMailUpdated = new Subject(); + onLabelsUpdated = new Subject(); + onFoldersUpdated = new Subject(); + + constructor( + private http: Http + ) + { + + } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | 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 + { + 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 + { + 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 + { + if ( this.routeParams.labelHandle ) + { + return this.getMailsByLabel(this.routeParams.labelHandle); + } + + return this.getMailsByFolder(this.routeParams.folderHandle); + } + + getMailsByFolder(handle): Promise + { + 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 + { + 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 + { + 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); + }); + }); + } + +} diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html index 4fa6704d..c85429d2 100644 --- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html @@ -22,12 +22,21 @@
- Inbox - Sent - Drafts - Spam + +
FOLDERS
+ + + {{ folder.title }} + + - Spam +
LABELS
+ + + {{ label.title }} + + +
\ No newline at end of file diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts index 74cc5861..45c715db 100644 --- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts +++ b/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; + }); } }