말풍선 내 줄바꿈 문자 처리.

대화리스트 finaleventDate 처리.

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

@@ -1,7 +1,5 @@
 <div class="bubble-main">
-  <span class="content">
-    {{ content }}
-  </span>
+  <span class="content" [innerHTML]="content | linefeedtohtml"></span>
   <span>
     {{ message.sendDate | date: 'short' }}
   </span>

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

@@ -1,10 +1,14 @@
 <div class="bubble-main">
-<ul>
-  <li *ngIf="stickerUrl">
-    <img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'">
-  </li>
-  <li *ngIf="contentJson && contentJson.chat">
-    {{ contentJson.chat }}
-  </li>
-</ul>
+  <ul>
+    <li *ngIf="stickerUrl">
+      <img
+        [src]="stickerUrl"
+        onerror="this.src='assets/sticker/sticker_default.png'"
+      />
+    </li>
+    <li
+      *ngIf="contentJson && contentJson.chat"
+      [innerHTML]="contentJson.chat | linefeedtohtml"
+    ></li>
+  </ul>
 </div>

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

@@ -1,5 +1,3 @@
 <div class="bubble-main">
-  <span>
-    {{ message.sentMessage }}
-  </span>
+  <span [innerHTML]="message.sentMessage"></span>
 </div>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Info } from '@ucap-webmessenger/protocol-event';
+import { StringUtil } from '@ucap-webmessenger/ui';
 
 @Component({
   selector: 'ucap-chat-message-box-text',
@@ -10,6 +11,7 @@ export class TextComponent implements OnInit {
   @Input()
   message: Info;
 
+  test = `가<br>나<br >다<br/>라<br />마<br class=""/>바사`;
   constructor() {}
 
   ngOnInit() {}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -23,7 +23,9 @@
         <div class="room-msg">{{ finalEventMessage }}</div>
       </div>
 
-      <div class="date">{{ roomInfo.finalEventDate }}</div>
+      <div class="date">
+        {{ roomInfo.finalEventDate | dateToStringChatList }}
+      </div>
     </dd>
     <dd *ngIf="checkable">
       <mat-checkbox

projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { DatesPipe } from './dates.pipe';
+
+describe('Pipe: Datese', () => {
+  it('create an instance', () => {
+    let pipe = new DatesPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts

@@ -0,0 +1,38 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { StringUtil } from '../utils/string.util';
+
+@Pipe({
+  name: 'dateToStringChatList'
+})
+export class DateToStringForChatRoomListPipe implements PipeTransform {
+  transform(value: any): string {
+    const curDate = new Date();
+    const yesterDate = new Date(curDate.getTime() - 1 * 24 * 60 * 60 * 1000);
+    let date: Date;
+    if (typeof value === 'string') {
+      date = new Date(value.toString());
+    } else if (value instanceof Date) {
+      date = value;
+    } else {
+      return value;
+    }
+
+    if (
+      curDate.getFullYear() === date.getFullYear() &&
+      curDate.getMonth() === date.getMonth() &&
+      curDate.getDate() === date.getDate()
+    ) {
+      // 당일
+      return StringUtil.dateFormat(date, 'a/p HH:mm');
+    } else if (
+      yesterDate.getFullYear() === date.getFullYear() &&
+      yesterDate.getMonth() === date.getMonth() &&
+      yesterDate.getDate() === date.getDate()
+    ) {
+      // 어제
+      return '어제';
+    } else {
+      return StringUtil.dateFormat(date, 'MM.dd');
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { LinefeedPipe } from './linefeed.pipe';
+
+describe('Pipe: Linefeede', () => {
+  it('create an instance', () => {
+    let pipe = new LinefeedPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'linefeedtohtml'
+})
+export class LinefeedToHtmlPipe implements PipeTransform {
+  public transform(str: string): string {
+    return str
+      .replace(/\r\n/g, '<br />')
+      .replace(/\r/g, '<br />')
+      .replace(/\n/g, '<br />');
+  }
+}
+
+@Pipe({
+  name: 'htmltolinefeed'
+})
+export class HtmlToLinefeedPipe implements PipeTransform {
+  public transform(str: string): string {
+    return str.replace(/(<|<\/)br([\s.'"=a-zA-Z/]*)>/gi, '\n');
+  }
+}

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

@@ -1,3 +1,4 @@
+import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -34,7 +35,13 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 
 import { BytesPipe } from './pipes/bytes.pipe';
-const PIPES = [BytesPipe];
+import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
+const PIPES = [
+  BytesPipe,
+  LinefeedToHtmlPipe,
+  HtmlToLinefeedPipe,
+  DateToStringForChatRoomListPipe
+];
 
 @NgModule({
   imports: [

projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts

@@ -0,0 +1,116 @@
+export class StringUtil {
+  /**
+   * linefeed > <br>
+   */
+  public static linefeedtohtml(str: string): string {
+    return str
+      .replace(/\r\n/g, '<br />')
+      .replace(/\r/g, '<br />')
+      .replace(/\n/g, '<br />');
+  }
+
+  /**
+   * <br> > linefeed
+   */
+  public static htmltolinefeed(str: string): string {
+    return str.replace(/<(\/br)([^>]*)/gi, '\n');
+  }
+
+  /**
+   * prefix zero fill
+   * @param str target string
+   * @param len fill in length
+   */
+  public static zeroFill(str: any, len: number): string {
+    if (typeof str === 'string') {
+      let fillin = '';
+      for (let i = 0; i < len - str.length; i++) {
+        fillin += '0';
+      }
+      return fillin + str;
+    } else if (typeof str === 'number') {
+      return StringUtil.zeroFill(str.toString(), len);
+    }
+  }
+
+  /**
+   * date formater
+   */
+  public static dateFormat(date: Date, f: string): string {
+    if (!date) {
+      return '';
+    } else if (!f) {
+      return date.toDateString();
+    }
+
+    const weekKorName = [
+      '일요일',
+      '월요일',
+      '화요일',
+      '수요일',
+      '목요일',
+      '금요일',
+      '토요일'
+    ];
+
+    const weekKorShortName = ['일', '월', '화', '수', '목', '금', '토'];
+
+    const weekEngName = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday'
+    ];
+
+    const weekEngShortName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+    return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, $1 => {
+      switch ($1) {
+        case 'yyyy':
+          return date.getFullYear().toString(); // 년 (4자리)
+
+        case 'yy':
+          return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
+
+        case 'MM':
+          return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
+
+        case 'dd':
+          return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
+
+        case 'KS':
+          return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)
+
+        case 'KL':
+          return weekKorName[date.getDay()]; // 요일 (긴 한글)
+
+        case 'ES':
+          return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)
+
+        case 'EL':
+          return weekEngName[date.getDay()]; // 요일 (긴 영어)
+
+        case 'HH':
+          return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)
+
+        case 'hh':
+          return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)
+
+        case 'mm':
+          return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)
+
+        case 'ss':
+          return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)
+
+        case 'a/p':
+          return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분
+
+        default:
+          return $1;
+      }
+    });
+  }
+}

projects/ucap-webmessenger-ui/src/public-api.ts

@@ -14,4 +14,6 @@ export * from './lib/services/clipboard.service';
 export * from './lib/services/dialog.service';
 export * from './lib/services/snack-bar.service';
 
+export * from './lib/utils/string.util';
+
 export * from './lib/ucap-ui.module';