Communication: Add loading indicator when adding users to channel (#1…

…0032)
ls1intum · Dec 24, 2024 · 0f1bf00 · 0f1bf00
1 parent 8ace45f
commit 0f1bf00
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/...s/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.html b/...s/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/...ogs/conversation-add-users-dialog/add-users-form/conversation-add-users-form.component.ts b/...ogs/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/...ations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.html b/...ations/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/...rsations/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.ts b/...rsations/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/...ons/dialogs/conversation-add-users-dialog/conversation-add-users-dialog.component.spec.ts b/...ons/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;
 }