114599: Added loading animation after creating collection or community

This commit is contained in:
Kuno Vercammen
2024-04-23 11:19:13 +02:00
parent 0e61cfd0c2
commit fb988610db
5 changed files with 32 additions and 11 deletions

View File

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

View File

@@ -15,6 +15,7 @@ import { Collection } from '../../core/shared/collection.model';
import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component'; import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component';
import { NotificationsService } from '../../shared/notifications/notifications.service'; import { NotificationsService } from '../../shared/notifications/notifications.service';
import { CollectionFormComponent } from '../collection-form/collection-form.component'; import { CollectionFormComponent } from '../collection-form/collection-form.component';
import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
/** /**
* Component that represents the page where a user can create a new Collection * Component that represents the page where a user can create a new Collection
@@ -27,6 +28,7 @@ import { CollectionFormComponent } from '../collection-form/collection-form.comp
CollectionFormComponent, CollectionFormComponent,
TranslateModule, TranslateModule,
AsyncPipe, AsyncPipe,
ThemedLoadingComponent,
], ],
standalone: true, standalone: true,
}) })

View File

@@ -1,9 +1,10 @@
<div class="container"> <div class="container" *ngIf="(isLoading$ | async) === false">
<div class="row"> <div class="row">
<div class="col-12 pb-4"> <div class="col-12 pb-4">
<ng-container *ngVar="(parentRD$ | async)?.payload as parent"> <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="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> </ng-container>
</div> </div>
</div> </div>
@@ -11,3 +12,7 @@
(back)="navigateToHome()" (back)="navigateToHome()"
(finish)="navigateToNewPage()"></ds-community-form> (finish)="navigateToNewPage()"></ds-community-form>
</div> </div>
<div class="container">
<ds-themed-loading *ngIf="isLoading$ | async"></ds-themed-loading>
</div>

View File

@@ -18,6 +18,7 @@ import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/crea
import { NotificationsService } from '../../shared/notifications/notifications.service'; import { NotificationsService } from '../../shared/notifications/notifications.service';
import { VarDirective } from '../../shared/utils/var.directive'; import { VarDirective } from '../../shared/utils/var.directive';
import { CommunityFormComponent } from '../community-form/community-form.component'; import { CommunityFormComponent } from '../community-form/community-form.component';
import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
/** /**
* Component that represents the page where a user can create a new Community * Component that represents the page where a user can create a new Community
@@ -32,6 +33,7 @@ import { CommunityFormComponent } from '../community-form/community-form.compone
VarDirective, VarDirective,
NgIf, NgIf,
AsyncPipe, AsyncPipe,
ThemedLoadingComponent,
], ],
standalone: true, standalone: true,
}) })

View File

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