From b9569a5ba8daf8a032994f7965aa5f4119ec3b01 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 19 Jul 2017 17:58:36 +0300 Subject: [PATCH] mail.. --- .../navigation/navigation.component.scss | 12 ----- src/app/core/modules/shared.module.ts | 27 +++++----- src/app/core/pipes/getById.pipe.ts | 22 +++++++++ ...ToPlaintext.ts => htmlToPlaintext.pipe.ts} | 0 src/app/core/pipes/keys.pipe.ts | 23 +++++++++ src/app/core/pipes/keys.ts | 15 ------ src/app/core/pipes/pipes.module.ts | 27 ++++++++++ src/app/core/pipes/search.pipe.ts | 49 +++++++++++++++++++ .../mail-details/mail-details.component.html | 13 +++-- .../mail-details/mail-details.component.scss | 9 ++-- .../mail-details/mail-details.component.ts | 5 +- .../mail-list-item.component.html | 4 +- .../mail-list-item.component.ts | 4 +- .../mail/mail-list/mail-list.component.html | 15 +++++- .../mail/mail-list/mail-list.component.ts | 35 ++++++++++--- src/app/main/apps/mail/mail.component.html | 6 +-- src/app/main/apps/mail/mail.service.ts | 3 +- .../sidenavs/main/main-sidenav.component.html | 4 +- 18 files changed, 203 insertions(+), 70 deletions(-) create mode 100644 src/app/core/pipes/getById.pipe.ts rename src/app/core/pipes/{htmlToPlaintext.ts => htmlToPlaintext.pipe.ts} (100%) create mode 100644 src/app/core/pipes/keys.pipe.ts delete mode 100644 src/app/core/pipes/keys.ts create mode 100644 src/app/core/pipes/pipes.module.ts create mode 100644 src/app/core/pipes/search.pipe.ts diff --git a/src/app/core/components/navigation/navigation.component.scss b/src/app/core/components/navigation/navigation.component.scss index d22262b2..8087fe06 100644 --- a/src/app/core/components/navigation/navigation.component.scss +++ b/src/app/core/components/navigation/navigation.component.scss @@ -3,16 +3,4 @@ #main-navigation { margin: 0; padding: 0; - - .nav-item { - - .nav-link { - background-color: map-get($background, raised-button); - color: map_get($foreground, text); - - &:hover { - background-color: map-get($background, hover); - } - } - } } diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 5c698762..66d60ba4 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -1,28 +1,28 @@ -import {NgModule} from '@angular/core'; -import {MaterialModule} from './material.module'; -import {FlexLayoutModule} from '@angular/flex-layout'; -import {FormsModule} from '@angular/forms'; -import {CommonModule} from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { MaterialModule } from './material.module'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; + import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; -import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar'; -import {KeysPipe} from '../pipes/keys'; -import {HtmlToPlaintextPipe} from '../pipes//htmlToPlaintext'; +import { FusePipesModule } from '../pipes/pipes.module'; @NgModule({ declarations: [ FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, - KeysPipe, - HtmlToPlaintextPipe + FuseMdSidenavTogglerDirective ], imports : [ FlexLayoutModule, MaterialModule, CommonModule, FormsModule, + FusePipesModule, PerfectScrollbarModule ], exports : [ @@ -32,9 +32,8 @@ import {HtmlToPlaintextPipe} from '../pipes//htmlToPlaintext'; FormsModule, FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective, - PerfectScrollbarModule, - KeysPipe, - HtmlToPlaintextPipe + FusePipesModule, + PerfectScrollbarModule ] }) diff --git a/src/app/core/pipes/getById.pipe.ts b/src/app/core/pipes/getById.pipe.ts new file mode 100644 index 00000000..fbbf6895 --- /dev/null +++ b/src/app/core/pipes/getById.pipe.ts @@ -0,0 +1,22 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({name: 'getById'}) +export class GetByIdPipe implements PipeTransform +{ + transform(value: any[], id: number, property: string ): any + { + const foundItem = value.find(item => { + if ( item.id ) + { + return item.id === id; + } + + return false; + }); + + if ( foundItem ) + { + return foundItem[property]; + } + } +} diff --git a/src/app/core/pipes/htmlToPlaintext.ts b/src/app/core/pipes/htmlToPlaintext.pipe.ts similarity index 100% rename from src/app/core/pipes/htmlToPlaintext.ts rename to src/app/core/pipes/htmlToPlaintext.pipe.ts diff --git a/src/app/core/pipes/keys.pipe.ts b/src/app/core/pipes/keys.pipe.ts new file mode 100644 index 00000000..03b6355a --- /dev/null +++ b/src/app/core/pipes/keys.pipe.ts @@ -0,0 +1,23 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({name: 'keys'}) +export class KeysPipe implements PipeTransform +{ + transform(value: any, args: string[]): any + { + const keys: any[] = []; + + for ( const key in value ) + { + if ( value.hasOwnProperty(key) ) + { + keys.push({ + key : key, + value: value[key] + }); + } + } + + return keys; + } +} diff --git a/src/app/core/pipes/keys.ts b/src/app/core/pipes/keys.ts deleted file mode 100644 index e7a03181..00000000 --- a/src/app/core/pipes/keys.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {Pipe, PipeTransform} from '@angular/core'; - -@Pipe({name: 'keys'}) -export class KeysPipe implements PipeTransform -{ - transform(value: any, args: string[]): any - { - let keys: any[] = []; - for ( let key in value ) - { - keys.push({key: key, value: value[key]}); - } - return keys; - } -} diff --git a/src/app/core/pipes/pipes.module.ts b/src/app/core/pipes/pipes.module.ts new file mode 100644 index 00000000..a5f01259 --- /dev/null +++ b/src/app/core/pipes/pipes.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; + +import { KeysPipe } from './keys.pipe'; +import { GetByIdPipe } from './getById.pipe'; +import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe'; +import { SearchPipe } from './search.pipe'; + +@NgModule({ + declarations: [ + KeysPipe, + GetByIdPipe, + HtmlToPlaintextPipe, + SearchPipe + ], + imports : [], + exports : [ + KeysPipe, + GetByIdPipe, + HtmlToPlaintextPipe, + SearchPipe + ] +}) + +export class FusePipesModule +{ + +} diff --git a/src/app/core/pipes/search.pipe.ts b/src/app/core/pipes/search.pipe.ts new file mode 100644 index 00000000..afa0e955 --- /dev/null +++ b/src/app/core/pipes/search.pipe.ts @@ -0,0 +1,49 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'filter' +}) +export class SearchPipe implements PipeTransform +{ + transform(items: any, term: string): any + { + if ( term === undefined ) + { + return items; + } + + return this.filter(items, term); + } + + filter(items: any, term: string) + { + return items.filter(item => { + + for ( const property in item ) + { + if ( !item.hasOwnProperty(property) || !item[property] ) + { + console.log('continueing...'); + continue; + } + + if ( Array.isArray(item[property]) ) + { + console.log('is Array'); + return this.filter(item[property], term); + } + + if ( item[property].toString().toLowerCase().includes(term.toLowerCase()) ) + { + console.log('found!'); + return true; + } + } + + return false; + } + ); + } +} + + 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 10da4bfd..3b7e5a5c 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 @@ -1,3 +1,8 @@ +
+ email + Select a message to read +
+
@@ -6,8 +11,8 @@
{{mail.subject}}
-
- {{labelId}} +
{{labels | getById:labelId:'title'}}
@@ -128,8 +133,8 @@
- View - Download + View + Download
({{attachment.size}})
diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss index f2dd5be5..2483238a 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.scss +++ b/src/app/main/apps/mail/mail-details/mail-details.component.scss @@ -1,6 +1,9 @@ @import 'src/app/core/scss/fuse'; :host { + display: flex; + flex-direction: column; + flex: 1; background: #FFFFFF; padding: 24px; @@ -10,12 +13,6 @@ .actions { min-width: 88px; - - .mat-icon-button { - padding: 0; - width: 32px; - height: 32px; - } } .subject { 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 6708bf97..bb9744a4 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,7 +1,6 @@ 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', @@ -12,9 +11,9 @@ export class MailDetailsComponent implements OnInit { @Input('selectedMail') public mail: Mail; showDetails: boolean; + labels: any[]; constructor( - private route: ActivatedRoute, private mailService: MailService ) { @@ -23,7 +22,7 @@ export class MailDetailsComponent implements OnInit ngOnInit() { - + this.labels = this.mailService.labels; } toggleStar(event) 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 41ccbd50..a69ad022 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 @@ -24,7 +24,9 @@ {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
-
{{labelId}}
+
{{labels | getById:labelId:'title'}} +
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 288cb613..e8bf868d 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,7 +1,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { Mail } from '../../mail.model'; import { MailService } from '../../mail.service'; -import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector : 'fuse-mail-list-item', @@ -11,6 +11,7 @@ import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; export class MailListItemComponent implements OnInit { @Input() mail: Mail; + labels: any[]; constructor( private route: ActivatedRoute, @@ -23,6 +24,7 @@ export class MailListItemComponent implements OnInit ngOnInit() { this.mail = new Mail(this.mail); + this.labels = this.mailService.labels; } toggleStar(event) 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 8cd5b8b7..698a242d 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,3 +1,16 @@ - + There are no messages! +
+ + + +{{search}} + +
+
+
+
+ + 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 794f821b..a38e4512 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,7 +1,8 @@ import { Component, Input, OnInit } from '@angular/core'; import { Mail } from '../mail.model'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { MailService } from '../mail.service'; +import { Location } from '@angular/common'; @Component({ selector : 'fuse-mail-list', @@ -14,10 +15,12 @@ export class MailListComponent implements OnInit @Input('selectedMail') public selectedMail: Mail; + search: string; + constructor( private route: ActivatedRoute, - private router: Router, - private mailService: MailService + private mailService: MailService, + private location: Location ) { } @@ -30,9 +33,26 @@ export class MailListComponent implements OnInit // Subscribe to update mails on changes this.mailService.onMailsUpdated .subscribe(mails => { - console.log('mailsUpdated'); this.mails = mails; }); + + this.mailService.onSelectedMailUpdated + .subscribe(selectedMail => { + if ( !selectedMail ) + { + const labelHandle = this.route.snapshot.params.labelHandle, + folderHandle = this.route.snapshot.params.folderHandle; + + if ( labelHandle ) + { + this.location.go('apps/mail/label/' + labelHandle); + } + else + { + this.location.go('apps/mail/' + folderHandle); + } + } + }); } selectMail(mailId) @@ -42,12 +62,15 @@ export class MailListComponent implements OnInit if ( labelHandle ) { - this.router.navigate(['apps/mail/label', labelHandle, mailId]); + this.location.go('apps/mail/label/' + labelHandle + '/' + mailId); } else { - this.router.navigate(['apps/mail', folderHandle, mailId]); + this.location.go('apps/mail/' + folderHandle + '/' + mailId); } + + // Set selected mail + this.mailService.setSelectedMail(mailId); } } diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html index 220b82ab..406c341c 100644 --- a/src/app/main/apps/mail/mail.component.html +++ b/src/app/main/apps/mail/mail.component.html @@ -47,13 +47,13 @@ -
+
- + - +
diff --git a/src/app/main/apps/mail/mail.service.ts b/src/app/main/apps/mail/mail.service.ts index 4a2bead1..b9a718d2 100644 --- a/src/app/main/apps/mail/mail.service.ts +++ b/src/app/main/apps/mail/mail.service.ts @@ -177,9 +177,8 @@ export class MailService implements Resolve update(mail) { return new Promise((resolve, reject) => { - this.http.post('api/mail-mails/' + mail.id, {...mail}).subscribe(response => { - console.log(response); + this.http.post('api/mail-mails/' + mail.id, {...mail}).subscribe(response => { this.getMails().then(mails => { 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 52e259c2..b252e44d 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 @@ -27,7 +27,7 @@
FOLDERS
- + {{item.icon}} {{item.title}} @@ -36,7 +36,7 @@
LABELS
- + label {{item.title}}