[develop | ADDED]: Add loading in import indicators in order to avoid any actions during this process
This commit is contained in:
parent
e8ec49a69b
commit
b34f42326c
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue