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

This commit is contained in:
Alex Martzios 2022-08-04 17:45:43 +03:00
parent f9dc782008
commit 170a93d108
7 changed files with 117 additions and 54 deletions

View File

@ -130,4 +130,11 @@
<edit-stakeholder #editStakeholderComponent></edit-stakeholder> <edit-stakeholder #editStakeholderComponent></edit-stakeholder>
</div> </div>
</modal-alert> </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>

View File

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

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

View File

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

View File

@ -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.notification = NotificationUtils.editIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
this.editNumberNotify.reset(this.notification.message); this.editNumberNotify.reset(this.notification.message);
} }
this.editNumberModal.stayOpen = true;
this.editNumberModal.open(); this.editNumberModal.open();
} }
@ -736,6 +737,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
; ;
this.editChartNotify.reset(this.notification.message); this.editChartNotify.reset(this.notification.message);
} }
this.editChartModal.stayOpen = true;
this.editChartModal.open(); this.editChartModal.open();
} }
@ -799,7 +801,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
if(this.indicator.type === "chart") {
this.editChartModal.cancel();
} else {
this.editNumberModal.cancel();
}
}, error => { }, error => {
this.chartIndicatorFb = null; this.chartIndicatorFb = null;
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
@ -807,7 +814,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; 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.deleteModal.okButtonText = 'Yes';
this.notification = NotificationUtils.deleteIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name); this.notification = NotificationUtils.deleteIndicator(this.user.firstname + ' ' + this.user.lastname, this.stakeholder.name);
this.deleteNotify.reset(this.notification.message); this.deleteNotify.reset(this.notification.message);
this.deleteModal.stayOpen = true;
this.deleteModal.open(); this.deleteModal.open();
} }
@ -998,6 +1011,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}); });
} }
this.editing = false; this.editing = false;
this.deleteModal.cancel();
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
@ -1005,6 +1019,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; 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.alertTitle = 'Delete Section';
this.deleteSectionModal.cancelButtonText = 'No'; this.deleteSectionModal.cancelButtonText = 'No';
this.deleteSectionModal.okButtonText = 'Yes'; this.deleteSectionModal.okButtonText = 'Yes';
this.deleteSectionModal.stayOpen = true;
this.deleteSectionModal.open(); this.deleteSectionModal.open();
} }
} }
@ -1174,6 +1190,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
this.deleteSectionModal.cancel();
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
@ -1181,6 +1198,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
this.deleteSectionModal.cancel();
})); }));
} }

View File

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

View File

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