[develop | ADDED]: Add loading in import indicators in order to avoid any actions during this process

This commit is contained in:
Konstantinos Triantafyllou 2024-04-01 18:16:21 +03:00
parent e8ec49a69b
commit b34f42326c
2 changed files with 25 additions and 29 deletions

View File

@ -198,13 +198,16 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="loading" class="uk-position-relative uk-height-large">
<loading class="uk-position-center"></loading>
</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 *ngIf="editing" class="uk-position-relative uk-height-large"> <div *ngIf="editing" class="uk-position-relative uk-height-large">
<loading class="uk-position-center"></loading> <loading class="uk-position-center"></loading>
</div> </div>
<div [class.uk-hidden]="editing" class="uk-padding-small"> <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>

View File

@ -86,8 +86,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]); public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
public numberResponses: Map<string, any> = new Map<string, any>(); public numberResponses: Map<string, any> = new Map<string, any>();
public numberResults: Map<string, number> = new Map<string, number>(); public numberResults: Map<string, number> = new Map<string, number>();
/** Import / Export Indicators */ public loading: boolean = false;
importLoading: boolean = false;
@ViewChild('editChartModal', {static: true}) editChartModal: AlertModal; @ViewChild('editChartModal', {static: true}) editChartModal: AlertModal;
@ViewChild('editNumberModal', {static: true}) editNumberModal: AlertModal; @ViewChild('editNumberModal', {static: true}) editNumberModal: AlertModal;
@ViewChild('deleteModal', {static: true}) deleteModal: AlertModal; @ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
@ -354,7 +353,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
return this.stakeholder && return this.stakeholder &&
this.stakeholder.topics[this.topicIndex] && this.stakeholder.topics[this.topicIndex] &&
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] && this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]; this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex] && !this.loading;
} }
public get numberIndicatorPaths(): UntypedFormArray { public get numberIndicatorPaths(): UntypedFormArray {
@ -874,19 +873,22 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
}); });
} }
} }
this.editing = false; this.finish();
this.importLoading = false;
NotificationHandler.rise('Indicators have been <b>imported</b> successfully!'); NotificationHandler.rise('Indicators have been <b>imported</b> successfully!');
}, error => { }, error => {
this.chartIndicatorFb = null; this.chartIndicatorFb = null;
NotificationHandler.rise('An error has occurred. Please try again later', 'danger'); NotificationHandler.rise('An error has occurred. Please try again later', 'danger');
this.editing = false; this.finish();
this.importLoading = false;
})); }));
} }
finish() {
this.editing = false;
this.loading = false;
}
reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) { reorderIndicators(sectionId: string, type: IndicatorType, reorder: Reorder) {
this.editing = true; this.editing = true;
let path = [ let path = [
@ -1221,8 +1223,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
return; return;
} }
// name description additionalDescription, height, width, visibility // name description additionalDescription, height, width, visibility
@ -1255,8 +1256,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
break; break;
} }
@ -1304,8 +1304,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
} }
} }
@ -1367,14 +1366,13 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
a.click(); a.click();
window.URL.revokeObjectURL(jsonFileUrl); window.URL.revokeObjectURL(jsonFileUrl);
a.remove(); // remove the element a.remove(); // remove the element
this.finish();
this.editing = false;
} }
fileChangeEvent(fileInput: any, index) { fileChangeEvent(fileInput: any, index) {
this.index = index; this.index = index;
this.editing = true; this.editing = true;
this.importLoading = true; this.loading = true;
this.filesToUpload = <Array<File>>fileInput.target.files; this.filesToUpload = <Array<File>>fileInput.target.files;
this.upload(); this.upload();
} }
@ -1387,8 +1385,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
return; return;
} else { } else {
if (this.filesToUpload[0].name.indexOf(".json") == -1 || (this.filesToUpload[0].type != "application/json")) { if (this.filesToUpload[0].name.indexOf(".json") == -1 || (this.filesToUpload[0].type != "application/json")) {
@ -1398,8 +1395,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
return; return;
} }
} }
@ -1413,16 +1409,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
} else if (!json || json?.indicators.length == 0) { } else if (!json || json?.indicators.length == 0) {
UIkit.notification("Importing file is empty", { UIkit.notification("Importing file is empty", {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
} else { } else {
this.importIndicatorsAndSave(json.stakeholder, json.indicators); this.importIndicatorsAndSave(json.stakeholder, json.indicators);
} }
@ -1433,8 +1427,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
}); });
this.editing = false; this.finish();
this.importLoading = false;
}); });
} }