Default scroll to bottom of the messages if you create a new message

ls1intum · Oct 29, 2024 · 9726517 · 9726517
1 parent a76e349
commit 9726517
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html b/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -96,15 +96,10 @@
                             @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                                 <div class="pt-2">
                                     <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
-                                    <jhi-post-create-edit-modal
-                                        #createEditModal
-                                        [posting]="newPost!"
-                                        [isCommunicationPage]="true"
-                                        (onCreate)="createEmptyPost(); scrollToBottomOfMessages()"
-                                    />
+                                    <jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
                                 </div>
                             } @else {
-                                <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="createEmptyPost(); scrollToBottomOfMessages()" />
+                                <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
                             }
                         </div>
                     }
@@ -114,15 +109,10 @@
                         @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                             <div class="pt-2">
                                 <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
-                                <jhi-post-create-edit-modal
-                                    #createEditModal
-                                    [posting]="newPost!"
-                                    [isCommunicationPage]="true"
-                                    (onCreate)="createEmptyPost(); scrollToBottomOfMessages()"
-                                />
+                                <jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
                             </div>
                         } @else {
-                            <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="createEmptyPost(); scrollToBottomOfMessages()" />
+                            <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
                         }
                     </div>
                 }

diff --git a/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -247,22 +247,21 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     }
     handleScrollOnNewMessage = () => {
         if ((this.posts.length > 0 && this.content.nativeElement.scrollTop === 0 && this.page === 1) || this.previousScrollDistanceFromTop === this.messagesContainerHeight) {
-            this.scrollToBottomOfMessages();
+            this.scrollToBottomOfMessages(false);
         }
     };
 
-    scrollToBottomOfMessages() {
+    scrollToBottomOfMessages(newMessageCreated: boolean) {
         // Use setTimeout to ensure the scroll happens after the new message is rendered
         setTimeout(() => {
             const savedScrollPosition = sessionStorage.getItem(this.sessionStorageKey + this._activeConversation?.id);
-            if (savedScrollPosition) {
+            if (savedScrollPosition && !newMessageCreated) {
                 this.content.nativeElement.scrollTop = parseInt(savedScrollPosition, 10);
             } else {
                 this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
             }
         }, 0);
     }
-
     onSearchQueryInput($event: Event) {
         const searchTerm = ($event.target as HTMLInputElement).value?.trim().toLowerCase() ?? '';
         this.search$.next(searchTerm);
@@ -286,4 +285,9 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     private saveScrollPosition = () => {
         this.scrollSubject.next(this.content.nativeElement.scrollTop);
     };
+
+    handleNewMessageCreated() {
+        this.createEmptyPost();
+        this.scrollToBottomOfMessages(true);
+    }
 }