Revision 61433
Added by Konstantina Galouni almost 3 years ago
| indicators.component.html | ||
|---|---|---|
| 1 | 1 |
<div *ngIf="stakeholder && canEdit"> |
| 2 | 2 |
<div class="uk-text-right uk-width-expand"> |
| 3 |
<a class="uk-margin-bottom uk-margin-right " uk-icon="icon:download" title="Export indicators (JSON file)"
|
|
| 3 |
<a class="uk-margin-bottom uk-margin-right " [attr.uk-icon]="export_loading ? null : 'icon:download'" title="Export indicators (JSON file)"
|
|
| 4 | 4 |
(click)="export_indicators()"> |
| 5 | 5 |
<span class="uk-text-small">Export</span> |
| 6 |
<span *ngIf="export_loading" class="uk-margin-small-left uk-icon icon-button"><loading [top_margin]="false"></loading></span> |
|
| 6 | 7 |
</a> |
| 7 | 8 |
<div uk-form-custom class="js-upload uk-margin-top"> |
| 8 | 9 |
<input id="exampleInputFile" type="file" class="uk-width-medium" (change)="fileChangeEvent($event)"/> |
| 9 |
<a class=" uk-margin-bottom" uk-icon="icon:upload" title="Import indicators (JSON file)"> Import</a> |
|
| 10 |
<a class=" uk-margin-bottom" [attr.uk-icon]="import_loading ? null : 'icon:upload'" title="Import indicators (JSON file)"> Import</a> |
|
| 11 |
<span *ngIf="import_loading" class="uk-margin-small-left uk-icon icon-button"><loading [top_margin]="false"></loading></span> |
|
| 10 | 12 |
</div> |
| 11 | 13 |
</div> |
| 12 | 14 |
|
| ... | ... | |
| 60 | 62 |
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder"> |
| 61 | 63 |
<ng-container |
| 62 | 64 |
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: number._id}"></ng-container>
|
| 63 |
<div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable"> |
|
| 64 |
<i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i> |
|
| 65 |
<div [attr.uk-tooltip]="export_loading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" |
|
| 66 |
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable"> |
|
| 67 |
<i [class]="export_loading ? 'uk-disabled ' : ' '" uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i> |
|
| 65 | 68 |
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"> |
| 66 | 69 |
<ul class="uk-nav uk-dropdown-nav"> |
| 67 | 70 |
<li *ngIf="!editing"><a |
| ... | ... | |
| 164 | 167 |
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder"> |
| 165 | 168 |
<ng-container |
| 166 | 169 |
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: chart._id}"></ng-container>
|
| 167 |
<div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable"> |
|
| 168 |
<i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i> |
|
| 170 |
<div [attr.uk-tooltip]="export_loading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" |
|
| 171 |
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable"> |
|
| 172 |
<i [class]="export_loading ? 'uk-disabled ' : ' '" uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i> |
|
| 169 | 173 |
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"> |
| 170 | 174 |
<ul class="uk-nav uk-dropdown-nav"> |
| 171 | 175 |
<li *ngIf="!editing"><a |
| ... | ... | |
| 543 | 547 |
Are you sure you want to proceed? |
| 544 | 548 |
</modal-alert>--> |
| 545 | 549 |
<ng-template #visibilityOptions let-indicator="indicator" let-sectionId="sectionId"> |
| 546 |
<span class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility"> |
|
| 547 |
<span class="clickable color"> |
|
| 550 |
<span [attr.uk-tooltip]="export_loading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'" |
|
| 551 |
class="uk-position-top-left uk-margin-small-left uk-margin-small-top visibility" [class]="export_loading ? '' : ' clickable '"> |
|
| 552 |
<span [class]="export_loading ? 'uk-disabled ' : ' '" class="clickable color"> |
|
| 548 | 553 |
<icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon> |
| 549 | 554 |
</span> |
| 550 | 555 |
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false"> |
Also available in: Unified diff
[Trunk | Monitor Dashboard]:
1. indicators.component.ts:
a. Added fields "import_loading" and "export_loading" and set "editing", to show loading icon and disable edit options while export or import process is ongoing.
b. Validate schema of indicators' file when importing it (type (chart or number), url, and jsonPath (for number indicators) are requested).
2. indicators.component.html:
a. Instead of import or export icon (next to buttons), show loading icon when "import_loading" or "export_loading" is true.
b. Disable edit options for indicators when "import_loading" or "export_loading" is true and show tooltip.