fully implemented recently used emojis & added favicon & fixed small …

…design bugs
Kakar21 · Sep 14, 2024 · d9740b9 · d9740b9
1 parent 61530bc
commit d9740b9
Show file tree

Hide file tree

Showing 17 changed files with 158 additions and 55 deletions.
diff --git a/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.ts b/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.ts
@@ -100,9 +100,11 @@ export class DialogAddChannelAddMemberComponent {
             map((value: string | null) =>
                 value
                     ? this._filter(value)
-                    : this.chatService.usersList.slice(),
+                    : this.chatService.usersList
+                        .filter(user => user.id !== this.currentUser.currentUser.id) // Hier filtern wir den currentUser nach der ID
             ),
         );
+
     }
 
     get data() {
@@ -113,25 +115,40 @@ export class DialogAddChannelAddMemberComponent {
         if (!this.data) {
             throw new Error("No data provided for channel creation");
         }
-
-        let members: UsersList[];
-
+
+        // Initialisiere die Mitglieder-Liste mit dem aktuellen Benutzer (currentUser)
+        let members: UsersList[] = [this.currentUser.currentUser];
+
         if (this.selectedOption === "2") {
-            members = this.addedMembers;
+            // Füge nur ausgewählte Mitglieder hinzu, die nicht bereits in der Liste sind
+            this.addedMembers.forEach((user) => {
+                if (!members.some(member => member.id === user.id)) {
+                    members.push(user);
+                }
+            });
         } else {
-            members = this.chatService.usersList;
+            // Füge alle Mitglieder hinzu, aber stelle sicher, dass der currentUser nicht doppelt hinzugefügt wird
+            this.chatService.usersList.forEach((user) => {
+                if (!members.some(member => member.id === user.id)) {
+                    members.push(user);
+                }
+            });
         }
-
+    
         const newChannel = await addDoc(collection(this.dataBase, "channels"), {
             name: this.data.channelName,
             description: this.data.channelDescription,
             creator: this.currentUser.currentUser.name,
             members: members,
         });
+
         this.closeSheet.emit();
         this.dialog.closeAll();
         this.showChannel(newChannel.id);
     }
+
+
+
 
     remove(user: UsersList): void {
         const index = this.addedMembers.indexOf(user);
@@ -156,11 +173,13 @@ export class DialogAddChannelAddMemberComponent {
 
     private _filter(value: string): UsersList[] {
         const filterValue = value.toLowerCase();
-
-        return this.chatService.usersList.filter((user) =>
-            user.name.toLowerCase().includes(filterValue),
-        );
-    }
+
+        // Filtere den currentUser nach der ID aus
+        return this.chatService.usersList
+            .filter(user => user.name.toLowerCase().includes(filterValue))
+            .filter(user => user.id !== this.currentUser.currentUser.id); // Filter nach ID
+    }      
+
 
     showChannel(id: string) {
         this.chatService.openChannel(id);

diff --git a/src/app/main/chat/chat.component.html b/src/app/main/chat/chat.component.html
@@ -48,12 +48,9 @@ <h2>{{ dayDate(message.value.time) }}</h2>
                 [id]="message.key"
                 class="message">
                 <div class="hoverMenu">
-                    <button class="random-emoji-button" mat-icon-button>
-                        <img src="../../../assets/img/icons/emoji-check.svg" alt="React" />
-                    </button>
-                    <button class="random-emoji-button" mat-icon-button>
-                        <img src="../../../assets/img/icons/emoji-hands-up.svg" alt="React" />
-                    </button>
+                    <button class="random-emoji-button" mat-icon-button *ngFor="let emoji of recentEmojis" (click)="addReaction(emoji, message.value.padNumber.toString())">
+                        <ngx-emoji [isNative]="true" [emoji]="emoji" [size]="24"></ngx-emoji>
+                    </button>                      
                     <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', message.value.padNumber, $event); $event.stopPropagation()">
                         <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />
                     </button>
@@ -151,7 +148,7 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
             </div>
             }
             <div class="emoji-picker" *ngIf="isPickerVisible && pickerContext === 'reaction'" [ngStyle]="{ top: pickerPosition.top, left: pickerPosition.left }">
-                <emoji-mart [perLine]="8" (emojiClick)="addEmoji($event)"></emoji-mart>
+                <emoji-mart [exclude]="['skintones']" [perLine]="8" (emojiClick)="addEmoji($event)"></emoji-mart>
             </div>
 
             <!-- TODO: add focus textarea on click -->

diff --git a/src/app/main/chat/chat.component.scss b/src/app/main/chat/chat.component.scss
@@ -260,6 +260,10 @@
         }
     }
 
+    .reaction {
+        justify-content: flex-end;
+    }
+
     .hoverMenu {
         left: 5%;
         right: unset;

diff --git a/src/app/main/chat/chat.component.ts b/src/app/main/chat/chat.component.ts
@@ -8,6 +8,8 @@ import {
     AfterViewChecked,
     CUSTOM_ELEMENTS_SCHEMA,
     HostListener,
+    OnInit,
+    ChangeDetectorRef,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MatButtonModule } from "@angular/material/button";
@@ -17,7 +19,7 @@ import { DialogAddMemberToChnlComponent } from "../../dialog-add-member-to-chnl/
 import { MatMenu, MatMenuModule } from "@angular/material/menu";
 import { DialogChannelInfoComponent } from "../../dialog-channel-info/dialog-channel-info.component";
 import { DialogShowChannelMemberComponent } from "../../dialog-show-channel-member/dialog-show-channel-member.component";
-import { PickerComponent } from "@ctrl/ngx-emoji-mart";
+import { EmojiSearch, PickerComponent } from "@ctrl/ngx-emoji-mart";
 import { DialogEditMessageComponent } from "../../dialog-edit-message/dialog-edit-message.component";
 import { ChatService } from "./chat.service";
 import { MainComponent } from "../main.component";
@@ -36,7 +38,7 @@ import { UsersList } from "../../interfaces/users-list";
 import { MatInputModule } from "@angular/material/input";
 import { HighlightMentionsPipe } from "../../pipes/highlist-mentions.pipe";
 import { PofileInfoCardComponent } from "../../pofile-info-card/pofile-info-card.component";
-import { EmojiModule } from "@ctrl/ngx-emoji-mart/ngx-emoji";
+import { EmojiModule, EmojiService } from "@ctrl/ngx-emoji-mart/ngx-emoji";
 import { ImageService } from "../../image.service";
 import { DialogImageComponent } from "../../dialog-image/dialog-image.component";
 
@@ -65,7 +67,7 @@ import { DialogImageComponent } from "../../dialog-image/dialog-image.component"
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     styleUrls: ["./chat.component.scss"],
 })
-export class ChatComponent implements AfterViewInit, AfterViewChecked {
+export class ChatComponent implements AfterViewInit, AfterViewChecked, OnInit {
     @Output() threadOpen = new EventEmitter<{
         channelId: string;
         messageId: string;
@@ -88,19 +90,26 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
     pickerPosition = { top: '0px', left: '0px' };
     editMessageId: string | null = null;
     perLineCount = 9;
+    recentEmojis: string[] = [];
+
 
     constructor(
         public dialog: MatDialog,
         public chatService: ChatService,
         public currentUser: CurrentuserService,
-        public imageService: ImageService
+        public imageService: ImageService,
+        private emojiService: EmojiService
     ) {
         this.filteredMembers = this.formCtrl.valueChanges.pipe(
             startWith(""),
             map((value: string | null) => (value ? this._filter(value) : [])),
         );
     }
 
+    ngOnInit(): void {
+        this.loadRecentEmojis()
+    }
+
     ngAfterViewInit() {
         if (this.chatService.currentChannel.messages) {
             this.messagesArrayLength = this.chatService.currentChannel.messages.size;
@@ -115,8 +124,7 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
     ngAfterViewChecked() {
         if (this.messagesArrayLength !== this.chatService.currentChannel.messages?.size) {}
             // this.scrollToBottom();
-    }
-
+    }      
 
 
     toggleThread(channelId: string, messageId: string) {
@@ -175,8 +183,33 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
                 event.emoji.native,
             );
         }
+        setTimeout(() => {
+            this.loadRecentEmojis();  // Refresh recent emojis after a delay
+          }, 100);
     }
 
+    loadRecentEmojis() {
+        const recentEmojiData = localStorage.getItem('emoji-mart.frequently');
+        if (recentEmojiData) {
+          const recentEmojiObj = JSON.parse(recentEmojiData);
+          this.recentEmojis = Object.keys(recentEmojiObj).slice(-2).reverse();  // Get the last two emojis and reverse the order
+        }
+      }    
+
+    addReaction(emojiId: string, messagePadnr: string) {
+        let emoji = this.getEmojiById(emojiId) || ''
+        this.addReactionToMessage(messagePadnr, emoji);  // Use emoji string directly for reaction
+        setTimeout(() => {
+            this.loadRecentEmojis();  // Refresh recent emojis after reaction
+        }, 100);
+    }
+
+    getEmojiById(emojiId: string) {
+        const emoji = this.emojiService.getData(emojiId) // Get the emoji by ID
+        return emoji ? emoji.native : null;           // Return the native emoji
+      }
+
+
     noReactions(message: Message): boolean {
         return !message.reactions || Object.keys(message.reactions).length === 0;
     }    
@@ -186,6 +219,7 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
         this.isPickerVisible = false;
     }
     togglePicker(context: string, padNr: any, event: MouseEvent) {
+        console.log(this.recentEmojis)
         if (window.matchMedia("(max-width: 350px)").matches) {
             this.perLineCount = 8;
         } else {
@@ -212,6 +246,7 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
 
 
     addReactionToMessage(messagePadnr: string, emoji: string) {
+        console.log(emoji)
         this.chatService
             .addReaction(messagePadnr, emoji, 'chat', '')
             .then(() => console.log("Reaction added"))

diff --git a/src/app/main/chat/direct-message/direct-message.component.html b/src/app/main/chat/direct-message/direct-message.component.html
@@ -44,11 +44,8 @@ <h2>{{ dayDate(message.value.time) }}</h2>
                                 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" />
-                    </button>
-                    <button class="random-emoji-button" mat-icon-button>
-                        <img src="../../../assets/img/icons/emoji-hands-up.svg" alt="React" />
+                    <button class="random-emoji-button" mat-icon-button *ngFor="let emoji of recentEmojis" (click)="addReaction(emoji, message.value.padNumber.toString())">
+                        <ngx-emoji [isNative]="true" [emoji]="emoji" [size]="24"></ngx-emoji>
                     </button>
                     <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', message.value.padNumber, $event); $event.stopPropagation()">
                         <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />

diff --git a/src/app/main/chat/direct-message/direct-message.component.scss b/src/app/main/chat/direct-message/direct-message.component.scss
@@ -144,7 +144,7 @@
     }
 
     .reaction {
-        flex-direction: row-reverse;
+        justify-content: flex-end;
     }
 
     .hoverMenu {

diff --git a/src/app/main/chat/direct-message/direct-message.component.ts b/src/app/main/chat/direct-message/direct-message.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, Input, ViewChild } from "@angular/core";
+import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from "@angular/core";
 import { ChatComponent } from "../chat.component";
 import { PickerComponent } from "@ctrl/ngx-emoji-mart";
 import { MatDialog, MatDialogModule } from "@angular/material/dialog";
@@ -21,7 +21,7 @@ import { CurrentuserService } from "../../../currentuser.service";
 import { ImageService } from "../../../image.service";
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
 import { map, Observable, startWith } from "rxjs";
-import { EmojiModule } from "@ctrl/ngx-emoji-mart/ngx-emoji";
+import { EmojiModule, EmojiService } from "@ctrl/ngx-emoji-mart/ngx-emoji";
 import { DialogEditMessageComponent } from "../../../dialog-edit-message/dialog-edit-message.component";
 import { HighlightMentionsPipe } from "../../../pipes/highlist-mentions.pipe";
 import { DialogImageComponent } from "../../../dialog-image/dialog-image.component";
@@ -49,7 +49,7 @@ import { DialogImageComponent } from "../../../dialog-image/dialog-image.compone
     templateUrl: "./direct-message.component.html",
     styleUrl: "./direct-message.component.scss",
 })
-export class DirectMessageComponent {
+export class DirectMessageComponent implements OnInit {
     isPickerVisible = false;
     messageText: string = "";
     formCtrl = new FormControl();
@@ -61,6 +61,7 @@ export class DirectMessageComponent {
     currentMessagePadnumber: string = "";
     previewUrl: string | ArrayBuffer | null = null;
     perLineCount = 9;
+    recentEmojis: string[] = [];
 
 
     constructor(
@@ -69,13 +70,19 @@ export class DirectMessageComponent {
         public chatService: ChatService,
         public currentUser: CurrentuserService,
         public imageService: ImageService,
+        private emojiService: EmojiService
+
     ) {
         this.filteredMembers = this.formCtrl.valueChanges.pipe(
             startWith(""),
             map((value: string | null) => (value ? this._filter(value) : [])),
         );
     }
 
+    ngOnInit(): void {
+        this.loadRecentEmojis()
+    }
+
     objectKeys(obj: any): string[] {
         return Object.keys(obj);
     }
@@ -129,8 +136,32 @@ export class DirectMessageComponent {
                 event.emoji.native,
             );
         }
+        setTimeout(() => {
+            this.loadRecentEmojis();  // Refresh recent emojis after a delay
+          }, 100);
     }
 
+    loadRecentEmojis() {
+        const recentEmojiData = localStorage.getItem('emoji-mart.frequently');
+        if (recentEmojiData) {
+          const recentEmojiObj = JSON.parse(recentEmojiData);
+          this.recentEmojis = Object.keys(recentEmojiObj).slice(-2).reverse();  // Get the last two emojis and reverse the order
+        }
+      }    
+
+    addReaction(emojiId: string, messagePadnr: string) {
+        let emoji = this.getEmojiById(emojiId) || ''
+        this.addReactionToMessage(messagePadnr, emoji);  // Use emoji string directly for reaction
+        setTimeout(() => {
+            this.loadRecentEmojis();  // Refresh recent emojis after reaction
+        }, 100);
+    }
+
+    getEmojiById(emojiId: string) {
+        const emoji = this.emojiService.getData(emojiId) // Get the emoji by ID
+        return emoji ? emoji.native : null;           // Return the native emoji
+      }
+
     addReactionToMessage(messagePadnr: string, emoji: string) {
         this.DMSerivce.addReaction(messagePadnr, emoji, this.chatService.selectedUser.id)
             .then(() => console.log("Reaction added"))

diff --git a/src/app/main/header/header.component.html b/src/app/main/header/header.component.html
@@ -94,7 +94,7 @@ <h1>{{ currentuser.currentUser.name }}</h1>
             (click)="openDialog($event)"
             mat-icon-button
         >
-            <span class="material-icons">keyboard_arrow_down</span>
+            <img src="../../../assets/img/icons/keyboard_arrow_down.svg">
         </button>
     </div>
 </section>