Merge branch 'release/4.4.0'

TemainfoSoftware · Oct 30, 2019 · 8a4df89 · 8a4df89
2 parents f106e92 + feaf475
commit 8a4df89
Show file tree

Hide file tree

Showing 84 changed files with 2,192 additions and 539 deletions.
diff --git a/projects/truly-ui/src/components/blockui/blockui.scss b/projects/truly-ui/src/components/blockui/blockui.scss
@@ -1,3 +1,7 @@
+:host {
+  position: absolute;
+}
+
 .blockui-wrapper {
   position: absolute;
   width: 100%;

diff --git a/projects/truly-ui/src/components/button/button.html b/projects/truly-ui/src/components/button/button.html
@@ -17,7 +17,7 @@
     <tl-icon *ngIf="iconBeforeText">{{ iconBeforeText }}</tl-icon>
     <span class="label" *ngIf="!isLoading">{{ text }}</span>
     <span class="label" *ngIf="isLoading">{{ textLoading }}</span>
-    <tl-loader [color]="loaderColor" *ngIf="isLoading"></tl-loader>
+    <tl-icon [lib]="'fa'" [animation]="'spin'" [color]="loaderColor" *ngIf="isLoading">spinner</tl-icon>
     <tl-icon *ngIf="iconAfterText">{{ iconAfterText }}</tl-icon>
   </div>
   <tl-icon *ngIf="iconAddonAfter"

diff --git a/projects/truly-ui/src/components/calendar/calendar-theme.scss b/projects/truly-ui/src/components/calendar/calendar-theme.scss
@@ -5,8 +5,8 @@
   $danger:  map-deep-get($theme, 'danger');
 
   .ui-table-calendar {
-    background: white;
-    box-shadow: 0px 0px 0px 1px map-deep-get($basic, "default", "border");
+    background: map-deep-get($basic, "default", "background");
+    border: 1px solid map-deep-get($basic, "default", "border");
 
     > .ui-calendar-week {
       border-top: 1px solid map-deep-get($basic, "default", "border");

diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss
@@ -5,7 +5,7 @@
   $danger: map-deep-get($theme, 'danger');
 
   .ui-calendar-line {
-    background: white;
+    background: map-deep-get($basic, "default", "background");
     &.borders:not(:last-child) {
       border-right: 1px solid map-deep-get($basic, "default", "border");
     }

diff --git a/projects/truly-ui/src/components/chatlist/chatlist.html b/projects/truly-ui/src/components/chatlist/chatlist.html
@@ -68,13 +68,14 @@
 
 <ng-template #chatContent>
   <tl-chat-content
+    [id]="id"
     [user]="user"
     [maxHeight]="maxHeight"
     [loadingMessages]="loadingMessages"
     [chatStatus]="chatStatus"
+    (readMessage)="readMessage.emit($event)"
     [partner]="partner"
-    (message)="onMessage($event)"
-    [messages]="messages">
+    (message)="onMessage($event)">
   </tl-chat-content>
 </ng-template>
 

diff --git a/projects/truly-ui/src/components/chatlist/chatlist.ts b/projects/truly-ui/src/components/chatlist/chatlist.ts
@@ -20,25 +20,25 @@
  SOFTWARE.
  */
 import {
-  Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild, Output, AfterViewInit,
-  OnDestroy
+  Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild, Output,
+  OnDestroy, OnInit, ChangeDetectorRef
 } from '@angular/core';
-import { ChatStatus } from './interfaces/chat-status.interface';
-import { ChatContact } from './interfaces/chat-contact.interface';
-import { ChatMessage } from './interfaces/chat-message.interface';
-import { Status } from './enums/status.enum';
-import { Subscription } from 'rxjs';
-import { ChatService } from './services/chat.service';
-import { I18nService } from '../i18n/i18n.service';
+import {ChatStatus} from './interfaces/chat-status.interface';
+import {ChatContact} from './interfaces/chat-contact.interface';
+import {ChatMessage} from './interfaces/chat-message.interface';
+import {Status} from './enums/status.enum';
+import {Subscription} from 'rxjs';
+import {ChatService} from './services/chat.service';
+import {I18nService} from '../i18n/i18n.service';
 
 let uniqueIdentifier = 0;
 
-@Component( {
+@Component({
   selector: 'tl-chatlist',
   templateUrl: './chatlist.html',
-  styleUrls: [ './chatlist.scss' ],
-} )
-export class TlChatList implements AfterViewInit, OnDestroy {
+  styleUrls: ['./chatlist.scss'],
+})
+export class TlChatList implements OnInit, OnDestroy {
 
   @Input() maxHeight = '450px';
 
@@ -61,7 +61,7 @@ export class TlChatList implements AfterViewInit, OnDestroy {
   @Input() user: ChatContact;
 
   @Input('contacts')
-  set contacts( data: ChatContact[] ) {
+  set contacts(data: ChatContact[]) {
     if (data && data.length > 0 && this.user) {
       if (!this.user.id) {
         throw Error('User id not found');
@@ -74,15 +74,15 @@ export class TlChatList implements AfterViewInit, OnDestroy {
     return this._dataSource;
   }
 
+  @Output() readMessage: EventEmitter<ChatMessage[]> = new EventEmitter();
+
   @Output() sendMessage: EventEmitter<ChatMessage> = new EventEmitter();
 
   @Output() changeStatus: EventEmitter<any> = new EventEmitter();
 
-  @Output() newMessages: EventEmitter<boolean> = new EventEmitter();
-
   @Output() selectContact: EventEmitter<any> = new EventEmitter();
 
-  @ViewChild('content', {static: false} ) content: ElementRef;
+  @ViewChild('content', {static: false}) content: ElementRef;
 
   public transform = '0';
 
@@ -96,13 +96,17 @@ export class TlChatList implements AfterViewInit, OnDestroy {
 
   public filterControl = '';
 
-  public messages: ChatMessage[] = [];
-
   private _dataSource;
 
+  public messages = [];
+
   private subscription = new Subscription();
 
-  constructor(private renderer: Renderer2, private chatService: ChatService, private i18nService: I18nService ) {}
+  constructor(private renderer: Renderer2,
+              private change: ChangeDetectorRef,
+              private chatService: ChatService,
+              private i18nService: I18nService) {
+  }
 
   get online() {
     return Status.ONLINE;
@@ -116,8 +120,25 @@ export class TlChatList implements AfterViewInit, OnDestroy {
     return Status.BUSY;
   }
 
-  ngAfterViewInit() {
-    this.chatService.chat = this;
+  ngOnInit() {
+    this.listenChangeStatus();
+    this.listenChangeMessages();
+    this.messages = this.chatService.getAllMessages( this.id );
+  }
+
+  listenChangeStatus() {
+    this.subscription.add(this.chatService.changeStatus.subscribe((value: { chatId: string, status: Status }) => {
+      if (value.chatId === this.id) {
+        this.setStatus(value.status);
+      }
+    }));
+  }
+
+  listenChangeMessages() {
+    this.subscription.add(this.chatService.allMessages.subscribe((messages: ChatMessage[]) => {
+      this.messages = messages;
+      this.change.detectChanges();
+    }));
   }
 
   animationContentDone(event: AnimationEvent) {
@@ -127,89 +148,52 @@ export class TlChatList implements AfterViewInit, OnDestroy {
   }
 
   getUnreadMessages(item: ChatContact) {
-    if (!item || !item.id) {
-      return [];
-    }
     if (this.messages.length > 0) {
       return this.messages.filter((message: ChatMessage) => {
-        if ( message.from && message.to ) {
-         return (!message.viewed && message.from.id === item.id) && (message.to.id === this.user.id);
+        if (message.from && message.to) {
+          return (!message.viewed && message.from.id === item.id) && (message.to.id === this.user.id);
         }
       });
     }
     return [];
   }
 
-  getFilter( statusSelected ) {
+  getFilter(statusSelected) {
     if (statusSelected === this.offline) {
-      return { filter: this.filterControl, status: [this.offline] };
+      return {filter: this.filterControl, status: [this.offline]};
     }
-    return { filter: this.filterControl, status: [this.online, this.busy] };
+    return {filter: this.filterControl, status: [this.online, this.busy]};
   }
 
   trackByFn(index) {
     return index;
   }
 
-  hasMessages() {
-    const messages = this.messages.filter((value) => {
-      if (value.to && this.user) {
-        return !value.viewed && (value.to.id === this.user.id);
-      }
-    });
-    return messages.length > 0;
-  }
-
   selectPartner(item: ChatContact) {
     this.updatePartner(item);
-    this.selectContact.emit({ ...item, unreadMessages: this.getUnreadMessages(item) });
+    this.selectContact.emit({...item, unreadMessages: this.getUnreadMessages(item)});
     this.renderer.setStyle(this.content.nativeElement, 'animation', 'showOffContent 0.2s forwards');
-    this.readMessages( this.getUnreadMessages(item) );
-    this.newMessages.emit( this.hasMessages() );
-  }
-
-  readMessages( messages: ChatMessage[] ) {
-    this.messages.forEach((item) => {
-      messages.forEach((value) => {
-        if (JSON.stringify(item) === JSON.stringify(value)) {
-          item.viewed = true;
-        }
-      });
-    });
-  }
-
-  readAllMessages() {
-    this.messages.forEach((item: ChatMessage, index, array) => item.viewed = true );
+    this.chatService.readMessages( this.getUnreadMessages(item), this.user, this.id);
   }
 
   updatePartner(item: ChatContact) {
     this.partner = item;
   }
 
-  loadMessages(messages: ChatMessage[]) {
-    this.messages = messages;
-    this.newMessages.emit( this.hasMessages() );
-  }
-
-  appendMessage(message: ChatMessage) {
-    this.messages = [ ...this.messages, message ];
-    this.newMessages.emit( this.hasMessages() );
-  }
-
   setStatus(status: Status) {
-    this.changeStatus.emit({ user: this.user, status: status });
+    this.changeStatus.emit({user: this.user, status: status});
   }
 
   onMessage(message: { value: string, time: Date }) {
     const msm = {
+      id: String(new Date().getTime()),
       to: this.partner,
       from: this.user,
       message: message.value,
       time: message.time,
       viewed: false
     };
     this.sendMessage.emit(msm);
-    this.appendMessage(msm);
   }
 
   selectStatus(status) {
@@ -224,7 +208,6 @@ export class TlChatList implements AfterViewInit, OnDestroy {
 
   ngOnDestroy() {
     this.subscription.unsubscribe();
-    this.chatService.removeChat( this.id );
   }
 
 }

diff --git a/projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts b/projects/truly-ui/src/components/chatlist/interfaces/chat-message.interface.ts
@@ -24,7 +24,7 @@
  import { ChatContact } from './chat-contact.interface';
 
  export interface ChatMessage {
-   id?: string;
+   id: string;
    to: ChatContact;
    from: ChatContact;
    message: string;

diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.html b/projects/truly-ui/src/components/chatlist/parts/chat-content.html
@@ -1,10 +1,9 @@
 <div class="chat-content-wrapper" [style.height]="'calc(' + maxHeight + ' - 35px)'">
 
-  <div class="chat-messages-content" #messageContent [style.height]="'calc(' + maxHeight + ' - 75px)'">
+  <div class="chat-messages-content" [class.smooth]="smoothScroll" #messageContent [style.height]="'calc(' + maxHeight + ' - 75px)'">
 
     <ng-container *ngIf="!loadingMessages; else loadMessagesTemplate">
       <ng-container *ngFor="let item of messages | filterMessage; trackBy:trackByFn">
-
           <div class="chat-time">  {{ currentDate(item.date) }}</div>
           <ng-container *ngFor="let msg of item.messages; trackBy:trackByFn">
 
@@ -17,10 +16,8 @@
             </ng-container>
 
         </ng-container>
-
       </ng-container>
     </ng-container>
-
   </div>
 
   <div class="chat-type">
@@ -54,7 +51,6 @@
   <div class="chat-partner">
     <div class="chat-text-content">
       <div class="chat-arrow"></div>
-
       <p>{{ message?.message }}</p>
       <span>{{ message.time | date:'HH:mm' }}</span>
     </div>

diff --git a/projects/truly-ui/src/components/chatlist/parts/chat-content.scss b/projects/truly-ui/src/components/chatlist/parts/chat-content.scss
@@ -6,7 +6,6 @@
   .chat-messages-content {
     overflow-y: auto;
     height: 410px;
-    scroll-behavior: smooth;
     background: rgb(229, 221, 213);
     text-align: center;
     &:before {
@@ -38,6 +37,9 @@
       background: #e4e4e4;
       border-radius: 5px;
     }
+    &.smooth {
+      scroll-behavior: smooth;
+    }
   }
 }
 
@@ -86,6 +88,7 @@
       margin: 0;
       line-height: 20px;
       font-family: Segoe UI, serif;
+      text-align: left;
     }
     > span {
       font-size: .8em;