validation of editor is modified

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()"
       ></div>
       <input type="file" #fileInput style="display: none" multiple />
       <mat-list>
@@ -52,6 +53,15 @@
         </button>
       </div>
       <div class="editor-actions-spacer"></div>
+      <div>
+        <span
+          [class.editor-length-invalid]="
+            0 === contentLength || 1000 < contentLength
+          "
+          >{{ contentLength }}</span
+        >/1000
+      </div>
+      <div class="editor-actions-spacer"></div>
       <div class="editor-actions">
         <button
           mat-stroked-button
@@ -67,10 +77,18 @@
           </button>
         </mat-menu>
 
-        <ucap-split-button [menu]="appMenu" (buttonClick)="onClickSend()"
+        <ucap-split-button
+          [menu]="appMenu"
+          (buttonClick)="onClickSend()"
+          [disabled]="
+            messageWriteForm.invalid ||
+            !receiverList ||
+            0 === receiverList.length ||
+            0 === contentLength ||
+            1000 < contentLength
+          "
           >보내기</ucap-split-button
         >
-        <!-- [disabled]="messageWriteForm.invalid" -->
       </div>
     </mat-card-actions>
   </form>

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%;

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[] = [];