Development: Migrate client code for emoji components and conversation services

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`, {

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) {

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

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

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()"

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);

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" />
 }

src/main/webapp/app/shared/metis/emoji/emoji.component.ts

@@ -1,17 +1,20 @@
-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';
 
 @Component({
     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);
 }

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,