diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts index f140d216..dfe9a89e 100644 --- a/src/app/core/animations.ts +++ b/src/app/core/animations.ts @@ -3,20 +3,66 @@ import { trigger, state, transition, animate, style } from '@angular/animations' export class Animations { public static slideInOut = trigger('slideInOut', [ - state('0', style({height: '0px', display: 'none'})), - state('1', style({height: '*', display: 'block'})), + state('0', style({ + height : '0px', + display: 'none' + })), + state('1', style({ + height : '*', + display: 'block' + })), transition('1 => 0', animate('300ms ease-out')), transition('0 => 1', animate('300ms ease-in')) ]); + public static slideInLeft = trigger('slideInLeft', [ - state('void', style({transform: 'translateX(-100%)', display: 'none'})), - state('*', style({transform: 'translateX(0)', display: 'flex'})), + state('void', style({ + transform: 'translateX(-100%)', + display : 'none' + })), + state('*', style({ + transform: 'translateX(0)', + display : 'flex' + })), transition('void => *', animate('300ms')), transition('* => void', animate('300ms')) ]); + public static slideInRight = trigger('slideInRight', [ - state('void', style({transform: 'translateX(100%)', display: 'none'})), - state('*', style({transform: 'translateX(0)', display: 'flex'})), + state('void', style({ + transform: 'translateX(100%)', + display : 'none' + })), + state('*', style({ + transform: 'translateX(0)', + display : 'flex' + })), + transition('void => *', animate('300ms')), + transition('* => void', animate('300ms')) + ]); + + public static slideInTop = trigger('slideInTop', [ + state('void', style({ + transform: 'translateY(-100%)', + display : 'none' + })), + state('*', style({ + transform: 'translateY(0)', + display : 'flex' + })), + transition('void => *', animate('300ms')), + transition('* => void', animate('300ms')) + ]); + + public static slideInBottom = trigger('slideInBottom', [ + state('void', style({ + transform: 'translateY(100%)', + display : 'none' + })), + state('*', style({ + transform: 'translateY(0)', + display : 'flex' + })), transition('void => *', animate('300ms')), transition('* => void', animate('300ms')) ]); diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index a7be38a2..e511e112 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -308,6 +308,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too &.inner-sidenav { > md-sidenav-container { + flex: 1; .sidenav { @@ -332,7 +333,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .content { display: flex; flex: 1; - min-height: 100%; } } } diff --git a/src/app/fuse-fake-db/contacts.ts b/src/app/fuse-fake-db/contacts.ts index caa222d8..67d36ea9 100644 --- a/src/app/fuse-fake-db/contacts.ts +++ b/src/app/fuse-fake-db/contacts.ts @@ -352,4 +352,60 @@ export class ContactsFakeDb 'notes' : '' } ]; + + public static user = [ + { + 'id' : '5725a6802d10e277a0f35724', + 'name' : 'John Doe', + 'avatar' : 'assets/images/avatars/profile.jpg', + 'starred' : [ + '5725a680ae1ae9a3c960d487', + '5725a6801146cce777df2a08', + '5725a680bbcec3cc32a8488a', + '5725a680bc670af746c435e2', + '5725a68009e20d0a9e9acf2a' + ], + 'frequentContacts': [ + '5725a6809fdd915739187ed5', + '5725a68031fdbb1db2c1af47', + '5725a680606588342058356d', + '5725a680e7eb988a58ddf303', + '5725a6806acf030f9341e925', + '5725a68034cb3968e1f79eac', + '5725a6801146cce777df2a08', + '5725a680653c265f5c79b5a9' + ], + 'groups' : [ + { + 'id' : '5725a6802d10e277a0f35739', + 'name' : 'Friends', + 'contactIds': [ + '5725a680bbcec3cc32a8488a', + '5725a680e87cb319bd9bd673', + '5725a6802d10e277a0f35775' + ] + }, + { + 'id' : '5725a6802d10e277a0f35749', + 'name' : 'Clients', + 'contactIds': [ + '5725a680cd7efa56a45aea5d', + '5725a68018c663044be49cbf', + '5725a6809413bf8a0a5272b1', + '5725a6803d87f1b77e17b62b' + ] + }, + { + 'id' : '5725a6802d10e277a0f35329', + 'name' : 'Recent Workers', + 'contactIds': [ + '5725a680bbcec3cc32a8488a', + '5725a680653c265f5c79b5a9', + '5725a6808a178bfd034d6ecf', + '5725a6801146cce777df2a08' + ] + } + ] + } + ]; } diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fuse-fake-db/fuse-fake-db.service.ts index b0de5812..ac41b9a2 100644 --- a/src/app/fuse-fake-db/fuse-fake-db.service.ts +++ b/src/app/fuse-fake-db/fuse-fake-db.service.ts @@ -30,6 +30,7 @@ export class FuseFakeDbService implements InMemoryDbService 'profile-photos-videos': ProfileFakeDb.photosVideos, 'profile-about' : ProfileFakeDb.about, 'contacts-contacts' : ContactsFakeDb.contacts, + 'contacts-user' : ContactsFakeDb.user, 'invoice' : InvoiceFakeDb.invoice, 'file-manager' : FileManagerFakeDb.files, 'search-classic' : SearchFakeDb.classic, diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html index 76e65027..e81b93a4 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html @@ -4,13 +4,15 @@ - Check + + - Name + @@ -27,9 +29,9 @@ - Email - - @@ -37,9 +39,9 @@ - Phone - -

+ Phone + +

{{contact.phone}}

@@ -47,9 +49,9 @@ - Job title - -

+ Job title + +

{{contact.jobTitle}}

@@ -57,9 +59,9 @@ - Company - -

+ Company + +

{{contact.company}}

@@ -68,15 +70,33 @@ - - Buttons + +
+ + + + + + + +
+ diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss index f7e1316c..20a7e0c3 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss @@ -1,20 +1,30 @@ @import "src/app/core/scss/fuse"; :host { + flex: 1; + .mat-table { background: transparent; box-shadow: none; + .mat-column-checkbox { + flex: 0 1 64px; + } + + .mat-column-avatar { + flex: 0 1 64px; + } + + .mat-column-buttons { + flex: 0 1 80px; + } + .mat-row { position: relative; cursor: pointer; .mat-cell { - - &.mat-column-icon { - flex: 0 1 auto; - padding: 0 24px 0 0; - } + min-width: 0; &.mat-column-detail-button { flex: 0 1 auto; diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts index c988fdd8..0399a062 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts @@ -11,28 +11,70 @@ import { Observable } from 'rxjs/Observable'; export class ContactListComponent implements OnInit { contacts: any; + user: any; dataSource: FilesDataSource | null; displayedColumns = ['checkbox', 'avatar', 'name', 'email', 'phone', 'jobTitle', 'buttons']; - selected: any; + selectedContacts: any[]; + checkboxes: {}; - constructor(private fileManagerService: ContactsService) + constructor(private contactsService: ContactsService) { - this.fileManagerService.onContactsChanged.subscribe(files => { - this.contacts = files; + this.contactsService.onContactsChanged.subscribe(contacts => { + + this.contacts = contacts; + + this.checkboxes = {}; + contacts.map(contact => { + this.checkboxes[contact.id] = false; + }); }); - this.fileManagerService.onContactSelected.subscribe(selected => { - this.selected = selected; + + this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => { + for ( const id in this.checkboxes ) + { + this.checkboxes[id] = selectedContacts.includes(id); + } + this.selectedContacts = selectedContacts; }); + + this.contactsService.onUserDataChanged.subscribe(user => { + this.user = user; + }); + } ngOnInit() { - this.dataSource = new FilesDataSource(this.fileManagerService); + this.dataSource = new FilesDataSource(this.contactsService); } onSelect(selected) { - this.fileManagerService.onContactSelected.next(selected); + // this.fileManagerService.onContactSelected.next(selected); + } + + onSelectedChange(contactId) + { + this.contactsService.toggleSelectedContact(contactId); + } + + toggleStar(contactId) + { + if ( this.user.starred.includes(contactId) ) + { + this.user.starred.splice(this.user.starred.indexOf(contactId), 1); + } + else + { + this.user.starred.push(contactId); + } + + this.contactsService.updateUserData(this.user); + } + + removeContact(contactId) + { + } } diff --git a/src/app/main/content/apps/contacts/contact.model.ts b/src/app/main/content/apps/contacts/contact.model.ts new file mode 100644 index 00000000..9cd2a8f4 --- /dev/null +++ b/src/app/main/content/apps/contacts/contact.model.ts @@ -0,0 +1,35 @@ +export class Contact +{ + id: string; + name: string; + lastName: string; + avatar: string; + nickname: string; + company: string; + jobTitle: string; + email: string; + phone: string; + address: string; + birthday: string; + notes: string; + + constructor(contact) + { + { + + this.id = contact.id; + this.name = contact.name; + this.lastName = contact.lastName; + this.avatar = contact.avatar; + this.nickname = contact.nickname; + this.company = contact.company; + this.jobTitle = contact.jobTitle; + this.email = contact.email; + this.phone = contact.phone; + this.address = contact.address; + this.birthday = contact.birhday; + this.notes = contact.notes; + } + } + +} diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html index b7053db6..74134922 100644 --- a/src/app/main/content/apps/contacts/contacts.component.html +++ b/src/app/main/content/apps/contacts/contacts.component.html @@ -1,7 +1,7 @@ -
+
-
+
@@ -26,7 +26,7 @@ search - +
@@ -34,15 +34,17 @@
+ + + + -
- -
+ @@ -51,7 +53,7 @@
-
+
diff --git a/src/app/main/content/apps/contacts/contacts.component.scss b/src/app/main/content/apps/contacts/contacts.component.scss index ea264e31..52a72707 100644 --- a/src/app/main/content/apps/contacts/contacts.component.scss +++ b/src/app/main/content/apps/contacts/contacts.component.scss @@ -1,2 +1,5 @@ @import "src/app/core/scss/fuse"; +#contacts { + +} diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/content/apps/contacts/contacts.component.ts index 68e364b4..5bbbeb73 100644 --- a/src/app/main/content/apps/contacts/contacts.component.ts +++ b/src/app/main/content/apps/contacts/contacts.component.ts @@ -1,27 +1,39 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { ContactsService } from './contacts.service'; +import { Animations } from '../../../../core/animations'; +import { FormControl } from '@angular/forms'; @Component({ selector : 'fuse-contacts', templateUrl : './contacts.component.html', styleUrls : ['./contacts.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + animations : [Animations.slideInTop] }) export class ContactsComponent implements OnInit { - - selected: any; + hasSelectedContacts: boolean; + searchInput: FormControl; constructor(private contactsService: ContactsService) { - + this.searchInput = new FormControl(''); } ngOnInit() { - this.contactsService.onContactSelected.subscribe(selected => { - this.selected = selected; - }); + + this.contactsService.onSelectedContactsChanged + .subscribe(selectedContacts => { + this.hasSelectedContacts = selectedContacts.length > 0; + }); + + this.searchInput.valueChanges + .debounceTime(300) + .distinctUntilChanged() + .subscribe(searchText => { + this.contactsService.onSearchTextChanged.next(searchText); + }); } } diff --git a/src/app/main/content/apps/contacts/contacts.module.ts b/src/app/main/content/apps/contacts/contacts.module.ts index 25c613ca..85ba07cb 100644 --- a/src/app/main/content/apps/contacts/contacts.module.ts +++ b/src/app/main/content/apps/contacts/contacts.module.ts @@ -5,6 +5,7 @@ import { MainSidenavComponent } from './sidenavs/main/main.component'; import { ContactsComponent } from './contacts.component'; import { ContactsService } from './contacts.service'; import { ContactListComponent } from './contact-list/contact-list.component'; +import { SelectedBarComponent } from './selected-bar/selected-bar.component'; const routes: Routes = [ { @@ -25,6 +26,7 @@ const routes: Routes = [ declarations: [ ContactsComponent, ContactListComponent, + SelectedBarComponent, MainSidenavComponent ], providers : [ diff --git a/src/app/main/content/apps/contacts/contacts.service.ts b/src/app/main/content/apps/contacts/contacts.service.ts index 6a84b3e4..6b6ed458 100644 --- a/src/app/main/content/apps/contacts/contacts.service.ts +++ b/src/app/main/content/apps/contacts/contacts.service.ts @@ -3,12 +3,24 @@ import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/r import { Observable } from 'rxjs/Observable'; import { Http } from '@angular/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Contact } from './contact.model'; +import { FuseUtils } from '../../../../core/fuseUtils'; +import { Subject } from 'rxjs/Subject'; @Injectable() export class ContactsService implements Resolve { onContactsChanged: BehaviorSubject = new BehaviorSubject({}); - onContactSelected: BehaviorSubject = new BehaviorSubject({}); + + onSelectedContactsChanged: BehaviorSubject = new BehaviorSubject([]); + + onUserDataChanged: BehaviorSubject = new BehaviorSubject([]); + + onSearchTextChanged: Subject = new Subject(); + + contacts: Contact[]; + user: any; + selectedContacts: string[] = []; constructor(private http: Http) { @@ -26,26 +38,159 @@ export class ContactsService implements Resolve return new Promise((resolve, reject) => { Promise.all([ - this.getContacts() + this.getContacts(), + this.getUserData() ]).then( ([files]) => { + + this.onSearchTextChanged.subscribe(searchText => { + this.getContacts(searchText); + }); + resolve(); + }, reject ); }); } - getContacts(): Promise + getContacts(searchText?): Promise { return new Promise((resolve, reject) => { - this.http.get('api/contacts-contacts') + this.http.get('api/contacts-contacts') + .subscribe(response => { + + this.contacts = response.json().data; + + if ( searchText && searchText !== '' ) + { + this.contacts = FuseUtils.filterArrayByString(this.contacts, searchText); + } + + this.contacts = this.contacts.map(contact => { + return new Contact(contact); + }); + + this.onContactsChanged.next(this.contacts); + resolve(this.contacts); + }, reject); + } + ); + } + + getUserData(): Promise + { + return new Promise((resolve, reject) => { + this.http.get('api/contacts-user/5725a6802d10e277a0f35724') + .subscribe(response => { + this.user = response.json().data; + this.onUserDataChanged.next(this.user); + resolve(this.user); + }, reject); + } + ); + } + + /** + * Toggle selected contact by id + * @param id + */ + toggleSelectedContact(id) + { + // First, check if we already have that todo as selected... + if ( this.selectedContacts.length > 0 ) + { + const index = this.selectedContacts.indexOf(id); + + if ( index !== -1 ) + { + this.selectedContacts.splice(index, 1); + + // Trigger the next event + this.onSelectedContactsChanged.next(this.selectedContacts); + + // Return + return; + } + } + + // If we don't have it, push as selected + this.selectedContacts.push(id); + + // Trigger the next event + this.onSelectedContactsChanged.next(this.selectedContacts); + } + + /** + * Toggle select all + */ + toggleSelectAll() + { + console.info(this.selectedContacts); + if ( this.selectedContacts.length > 0 ) + { + this.deselectContacts(); + } + else + { + this.selectContacts(); + } + } + + selectContacts(filterParameter?, filterValue?) + { + this.selectedContacts = []; + + // If there is no filter, select all todos + if ( filterParameter === undefined || filterValue === undefined ) + { + this.selectedContacts = []; + this.contacts.map(contact => { + this.selectedContacts.push(contact.id); + }); + } + else + { + /* this.selectedContacts.push(... + this.contacts.filter(todo => { + return todo[filterParameter] === filterValue; + }) + );*/ + } + + // Trigger the next event + this.onSelectedContactsChanged.next(this.selectedContacts); + } + + updateContact(contact) + { + return new Promise((resolve, reject) => { + + this.http.post('api/contacts-contacts/' + contact.id, {...contact}) .subscribe(response => { - this.onContactsChanged.next(response.json().data); - this.onContactSelected.next(response.json().data[0]); - resolve(response.json().data); - }, reject); + resolve(response); + }); }); } + updateUserData(userData) + { + return new Promise((resolve, reject) => { + this.http.post('api/contacts-user/' + this.user.id, {...userData}) + .subscribe(response => { + this.getUserData(); + resolve(response); + }); + }); + } + + deselectContacts() + { + this.selectedContacts = []; + + // Trigger the next event + this.onSelectedContactsChanged.next(this.selectedContacts); + } + } diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html new file mode 100644 index 00000000..59d35f3c --- /dev/null +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html @@ -0,0 +1,37 @@ +
+ +
+ +
+ +
+ +
+ + {{selectedContacts.length}} + selected + + + + + + + + +
+ +
+ +
+ +
+ +
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss new file mode 100644 index 00000000..40c33970 --- /dev/null +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss @@ -0,0 +1,11 @@ +@import "src/app/core/scss/fuse"; + +:host { + flex: 1; + position: absolute; + top: 0; + right: 0; + left: 0; + height: 120px; + z-index: 99; +} diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts new file mode 100644 index 00000000..243f4991 --- /dev/null +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from '@angular/core'; +import { ContactsService } from '../contacts.service'; + +@Component({ + selector : 'fuse-selected-bar', + templateUrl: './selected-bar.component.html', + styleUrls : ['./selected-bar.component.scss'] +}) +export class SelectedBarComponent implements OnInit +{ + selectedContacts: string[]; + hasSelectedContacts: boolean; + isIndeterminate: boolean; + + constructor(private contactsService: ContactsService) + { + this.contactsService.onSelectedContactsChanged + .subscribe(selectedContacts => { + this.selectedContacts = selectedContacts; + setTimeout(() => { + this.hasSelectedContacts = selectedContacts.length > 0; + this.isIndeterminate = (selectedContacts.length !== this.contactsService.contacts.length && selectedContacts.length > 0); + }, 0); + }); + + } + + ngOnInit() + { + } + + selectAll() + { + this.contactsService.selectContacts(); + } + + deselectAll() + { + this.contactsService.deselectContacts(); + } + + deleteSelectedContacts() + { + + } + +} diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html index d640990a..c6c5d63d 100644 --- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html +++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html @@ -1,54 +1,42 @@ - -
+
- +
+ +
-
- + + + {{user.name}} + - -
- -
- -
- - folder - My Files -
+ -
- - star -
Starred
- -
+ +
-
- - folder_shared -
Sharred with me
- -
+
-
- - access_time -
Recent
- -
+
+ + All Contacts + +
+ +
+ +
Freequently contacted
+ +
+ +
+ +
Starred Contacts
+ +
+
-
- - not_interested -
Offline
-
-
diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss index 678b3c81..4db16fa3 100644 --- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss +++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss @@ -4,8 +4,23 @@ flex: 1 0 auto; height: 100%; - > .header { - flex: 0 1 auto; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + .sidenav-content { + display: flex; + flex-direction: column; + + .card { + display: flex; + flex-direction: column; + flex: 0 1 auto; + + > .header { + flex: 0 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + } + + > .content { + flex: 0 1 auto; + } + } } } diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts index 93eb77db..2379d095 100644 --- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts +++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ContactsService } from '../../contacts.service'; @Component({ selector : 'fuse-contacts-main-sidenav', @@ -7,11 +8,13 @@ import { Component, OnInit } from '@angular/core'; }) export class MainSidenavComponent implements OnInit { - selected: any; + user: any; - constructor() + constructor(private contactsService: ContactsService) { - + this.contactsService.onUserDataChanged.subscribe(user => { + this.user = user; + }); } ngOnInit() diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss index 303de571..1fd21229 100644 --- a/src/app/main/main.component.scss +++ b/src/app/main/main.component.scss @@ -18,6 +18,7 @@ fuse-main { display: flex; flex: 1; flex-direction: column; + overflow: hidden; #wrapper { display: flex;