From 2dd65a18da98dc65c0cd1fc8590768b3855e8383 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Sat, 14 Dec 2024 15:30:19 +0300
Subject: [PATCH] added inject, signals and standalone

---
 .../shared/metis/conversations/channel.service.ts  | 10 ++++------
 .../metis/conversations/conversation.service.ts    | 10 ++++------
 .../metis/conversations/group-chat.service.ts      | 10 ++++------
 .../metis/conversations/one-to-one-chat.service.ts |  8 +++-----
 .../shared/metis/emoji/emoji-picker.component.html |  6 +++---
 .../shared/metis/emoji/emoji-picker.component.ts   | 14 +++++++++-----
 .../app/shared/metis/emoji/emoji.component.html    |  4 ++--
 .../app/shared/metis/emoji/emoji.component.ts      |  7 +++++--
 src/main/webapp/app/shared/metis/metis.module.ts   |  4 ++--
 9 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/main/webapp/app/shared/metis/conversations/channel.service.ts b/src/main/webapp/app/shared/metis/conversations/channel.service.ts
index 52e91237f14a..61105215ca1c 100644
--- a/src/main/webapp/app/shared/metis/conversations/channel.service.ts
+++ b/src/main/webapp/app/shared/metis/conversations/channel.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ChannelDTO, ChannelIdAndNameDTO } from 'app/entities/metis/conversation/channel.model';
@@ -10,11 +10,9 @@ import { AccountService } from 'app/core/auth/account.service';
 export class ChannelService {
     public resourceUrl = '/api/courses/';
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-        private accountService: AccountService,
-    ) {}
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
+    private accountService = inject(AccountService);
 
     getChannelsOfCourse(courseId: number): Observable<HttpResponse<ChannelDTO[]>> {
         return this.http.get<ChannelDTO[]>(`${this.resourceUrl}${courseId}/channels/overview`, {
diff --git a/src/main/webapp/app/shared/metis/conversations/conversation.service.ts b/src/main/webapp/app/shared/metis/conversations/conversation.service.ts
index 5bf109a6a476..07d53e592613 100644
--- a/src/main/webapp/app/shared/metis/conversations/conversation.service.ts
+++ b/src/main/webapp/app/shared/metis/conversations/conversation.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -34,11 +34,9 @@ export enum ConversationMemberSearchFilter {
 export class ConversationService {
     public resourceUrl = '/api/courses/';
 
-    constructor(
-        protected http: HttpClient,
-        protected translationService: TranslateService,
-        protected accountService: AccountService,
-    ) {}
+    protected http = inject(HttpClient);
+    protected translationService = inject(TranslateService);
+    protected accountService = inject(AccountService);
 
     getConversationName(conversation: ConversationDTO | undefined, showLogin = false): string {
         if (!conversation) {
diff --git a/src/main/webapp/app/shared/metis/conversations/group-chat.service.ts b/src/main/webapp/app/shared/metis/conversations/group-chat.service.ts
index 16bf49e5727a..99ad62c9ce30 100644
--- a/src/main/webapp/app/shared/metis/conversations/group-chat.service.ts
+++ b/src/main/webapp/app/shared/metis/conversations/group-chat.service.ts
@@ -3,18 +3,16 @@ import { OneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat
 import { GroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { Observable, map } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { AccountService } from 'app/core/auth/account.service';
 
 @Injectable({ providedIn: 'root' })
 export class GroupChatService {
     public resourceUrl = 'api/courses/';
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-        private accountService: AccountService,
-    ) {}
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
+    private accountService = inject(AccountService);
 
     create(courseId: number, loginsOfChatPartners: string[]): Observable<HttpResponse<GroupChatDTO>> {
         return this.http
diff --git a/src/main/webapp/app/shared/metis/conversations/one-to-one-chat.service.ts b/src/main/webapp/app/shared/metis/conversations/one-to-one-chat.service.ts
index 92ed92e33bf2..29246e05efa6 100644
--- a/src/main/webapp/app/shared/metis/conversations/one-to-one-chat.service.ts
+++ b/src/main/webapp/app/shared/metis/conversations/one-to-one-chat.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ConversationService } from 'app/shared/metis/conversations/conversation.service';
@@ -9,10 +9,8 @@ import { OneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat
 export class OneToOneChatService {
     public resourceUrl = '/api/courses/';
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-    ) {}
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
 
     create(courseId: number, loginOfChatPartner: string): Observable<HttpResponse<OneToOneChatDTO>> {
         return this.http
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
index 08cceca47792..411d4b08a986 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
+++ b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
@@ -1,11 +1,11 @@
 <emoji-mart
-    [emojisToShowFilter]="emojisToShowFilter"
-    [categoriesIcons]="categoriesIcons"
+    [emojisToShowFilter]="emojisToShowFilter()"
+    [categoriesIcons]="categoriesIcons()"
     [emojiSize]="20"
     [showSingleCategory]="true"
     [showPreview]="false"
     [color]="'var(--primary)'"
-    [recent]="recent"
+    [recent]="recent()"
     [i18n]="{ search: 'artemisApp.metis.searchEmoji' | artemisTranslate, categories: { recent: 'artemisApp.metis.courseEmojiSelectionCategory' | artemisTranslate } }"
     [darkMode]="dark()"
     [imageUrlFn]="singleImageFunction()"
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
index e37e83152d1a..30185358c2f1 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
@@ -1,19 +1,23 @@
-import { Component, EventEmitter, Input, Output, computed, inject } from '@angular/core';
+import { Component, computed, inject, input, output } from '@angular/core';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { PickerModule } from '@ctrl/ngx-emoji-mart';
+import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 
 @Component({
     selector: 'jhi-emoji-picker',
     templateUrl: './emoji-picker.component.html',
+    imports: [PickerModule, ArtemisTranslatePipe],
+    standalone: true,
 })
 export class EmojiPickerComponent {
     private themeService = inject(ThemeService);
 
-    @Input() emojisToShowFilter: (emoji: string | EmojiData) => boolean;
-    @Input() categoriesIcons: { [key: string]: string };
-    @Input() recent: string[];
-    @Output() emojiSelect: EventEmitter<any> = new EventEmitter();
+    recent = input<string[]>();
+    emojiSelect = output<any>();
+    emojisToShowFilter = input<(emoji: string | EmojiData) => boolean>();
+    categoriesIcons = input<{ [key: string]: string }>({});
 
     utils = EmojiUtils;
     dark = computed(() => this.themeService.currentTheme() === Theme.DARK);
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji.component.html b/src/main/webapp/app/shared/metis/emoji/emoji.component.html
index ac71d2e4826a..b125034fd8c5 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji.component.html
+++ b/src/main/webapp/app/shared/metis/emoji/emoji.component.html
@@ -1,6 +1,6 @@
 <!-- Using two instances to 'rerender' if the theme changes -->
 @if (!dark()) {
-    <ngx-emoji [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji" [size]="16" />
+    <ngx-emoji [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji()" [size]="16" />
 } @else {
-    <ngx-emoji [imageUrlFn]="utils.singleDarkModeEmojiUrlFn" [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji" [size]="16" />
+    <ngx-emoji [imageUrlFn]="utils.singleDarkModeEmojiUrlFn" [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji()" [size]="16" />
 }
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
index 00e651bf19b7..7bb4700d17f6 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, computed, inject } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
+import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
 
@@ -6,12 +7,14 @@ import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
     selector: 'jhi-emoji',
     templateUrl: './emoji.component.html',
     styleUrls: ['./emoji.component.scss'],
+    imports: [EmojiModule],
+    standalone: true,
 })
 export class EmojiComponent {
     private themeService = inject(ThemeService);
 
     utils = EmojiUtils;
-    @Input() emoji: string;
+    emoji = input<string>('');
 
     dark = computed(() => this.themeService.currentTheme() === Theme.DARK);
 }
diff --git a/src/main/webapp/app/shared/metis/metis.module.ts b/src/main/webapp/app/shared/metis/metis.module.ts
index 114481b3a0df..49b1c9317cc0 100644
--- a/src/main/webapp/app/shared/metis/metis.module.ts
+++ b/src/main/webapp/app/shared/metis/metis.module.ts
@@ -65,6 +65,8 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
         LinkPreviewModule,
         ProfilePictureComponent,
         HtmlForPostingMarkdownPipe,
+        EmojiComponent,
+        EmojiPickerComponent,
     ],
     declarations: [
         PostingThreadComponent,
@@ -88,8 +90,6 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
         MessageInlineInputComponent,
         MessageReplyInlineInputComponent,
         ReactingUsersOnPostingPipe,
-        EmojiComponent,
-        EmojiPickerComponent,
     ],
     exports: [
         PostingThreadComponent,