From 0f1bf00bdb7dbdafaef4c90a3b753bb4b6dd0f13 Mon Sep 17 00:00:00 2001
From: Paul Rangger <48455539+PaRangger@users.noreply.github.com>
Date: Tue, 24 Dec 2024 13:50:33 +0100
Subject: [PATCH] Communication: Add loading indicator when adding users to
 channel (#10032)

---
 .../conversation-add-users-form.component.html      |  3 +++
 .../conversation-add-users-form.component.ts        | 13 ++++++++++---
 .../conversation-add-users-dialog.component.html    |  1 +
 .../conversation-add-users-dialog.component.ts      |  9 +++++++++
 .../conversation-add-users-dialog.component.spec.ts |  4 +++-
 5 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
index b22435bd18ab..123cb0dc37ea 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html
@@ -63,6 +63,9 @@
                         <div class="col-12 text-end">
                             <button type="submit" id="submitButton" [disabled]="!isSubmitPossible" class="btn btn-primary">
                                 <span jhiTranslate="artemisApp.dialogs.addUsers.addUsersForm.addUsersButton"></span>
+                                @if (isLoading()) {
+                                    <fa-icon [icon]="faSpinner" animation="spin" class="ms-2" />
+                                }
                             </button>
                         </div>
                     </div>
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.ts
index d465889f1cc0..08c13cd628ab 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.ts
@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, input } from '@angular/core';
 import { UserPublicInfoDTO } from 'app/core/user/user.model';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { getAsChannelDTO } from 'app/entities/metis/conversation/channel.model';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 export interface AddUsersFormData {
     selectedUsers?: UserPublicInfoDTO[];
@@ -24,8 +25,13 @@ export class ConversationAddUsersFormComponent implements OnInit, OnChanges {
     @Input()
     activeConversation: ConversationDTO;
 
+    protected readonly isLoading = input<boolean>(false);
+
     form: FormGroup;
 
+    // Icons
+    protected readonly faSpinner = faSpinner;
+
     getAsChannel = getAsChannelDTO;
 
     mode: 'individual' | 'group' = 'individual';
@@ -37,8 +43,9 @@ export class ConversationAddUsersFormComponent implements OnInit, OnChanges {
 
     get isSubmitPossible() {
         return (
-            (this.mode === 'individual' && !this.form.invalid) ||
-            (this.mode === 'group' && (this.form.value?.addAllStudents || this.form.value?.addAllTutors || this.form.value?.addAllInstructors))
+            !this.isLoading() &&
+            ((this.mode === 'individual' && !this.form.invalid) ||
+                (this.mode === 'group' && (this.form.value?.addAllStudents || this.form.value?.addAllTutors || this.form.value?.addAllInstructors)))
         );
     }
 
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
index 32f3096ca9f0..7082cf10ef0d 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html
@@ -17,6 +17,7 @@ <h4 class="modal-title">
         </div>
         <div class="modal-body">
             <jhi-conversation-add-users-form
+                [isLoading]="isLoading"
                 [maxSelectable]="maxSelectable"
                 [courseId]="course.id!"
                 (formSubmitted)="onFormSubmitted($event)"
diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.ts
index 3e90e5c76641..3813b3939fa6 100644
--- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.ts
@@ -29,6 +29,7 @@ export class ConversationAddUsersDialogComponent extends AbstractDialogComponent
 
     isInitialized = false;
     maxSelectable: number | undefined;
+    protected isLoading: boolean = false;
 
     initialize() {
         super.initialize(['course', 'activeConversation']);
@@ -65,6 +66,8 @@ export class ConversationAddUsersDialogComponent extends AbstractDialogComponent
     private addUsers(usersToAdd: UserPublicInfoDTO[], addAllStudents: boolean, addAllTutors: boolean, addAllInstructors: boolean) {
         const userLogins = usersToAdd.map((user) => user.login!);
 
+        this.isLoading = true;
+
         if (isChannelDTO(this.activeConversation)) {
             this.channelService
                 .registerUsersToChannel(this.course.id!, this.activeConversation.id!, addAllStudents, addAllTutors, addAllInstructors, userLogins)
@@ -77,6 +80,9 @@ export class ConversationAddUsersDialogComponent extends AbstractDialogComponent
                     error: (errorResponse: HttpErrorResponse) => {
                         onError(this.alertService, errorResponse);
                     },
+                    complete: () => {
+                        this.isLoading = false;
+                    },
                 });
         } else if (isGroupChatDTO(this.activeConversation)) {
             this.groupChatService
@@ -90,6 +96,9 @@ export class ConversationAddUsersDialogComponent extends AbstractDialogComponent
                     error: (errorResponse: HttpErrorResponse) => {
                         onError(this.alertService, errorResponse);
                     },
+                    complete: () => {
+                        this.isLoading = false;
+                    },
                 });
         } else {
             throw new Error('Conversation type not supported');
diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts
index d1afbe9f83f1..f2886be487e9 100644
--- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts
@@ -9,7 +9,7 @@ import { GroupChatService } from 'app/shared/metis/conversations/group-chat.serv
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { Course } from 'app/entities/course.model';
 import { generateExampleChannelDTO, generateExampleGroupChatDTO } from '../../helpers/conversationExampleModels';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, input } from '@angular/core';
 import { AddUsersFormData } from 'app/overview/course-conversations/dialogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component';
 import { initializeDialog } from '../dialog-test-helpers';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
@@ -29,6 +29,8 @@ class ConversationAddUsersFormStubComponent {
     @Input() courseId: number;
     @Input() maxSelectable?: number = undefined;
 
+    protected readonly isLoading = input<boolean>(false);
+
     @Input()
     activeConversation: ConversationDTO;
 }