[Library | Trunk]: Admin tools pages add loading and notifications

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60331 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-02-01 19:17:55 +00:00
parent 9851bdeb19
commit f1cc59da34
12 changed files with 174 additions and 110 deletions

View File

@ -40,19 +40,15 @@
</div>
</div>
<div inner>
<div>
<div class="contentPanel">
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
<div *ngIf="!showLoading">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
@ -105,7 +101,6 @@
</div>
</div>
</div>
</div>
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>

View File

@ -15,6 +15,8 @@ import {PortalUtils} from "../portal/portalHelper";
import {AlertModal} from "../../utils/modal/alert";
import {Option} from "../../sharedComponents/input/input.component";
declare var UIkit;
@Component({
selector: 'divIds',
templateUrl: './divIds.component.html',
@ -174,6 +176,11 @@ export class DivIdsComponent implements OnInit {
this.subscriptions.push(this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deleteDivIdsFromArray(this.selectedDivIds);
UIkit.notification('Classes have been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
},
error => this.handleUpdateError('System error deleting the selected classes', error)
@ -233,6 +240,7 @@ export class DivIdsComponent implements OnInit {
}
public divIdSaveConfirmed(data: any) {
this.showLoading = true;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
@ -246,6 +254,11 @@ export class DivIdsComponent implements OnInit {
this.subscriptions.push(this._helpContentService.saveDivId(<DivId>this.classForm.value, this.properties.adminToolsAPIURL).subscribe(
divId => {
this.divIdSavedSuccessfully(divId);
UIkit.notification('Class <b>' + divId.name + '</b> has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError("System error creating class", error)
));
@ -254,6 +267,11 @@ export class DivIdsComponent implements OnInit {
this.subscriptions.push(this._helpContentService.updateDivId(<DivId>this.classForm.value, this.properties.adminToolsAPIURL).subscribe(
divId => {
this.divIdUpdatedSuccessfully(divId);
UIkit.notification('Class <b>' + divId.name + '</b> has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError("System error updating class", error)
));
@ -266,12 +284,14 @@ export class DivIdsComponent implements OnInit {
this.divIds.push(divId);
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public divIdUpdatedSuccessfully(divId: DivId) {
this.divIds[this.index] = divId;
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public applyFilters() {
@ -298,7 +318,11 @@ export class DivIdsComponent implements OnInit {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}

View File

@ -20,12 +20,13 @@ import {SearchInputModule} from "../../sharedComponents/search-input/search-inpu
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule,
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule, LoadingModule
],
declarations: [DivIdsComponent],
exports: [DivIdsComponent]

View File

@ -48,7 +48,8 @@
</div>
</div>
<div inner>
<div class="contentPanel ">
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
<div *ngIf="!showLoading">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
@ -67,12 +68,7 @@
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover uk-table-large">

View File

@ -13,11 +13,12 @@ import {properties} from "../../../../environments/environment";
import {ConnectHelper} from "../../connect/connectHelper";
import {AlertModal} from "../../utils/modal/alert";
declare var UIkit;
@Component({
selector: 'entities',
templateUrl: './entities.component.html',
})
export class EntitiesComponent implements OnInit {
@ViewChild('editModal') editModal: AlertModal;
@ -188,6 +189,11 @@ export class EntitiesComponent implements OnInit {
this._helpContentService.deleteEntities(this.selectedEntities, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deleteEntitiesFromArray(this.selectedEntities);
UIkit.notification('Entities have been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
},
error => this.handleUpdateError('System error deleting the selected entities', error)
@ -232,6 +238,7 @@ export class EntitiesComponent implements OnInit {
}
public entitySaveConfirmed(data: any) {
this.showLoading = true;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'],
{queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
@ -242,6 +249,11 @@ export class EntitiesComponent implements OnInit {
<Entity>this.entityForm.value, this.properties.adminToolsAPIURL).subscribe(
entity => {
this.entityUpdatedSuccessfully(entity);
UIkit.notification('Entity <b>' + entity.name + '</b> has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error updating entity', error)
);
@ -249,6 +261,11 @@ export class EntitiesComponent implements OnInit {
this._helpContentService.saveEntity(<Entity>this.entityForm.value, this.properties.adminToolsAPIURL).subscribe(
entity => {
this.entitySavedSuccessfully(entity);
UIkit.notification('Entity <b>' + entity.name + '</b> has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error creating entity', error)
);
@ -261,12 +278,14 @@ export class EntitiesComponent implements OnInit {
this.entities.push(entity);
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public entityUpdatedSuccessfully(entity: Entity) {
this.entities[this.index] = entity;
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public applyFilters() {
@ -306,7 +325,11 @@ export class EntitiesComponent implements OnInit {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}

View File

@ -14,11 +14,12 @@ import {SearchInputModule} from "../../sharedComponents/search-input/search-inpu
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule, SearchInputModule, IconsModule
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule, SearchInputModule, IconsModule, LoadingModule
],
declarations: [EntitiesComponent],
exports: [EntitiesComponent]

View File

@ -43,7 +43,8 @@
</div>
</div>
<div inner>
<div class="contentPanel ">
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
<div *ngIf="!showLoading">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
@ -61,10 +62,7 @@
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div>
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="md-card-content">
<div class="uk-overflow-container">
<ul class="uk-list pages">
@ -78,7 +76,7 @@
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
class="title">Entities: </span>
{{check.page.entities.join(", ")}}</div>
{{getEntitiesAsString(check.page)}}</div>
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
class="title">Type: </span> {{check.page.type}}</div>

View File

@ -1,29 +1,26 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {HelpContentService} from '../../services/help-content.service';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {CheckPage, Page} from '../../utils/entities/adminTool/page';
import {Portal} from '../../utils/entities/adminTool/portal';
import {CheckEntity, Entity} from '../../utils/entities/adminTool/entity';
import {Entity} from '../../utils/entities/adminTool/entity';
import {EnvProperties} from '../../utils/properties/env-properties';
import {Session} from '../../login/utils/helper.class';
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {UserManagementService} from '../../services/user-management.service';
import {Observable, Subscriber} from "rxjs";
import {map, startWith} from "rxjs/operators";
import {MatAutocompleteSelectedEvent} from "@angular/material";
import {Subscriber} from "rxjs";
import {PortalUtils} from "../portal/portalHelper";
import {properties} from "../../../../environments/environment";
import {ConnectHelper} from "../../connect/connectHelper";
import {Option} from "../../sharedComponents/input/input.component";
import {AlertModal} from "../../utils/modal/alert";
declare var UIkit;
@Component({
selector: 'pages',
templateUrl: './pages.component.html',
})
export class PagesComponent implements OnInit {
@ViewChild('editModal') editModal: AlertModal;
@ -100,7 +97,6 @@ export class PagesComponent implements OnInit {
this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal;
}));
}));
this.subscriptions.push(this._helpContentService.getEntities(this.properties.adminToolsAPIURL).subscribe(
entities => {
this.allEntities = [];
@ -110,7 +106,6 @@ export class PagesComponent implements OnInit {
value: entity
});
});
this.showLoading = false;
},
error => this.handleError('System error retrieving pages', error)));
@ -139,9 +134,7 @@ export class PagesComponent implements OnInit {
this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this.pageWithDivIds = [];
let parameters = '';
if (this.pagesType) {
parameters = '?page_type=' + this.pagesType;
@ -279,6 +272,11 @@ export class PagesComponent implements OnInit {
this.subscriptions.push(this._helpContentService.deletePages(this.selectedPages, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deletePagesFromArray(this.selectedPages);
UIkit.notification('Pages have been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
},
error => this.handleUpdateError('System error deleting the selected pages', error)
@ -352,6 +350,7 @@ export class PagesComponent implements OnInit {
}
public pageSaveConfirmed(data: any) {
this.showLoading = true;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
@ -365,6 +364,11 @@ export class PagesComponent implements OnInit {
this.subscriptions.push(this._helpContentService.savePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe(
page => {
this.pageSavedSuccessfully(page, true);
UIkit.notification('Page <b>' + page.name + '</b> has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error creating page', error)
));
@ -373,6 +377,11 @@ export class PagesComponent implements OnInit {
this.subscriptions.push(this._helpContentService.updatePage(<Page>this.pageForm.value, this.properties.adminToolsAPIURL).subscribe(
page => {
this.pageSavedSuccessfully(page, false);
UIkit.notification('Page <b>' + page.name + '</b> has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error updating page', error)
));
@ -389,6 +398,7 @@ export class PagesComponent implements OnInit {
}
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public applyFilters() {
@ -440,10 +450,21 @@ export class PagesComponent implements OnInit {
this.updateErrorMessage = message;// + ' (Server responded: ' + error + ')';
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}
public getEntitiesAsString(page: Page): string {
if(page.entities) {
return (<any[]> page.entities).map((page: Entity) => page.name).join(',');
}
return '';
}
// public filterByPortal(event: any) {
// this.portal = event.target.value;
// this.applyPortalFilter(this.portal);

View File

@ -14,11 +14,12 @@ import {SearchInputModule} from "../../sharedComponents/search-input/search-inpu
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule, SearchInputModule, IconsModule
MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule, SearchInputModule, IconsModule, LoadingModule
],
declarations: [PagesComponent],
exports: [PagesComponent]

View File

@ -40,20 +40,15 @@
</div>
</div>
<div inner>
<loading *ngIf="showLoading" class="uk-margin-large-top"></loading>
<div *ngIf="!showLoading">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
class="uk-align-center loading-gif"></div>
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="">
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage">
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead class="uk-card-header">

View File

@ -13,6 +13,8 @@ import {PortalUtils} from "./portalHelper";
import {properties} from "../../../../environments/environment";
import {AlertModal} from "../../utils/modal/alert";
declare var UIkit;
@Component({
selector: 'portals',
templateUrl: './portals.component.html',
@ -164,6 +166,11 @@ export class PortalsComponent implements OnInit {
this.subscriptions.push(this._helpContentService.deleteCommunities(this.selectedPortals, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deletePortalsFromArray(this.selectedPortals);
UIkit.notification('Portals have been <b>successfully deleted</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
},
error => this.handleUpdateError('System error deleting the selected communities', error)
@ -220,6 +227,7 @@ export class PortalsComponent implements OnInit {
}
public portalSaveConfirmed(data: any) {
this.showLoading = true;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
@ -235,6 +243,11 @@ export class PortalsComponent implements OnInit {
this.properties.adminToolsAPIURL).subscribe(
portal => {
this.portalUpdatedSuccessfully(portal);
UIkit.notification('Portal <b>' + portal.name + '</b> has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error updating portal', error)
));
@ -243,6 +256,11 @@ export class PortalsComponent implements OnInit {
this.properties.adminToolsAPIURL).subscribe(
portal => {
this.portalSavedSuccessfully(portal);
UIkit.notification('Portal <b>' + portal.name + '</b> has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
},
error => this.handleUpdateError('System error creating portal', error)
));
@ -250,33 +268,18 @@ export class PortalsComponent implements OnInit {
}
}
public portalUpdateConfirmed(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
this.portalForm.get('type').enable();
this.subscriptions.push(this._helpContentService.updateCommunity(<Portal>this.portalForm.value,
this.properties.adminToolsAPIURL).subscribe(
portal => {
this.portalUpdatedSuccessfully(portal);
},
error => this.handleUpdateError('System error updating portal', error)
));
}
}
public portalSavedSuccessfully(portal: Portal) {
this.portals.push(portal);
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public portalUpdatedSuccessfully(portal: Portal) {
this.portals[this.index] = portal;
this.applyFilters();
this.applyCheck(false);
this.showLoading = false;
}
public applyFilters() {
@ -310,6 +313,11 @@ export class PortalsComponent implements OnInit {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
}
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.showLoading = false;
}

View File

@ -13,12 +13,13 @@ import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {IconsModule} from "../../utils/icons/icons.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, FormsModule, AlertModalModule,
ReactiveFormsModule,
RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule, IconsModule, SearchInputModule
RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule, IconsModule, SearchInputModule, LoadingModule
],
declarations: [PortalsComponent],
exports: [PortalsComponent]