[Monitor Dashboard]: Customize loading component. Make input pristine if the value is equal to initial value
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57735 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
3062e0ecae
commit
8204b4ba3b
|
@ -34,7 +34,7 @@
|
|||
[class.max-width-large]="!grid"
|
||||
class="uk-grid-match uk-grid-small"
|
||||
uk-grid>
|
||||
<loading *ngIf="loading" [loading]="loading"></loading>
|
||||
<loading *ngIf="loading"></loading>
|
||||
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
|
||||
<div *ngIf="stakeholder">
|
||||
<div class="md-card">
|
||||
|
@ -85,7 +85,7 @@
|
|||
[class.max-width-large]="!grid"
|
||||
class="uk-grid-match uk-grid-small"
|
||||
uk-grid>
|
||||
<loading *ngIf="loading" [loading]="loading"></loading>
|
||||
<loading *ngIf="loading"></loading>
|
||||
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
|
||||
<a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
|
||||
<div class="md-card">
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
|
||||
import {Option} from "../../../utils/indicator-utils";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
|
||||
|
||||
@Component({
|
||||
selector: '[dashboard-input]',
|
||||
|
@ -18,16 +20,23 @@ import {Option} from "../../../utils/indicator-utils";
|
|||
`
|
||||
})
|
||||
export class InputComponent implements OnInit, OnDestroy {
|
||||
@Input('formInput') formControl: any;
|
||||
@Input('formInput') formControl: FormControl;
|
||||
@Input('type') type: string = 'text';
|
||||
@Input('label') label: string;
|
||||
@Input('rows') rows: number = 3;
|
||||
@Input('options') options: Option[];
|
||||
private initValue: any;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initValue = HelperFunctions.copy(this.formControl.value);
|
||||
this.formControl.valueChanges.subscribe(value => {
|
||||
if(this.initValue.toString() === value.toString()) {
|
||||
this.formControl.markAsPristine();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
|
|
@ -3,8 +3,8 @@ import {Component, Input} from "@angular/core";
|
|||
@Component({
|
||||
selector: 'loading',
|
||||
template: `
|
||||
<div *ngIf="loading" class="uk-flex uk-flex-center uk-margin-small-top">
|
||||
<div class="md-preloader" [ngClass]="'md-preloader-' + color">
|
||||
<div class="uk-flex uk-flex-center uk-margin-small-top">
|
||||
<div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
|
||||
<circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
|
||||
</svg>
|
||||
|
@ -12,13 +12,10 @@ import {Component, Input} from "@angular/core";
|
|||
</div>`
|
||||
})
|
||||
export class LoadingComponent {
|
||||
@Input()
|
||||
public loading: boolean = false;
|
||||
|
||||
/**
|
||||
* Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
|
||||
*/
|
||||
@Input() color: string = '';
|
||||
@Input() color: 'success' | 'warning' | 'danger' = null;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
|
|
@ -119,8 +119,7 @@
|
|||
<ng-template [ngIf]="!grid">
|
||||
<span *ngFor="let indicatorPath of indicator.indicatorPaths"
|
||||
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
|
||||
<i class="material-icons md-24 uk-margin-small-right"
|
||||
[ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
|
||||
<i class="material-icons md-24 uk-margin-small-right">
|
||||
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
|
||||
</i>
|
||||
{{indicatorPath.type + ' Chart'}}
|
||||
|
@ -159,8 +158,7 @@
|
|||
<div class="uk-width-1-3 uk-text-center"
|
||||
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
|
||||
<div *ngFor="let indicatorPath of indicator.indicatorPaths">
|
||||
<i class="material-icons md-24"
|
||||
[ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
|
||||
<i class="material-icons md-24">
|
||||
{{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
|
||||
</i>
|
||||
<div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
|
||||
|
@ -270,10 +268,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="indicator.indicatorPaths[i].safeResourceUrl" class="uk-margin-medium-top uk-position-relative">
|
||||
<div *ngIf="!indicatorPath.pristine && !indicatorPath.invalid"
|
||||
<div *ngIf="hasDifference(i) && !indicatorPath.invalid"
|
||||
class="uk-width-1-1 uk-height-medium refresh-iframe">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator(i)">
|
||||
<div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator()">
|
||||
<div><i class="material-icons md-color-white">refresh</i></div>
|
||||
<span>Click to refresh the graph view</span>
|
||||
</div>
|
||||
|
|
|
@ -407,12 +407,22 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
});
|
||||
}
|
||||
|
||||
refreshIndicator(index: number) {
|
||||
hasDifference(index: number): boolean {
|
||||
let hasDifference = false;
|
||||
this.indicatorPaths.at(index).value.parameters.forEach((parameter) => {
|
||||
if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
|
||||
hasDifference = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
return hasDifference;
|
||||
}
|
||||
|
||||
refreshIndicator() {
|
||||
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
|
||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
|
||||
});
|
||||
this.indicatorPaths.at(index).markAsPristine({onlySelf: true});
|
||||
}
|
||||
|
||||
deleteIndicatorOpen(id: string, type: string = 'chart') {
|
||||
|
|
|
@ -40,14 +40,10 @@ export class IndicatorUtils {
|
|||
['table', 'table_chart'],
|
||||
['line', 'show_chart'],
|
||||
['column', 'bar_chart'],
|
||||
['bar', 'bar_chart'],
|
||||
['bar', 'notes'],
|
||||
['other', 'perm_media']
|
||||
]);
|
||||
|
||||
chartTypesIconsClasses: Map<string, string> = new Map([
|
||||
['bar', 'rotate-90']
|
||||
]);
|
||||
|
||||
isPublicIcon: Map<boolean, string> = new Map([
|
||||
[true, 'public'],
|
||||
[false, 'lock']
|
||||
|
|
|
@ -173,6 +173,9 @@
|
|||
.app_my_theme .md-card-primary {
|
||||
border-left-color: #0d47a1;
|
||||
}
|
||||
.app_my_theme .md-preloader:not(.md-preloader-success):not(.md-preloader-warning):not(.md-preloader-danger) svg circle {
|
||||
stroke: #0d47a1;
|
||||
}
|
||||
.app_my_theme .waves-effect.md-btn-flat-primary {
|
||||
background: none;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue