From 68dd36214cca6d7012bb425efffaedddcb1dc47a Mon Sep 17 00:00:00 2001 From: leejh Date: Fri, 25 Oct 2019 13:16:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=A7=90=ED=92=8D=EC=84=A0=20=EB=82=B4=20?= =?UTF-8?q?=EC=A4=84=EB=B0=94=EA=BF=88=20=EB=AC=B8=EC=9E=90=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC.=20=EB=8C=80=ED=99=94=EB=A6=AC=EC=8A=A4=ED=8A=B8=20fi?= =?UTF-8?q?naleventDate=20=EC=B2=98=EB=A6=AC.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../message-box/mass.component.html | 4 +- .../message-box/sticker.component.html | 20 +-- .../message-box/text.component.html | 6 +- .../components/message-box/text.component.ts | 2 + .../lib/components/list-item.component.html | 4 +- .../src/lib/pipes/dates.pipe.spec.ts | 11 ++ .../src/lib/pipes/dates.pipe.ts | 38 ++++++ .../src/lib/pipes/linefeed.pipe.spec.ts | 11 ++ .../src/lib/pipes/linefeed.pipe.ts | 22 ++++ .../src/lib/ucap-ui.module.ts | 9 +- .../src/lib/utils/string.util.ts | 116 ++++++++++++++++++ .../ucap-webmessenger-ui/src/public-api.ts | 2 + 12 files changed, 228 insertions(+), 17 deletions(-) create mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.spec.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html index 42373c8e..2387c3a3 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html @@ -1,7 +1,5 @@
- - {{ content }} - + {{ message.sendDate | date: 'short' }} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html index b54fe95d..8bfbb736 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html @@ -1,10 +1,14 @@
-
    -
  • - -
    • -
  • - {{ contentJson.chat }} -
    • -
+
    +
  • + +
    • +
  • +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html index 31fcbc0c..5fa7473d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html @@ -1,5 +1,3 @@
- - {{ message.sentMessage }} - -
\ No newline at end of file + +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts index a2e54116..11fdbd62 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts +++ b/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 = `가
나
다
라
마
바사`; constructor() {} ngOnInit() {} diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html index 38425214..34499f9d 100644 --- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html +++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html @@ -23,7 +23,9 @@
{{ finalEventMessage }}
-
{{ roomInfo.finalEventDate }}
+
+ {{ roomInfo.finalEventDate | dateToStringChatList }} +
{ + it('create an instance', () => { + let pipe = new DatesPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts new file mode 100644 index 00000000..51252580 --- /dev/null +++ b/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'); + } + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.spec.ts new file mode 100644 index 00000000..36d41f53 --- /dev/null +++ b/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(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts new file mode 100644 index 00000000..52aecbf5 --- /dev/null +++ b/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, '
') + .replace(/\r/g, '
') + .replace(/\n/g, '
'); + } +} + +@Pipe({ + name: 'htmltolinefeed' +}) +export class HtmlToLinefeedPipe implements PipeTransform { + public transform(str: string): string { + return str.replace(/(<|<\/)br([\s.'"=a-zA-Z/]*)>/gi, '\n'); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index a9d48c67..4dc12631 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/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: [ diff --git a/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts b/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts new file mode 100644 index 00000000..c281f032 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts @@ -0,0 +1,116 @@ +export class StringUtil { + /** + * linefeed >
+ */ + public static linefeedtohtml(str: string): string { + return str + .replace(/\r\n/g, '
') + .replace(/\r/g, '
') + .replace(/\n/g, '
'); + } + + /** + *
> 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; + } + }); + } +} diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts index 0716a842..7fdcb3c9 100644 --- a/projects/ucap-webmessenger-ui/src/public-api.ts +++ b/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'; From 27342890db14914d67a355994080a6010b4715ec Mon Sep 17 00:00:00 2001 From: leejh Date: Fri, 25 Oct 2019 15:36:29 +0900 Subject: [PATCH 2/2] bugfix --- projects/ucap-webmessenger-app/tsconfig.app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ucap-webmessenger-app/tsconfig.app.json b/projects/ucap-webmessenger-app/tsconfig.app.json index 902c0ffb..81c989a1 100644 --- a/projects/ucap-webmessenger-app/tsconfig.app.json +++ b/projects/ucap-webmessenger-app/tsconfig.app.json @@ -1,7 +1,7 @@ { "extends": "../../tsconfig.json", "angularCompilerOptions": { - "enableIvy": true, + "enableIvy": false, "allowEmptyCodegenFiles": true }, "compilerOptions": {