mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Removed chat panel from Skeleton since its more like an app and won't be required by everyone
This commit is contained in:
Sercan Yemen
parent
2f0d1e406f
commit
cef9e8a9c0
|
|
@ -1,119 +0,0 @@
|
|||
<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<ng-container *ngIf="selectedContact === null">
|
||||
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-32 white-fg">chat</mat-icon>
|
||||
<h3 class="ml-12">Team Chat</h3>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="selectedContact !== null">
|
||||
|
||||
<div class="title" fxLayout="row" fxLayoutAlign="start center">
|
||||
<img [src]="selectedContact.avatar" class="avatar mx-16">
|
||||
<h3 class="text-truncate">{{selectedContact.name}}</h3>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
|
||||
<mat-icon class="secondary-text s-20">arrow_forward</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>
|
||||
|
||||
<div>
|
||||
|
||||
<!-- Contacts -->
|
||||
<div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
|
||||
<div *ngFor="let contact of contacts"
|
||||
class="contacts-list-item"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(click)="goToChat(contact)">
|
||||
|
||||
<img class="avatar" [src]="contact.avatar"
|
||||
[matTooltip]="contact.name"
|
||||
matTooltipPosition="left">
|
||||
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
|
||||
<div class="status-icon" [ngClass]="contact.status"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Contacts -->
|
||||
|
||||
<!-- Chat -->
|
||||
<div id="chat" fxLayout="column" fxFlex="1 1 auto">
|
||||
|
||||
<div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
|
||||
|
||||
<div *ngFor="let message of chat.dialog; let i = index" class="message-row"
|
||||
[ngClass]="{
|
||||
'me': message.who === user.id,
|
||||
'contact': message.who !== user.id,
|
||||
'first-of-group': isFirstMessageOfGroup(message, i),
|
||||
'last-of-group': isLastMessageOfGroup(message, i)
|
||||
}">
|
||||
|
||||
<img *ngIf="shouldShowContactAvatar(message, i)"
|
||||
src="{{selectedContact.avatar}}"
|
||||
class="avatar">
|
||||
|
||||
<div class="bubble">
|
||||
<div class="message">{{message.message}}</div>
|
||||
<div class="time secondary-text">{{message.time | date:'short'}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
|
||||
|
||||
<div class="no-messages-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="no-messages secondary-text">
|
||||
Start a conversation by typing your message below.
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||
|
||||
<form #replyForm="ngForm"
|
||||
(ngSubmit)="reply($event)"
|
||||
(keydown.enter)="reply($event)"
|
||||
fxFlex
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
|
||||
<mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
|
||||
<textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
|
||||
[rows]="1" [matTextareaAutosize]="true"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
|
||||
<mat-icon class="secondary-text">send</mat-icon>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Chat -->
|
||||
|
||||
</div>
|
||||
|
|
@ -1,387 +0,0 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 360px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
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;
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
max-width: 72px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Perfect scrollbar
|
||||
.ps__rail-y {
|
||||
width: 3px !important;
|
||||
|
||||
.ps__thumb-y {
|
||||
width: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
|
||||
&.offline {
|
||||
|
||||
.mat-list-item-content {
|
||||
|
||||
img {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
h3 {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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, 300));
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding: 16px 0 40px 40px;
|
||||
|
||||
.message-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px 16px;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
color: $black-87-opacity;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
|
||||
.bubble {
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
color: white;
|
||||
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
|
||||
.time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.me {
|
||||
padding-left: 40px;
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
background-color: #FFFFFF;
|
||||
color: $black-87-opacity;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.time {
|
||||
justify-content: flex-end;
|
||||
right: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact + .me,
|
||||
&.me + .contact {
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
padding-bottom: 13px;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-messages-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 24px;
|
||||
margin-top: -64px;
|
||||
text-align: center;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.no-messages {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 16px 24px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-form {
|
||||
position: relative;
|
||||
|
||||
.message-text {
|
||||
padding: 16px 8px;
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-flex {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-infix {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
@include mat-elevation(2);
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
margin: 16px 48px 16px 16px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-message-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.chat-panel {
|
||||
width: 360px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
min-width: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
// Folded
|
||||
&.folded {
|
||||
|
||||
chat-panel {
|
||||
|
||||
.header {
|
||||
|
||||
.title {
|
||||
|
||||
h3 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Folded unfolded
|
||||
&.unfolded {
|
||||
|
||||
chat-panel {
|
||||
|
||||
.header {
|
||||
|
||||
.title {
|
||||
|
||||
h3 {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, 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, AfterViewInit, OnDestroy
|
||||
{
|
||||
contacts: any[];
|
||||
chat: any;
|
||||
selectedContact: any;
|
||||
sidebarFolded: boolean;
|
||||
user: any;
|
||||
|
||||
@ViewChild('replyForm')
|
||||
set replyForm(content: NgForm)
|
||||
{
|
||||
this._replyForm = content;
|
||||
}
|
||||
|
||||
@ViewChild('replyInput')
|
||||
set replyInput(content: ElementRef)
|
||||
{
|
||||
this._replyInput = content;
|
||||
}
|
||||
|
||||
@ViewChildren(FusePerfectScrollbarDirective)
|
||||
private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
|
||||
|
||||
// Private
|
||||
private _chatViewScrollbar: 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.selectedContact = null;
|
||||
this.sidebarFolded = true;
|
||||
|
||||
// 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;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
|
||||
return directive.elementRef.nativeElement.id === 'messages';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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._chatViewScrollbar )
|
||||
{
|
||||
this._chatViewScrollbar.update();
|
||||
|
||||
setTimeout(() => {
|
||||
this._chatViewScrollbar.scrollToBottom(0);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the temporarily unfolded sidebar back
|
||||
*/
|
||||
foldSidebarTemporarily(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar temporarily
|
||||
*/
|
||||
unfoldSidebarTemporarily(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpen(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Decide whether to show or not the contact's avatar in the message row
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldShowContactAvatar(message, i): boolean
|
||||
{
|
||||
return (
|
||||
message.who === this.selectedContact.id &&
|
||||
((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the first message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isFirstMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the last message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isLastMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to chat with the contact
|
||||
*
|
||||
* @param contact
|
||||
*/
|
||||
goToChat(contact): void
|
||||
{
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfoldSidebarTemporarily();
|
||||
|
||||
// Set the selected contact
|
||||
this.selectedContact = 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();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply
|
||||
*/
|
||||
reply(event): void
|
||||
{
|
||||
event.preventDefault();
|
||||
|
||||
if ( !this._replyForm.form.value.message )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } 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,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
MatRippleModule,
|
||||
|
||||
FuseSharedModule
|
||||
],
|
||||
exports : [
|
||||
ChatPanelComponent
|
||||
]
|
||||
})
|
||||
export class ChatPanelModule
|
||||
{
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -83,15 +83,6 @@
|
|||
|
||||
<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
|
||||
class="quick-panel-toggle-button"
|
||||
(click)="toggleSidebarOpen('quickPanel')"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
|||
selectedLanguage: any;
|
||||
showLoadingBar: boolean;
|
||||
userStatusOptions: any[];
|
||||
chatPanelLockedOpen: string;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
|
@ -147,28 +146,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
|||
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
|
||||
*
|
||||
|
|
|
|||
|
|
@ -55,14 +55,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { MatSidenavModule } from '@angular/material';
|
|||
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
||||
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 { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -24,7 +23,6 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
|
|||
FuseSidebarModule,
|
||||
FuseThemeOptionsModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -67,14 +67,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components';
|
||||
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 { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -67,14 +67,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components';
|
||||
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 { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -53,14 +53,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components/index';
|
||||
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 { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -23,7 +22,6 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user