Dvorak / 2565 Message is being send by pressing Enter

angular.json

@@ -2,12 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
     "analytics": false,
-    "schematicCollections": [
-      "@cypress/schematic",
-      "@angular-eslint/schematics",
-      "@angular-eslint/schematics",
-      "@schematics/angular"
-    ]
+    "schematicCollections": ["@cypress/schematic", "@angular-eslint/schematics", "@angular-eslint/schematics", "@schematics/angular"]
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -40,10 +35,7 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
-              "./node_modules/leaflet/dist/leaflet.css",
-              "src/styles.scss"
-            ],
+            "styles": ["./node_modules/leaflet/dist/leaflet.css", "src/styles.scss"],
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -144,10 +136,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "cypress-run": {

src/app/shell/personal-cabinet/shared-cabinet/messages/chat/chat.component.html

@@ -11,7 +11,8 @@ <h4 class="header__title" *ngIf="!!companionName">
     <ng-container *ngFor="let message of messages; index as i">
       <app-message
         [ngClass]="message.senderRoleIsProvider === userIsProvider ? 'message message__outcome' : 'message message__income'"
-        [message]="message" [isFirstMessage]="messages[i - 1]?.senderRoleIsProvider !== message.senderRoleIsProvider"
+        [message]="message"
+        [isFirstMessage]="messages[i - 1]?.senderRoleIsProvider !== message.senderRoleIsProvider"
         [senderName]="message.senderRoleIsProvider === userIsProvider ? userName : companionName"
         [userIsProvider]="userIsProvider">
       </app-message>
@@ -26,9 +27,7 @@ <h4 class="header__title" *ngIf="!!companionName">
   </div>
   <div class="chat-card__footer footer" fxLayout="column" fxLayoutAlign="start center">
     <div class="step-label">
-      <label class="step-characters-count">
-        {{ messageControl.value.length }}/{{ validationConstants.INPUT_LENGTH_256 }}
-      </label>
+      <label class="step-characters-count"> {{ messageControl.value.length }}/{{ validationConstants.INPUT_LENGTH_256 }} </label>
     </div>
     <div class="main-functional-block">
       <!--
@@ -38,9 +37,16 @@ <h4 class="header__title" *ngIf="!!companionName">
         <input type="file" id="file-input" />
       -->
 
-      <textarea type="text" class="message-input" placeholder="{{ 'SEND_A_MESSAGE' | translate }}" cdkTextareaAutosize
-        [maxlength]="validationConstants.INPUT_LENGTH_256" autocomplete="off" [formControl]="messageControl"
-        [readonly]="isDisabled"></textarea>
+      <textarea
+        type="text"
+        class="message-input"
+        placeholder="{{ 'SEND_A_MESSAGE' | translate }}"
+        cdkTextareaAutosize
+        [maxlength]="validationConstants.INPUT_LENGTH_256"
+        autocomplete="off"
+        [formControl]="messageControl"
+        [readonly]="isDisabled"
+        (keydown)="handleKeyDown($event)"></textarea>
       <button class="btn" mat-button (click)="onSendMessage()" [disabled]="isDisabled">
         <span>{{ 'BUTTONS.SEND' | translate | uppercase }}</span>
         <mat-icon>send</mat-icon>

src/app/shell/personal-cabinet/shared-cabinet/messages/chat/chat.component.spec.ts

@@ -40,6 +40,34 @@ describe('ChatComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('handleKeyDown', () => {
+    it('should send message on Enter key press', () => {
+      jest.spyOn(component, 'onSendMessage');
+
+      const event = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        shiftKey: false
+      });
+
+      component.handleKeyDown(event);
+
+      expect(component.onSendMessage).toHaveBeenCalled();
+    });
+
+    it('should not send message on Shift+Enter key press', () => {
+      jest.spyOn(component, 'onSendMessage');
+
+      const event = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        shiftKey: true
+      });
+
+      component.handleKeyDown(event);
+
+      expect(component.onSendMessage).not.toHaveBeenCalled();
+    });
+  });
 });
 
 @State<ChatStateModel>({

src/app/shell/personal-cabinet/shared-cabinet/messages/chat/chat.component.ts

@@ -97,6 +97,13 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.chatEl.nativeElement.removeEventListener('scroll', this.onScroll);
   }
 
+  public handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      this.onSendMessage();
+    }
+  }
+
   public onSendMessage(): void {
     if (this.chatRoom.isBlockedByProvider && !this.userIsProvider) {
       this.setChatDisabled();