add loading for modals: edit/create/delete topics and indicators

src/app/manageStakeholders/manageStakeholders.component.html

@@ -130,4 +130,11 @@
 		<edit-stakeholder #editStakeholderComponent></edit-stakeholder>
 	</div>
 </modal-alert>
-<modal-alert #deleteStakeholderModal [overflowBody]="false" (alertOutput)="deleteStakeholder()"></modal-alert>
+<modal-alert #deleteStakeholderModal [overflowBody]="false" (alertOutput)="deleteStakeholder()">
+	<div class="uk-height-medium uk-position-relative" *ngIf="deleteLoading">
+		<loading class="uk-position-center"></loading>
+	</div>
+	<div *ngIf="!deleteLoading">
+		This stakeholder will permanently be deleted. Are you sure you want to proceed?
+	</div>
+</modal-alert>

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -26,6 +26,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   
   public properties: EnvProperties;
   public loading: boolean = true;
+	public deleteLoading: boolean = false;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   public defaultStakeholders: Stakeholder[];
   public stakeholders: Stakeholder[];
@@ -207,11 +208,13 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     this.deleteStakeholderModal.alertTitle = 'Delete ' + this.stakeholder.index_name;
     this.deleteStakeholderModal.cancelButtonText = 'No';
     this.deleteStakeholderModal.okButtonText = 'Yes';
-    this.deleteStakeholderModal.message = 'This stakeholder will permanently be deleted. Are you sure you want to proceed?';
+		this.deleteStakeholderModal.alertMessage = false;
+		this.deleteStakeholderModal.stayOpen = true;
     this.deleteStakeholderModal.open();
   }
   
   public deleteStakeholder() {
+		this.deleteLoading = true;
     if (!this.stakeholder.defaultId) {
       this.index = (this.stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === this.stakeholder._id) : -1;
     } else {
@@ -229,12 +232,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
         this.stakeholders.splice(this.index, 1);
       }
       this.alias = this.alias.filter(item => item !== this.stakeholder.alias);
+			this.deleteLoading = false;
+			this.deleteStakeholderModal.cancel();
     }, error => {
       UIkit.notification('An error has occurred. Please try again later', {
         status: 'danger',
         timeout: 6000,
         pos: 'bottom-right'
       });
+			this.deleteLoading = false;
+			this.deleteStakeholderModal.cancel();
     }));
   }
   

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 6a7559a3ad226e25eeea9c39cb62fa960438d6ef
+Subproject commit a33226250b979be5b004e18ac9c49c67f22a7400

src/app/topic/indicators.component.html

@@ -220,10 +220,13 @@
 						[large]="true" classTitle="uk-background-primary uk-light"
 						(alertOutput)="saveIndicator()"
 						[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
-  <div class="uk-padding-small">
+	<div *ngIf="editing" class="uk-position-relative uk-height-large">
+		<loading class="uk-position-center"></loading>
+	</div>
+  <div [class.uk-hidden]="editing" class="uk-padding-small">
     <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
       <div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
-      <div *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
+      <div *ngIf="stakeholder.defaultId != '-1' && (  (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
            input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
       </div>
       <div input class="uk-width-1-1" *ngIf="stakeholder.defaultId" [formInput]="numberIndicatorFb.get('additionalDescription')"
@@ -327,10 +330,13 @@
 </modal-alert>
 <modal-alert #editChartModal [large]="true" (alertOutput)="saveIndicator()" classTitle="uk-background-primary uk-light"
 						[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
-  <div class="uk-padding-small">
+	<div *ngIf="editing" class="uk-position-relative uk-height-large">
+		<loading class="uk-position-center"></loading>
+	</div>
+  <div [class.uk-hidden]="editing" class="uk-padding-small">
     <div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
       <div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
-      <div *ngIf="stakeholder.defaultId !=-1 && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
+      <div *ngIf="stakeholder.defaultId != '-1' && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
            input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
       </div>
       <div *ngIf="stakeholder.defaultId" input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
@@ -417,6 +423,10 @@
   </div>
 </modal-alert>
 <modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
+	<div *ngIf="editing" class="uk-position-relative uk-height-medium">
+		<loading class="uk-position-center"></loading>
+	</div>
+	<div [class.uk-hidden]="editing">
 		You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
 		"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
 		<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
@@ -427,6 +437,7 @@
 		<!--  </span>-->
 		Are you sure you want to proceed?
 		<div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
+	</div>
 </modal-alert>
 <!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">
   You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
@@ -441,6 +452,10 @@
   Are you sure you want to proceed?
 </modal-alert>-->
 <modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
+	<div *ngIf="editing" class="uk-position-relative uk-height-medium">
+		<loading class="uk-position-center"></loading>
+	</div>
+	<div *ngIf="!editing">
 		You are about to delete this section and its indicators permanently.
 		<div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
 			Sections of all profiles based on this default section and their contents, will be deleted as well.
@@ -449,6 +464,7 @@
 		<!--    Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.-->
 		<!--  </span>-->
 		Are you sure you want to proceed?
+	</div>
 </modal-alert>
 <!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
   You are about to delete this section and its indicators permanently.

src/app/topic/indicators.component.ts

@@ -670,6 +670,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
       this.editNumberNotify.reset(this.notification.message);
     }
+		this.editNumberModal.stayOpen = true;
     this.editNumberModal.open();
   }
   
@@ -736,6 +737,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       ;
       this.editChartNotify.reset(this.notification.message);
     }
+		this.editChartModal.stayOpen = true;
     this.editChartModal.open();
   }
   
@@ -800,6 +802,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         pos: 'bottom-right'
       });
 			this.editing = false;
+			if(this.indicator.type === "chart") {
+				this.editChartModal.cancel();
+			} else {
+				this.editNumberModal.cancel();
+			}
     }, error => {
       this.chartIndicatorFb = null;
       UIkit.notification(error.error.message, {
@@ -808,6 +815,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         pos: 'bottom-right'
       });
 			this.editing = false;
+			if(this.indicator.type === "chart") {
+				this.editChartModal.cancel();
+			} else {
+				this.editNumberModal.cancel();
+			}
     }));
   }
   
@@ -956,6 +968,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     this.deleteModal.okButtonText = 'Yes';
     this.notification = NotificationUtils.deleteIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
     this.deleteNotify.reset(this.notification.message);
+		this.deleteModal.stayOpen = true;
     this.deleteModal.open();
   }
   
@@ -998,6 +1011,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         });
       }
       this.editing = false;
+			this.deleteModal.cancel();
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
@@ -1005,6 +1019,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         pos: 'bottom-right'
       });
       this.editing = false;
+			this.deleteModal.cancel();
     }));
   }
   
@@ -1146,6 +1161,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.deleteSectionModal.alertTitle = 'Delete Section';
       this.deleteSectionModal.cancelButtonText = 'No';
       this.deleteSectionModal.okButtonText = 'Yes';
+			this.deleteSectionModal.stayOpen = true;
       this.deleteSectionModal.open();
     }
   }
@@ -1174,6 +1190,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         pos: 'bottom-right'
       });
       this.editing = false;
+			this.deleteSectionModal.cancel();
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
@@ -1181,6 +1198,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         pos: 'bottom-right'
       });
       this.editing = false;
+			this.deleteSectionModal.cancel();
     }));
   }
   

src/app/topic/topic.component.html

@@ -1,19 +1,15 @@
 <aside *ngIf="stakeholder" id="sidebar_main">
   <div id="sidebar_content">
-    <div class="menu_section uk-margin-top">
+    <div class="menu_section uk-margin-large-top">
-      <ul class="uk-list uk-nav uk-nav-default" uk-nav>
+			<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-button uk-button-link uk-margin-left">
-        <li>
+				<h6 class="uk-flex uk-flex-middle uk-flex-center uk-margin-remove-bottom">
-          <a [routerLink]="'/admin/' + stakeholder.alias">
-            <div class="uk-flex uk-flex-middle uk-flex-center">
 					<div class="uk-width-auto">
 						<icon class="menu-icon" name="west" [flex]="true"></icon>
 					</div>
-              <span class="uk-width-expand uk-text-truncate uk-margin-small-left"
+					<span class="uk-width-expand uk-text-truncate uk-margin-left"
 								[class.uk-hidden]="!open">Indicators</span>
-            </div>
+				</h6>
 			</a>
-        </li>
-      </ul>
     </div>
     <div class="menu_section uk-margin-large-top">
       <ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
@@ -342,16 +338,23 @@
 </div>
 <modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
 						[overflowBody]="false">
+	<div *ngIf="loading" class="uk-position-relative uk-height-medium">
+		<loading class="uk-position-center"></loading>
+	</div>
+	<div *ngIf="!loading">
 		You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
 		<div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">
 			{{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
 		</div>
 		Are you sure you want to proceed?
+	</div>
 </modal-alert>
 <modal-alert #editModal classTitle="uk-background-primary uk-light" (alertOutput)="saveElement()"
              [okDisabled]="form && (form.invalid || form.pristine)">
-  <div *ngIf="form" class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form"
+	<div *ngIf="loading" class="uk-position-relative uk-height-large">
-       uk-grid>
+		<loading class="uk-position-center"></loading>
+	</div>
+  <div *ngIf="form" [class.uk-hidden]="loading" class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form" uk-grid>
     <div input [formInput]="form.get('name')" placeholder="Title"></div>
     <div input [formInput]="form.get('description')" placeholder="Description" type="textarea" rows="4"></div>
     <div *ngIf="form.get('icon')" input [formInput]="form.get('icon')" placeholder="Icon(SVG)" type="textarea"></div>

src/app/topic/topic.component.ts

@@ -30,7 +30,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
   private subscriptions: any[] = [];
   public properties: EnvProperties = properties;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
-  public loading: boolean = true;
+  public loading: boolean = false;
   public stakeholder: Stakeholder;
   public user: User;
   /**
@@ -607,6 +607,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
       this.editModal.alertTitle = 'Edit ' + this.type + '\'s information ';
       this.editModal.okButtonText = 'Save';
     }
+		this.editModal.stayOpen = true;
     this.editModal.open();
   }
   
@@ -623,13 +624,17 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     this.deleteModal.okButtonText = 'Yes';
     // this.deleteModal.cancelButton = false;
     // this.deleteModal.okButton = false;
+		this.deleteModal.stayOpen = true;
     this.deleteModal.open();
   }
   
   private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
+		this.loading = true;
     this.topicSubscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
       callback(saveElement);
       this.stakeholderChanged();
+			this.loading = false;
+			this.editModal.cancel();
       NotificationHandler.rise(message);
       if (redirect) {
         this.router.navigate(['../' + saveElement.alias], {
@@ -637,19 +642,26 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
         });
       }
     }, error => {
+			this.loading = false;
+			this.editModal.cancel();
       NotificationHandler.rise(error.error.message, 'danger');
     }));
   }
   
   private delete(message: string, path: string[], callback: Function, redirect = false) {
+		this.loading = true;
     this.topicSubscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => {
       callback();
       this.stakeholderChanged();
+			this.loading = false;
+			this.deleteModal.cancel();
       NotificationHandler.rise(message);
       if (redirect) {
         this.back();
       }
     }, error => {
+			this.loading = false;
+			this.deleteModal.cancel();
       NotificationHandler.rise(error.error.message, 'danger');
     }));
   }