MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -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>

9
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -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();
}));
}

2
src/app/openaireLibrary

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

68
src/app/topic/indicators.component.html
View File

@ -217,13 +217,16 @@
</div>
</div>
<modal-alert #editNumberModal
[large]="true" classTitle="uk-background-primary uk-light"
(alertOutput)="saveIndicator()"
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
<div class="uk-padding-small">
[large]="true" classTitle="uk-background-primary uk-light"
(alertOutput)="saveIndicator()"
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
<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')"
@ -326,11 +329,14 @@
</div>
</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">
[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
<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,16 +423,21 @@
</div>
</modal-alert>
<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">
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
Indicators of all profiles based on this default indicator, will be deleted as well.
</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 *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">
Indicators of all profiles based on this default indicator, will be deleted as well.
</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 #deleteAllModal (alertOutput)="deleteIndicator('delete')">
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?
</modal-alert>-->
<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="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.
</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 *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.
</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 #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
You are about to delete this section and its indicators permanently.

22
src/app/topic/indicators.component.ts
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.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();
}
@ -799,7 +801,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 6000,
pos: 'bottom-right'
});
this.editing = false;
this.editing = false;
if(this.indicator.type === "chart") {
this.editChartModal.cancel();
} else {
this.editNumberModal.cancel();
}
}, error => {
this.chartIndicatorFb = null;
UIkit.notification(error.error.message, {
@ -807,7 +814,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
timeout: 6000,
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.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();
}));
}

47
src/app/topic/topic.component.html
View File

@ -1,19 +1,15 @@
<aside *ngIf="stakeholder" id="sidebar_main">
<div id="sidebar_content">
<div class="menu_section uk-margin-top">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<li>
<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"
[class.uk-hidden]="!open">Indicators</span>
</div>
</a>
</li>
</ul>
<div class="menu_section uk-margin-large-top">
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-button uk-button-link uk-margin-left">
<h6 class="uk-flex uk-flex-middle uk-flex-center uk-margin-remove-bottom">
<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-left"
[class.uk-hidden]="!open">Indicators</span>
</h6>
</a>
</div>
<div class="menu_section uk-margin-large-top">
<ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
@ -341,17 +337,24 @@
</div>
</div>
<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
[overflowBody]="false">
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?
[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"
uk-grid>
<div *ngIf="loading" class="uk-position-relative uk-height-large">
<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>

14
src/app/topic/topic.component.ts
View File

@ -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');
}));
}