modify message-box :: date-splitter

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html

@@ -0,0 +1,4 @@
+<p>
+  <!-- {{ message.sendDate | date: 'short' }} -->
+  {{ dateInfo }}
+</p>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Info } from '@ucap-webmessenger/protocol-event';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'ucap-chat-message-box-date-splitter',
@@ -6,7 +8,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./date-splitter.component.scss']
 })
 export class DateSplitterComponent implements OnInit {
-  constructor() {}
+  @Input()
+  message: Info;
 
-  ngOnInit() {}
+  dateInfo: string;
+
+  constructor(private datePipe: DatePipe) {}
+
+  ngOnInit() {
+    this.dateInfo = this.datePipe.transform(
+      this.message.sendDate,
+      'yyyy-MM-dd EEE'
+    );
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html

@@ -2,7 +2,4 @@
   <span>
     {{ message.sentMessage }}
   </span>
-  <span>
-    {{ message.sendDate | date: 'short' }}
-  </span>
 </p>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -4,6 +4,9 @@
       me: message.senderSeq === loginRes.userSeq,
       contact: message.senderSeq !== loginRes.userSeq
     }">
+    <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
+    </ucap-chat-message-box-date-splitter>
+
     <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
       <ul>
         <li *ngIf="getUserProfile(message.senderSeq) != ''">
@@ -30,8 +33,6 @@
       </ucap-chat-message-box-sticker>
       <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
       <div *ngSwitchDefault>
-        date splitter
-        <ucap-chat-message-box-date-splitter></ucap-chat-message-box-date-splitter>
         mass-translation
         <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
         notice

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -9,6 +9,7 @@ import { NGXLogger } from 'ngx-logger';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type';
 import { FileInfo } from '../models/file-info.json';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'ucap-chat-messages',
@@ -35,7 +36,8 @@ export class MessagesComponent implements OnInit {
 
   constructor(
     private logger: NGXLogger,
-    private sessionStorageService: SessionStorageService
+    private sessionStorageService: SessionStorageService,
+    private datePipe: DatePipe
   ) {}
 
   ngOnInit() {
@@ -70,14 +72,37 @@ export class MessagesComponent implements OnInit {
     return '';
   }
 
+  /** Date Splitter check */
+  getDateSplitter(curIndex: number): boolean {
+    if (curIndex === 0) {
+      return true;
+    }
+    if (curIndex > 0) {
+      return (
+        this.datePipe.transform(
+          this.messages[curIndex].sendDate,
+          'yyyyMMdd'
+        ) !==
+        this.datePipe.transform(
+          this.messages[curIndex - 1].sendDate,
+          'yyyyMMdd'
+        )
+      );
+    }
+    return false;
+  }
+
+  /** [Event] MassTalk Detail View */
   onMassDetail(value: number) {
     this.massDetail.emit(value);
   }
 
+  /** [Event] Image Viewer */
   onImageViewer(value: FileInfo) {
     this.imageViewer.emit(value);
   }
 
+  /** [Event] Attach File Save & Save As */
   onSave(value: { fileInfo: FileInfo; type: string }) {
     this.save.emit(value);
   }

projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -49,6 +49,7 @@ const COMPONENTS = [
   MBVideoConferenceComponent
 ];
 const SERVICES = [];
+const PROVIDERS = [DatePipe];
 
 @NgModule({
   imports: [
@@ -62,7 +63,8 @@ const SERVICES = [];
     MatButtonModule
   ],
   exports: [...COMPONENTS],
-  declarations: [...COMPONENTS]
+  declarations: [...COMPONENTS],
+  providers: [...PROVIDERS]
 })
 export class UCapUiChatModule {
   public static forRoot(): ModuleWithProviders<UCapUiChatModule> {