From aa364cac6728955060adab3d082018958b38d3fa Mon Sep 17 00:00:00 2001 From: Richard Park Date: Mon, 9 Dec 2019 10:53:25 +0900 Subject: [PATCH 1/2] validation of editor is modified --- .../src/lib/components/write.component.html | 22 +++- .../src/lib/components/write.component.scss | 4 + .../src/lib/components/write.component.ts | 103 ++++++++++++++---- 3 files changed, 103 insertions(+), 26 deletions(-) diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html index 2199f21f..0c7979d3 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html @@ -10,6 +10,7 @@ class="ucap-message-write-editor" contenteditable="true" (paste)="onPasteEditor($event)" + (input)="onInputEditor()" > @@ -52,6 +53,15 @@
+
+ {{ contentLength }}/1000 +
+
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss index 46760a67..aaae0544 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss @@ -39,6 +39,10 @@ } } + .editor-length-invalid { + color: crimson; + } + mat-card-actions { display: flex; width: 100%; diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts index 05b17b8c..2b1c6ac6 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts @@ -77,6 +77,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { attachmentList: File[]; fileUploadItem: FileUploadItem; receiverList: UserInfo[] = []; + contentLength = 0; constructor( private formBuilder: FormBuilder, @@ -87,8 +88,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { ngOnInit() { this.messageWriteForm = this.formBuilder.group({ - receiverList: ['', [Validators.required]], - title: ['', [Validators.required]] + title: ['', []] }); } @@ -143,9 +143,15 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { ); this.insertNode(text, true); + this.checkContentLength(); + return false; } + onInputEditor() { + this.checkContentLength(); + } + onRemovedReceiver(receiver: UserInfo) { const index = this.receiverList.indexOf(receiver); @@ -183,32 +189,39 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { } } - private sendMessage(reservationDate?: moment.Moment) { - const contentList: Content[] = this.generateContent(); - if (!contentList || 0 === contentList.length) { + private checkContentLength() { + const result = this.parseContent(); + if (!result) { return; } - const listOrder: ContentType[] = []; - const textContent: { text: string }[] = []; - const recvUserList: { userSeq: number; userName: string }[] = []; - const files: File[] = []; - const title = this.messageWriteForm.get('title').value; + const { textContent } = result; - contentList.forEach(v => { - listOrder.push(v.contentType); - switch (v.contentType) { - case ContentType.Text: - textContent.push({ text: v.content as string }); - break; - case ContentType.Image: - case ContentType.AttachFile: - files.push(v.content as File); - break; - default: - break; - } - }); + if (!textContent || 0 === textContent.length) { + this.contentLength = 0; + } else { + let len = 0; + textContent.forEach(c => { + len += c.text.length; + }); + this.contentLength = len; + } + } + + private sendMessage(reservationDate?: moment.Moment) { + const result = this.parseContent(); + if (!result) { + return; + } + + const { listOrder, textContent, files } = result; + + if (!listOrder || 0 === listOrder.length) { + return; + } + + const recvUserList: { userSeq: number; userName: string }[] = []; + const title = this.messageWriteForm.get('title').value; this.receiverList.forEach(v => { recvUserList.push({ @@ -234,6 +247,48 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { }); } + private parseContent(): + | { + listOrder: ContentType[]; + textContent: { text: string }[]; + files: File[]; + } + | undefined { + const contentList: Content[] = this.generateContent(); + if (!contentList || 0 === contentList.length) { + return; + } + + const listOrder: ContentType[] = []; + const textContent: { text: string }[] = []; + const files: File[] = []; + + contentList.forEach(v => { + listOrder.push(v.contentType); + switch (v.contentType) { + case ContentType.Text: + let content = v.content as string; + if ('\n' === content.charAt(content.length - 1)) { + content = content.substring(0, content.length - 2); + } + textContent.push({ text: content }); + break; + case ContentType.Image: + case ContentType.AttachFile: + files.push(v.content as File); + break; + default: + break; + } + }); + + return { + listOrder, + textContent, + files + }; + } + private generateContent(): Content[] { const contentList: Content[] = []; From 73d7f181ea070092123f06df0e2877bef7922040 Mon Sep 17 00:00:00 2001 From: Richard Park Date: Mon, 9 Dec 2019 11:28:27 +0900 Subject: [PATCH 2/2] validation of schedule send is modified --- .../src/lib/components/write.component.scss | 2 -- .../schedule-send.dialog.component.html | 32 ++++++++++++++----- .../schedule-send.dialog.component.scss | 15 +++++++++ .../dialogs/schedule-send.dialog.component.ts | 8 +++-- 4 files changed, 45 insertions(+), 12 deletions(-) diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss index aaae0544..5bb4af7e 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss @@ -22,12 +22,10 @@ } [contenteditable] { - transition: padding 0.3s ease-in-out; } [contenteditable]:hover, [contenteditable]:focus { - padding: 0.25em; } [contenteditable]:hover { diff --git a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html index 29cafcd3..bd2919dd 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html +++ b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html @@ -101,14 +101,30 @@ -
-
- - +
+
+ + 현재 시각으로부터 30분 이후로만 설정 가능합니다. + +
+
+
+ + +
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss index b5636aec..d48f2547 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss +++ b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss @@ -1,3 +1,18 @@ .preset-button { width: 100%; } + +.actions-container { + display: flex; + position: fixed; + + .actions-message { + } + + .actions-spacer { + flex: 1 1 auto; + } + + .actions { + } +} diff --git a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.ts b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.ts index accde7e4..e49d9332 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.ts +++ b/projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.ts @@ -23,6 +23,8 @@ export class ScheduleSendDialogComponent implements OnInit { hourStep = 1; minuteStep = 10; + dateIsToEarly = false; + get selectedDate() { return this._selectedDate; } @@ -31,6 +33,8 @@ export class ScheduleSendDialogComponent implements OnInit { this.minuteStep * Math.round(v.minute() / this.minuteStep) ); this._selectedDate = v; + const aa = moment().add(30, 'minutes'); + this.dateIsToEarly = v.isBefore(moment().add(30, 'minutes')); } // tslint:disable-next-line: variable-name private _selectedDate: moment.Moment; @@ -59,10 +63,10 @@ export class ScheduleSendDialogComponent implements OnInit { } onHourSelected(hour: number) { - this.selectedDate.hour(hour); + this.selectedDate = this.selectedDate.hour(hour); } onMinuteSelected(minute: number) { - this.selectedDate.minute(minute); + this.selectedDate = this.selectedDate.minute(minute); } onClickPresetTommorowMorning() {