mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
(Chat Panel) Added a chat panel
This commit is contained in:
Sercan Yemen
parent
fb003bc96f
commit
595b16275b
|
|
@ -9,7 +9,7 @@
|
||||||
.theme-options-button {
|
.theme-options-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 160px;
|
top: 160px;
|
||||||
right: 0;
|
right: 70px;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: .75;
|
opacity: .90;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
|
|
||||||
mat-icon {
|
mat-icon {
|
||||||
|
|
|
||||||
323
src/app/fake-db/chat-panel.ts
Normal file
323
src/app/fake-db/chat-panel.ts
Normal file
|
|
@ -0,0 +1,323 @@
|
||||||
|
export class ChatPanelFakeDb
|
||||||
|
{
|
||||||
|
public static contacts = [
|
||||||
|
{
|
||||||
|
'id' : '5725a680b3249760ea21de52',
|
||||||
|
'name' : 'Alice Freeman',
|
||||||
|
'avatar': 'assets/images/avatars/alice.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680606588342058356d',
|
||||||
|
'name' : 'Arnold',
|
||||||
|
'avatar': 'assets/images/avatars/Arnold.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a68009e20d0a9e9acf2a',
|
||||||
|
'name' : 'Barrera',
|
||||||
|
'avatar': 'assets/images/avatars/Barrera.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6809fdd915739187ed5',
|
||||||
|
'name' : 'Blair',
|
||||||
|
'avatar': 'assets/images/avatars/Blair.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a68007920cf75051da64',
|
||||||
|
'name' : 'Boyle',
|
||||||
|
'avatar': 'assets/images/avatars/Boyle.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a68031fdbb1db2c1af47',
|
||||||
|
'name' : 'Christy',
|
||||||
|
'avatar': 'assets/images/avatars/Christy.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680bc670af746c435e2',
|
||||||
|
'name' : 'Copeland',
|
||||||
|
'avatar': 'assets/images/avatars/Copeland.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680e7eb988a58ddf303',
|
||||||
|
'name' : 'Estes',
|
||||||
|
'avatar': 'assets/images/avatars/Estes.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680dcb077889f758961',
|
||||||
|
'name' : 'Harper',
|
||||||
|
'avatar': 'assets/images/avatars/Harper.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6806acf030f9341e925',
|
||||||
|
'name' : 'Helen',
|
||||||
|
'avatar': 'assets/images/avatars/Helen.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680ae1ae9a3c960d487',
|
||||||
|
'name' : 'Henderson',
|
||||||
|
'avatar': 'assets/images/avatars/Henderson.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680b8d240c011dd224b',
|
||||||
|
'name' : 'Josefina',
|
||||||
|
'avatar': 'assets/images/avatars/Josefina.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a68034cb3968e1f79eac',
|
||||||
|
'name' : 'Katina',
|
||||||
|
'avatar': 'assets/images/avatars/Katina.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6801146cce777df2a08',
|
||||||
|
'name' : 'Lily',
|
||||||
|
'avatar': 'assets/images/avatars/Lily.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6808a178bfd034d6ecf',
|
||||||
|
'name' : 'Mai',
|
||||||
|
'avatar': 'assets/images/avatars/Mai.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680653c265f5c79b5a9',
|
||||||
|
'name' : 'Nancy',
|
||||||
|
'avatar': 'assets/images/avatars/Nancy.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680bbcec3cc32a8488a',
|
||||||
|
'name' : 'Nora',
|
||||||
|
'avatar': 'assets/images/avatars/Nora.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6803d87f1b77e17b62b',
|
||||||
|
'name' : 'Odessa',
|
||||||
|
'avatar': 'assets/images/avatars/Odessa.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||||
|
'unread': '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680e87cb319bd9bd673',
|
||||||
|
'name' : 'Reyna',
|
||||||
|
'avatar': 'assets/images/avatars/Reyna.jpg',
|
||||||
|
'status': 'offline',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6802d10e277a0f35775',
|
||||||
|
'name' : 'Shauna',
|
||||||
|
'avatar': 'assets/images/avatars/Shauna.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680aef1e5cf26dd3d1f',
|
||||||
|
'name' : 'Shepard',
|
||||||
|
'avatar': 'assets/images/avatars/Shepard.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680cd7efa56a45aea5d',
|
||||||
|
'name' : 'Tillman',
|
||||||
|
'avatar': 'assets/images/avatars/Tillman.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : '',
|
||||||
|
'unread': '99+'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a680fb65c91a82cb35e2',
|
||||||
|
'name' : 'Trevino',
|
||||||
|
'avatar': 'assets/images/avatars/Trevino.jpg',
|
||||||
|
'status': 'away',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a68018c663044be49cbf',
|
||||||
|
'name' : 'Tyson',
|
||||||
|
'avatar': 'assets/images/avatars/Tyson.jpg',
|
||||||
|
'status': 'do-not-disturb',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '5725a6809413bf8a0a5272b1',
|
||||||
|
'name' : 'Velazquez',
|
||||||
|
'avatar': 'assets/images/avatars/Velazquez.jpg',
|
||||||
|
'status': 'online',
|
||||||
|
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
public static chats = [
|
||||||
|
{
|
||||||
|
'id' : '1725a680b3249760ea21de52',
|
||||||
|
'dialog': [
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||||
|
'time' : '2017-03-22T08:54:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||||
|
'time' : '2017-03-22T08:55:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'We are losing money! Quick!',
|
||||||
|
'time' : '2017-03-22T09:00:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||||
|
'time' : '2017-03-22T09:02:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'You are the worst!',
|
||||||
|
'time' : '2017-03-22T09:05:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'We are losing money! Quick!',
|
||||||
|
'time' : '2017-03-22T09:15:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||||
|
'time' : '2017-03-22T09:20:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'You are the worst!',
|
||||||
|
'time' : '2017-03-22T09:22:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'We are losing money! Quick!',
|
||||||
|
'time' : '2017-03-22T09:25:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||||
|
'time' : '2017-03-22T09:27:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'You are the worst!',
|
||||||
|
'time' : '2017-03-22T09:33:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'We are losing money! Quick!',
|
||||||
|
'time' : '2017-03-22T09:35:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||||
|
'time' : '2017-03-22T09:45:28.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b3249760ea21de52',
|
||||||
|
'message': 'You are the worst!',
|
||||||
|
'time' : '2017-03-22T10:00:28.299Z'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '2725a680b8d240c011dd2243',
|
||||||
|
'dialog': [
|
||||||
|
{
|
||||||
|
'who' : '5725a680b8d240c011dd224b',
|
||||||
|
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||||
|
'time' : '2017-04-22T01:00:00.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a6802d10e277a0f35724',
|
||||||
|
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||||
|
'time' : '2017-04-22T01:05:00.299Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'who' : '5725a680b8d240c011dd224b',
|
||||||
|
'message': 'We are losing money! Quick!',
|
||||||
|
'time' : '2017-04-22T01:10:00.299Z'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id' : '3725a6809413bf8a0a5272b4',
|
||||||
|
'dialog': [
|
||||||
|
{
|
||||||
|
'who' : '5725a6809413bf8a0a5272b1',
|
||||||
|
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||||
|
'time' : '2017-04-22T02:10:00.299Z'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
public static user = [
|
||||||
|
{
|
||||||
|
'id' : '5725a6802d10e277a0f35724',
|
||||||
|
'name' : 'John Doe',
|
||||||
|
'avatar' : 'assets/images/avatars/profile.jpg',
|
||||||
|
'status' : 'online',
|
||||||
|
'mood' : '',
|
||||||
|
'chatList': [
|
||||||
|
{
|
||||||
|
'chatId' : '1725a680b3249760ea21de52',
|
||||||
|
'contactId' : '5725a680b3249760ea21de52',
|
||||||
|
'lastMessageTime': '2017-06-12T02:10:18.931Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'chatId' : '2725a680b8d240c011dd2243',
|
||||||
|
'contactId' : '5725a680606588342058356d',
|
||||||
|
'lastMessageTime': '2017-02-18T10:30:18.931Z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'chatId' : '3725a6809413bf8a0a5272b4',
|
||||||
|
'contactId' : '5725a68009e20d0a9e9acf2a',
|
||||||
|
'lastMessageTime': '2017-03-18T12:30:18.931Z'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -17,6 +17,7 @@ import { SearchFakeDb } from 'app/fake-db/search';
|
||||||
import { FaqFakeDb } from 'app/fake-db/faq';
|
import { FaqFakeDb } from 'app/fake-db/faq';
|
||||||
import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
|
import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
|
||||||
import { IconsFakeDb } from 'app/fake-db/icons';
|
import { IconsFakeDb } from 'app/fake-db/icons';
|
||||||
|
import { ChatPanelFakeDb } from 'app/fake-db/chat-panel';
|
||||||
import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';
|
import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';
|
||||||
|
|
||||||
export class FakeDbService implements InMemoryDbService
|
export class FakeDbService implements InMemoryDbService
|
||||||
|
|
@ -89,6 +90,11 @@ export class FakeDbService implements InMemoryDbService
|
||||||
// Icons
|
// Icons
|
||||||
'icons': IconsFakeDb.icons,
|
'icons': IconsFakeDb.icons,
|
||||||
|
|
||||||
|
// Chat Panel
|
||||||
|
'chat-panel-contacts' : ChatPanelFakeDb.contacts,
|
||||||
|
'chat-panel-chats': ChatPanelFakeDb.chats,
|
||||||
|
'chat-panel-user': ChatPanelFakeDb.user,
|
||||||
|
|
||||||
// Quick Panel
|
// Quick Panel
|
||||||
'quick-panel-notes' : QuickPanelFakeDb.notes,
|
'quick-panel-notes' : QuickPanelFakeDb.notes,
|
||||||
'quick-panel-events': QuickPanelFakeDb.events
|
'quick-panel-events': QuickPanelFakeDb.events
|
||||||
|
|
|
||||||
105
src/app/layout/components/chat-panel/chat-panel.component.html
Normal file
105
src/app/layout/components/chat-panel/chat-panel.component.html
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
|
||||||
|
<ng-container *ngIf="view === 'contacts'">
|
||||||
|
|
||||||
|
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon class="s-32">account_circle</mat-icon>
|
||||||
|
<h3 class="ml-12">Team Members</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="view === 'chat'">
|
||||||
|
|
||||||
|
<div class="title" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<button class="mx-8" mat-icon-button (click)="goToContacts()">
|
||||||
|
<mat-icon>arrow_back</mat-icon>
|
||||||
|
</button>
|
||||||
|
<img [src]="contact.avatar" class="avatar mr-0 w-32 h-32">
|
||||||
|
<h3 class="ml-12 text-truncate">{{contact.name}}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarFolded()" fxHide fxShow.gt-md>
|
||||||
|
<mat-icon class="secondary-text" *ngIf="sidebarFolded">lock_open</mat-icon>
|
||||||
|
<mat-icon class="secondary-text" *ngIf="!sidebarFolded">lock_outline</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
|
||||||
|
<mat-icon class="secondary-text">arrow_forward</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-container *ngIf="view === 'contacts'">
|
||||||
|
|
||||||
|
<mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||||
|
|
||||||
|
<mat-list-item *ngFor="let contact of contacts" [ngClass]="contact.status" (click)="goToChat(contact)"
|
||||||
|
matRipple>
|
||||||
|
|
||||||
|
<img matListAvatar [src]="contact.avatar">
|
||||||
|
|
||||||
|
<h3 matLine>
|
||||||
|
{{contact.name}}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
|
||||||
|
<div class="status-icon" [ngClass]="contact.status"></div>
|
||||||
|
|
||||||
|
</mat-list-item>
|
||||||
|
|
||||||
|
</mat-list>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="view === 'chat'">
|
||||||
|
|
||||||
|
<div id="chat" fxLayout="column" fxFlex="1 1 auto">
|
||||||
|
|
||||||
|
<div class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
|
||||||
|
|
||||||
|
<div fxLayout="row" *ngFor="let message of chat.dialog" class="message-row"
|
||||||
|
[ngClass]="{'user': message.who === user.id}">
|
||||||
|
|
||||||
|
<img *ngIf="message.who === contact.id"
|
||||||
|
src="{{contact.avatar}}"
|
||||||
|
class="avatar">
|
||||||
|
|
||||||
|
<img *ngIf="message.who === user.id" class="avatar" src="{{user.avatar}}">
|
||||||
|
|
||||||
|
<div class="bubble">
|
||||||
|
<div class="message">{{message.message}}</div>
|
||||||
|
<div class="time secondary-text">{{message.time | date:'medium'}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
|
||||||
|
<form #replyForm="ngForm"
|
||||||
|
(ngSubmit)="reply()"
|
||||||
|
(keyup.enter)="reply()"
|
||||||
|
fxFlex class="reply-form"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center">
|
||||||
|
|
||||||
|
<mat-form-field fxFlex floatLabel="never">
|
||||||
|
<textarea matInput #replyInput placeholder="Type and hit enter to send message"
|
||||||
|
ngModel name="message"></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<button mat-mini-fab type="submit" aria-label="Send message">
|
||||||
|
<mat-icon>send</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
218
src/app/layout/components/chat-panel/chat-panel.component.scss
Normal file
218
src/app/layout/components/chat-panel/chat-panel.component.scss
Normal file
|
|
@ -0,0 +1,218 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
|
chat-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 280px;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 280px;
|
||||||
|
z-index: 99;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 64px;
|
||||||
|
max-height: 64px;
|
||||||
|
min-height: 64px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
max-width: 120px;
|
||||||
|
transition: opacity 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#contacts-list {
|
||||||
|
padding: 8px 0;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.mat-list-item {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.offline {
|
||||||
|
|
||||||
|
.mat-list-item-content {
|
||||||
|
|
||||||
|
img {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-list-item-content {
|
||||||
|
|
||||||
|
.unread-count {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
top: 4px;
|
||||||
|
left: 10px;
|
||||||
|
border-radius: 9px;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: mat-color(mat-palette($mat-indigo));
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
position: absolute;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
bottom: 3px;
|
||||||
|
left: 44px;
|
||||||
|
border: 2px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.online {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.do-not-disturb {
|
||||||
|
background-color: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.away {
|
||||||
|
background-color: #FFC107;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.offline {
|
||||||
|
background-color: #646464;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat {
|
||||||
|
background-color: mat-color(mat-palette($mat-grey, 200));
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.message-row {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
position: relative;
|
||||||
|
padding: 6px 7px 8px 9px;
|
||||||
|
background-color: #FFF;
|
||||||
|
box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -11px;
|
||||||
|
bottom: 3px;
|
||||||
|
width: 12px;
|
||||||
|
height: 19px;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 11px;
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.contact {
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin: 0 16px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.user {
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
order: 2;
|
||||||
|
margin: 0 0 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #E8F5E9;
|
||||||
|
border: 1px solid #DFEBE0;
|
||||||
|
order: 1;
|
||||||
|
&:before {
|
||||||
|
right: -11px;
|
||||||
|
left: auto;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-form {
|
||||||
|
position: relative;
|
||||||
|
@include mat-elevation(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fuse-sidebar {
|
||||||
|
|
||||||
|
&.chat-panel {
|
||||||
|
|
||||||
|
// Folded
|
||||||
|
&.folded {
|
||||||
|
|
||||||
|
chat-panel {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.title {
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Folded unfolded
|
||||||
|
&.unfolded {
|
||||||
|
|
||||||
|
chat-panel {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.title {
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
217
src/app/layout/components/chat-panel/chat-panel.component.ts
Normal file
217
src/app/layout/components/chat-panel/chat-panel.component.ts
Normal file
|
|
@ -0,0 +1,217 @@
|
||||||
|
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { NgForm } from '@angular/forms';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||||
|
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||||
|
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'chat-panel',
|
||||||
|
templateUrl : './chat-panel.component.html',
|
||||||
|
styleUrls : ['./chat-panel.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
export class ChatPanelComponent implements OnInit, OnDestroy
|
||||||
|
{
|
||||||
|
contacts: any[];
|
||||||
|
contact: any;
|
||||||
|
chat: any;
|
||||||
|
sidebarFolded: boolean;
|
||||||
|
user: any;
|
||||||
|
view: string;
|
||||||
|
|
||||||
|
@ViewChild(FusePerfectScrollbarDirective)
|
||||||
|
set fusePerfectScrollbarDirective(content: FusePerfectScrollbarDirective)
|
||||||
|
{
|
||||||
|
this._fusePerfectScrollbarDirective = content;
|
||||||
|
}
|
||||||
|
|
||||||
|
@ViewChild('replyForm')
|
||||||
|
set replyForm(content: NgForm)
|
||||||
|
{
|
||||||
|
this._replyForm = content;
|
||||||
|
}
|
||||||
|
|
||||||
|
@ViewChild('replyInput')
|
||||||
|
set replyInput(content: ElementRef)
|
||||||
|
{
|
||||||
|
this._replyInput = content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private _fusePerfectScrollbarDirective: FusePerfectScrollbarDirective;
|
||||||
|
private _replyForm: NgForm;
|
||||||
|
private _replyInput: ElementRef;
|
||||||
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {ChatPanelService} _chatPanelService
|
||||||
|
* @param {HttpClient} _httpClient
|
||||||
|
* @param {FuseSidebarService} _fuseSidebarService
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _chatPanelService: ChatPanelService,
|
||||||
|
private _httpClient: HttpClient,
|
||||||
|
private _fuseSidebarService: FuseSidebarService
|
||||||
|
)
|
||||||
|
{
|
||||||
|
// Set the defaults
|
||||||
|
this.contact = null;
|
||||||
|
this.sidebarFolded = true;
|
||||||
|
this.view = 'contacts';
|
||||||
|
|
||||||
|
// Set the private defaults
|
||||||
|
this._unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void
|
||||||
|
{
|
||||||
|
// Load the contacts
|
||||||
|
this._chatPanelService.loadContacts().then(() => {
|
||||||
|
|
||||||
|
this.contacts = this._chatPanelService.contacts;
|
||||||
|
this.user = this._chatPanelService.user;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Subscribe to the foldedChanged observable
|
||||||
|
this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((folded) => {
|
||||||
|
this.sidebarFolded = folded;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void
|
||||||
|
{
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this._unsubscribeAll.next();
|
||||||
|
this._unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Private methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare the chat for the replies
|
||||||
|
*/
|
||||||
|
private _prepareChatForReplies(): void
|
||||||
|
{
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
// Reset the reply form
|
||||||
|
this._replyForm.reset();
|
||||||
|
|
||||||
|
// Focus to the reply input
|
||||||
|
this._replyInput.nativeElement.focus();
|
||||||
|
|
||||||
|
// Scroll to the bottom of the messages list
|
||||||
|
if ( this._fusePerfectScrollbarDirective )
|
||||||
|
{
|
||||||
|
this._fusePerfectScrollbarDirective.update();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this._fusePerfectScrollbarDirective.scrollToBottom(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle sidebar folded status
|
||||||
|
*/
|
||||||
|
toggleSidebarFolded(): void
|
||||||
|
{
|
||||||
|
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle sidebar opened status
|
||||||
|
*/
|
||||||
|
toggleSidebarOpen(): void
|
||||||
|
{
|
||||||
|
this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go to chat with the contact
|
||||||
|
*
|
||||||
|
* @param contact
|
||||||
|
*/
|
||||||
|
goToChat(contact): void
|
||||||
|
{
|
||||||
|
// Change the view
|
||||||
|
this.view = 'chat';
|
||||||
|
|
||||||
|
// Set the current contact
|
||||||
|
this.contact = contact;
|
||||||
|
|
||||||
|
// Load the chat
|
||||||
|
this._chatPanelService.getChat(contact.id).then((chat) => {
|
||||||
|
|
||||||
|
// Set the chat
|
||||||
|
this.chat = chat;
|
||||||
|
|
||||||
|
// Prepare the chat for the replies
|
||||||
|
this._prepareChatForReplies();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go to contact view
|
||||||
|
*/
|
||||||
|
goToContacts(): void
|
||||||
|
{
|
||||||
|
// Change the view
|
||||||
|
this.view = 'contacts';
|
||||||
|
|
||||||
|
// Set the current contact as null
|
||||||
|
this.contact = null;
|
||||||
|
|
||||||
|
// Clear the chat data
|
||||||
|
this.chat = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reply
|
||||||
|
*/
|
||||||
|
reply(): void
|
||||||
|
{
|
||||||
|
// Message
|
||||||
|
const message = {
|
||||||
|
who : this.user.id,
|
||||||
|
message: this._replyForm.form.value.message,
|
||||||
|
time : new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the message to the chat
|
||||||
|
this.chat.dialog.push(message);
|
||||||
|
|
||||||
|
// Update the server
|
||||||
|
this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
|
||||||
|
|
||||||
|
// Prepare the chat for the replies
|
||||||
|
this._prepareChatForReplies();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/app/layout/components/chat-panel/chat-panel.module.ts
Normal file
33
src/app/layout/components/chat-panel/chat-panel.module.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule } from '@angular/material';
|
||||||
|
|
||||||
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
|
import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
|
||||||
|
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
ChatPanelComponent
|
||||||
|
],
|
||||||
|
providers : [
|
||||||
|
ChatPanelService
|
||||||
|
],
|
||||||
|
imports : [
|
||||||
|
MatButtonModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatListModule,
|
||||||
|
MatTabsModule,
|
||||||
|
MatRippleModule,
|
||||||
|
|
||||||
|
FuseSharedModule
|
||||||
|
],
|
||||||
|
exports : [
|
||||||
|
ChatPanelComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ChatPanelModule
|
||||||
|
{
|
||||||
|
}
|
||||||
182
src/app/layout/components/chat-panel/chat-panel.service.ts
Normal file
182
src/app/layout/components/chat-panel/chat-panel.service.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
|
||||||
|
import { FuseUtils } from '@fuse/utils';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ChatPanelService
|
||||||
|
{
|
||||||
|
contacts: any[];
|
||||||
|
chats: any[];
|
||||||
|
user: any;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {HttpClient} _httpClient
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private _httpClient: HttpClient
|
||||||
|
)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loader
|
||||||
|
*
|
||||||
|
* @returns {Promise<any> | any}
|
||||||
|
*/
|
||||||
|
loadContacts(): Promise<any> | any
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Promise.all([
|
||||||
|
this.getContacts(),
|
||||||
|
this.getUser()
|
||||||
|
]).then(
|
||||||
|
([contacts, user]) => {
|
||||||
|
this.contacts = contacts;
|
||||||
|
this.user = user;
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
reject
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get chat
|
||||||
|
*
|
||||||
|
* @param contactId
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
getChat(contactId): Promise<any>
|
||||||
|
{
|
||||||
|
const chatItem = this.user.chatList.find((item) => {
|
||||||
|
return item.contactId === contactId;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get the chat
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
// If there is a chat with this user, return that.
|
||||||
|
if ( chatItem )
|
||||||
|
{
|
||||||
|
this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
|
||||||
|
.subscribe((chat) => {
|
||||||
|
|
||||||
|
// Resolve the promise
|
||||||
|
resolve(chat);
|
||||||
|
|
||||||
|
}, reject);
|
||||||
|
}
|
||||||
|
// If there is no chat with this user, create one...
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.createNewChat(contactId).then(() => {
|
||||||
|
|
||||||
|
// and then recall the getChat method
|
||||||
|
this.getChat(contactId).then((chat) => {
|
||||||
|
resolve(chat);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create new chat
|
||||||
|
*
|
||||||
|
* @param contactId
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
createNewChat(contactId): Promise<any>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
// Generate a new id
|
||||||
|
const chatId = FuseUtils.generateGUID();
|
||||||
|
|
||||||
|
// Prepare the chat object
|
||||||
|
const chat = {
|
||||||
|
id : chatId,
|
||||||
|
dialog: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// Prepare the chat list entry
|
||||||
|
const chatListItem = {
|
||||||
|
chatId : chatId,
|
||||||
|
contactId : contactId,
|
||||||
|
lastMessageTime: '2017-02-18T10:30:18.931Z'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add new chat list item to the user's chat list
|
||||||
|
this.user.chatList.push(chatListItem);
|
||||||
|
|
||||||
|
// Post the created chat to the server
|
||||||
|
this._httpClient.post('api/chat-panel-chats', {...chat})
|
||||||
|
.subscribe(() => {
|
||||||
|
|
||||||
|
// Post the updated user data to the server
|
||||||
|
this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
|
||||||
|
.subscribe(() => {
|
||||||
|
|
||||||
|
// Resolve the promise
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update the chat
|
||||||
|
*
|
||||||
|
* @param chatId
|
||||||
|
* @param dialog
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
updateChat(chatId, dialog): Promise<any>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
const newData = {
|
||||||
|
id : chatId,
|
||||||
|
dialog: dialog
|
||||||
|
};
|
||||||
|
|
||||||
|
this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
|
||||||
|
.subscribe(updatedChat => {
|
||||||
|
resolve(updatedChat);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get contacts
|
||||||
|
*
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
getContacts(): Promise<any>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this._httpClient.get('api/chat-panel-contacts')
|
||||||
|
.subscribe((response: any) => {
|
||||||
|
resolve(response);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get user
|
||||||
|
*
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
getUser(): Promise<any>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this._httpClient.get('api/chat-panel-user')
|
||||||
|
.subscribe((response: any) => {
|
||||||
|
resolve(response[0]);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
<button mat-button [matMenuTriggerFor]="userMenu"
|
<button mat-button [matMenuTriggerFor]="userMenu"
|
||||||
class="user-button">
|
class="user-button">
|
||||||
<div fxLayout="row" fxLayoutAlign="center center">
|
<div fxLayout="row" fxLayoutAlign="center center">
|
||||||
<img class="avatar" src="assets/images/avatars/profile.jpg">
|
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
|
||||||
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
||||||
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,6 +89,15 @@
|
||||||
|
|
||||||
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
||||||
|
|
||||||
|
<button mat-icon-button fxHide.gt-md
|
||||||
|
class="chat-panel-toggle-button"
|
||||||
|
(click)="toggleSidebarOpen('chatPanel')"
|
||||||
|
aria-label="Toggle chat panel">
|
||||||
|
<mat-icon class="icon">chat</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="toolbar-separator" fxHide.gt-md></div>
|
||||||
|
|
||||||
<button mat-icon-button
|
<button mat-icon-button
|
||||||
class="quick-panel-toggle-button"
|
class="quick-panel-toggle-button"
|
||||||
(click)="toggleSidebarOpen('quickPanel')"
|
(click)="toggleSidebarOpen('quickPanel')"
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@
|
||||||
.user-button,
|
.user-button,
|
||||||
fuse-search-bar,
|
fuse-search-bar,
|
||||||
.language-button,
|
.language-button,
|
||||||
|
.chat-panel-toggle-button,
|
||||||
.quick-panel-toggle-button {
|
.quick-panel-toggle-button {
|
||||||
min-width: 64px;
|
min-width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||||
selectedLanguage: any;
|
selectedLanguage: any;
|
||||||
showLoadingBar: boolean;
|
showLoadingBar: boolean;
|
||||||
userStatusOptions: any[];
|
userStatusOptions: any[];
|
||||||
|
chatPanelLockedOpen: string;
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
private _unsubscribeAll: Subject<any>;
|
private _unsubscribeAll: Subject<any>;
|
||||||
|
|
@ -146,6 +147,28 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||||
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleChatPanel(): void
|
||||||
|
{
|
||||||
|
// Get the chat panel sidebar
|
||||||
|
const chatPanelSidebar = this._fuseSidebarService.getSidebar('chatPanel');
|
||||||
|
|
||||||
|
// Store the original value
|
||||||
|
if ( chatPanelSidebar.lockedOpen !== '' )
|
||||||
|
{
|
||||||
|
this.chatPanelLockedOpen = chatPanelSidebar.lockedOpen;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle
|
||||||
|
if ( chatPanelSidebar.lockedOpen === this.chatPanelLockedOpen )
|
||||||
|
{
|
||||||
|
chatPanelSidebar.lockedOpen = '';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
chatPanelSidebar.lockedOpen = this.chatPanelLockedOpen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Search
|
* Search
|
||||||
*
|
*
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CHAT PANEL -->
|
||||||
|
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||||
|
[folded]="true" [foldedWidth]="70"
|
||||||
|
lockedOpen="gt-md">
|
||||||
|
<chat-panel></chat-panel>
|
||||||
|
</fuse-sidebar>
|
||||||
|
<!-- / CHAT PANEL -->
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ horizontal-layout-1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
// Boxed
|
// Boxed
|
||||||
&.boxed {
|
&.boxed {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { MatSidenavModule } from '@angular/material';
|
||||||
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
|
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -23,6 +24,7 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
FuseThemeOptionsModule,
|
FuseThemeOptionsModule,
|
||||||
|
|
||||||
|
ChatPanelModule,
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -67,6 +67,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CHAT PANEL -->
|
||||||
|
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||||
|
[folded]="true" [foldedWidth]="70"
|
||||||
|
lockedOpen="gt-md">
|
||||||
|
<chat-panel></chat-panel>
|
||||||
|
</fuse-sidebar>
|
||||||
|
<!-- / CHAT PANEL -->
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ vertical-layout-1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
// Boxed
|
// Boxed
|
||||||
&.boxed {
|
&.boxed {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components';
|
import { FuseSidebarModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
|
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
|
ChatPanelModule,
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -67,6 +67,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CHAT PANEL -->
|
||||||
|
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||||
|
[folded]="true" [foldedWidth]="70"
|
||||||
|
lockedOpen="gt-md">
|
||||||
|
<chat-panel></chat-panel>
|
||||||
|
</fuse-sidebar>
|
||||||
|
<!-- / CHAT PANEL -->
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ vertical-layout-2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
// Boxed
|
// Boxed
|
||||||
&.boxed {
|
&.boxed {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components';
|
import { FuseSidebarModule } from '@fuse/components';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
|
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
|
ChatPanelModule,
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CHAT PANEL -->
|
||||||
|
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||||
|
[folded]="true" [foldedWidth]="70"
|
||||||
|
lockedOpen="gt-md">
|
||||||
|
<chat-panel></chat-panel>
|
||||||
|
</fuse-sidebar>
|
||||||
|
<!-- / CHAT PANEL -->
|
||||||
|
|
||||||
<!-- QUICK PANEL -->
|
<!-- QUICK PANEL -->
|
||||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||||
<quick-panel></quick-panel>
|
<quick-panel></quick-panel>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ vertical-layout-3 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
// Boxed
|
// Boxed
|
||||||
&.boxed {
|
&.boxed {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
||||||
import { FuseSidebarModule } from '@fuse/components/index';
|
import { FuseSidebarModule } from '@fuse/components/index';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
|
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseSidebarModule,
|
FuseSidebarModule,
|
||||||
|
|
||||||
|
ChatPanelModule,
|
||||||
ContentModule,
|
ContentModule,
|
||||||
FooterModule,
|
FooterModule,
|
||||||
NavbarModule,
|
NavbarModule,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user