added open the right chat and scroll to message to the search

Kakar21 · Sep 10, 2024 · a1f9e23 · a1f9e23
1 parent 40fa6de
commit a1f9e23
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 20 deletions.
diff --git a/src/app/interfaces/search-result.ts b/src/app/interfaces/search-result.ts
@@ -4,6 +4,7 @@ export interface SearchResult {
     name: string;
     avatar: string;
     message: string;
+    padNumber: string;
     userID?: string;
     channelName?: string;
     channelID?: string;

diff --git a/src/app/main/chat/chat.component.ts b/src/app/main/chat/chat.component.ts
@@ -108,12 +108,12 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
                 this.chatService.loadThreadInfo(this.chatService.currentChannelID, messageId);
             });
         }
-        this.scrollToBottom();
+        // this.scrollToBottom();
     }
 
     ngAfterViewChecked() {
-        if (this.messagesArrayLength !== this.chatService.currentChannel.messages?.size)
-            this.scrollToBottom();
+        if (this.messagesArrayLength !== this.chatService.currentChannel.messages?.size) {}
+            // this.scrollToBottom();
     }
 
 
@@ -564,13 +564,15 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
     }
 
     scrollToMessage(messageId: string) {
-        const element = document.getElementById(messageId);
-        if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            // Optional: Nachricht hervorheben
-            element.classList.add('highlight');
-            setTimeout(() => element.classList.remove('highlight'), 2000); // Entfernt die Hervorhebung nach 2 Sekunden
+        const messageElement = document.getElementById(messageId) as HTMLElement;
+
+        if (messageElement) {
+            messageElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+            console.log('Message element found, using scrollIntoView...');
+        } else {
+            console.error('Message element not found');
         }
     }
 
+
 }
diff --git a/src/app/main/chat/chat.service.ts b/src/app/main/chat/chat.service.ts
@@ -90,14 +90,25 @@ export class ChatService {
         }
     }
 
-    openDirectMessage(user: UsersList) {
-        this.selectedDirectmessage = user.id;
-        this.selectedChannel = "";
-        this.selectedUser = user;
-        if (window.matchMedia("(max-width: 768px)").matches) {
-            this.mobileOpen = "directmessage";
+    openDirectMessage(userId: string) {
+        // Suche den Benutzer mit der passenden userId in der usersList
+        const user = this.usersList.find(user => user.id === userId);
+
+        // Falls der Benutzer existiert, wird der Chat geöffnet
+        if (user) {
+            this.selectedDirectmessage = userId;
+            this.selectedChannel = "";
+            this.selectedUser = user;  // Setze den gefundenen Benutzer
+
+            // Überprüfe, ob das Gerät mobil ist und öffne die Direktnachricht
+            if (window.matchMedia("(max-width: 768px)").matches) {
+                this.mobileOpen = "directmessage";
+            }
+        } else {
+            console.error(`User with ID ${userId} not found`);
         }
     }
+
     loadChannel(id: string) {
         const channelRef = this.firestore.channelsRef;
         const channelDocRef = doc(channelRef, id);

diff --git a/src/app/main/chat/direct-message/direct-message.component.html b/src/app/main/chat/direct-message/direct-message.component.html
@@ -42,7 +42,7 @@ <h2>{{ dayDate(message.value.time) }}</h2>
                             'my-message':
                                 message.value.id ===
                                 this.currentUser.currentUser.id,
-                        }">
+                        }" [id]="message.key">
                 <div class="hoverMenu">
                     <button class="random-emoji-button" mat-icon-button>
                         <img src="../../../assets/img/icons/emoji-check.svg" alt="React" />

diff --git a/src/app/main/conversations/conversations.component.html b/src/app/main/conversations/conversations.component.html
@@ -101,7 +101,7 @@ <h3>Direktnachrichten</h3>
                             (click)="
                                 chatService.setComponent('directMessage');
                                 DMservice.getMessages(user.id);
-                                chatService.openDirectMessage(user)
+                                chatService.openDirectMessage(user.id)
                             "
                             [value]="user.id"
                         >

diff --git a/src/app/main/header/header.component.html b/src/app/main/header/header.component.html
@@ -29,7 +29,7 @@
             [formControl]="formCtrl"
             [matAutocomplete]="auto"
         />
-        <mat-autocomplete class="search-autocomplete" #auto="matAutocomplete" [displayWith]="displayOption">
+        <mat-autocomplete class="search-autocomplete" #auto="matAutocomplete" [displayWith]="displayOption" (optionSelected)="onOptionSelected($event)">
             <mat-option class="search-no-results" *ngIf="(filteredResults | async)?.length === 0" disabled>
                 <span>Keine Ergebnisse gefunden</span>
             </mat-option>

diff --git a/src/app/main/header/header.component.scss b/src/app/main/header/header.component.scss
@@ -253,6 +253,20 @@ h1 {
     }
 }
 
+@keyframes highlight {
+    0% {
+        background-color: var(--bg-color) !important;
+    }
+    100% {
+        background-color: transparent !important;
+    }
+}
+
+::ng-deep::ng-deep .highlight-message {
+    animation: highlight 2s ease-in;
+}
+
+
 // Media Queries
 
 @media (max-width: 768px) {

diff --git a/src/app/main/header/header.component.ts b/src/app/main/header/header.component.ts
@@ -163,6 +163,7 @@ export class HeaderComponent {
                         name: message.name,
                         avatar: message.avatar,
                         message: message.message,
+                        padNumber: message.padNumber,
                         userID: userId,
                     });
                 });
@@ -192,6 +193,7 @@ export class HeaderComponent {
                         name: message.name,
                         avatar: message.avatar,
                         message: message.message,
+                        padNumber: message.padNumber.toString(),
                         channelName: channel.channelData.name,
                         channelID: channel.id,
                     }));
@@ -231,6 +233,7 @@ export class HeaderComponent {
                         name: message.name,
                         avatar: message.avatar,
                         message: message.message,
+                        padNumber: message.padNumber.toString(),
                         channelName: channel.channelData.name,
                         channelID: channel.id,
                     });
@@ -279,5 +282,60 @@ export class HeaderComponent {
         );
     }
 
-
+    openSearchResult(option: SearchResult) {
+        if ((option.type === 'channel') && option.channelID) {
+          // Öffne den Channel
+          this.chatService.openChannel(option.channelID);
+          this.chatService.setComponent('chat');
+        //   closeThread();
+
+          // Scrolle zur Nachricht, wenn vorhanden
+          setTimeout(() => {
+            this.scrollToMessage(option.padNumber);
+          }, 500); // Warte, bis der Chat-Inhalt geladen ist
+        } else if ((option.type === 'user') && option.userID) {
+          // Öffne den Direct Message Chat
+          this.DMService.getMessages(option.userID);
+          this.chatService.openDirectMessage(option.userID);
+          this.chatService.setComponent('directMessage');
+
+          // Scrolle zur Nachricht, wenn vorhanden
+          setTimeout(() => {
+            this.scrollToMessage(option.id);
+          }, 500); // Warte, bis der Chat-Inhalt geladen ist
+        }
+      }      
+
+      scrollToMessage(messageId: string) {
+        const messageElement = document.getElementById(messageId);
+        if (messageElement) {
+          messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+          messageElement.classList.add('highlight-message');
+          setTimeout(() => {
+              messageElement.classList.remove('highlight-message');
+          }, 2000); // Zeitdauer der Animation
+        } else {
+          console.error('Message element not found');
+        }
+      }
+
+
+    onOptionSelected(event: MatAutocompleteSelectedEvent): void {
+        const selectedOption = event.option.value;
+
+        if (selectedOption) {
+          if (selectedOption.type === 'user') {
+            this.openSearchResult(selectedOption);
+          } else if (selectedOption.type === 'channel') {
+            this.openSearchResult(selectedOption);
+          }
+        }
+
+        // Leere das Eingabefeld nach der Auswahl der Option
+        this.formCtrl.setValue('');
+        setTimeout(() => {
+            this.searchInput.nativeElement.blur();  // Explizit den Fokus entfernen
+          }, 0);
+      }
 }
diff --git a/src/app/main/header/search.service.ts b/src/app/main/header/search.service.ts
@@ -42,6 +42,7 @@ export class SearchService {
           name: message.name,  // Channel-Name
           avatar: message.avatar,
           message: message.message,  // Nachricht
+          padNumber: message.padNumber.toString(),
           channelName: this.channels[channelId].name,
           channelID: channelId
         });
@@ -63,6 +64,7 @@ export class SearchService {
           name: message.name,  // Benutzername
           avatar: message.avatar,
           message: message.message,  // Nachricht
+          padNumber: message.padNumber,
           userID: userId
         });
       });

diff --git a/src/app/pofile-info-card/pofile-info-card.component.ts b/src/app/pofile-info-card/pofile-info-card.component.ts
@@ -34,6 +34,6 @@ export class PofileInfoCardComponent {
         this.dialogRef.close();
         this.chatService.setComponent("directMessage");
         this.DMservice.getMessages(user.id);
-        this.chatService.openDirectMessage(user);
+        this.chatService.openDirectMessage(user.id);
     }
 }