Merge pull request DSpace#2980 from atmire/w2p-114599_ClickingSaveOnCreateComColProvidesUserFeedback

Clicking save on create community and collection pages provides user feedback

Author: tdonohue

cypress/e2e/collection-create.cy.ts

@@ -0,0 +1,13 @@
+beforeEach(() => {
+  cy.visit('/collections/create?parent='.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+it('should show loading component while saving', () => {
+  const title = 'Test Collection Title';
+  cy.get('#title').type(title);
+
+  cy.get('button[type="submit"]').click();
+
+  cy.get('ds-loading').should('be.visible');
+});

cypress/e2e/community-create.cy.ts

@@ -0,0 +1,13 @@
+beforeEach(() => {
+  cy.visit('/communities/create');
+  cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+it('should show loading component while saving', () => {
+  const title = 'Test Community Title';
+  cy.get('#title').type(title);
+
+  cy.get('button[type="submit"]').click();
+
+  cy.get('ds-loading').should('be.visible');
+});

src/app/collection-page/create-collection-page/create-collection-page.component.html

@@ -1,10 +1,15 @@
-<div class="container">
-    <div class="row">
-        <div class="col-12 pb-4">
-            <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: dsoNameService.getName((parentRD$| async)?.payload) } }}</h2>
-        </div>
+<div class="container" *ngIf="(isLoading$ | async) === false">
+  <div class="row">
+    <div class="col-12 pb-4">
+      <h2 id="sub-header"
+          class="border-bottom pb-2">{{ 'collection.create.sub-head' | translate:{ parent: dsoNameService.getName((parentRD$| async)?.payload) } }}</h2>
     </div>
-    <ds-collection-form (submitForm)="onSubmit($event)"
-                        (back)="navigateToHome()"
-                        (finish)="navigateToNewPage()"></ds-collection-form>
+  </div>
+  <ds-collection-form (submitForm)="onSubmit($event)"
+                      (back)="navigateToHome()"
+                      (finish)="navigateToNewPage()"></ds-collection-form>
+</div>
+
+<div class="container">
+  <ds-loading *ngIf="isLoading$ | async"></ds-loading>
 </div>

src/app/collection-page/create-collection-page/create-collection-page.component.ts

@@ -1,4 +1,7 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import {
@@ -13,6 +16,7 @@ import { RequestService } from '../../core/data/request.service';
 import { RouteService } from '../../core/services/route.service';
 import { Collection } from '../../core/shared/collection.model';
 import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CollectionFormComponent } from '../collection-form/collection-form.component';
 
@@ -27,6 +31,8 @@ import { CollectionFormComponent } from '../collection-form/collection-form.comp
     CollectionFormComponent,
     TranslateModule,
     AsyncPipe,
+    ThemedLoadingComponent,
+    NgIf,
   ],
   standalone: true,
 })

src/app/community-page/create-community-page/create-community-page.component.html

@@ -1,13 +1,18 @@
-<div class="container">
+<div class="container" *ngIf="(isLoading$ | async) === false">
   <div class="row">
     <div class="col-12 pb-4">
       <ng-container *ngVar="(parentRD$ | async)?.payload as parent">
         <h2 *ngIf="!parent" id="header" class="border-bottom pb-2">{{ 'community.create.head' | translate }}</h2>
-        <h2 *ngIf="parent" id="sub-header" class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: dsoNameService.getName(parent) } }}</h2>
+        <h2 *ngIf="parent" id="sub-header"
+            class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: dsoNameService.getName(parent) } }}</h2>
       </ng-container>
     </div>
   </div>
   <ds-community-form (submitForm)="onSubmit($event)"
                      (back)="navigateToHome()"
                      (finish)="navigateToNewPage()"></ds-community-form>
 </div>
+
+<div class="container">
+  <ds-loading *ngIf="isLoading$ | async"></ds-loading>
+</div>

src/app/community-page/create-community-page/create-community-page.component.ts

@@ -15,6 +15,7 @@ import { RequestService } from '../../core/data/request.service';
 import { RouteService } from '../../core/services/route.service';
 import { Community } from '../../core/shared/community.model';
 import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { CommunityFormComponent } from '../community-form/community-form.component';
@@ -32,6 +33,7 @@ import { CommunityFormComponent } from '../community-form/community-form.compone
     VarDirective,
     NgIf,
     AsyncPipe,
+    ThemedLoadingComponent,
   ],
   standalone: true,
 })

src/app/shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component.ts

@@ -4,7 +4,10 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
 import {
   mergeMap,
   take,
@@ -62,6 +65,11 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
    */
   protected type: ResourceType;
 
+  /**
+   * The
+   */
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   public constructor(
     protected dsoDataService: ComColDataService<TDomain>,
     public dsoNameService: DSONameService,
@@ -89,6 +97,7 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
    * @param event   The event returned by the community/collection form. Contains the new dso and logo uploader
    */
   onSubmit(event) {
+    this.isLoading$.next(true);
     const dso = event.dso;
     const uploader = event.uploader;
 
@@ -101,6 +110,7 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
           );
       }))
       .subscribe((dsoRD: TDomain) => {
+        this.isLoading$.next(false);
         if (isNotUndefined(dsoRD)) {
           this.newUUID = dsoRD.uuid;
           if (uploader.queue.length > 0) {