[new-reorder]: Add multi charts in admin indicators (works now only for charts in UI). Deprecated transition-group disable/enable method.
This commit is contained in:
parent
d63092cd9e
commit
b71bdfa559
|
|
@ -372,10 +372,8 @@ export class MenuComponent implements OnInit {
|
|||
}
|
||||
|
||||
public valueChange() {
|
||||
this.elements.disable();
|
||||
this.cdr.detectChanges();
|
||||
this.elements.init();
|
||||
this.elements.enable();
|
||||
}
|
||||
|
||||
public get displayMenuItems() {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
(focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
|
||||
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
||||
</div>
|
||||
<div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: number" uk-grid>
|
||||
<div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match"
|
||||
uk-sortable="group: number" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getNumberClassBySize(indicator.width)">
|
||||
|
|
@ -29,13 +30,18 @@
|
|||
<div *ngIf="!dragging"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
|
||||
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
|
||||
<icon *ngIf="showVisibility" [flex]="true"
|
||||
[name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
|
||||
ratio="0.6"></icon>
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
||||
<div #element class="uk-dropdown"
|
||||
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<ng-container *ngIf="isCurator">
|
||||
<li><a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a></li>
|
||||
<li>
|
||||
<a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="showVisibility">
|
||||
<li *ngIf="isCurator" class="uk-nav-divider"></li>
|
||||
|
|
@ -43,9 +49,12 @@
|
|||
<li>
|
||||
<a (click)="changeIndicatorStatus(number._id, indicator, v.value);hide(element)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
|
||||
<icon [flex]="true" [name]="v.icon"
|
||||
ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">{{ v.label }}</span>
|
||||
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
||||
<icon *ngIf="indicator.visibility === v.value"
|
||||
[flex]="true" name="done"
|
||||
class="uk-text-secondary" ratio="0.8"></icon>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -53,15 +62,18 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
|
||||
<li class="uk-nav-divider">
|
||||
<li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a></li>
|
||||
<li>
|
||||
<a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}</div>
|
||||
<div class="number uk-text-small uk-text-bold">
|
||||
<span *ngIf="numberResults.get(i + '-' + j)" [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
|
||||
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
||||
<span *ngIf="numberResults.get(i + '-' + j + '-' + 0)"
|
||||
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-' + 0) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-' + 0) | numberPercentage: stakeholder.locale))"></span>
|
||||
<span *ngIf="!numberResults.get(i + '-' + j + '-' + 0)">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,7 +82,8 @@
|
|||
<div *ngIf="isCurator" class="uk-margin-top">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div [ngClass]="getNumberClassBySize('small')">
|
||||
<a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset" (click)="editNumberIndicatorOpen(number)">
|
||||
<a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset"
|
||||
(click)="editNumberIndicatorOpen(number)">
|
||||
<div class="uk-text-background uk-margin-right">
|
||||
<icon name="add" [flex]="true" ratio="1.5"></icon>
|
||||
</div>
|
||||
|
|
@ -111,20 +124,27 @@
|
|||
(focusEmitter)="saveSection($event, chartSections.at(i), i)"
|
||||
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
||||
</div>
|
||||
<div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match" uk-sortable="group: chart" uk-grid>
|
||||
<div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match"
|
||||
uk-sortable="group: chart" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getChartClassBySize(indicator.width)">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<div *ngIf="!dragging"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
|
||||
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
|
||||
<icon *ngIf="showVisibility" [flex]="true"
|
||||
[name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
|
||||
ratio="0.6"></icon>
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
||||
<div #element class="uk-dropdown"
|
||||
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<ng-container *ngIf="isCurator">
|
||||
<li><a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a></li>
|
||||
<li>
|
||||
<a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="showVisibility">
|
||||
<li *ngIf="isCurator" class="uk-nav-divider"></li>
|
||||
|
|
@ -132,9 +152,12 @@
|
|||
<li>
|
||||
<a (click)="changeIndicatorStatus(chart._id, indicator, v.value);">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
|
||||
<icon [flex]="true" [name]="v.icon"
|
||||
ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">{{ v.label }}</span>
|
||||
<icon *ngIf="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
||||
<icon *ngIf="indicator.visibility === v.value"
|
||||
[flex]="true" name="done"
|
||||
class="uk-text-secondary" ratio="0.8"></icon>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -142,30 +165,49 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="!indicator.defaultId && !editing && isCurator">
|
||||
<li class="uk-nav-divider">
|
||||
<li><a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a></li>
|
||||
<li>
|
||||
<a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
|
||||
<div *ngIf="indicator.name"
|
||||
class="uk-text-center uk-text-bold uk-margin-small-bottom">
|
||||
{{ indicator.name }}
|
||||
</div>
|
||||
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !=='image' &&
|
||||
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
|
||||
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
class="uk-width-1-1" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-margin-medium-bottom">
|
||||
<ul class="uk-subnav uk-subnav-pill uk-subnav-small">
|
||||
<li *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
|
||||
class="uk-flex uk-margin-small-top"
|
||||
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
|
||||
<a (click)="indicator.activePath = i">
|
||||
<span>
|
||||
{{ indicatorPath.parameters.title ? indicatorPath.parameters.title : '--' }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<iframe *ngIf="!properties.disableFrameLoad && getActiveIndicatorPath(indicator) && getActiveIndicatorPath(indicator).source !=='image' &&
|
||||
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, getActiveIndicatorPath(indicator)))"
|
||||
allowfullscreen="true" mozallowfullscreen="true"
|
||||
webkitallowfullscreen="true"
|
||||
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, getActiveIndicatorPath(indicator)))"
|
||||
class="uk-width-1-1"
|
||||
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
[class.uk-blend-multiply]="!isFullscreen"></iframe>
|
||||
<div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths &&
|
||||
indicator.indicatorPaths.length > 0 && indicator.indicatorPaths[0].source !=='image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
indicator.indicatorPaths.length > 0 && getActiveIndicatorPath(indicator).source !=='image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply"
|
||||
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
src="assets/chart-placeholder.png">
|
||||
</div>
|
||||
<div *ngIf="indicator.indicatorPaths && indicator.indicatorPaths[0] &&
|
||||
indicator.indicatorPaths[0].source === 'image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
[src]="indicator.indicatorPaths[0].url">
|
||||
<div *ngIf="indicator.indicatorPaths && getActiveIndicatorPath(indicator) && getActiveIndicatorPath(indicator).source === 'image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply"
|
||||
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
[src]="getActiveIndicatorPath(indicator).url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,12 +217,14 @@
|
|||
<div *ngIf="isCurator" class="uk-margin-top">
|
||||
<div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
|
||||
<div [ngClass]="getChartClassBySize('small')">
|
||||
<div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
|
||||
<div class=" uk-card uk-card-default uk-card-body clickable"
|
||||
(click)="editChartIndicatorOpen(chart)">
|
||||
<h6 class="uk-text-bold uk-text-center">
|
||||
Create a custom indicator
|
||||
</h6>
|
||||
<div class="uk-text-muted uk-text-small">
|
||||
Use our advance tool to create a custom Indicator that suit the needs of your funding
|
||||
Use our advance tool to create a custom Indicator that suit the needs of your
|
||||
funding
|
||||
KPI's.
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-center uk-text-background uk-margin-medium-top">
|
||||
|
|
@ -212,9 +256,11 @@
|
|||
<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)"
|
||||
input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
|
||||
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')"
|
||||
<div input class="uk-width-1-1" *ngIf="stakeholder.defaultId"
|
||||
[formInput]="numberIndicatorFb.get('additionalDescription')"
|
||||
placeholder="Description" type="textarea">
|
||||
</div>
|
||||
<div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
|
||||
|
|
@ -223,22 +269,89 @@
|
|||
<div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
||||
placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
|
||||
</div>
|
||||
<hr class="uk-width-1-1">
|
||||
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
|
||||
<div *ngIf="stakeholderUtils.hasMultiNumberIndicatorPaths" class="uk-margin-medium-bottom">
|
||||
<ul #transitionGroup class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
|
||||
<li *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
|
||||
class="uk-visible-toggle uk-flex uk-margin-small-top" transition-group-item
|
||||
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
|
||||
<a (click)="activeNumberIndicatorPath(i)">
|
||||
<span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value !== 0"
|
||||
[innerHTML]="(indicatorPath.get('format').value == 'NUMBER'?(indicatorPath.get('result').value | numberRound: 2:1:stakeholder.locale):(indicatorPath.get('result').value | numberPercentage: stakeholder.locale))">
|
||||
</span>
|
||||
<span *ngIf="!indicatorPath.get('result').valid || indicatorPath.get('result').value === 0">
|
||||
--
|
||||
</span>
|
||||
</a>
|
||||
<span *ngIf="!indicator.defaultId && numberIndicatorPaths.length > 1"
|
||||
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
|
||||
[class.uk-invisible-hover]="indicator.activePath !== i"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div #element
|
||||
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li *ngIf="i > 0">
|
||||
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, i)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="west" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="i < numberIndicatorPaths.length - 1">
|
||||
<a (click)="hide(element);moveIndicatorPath(numberIndicatorFb, numberIndicatorPaths, i, i + 1)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="east" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Move Right</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="removeNumberIndicatorPath(i); hide(element)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="delete" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Delete</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="uk-margin-small-top">
|
||||
<a (click)="activeNumberIndicatorPath(numberIndicatorPaths.length); $event.preventDefault()"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<icon name="add" [flex]="true"></icon>
|
||||
<span class="uk-text-uppercase">Add</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div *ngIf="(!indicator.activePath && i == 0) || indicator.activePath === i" class="uk-grid"
|
||||
uk-grid>
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-expand" [formInput]="indicatorPath.get('url')" placeholder="Number URL">
|
||||
<div input class="uk-width-expand" [formInput]="indicatorPath.get('url')"
|
||||
placeholder="Number URL">
|
||||
<div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
|
||||
</div>
|
||||
<div class='uk-padding-small'>
|
||||
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
|
||||
<a class="uk-link-reset"
|
||||
(click)="copyToClipboard(indicatorPath.get('url').value)">
|
||||
<icon [flex]="true" name="content_copy"></icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m">
|
||||
<div input [formInput]="indicatorPath.get('source')" placeholder="Source"
|
||||
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
|
||||
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes"
|
||||
type="select">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m">
|
||||
|
|
@ -247,7 +360,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m" formArrayName="parameters">
|
||||
<div *ngIf="getParameter(i, 'statsProfile', 'number') && statsProfiles" input [formInput]="getParameter(i, 'statsProfile', 'number').get('value')"
|
||||
<div *ngIf="getParameter(i, 'statsProfile', 'number') && statsProfiles" input
|
||||
[formInput]="getParameter(i, 'statsProfile', 'number').get('value')"
|
||||
[type]="'select'"
|
||||
[options]="statsProfiles"
|
||||
placeholder="Stats Profile"></div>
|
||||
|
|
@ -258,22 +372,26 @@
|
|||
<h6 class="uk-text-bold uk-margin-remove-bottom">
|
||||
<span>JSON Path</span>
|
||||
</h6>
|
||||
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
|
||||
<div *ngIf="indicatorPath.get('result').invalid && indicatorPath.get('result').errors.required">
|
||||
<div class="uk-text-danger uk-text-small">
|
||||
This JSON path is not valid or the result has not been calculated yet.
|
||||
Please press calculate on box below to see the result.
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle" uk-grid>
|
||||
<div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-1-1" [formInput]="jsonPath" [placeholder]="'Level ' + +(j + 1)"></div>
|
||||
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle"
|
||||
uk-grid>
|
||||
<div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-1-1" [formInput]="jsonPath"
|
||||
[placeholder]="'Level ' + +(j + 1)"></div>
|
||||
<a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
|
||||
class="uk-margin-small-left uk-text-danger"
|
||||
[class.uk-disabled]="getJsonPath(i).disabled"
|
||||
(click)="removeJsonPath(i, j)">
|
||||
<icon name="close"></icon>
|
||||
</a>
|
||||
<span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)" class="uk-text-center uk-margin-small-left">
|
||||
<span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)"
|
||||
class="uk-text-center uk-margin-small-left">
|
||||
<icon name="east"></icon>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -287,24 +405,24 @@
|
|||
<div class="uk-width-1-1 uk-flex uk-flex-center">
|
||||
<div class="uk-flex uk-position-relative">
|
||||
<span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0"
|
||||
[innerHTML]="(numberIndicatorPaths.at(i).get('format').value == 'NUMBER'?(numberIndicatorPaths.at(i).get('result').value | numberRound: 2:1:stakeholder.locale):(numberIndicatorPaths.at(i).get('result').value | numberPercentage: stakeholder.locale))">
|
||||
<span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value !== 0"
|
||||
[innerHTML]="(indicatorPath.get('format').value == 'NUMBER'?(indicatorPath.get('result').value | numberRound: 2:1:stakeholder.locale):(indicatorPath.get('result').value | numberPercentage: stakeholder.locale))">
|
||||
</span>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
|
||||
<span *ngIf="indicatorPath.get('result').valid && indicatorPath.get('result').value === 0">
|
||||
--
|
||||
</span>
|
||||
</span>
|
||||
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
|
||||
<div *ngIf="indicatorPath.get('result').invalid"
|
||||
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
|
||||
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
|
||||
[class.uk-disabled]="indicatorPath.get('url').invalid"
|
||||
(click)="validateJsonPath(i, true)">
|
||||
<div>
|
||||
<icon name="refresh"></icon>
|
||||
</div>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
|
||||
<span *ngIf="indicatorPath.get('result').errors.required">Calculate</span>
|
||||
<span *ngIf="indicatorPath.get('result').errors.validating">Calculating...</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -312,13 +430,13 @@
|
|||
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
|
||||
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
|
||||
[class.uk-disabled]="indicatorPath.get('url').invalid"
|
||||
(click)="refreshIndicator('number')">
|
||||
<div>
|
||||
<icon name="refresh"></icon>
|
||||
</div>
|
||||
<span>Calculate</span>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors?.validating">Calculating...</span>
|
||||
<span *ngIf="indicatorPath.get('result').errors?.validating">Calculating...</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -340,9 +458,11 @@
|
|||
<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)"
|
||||
input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
|
||||
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')"
|
||||
<div *ngIf="stakeholder.defaultId" input class="uk-width-1-1"
|
||||
[formInput]="chartIndicatorFb.get('additionalDescription')"
|
||||
placeholder="Description" type="textarea">
|
||||
</div>
|
||||
<div *ngIf="showVisibility" input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
|
||||
|
|
@ -355,40 +475,113 @@
|
|||
[options]="indicatorUtils.indicatorSizes" type="select">
|
||||
</div>
|
||||
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
|
||||
<div *ngIf="stakeholderUtils.hasMultiChartIndicatorPaths" class="uk-margin-medium-bottom">
|
||||
<ul #transitionGroup class="uk-subnav uk-subnav-pill uk-subnav-small" transition-group>
|
||||
<li *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index"
|
||||
class="uk-visible-toggle uk-flex uk-margin-small-top" transition-group-item
|
||||
[class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
|
||||
<a (click)="activeChartIndicatorPath(i)">
|
||||
<span>{{ getParameter(i, 'title')?.get('value')?.value ? getParameter(i, 'title').get('value').value : 'No title yet' }}</span>
|
||||
</a>
|
||||
<span *ngIf="!indicator.defaultId && chartIndicatorPaths.length > 1"
|
||||
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
|
||||
[class.uk-invisible-hover]="indicator.activePath !== i"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div #element
|
||||
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li *ngIf="i > 0">
|
||||
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, i)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="west" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="i < chartIndicatorPaths.length - 1">
|
||||
<a (click)="hide(element);moveIndicatorPath(chartIndicatorFb, chartIndicatorPaths, i, i + 1)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="east" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Move Right</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="removeChartIndicatorPath(i); hide(element)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="delete" ratio="0.6"></icon>
|
||||
<span class="uk-margin-small-left uk-width-expand">Delete</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="uk-margin-small-top">
|
||||
<a (click)="activeChartIndicatorPath(chartIndicatorPaths.length); $event.preventDefault()"
|
||||
class="uk-flex uk-flex-middle">
|
||||
<icon name="add" [flex]="true"></icon>
|
||||
<span class="uk-text-uppercase">Add</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index;"
|
||||
[formGroupName]="i" class="uk-grid" uk-grid>
|
||||
[formGroupName]="i">
|
||||
<div *ngIf="(!indicator.activePath && i == 0) || indicator.activePath === i" class="uk-grid"
|
||||
uk-grid>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-expand" [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
|
||||
<div input class="uk-width-expand"
|
||||
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
|
||||
[formInput]="indicatorPath.get('url')" placeholder="Chart URL">
|
||||
<div *ngIf="urlParameterizedMessage" warning>{{ urlParameterizedMessage }}</div>
|
||||
</div>
|
||||
<div class='uk-padding-small'>
|
||||
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)"><icon [flex]="true" name="content_copy"></icon></a>
|
||||
<a class="uk-link-reset" (click)="copyToClipboard(indicatorPath.get('url').value)">
|
||||
<icon [flex]="true" name="content_copy"></icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1" formArrayName="parameters">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
|
||||
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1"
|
||||
[formInput]="getParameter(i, 'title').get('value')"
|
||||
placeholder="Chart Title"></div>
|
||||
<div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1" placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')" label="Chart Subtitle"></div>
|
||||
<div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
|
||||
<div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1"
|
||||
placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')"
|
||||
label="Chart Subtitle"></div>
|
||||
<div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s"
|
||||
[formInput]="indicatorPath.get('type')" placeholder="Chart Type"
|
||||
[options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
|
||||
type="select"></div>
|
||||
<div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
|
||||
[options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)" type="select"></div>
|
||||
<div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'xAxisTitle').get('value')"
|
||||
<div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
|
||||
[options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
|
||||
type="select"></div>
|
||||
<div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'xAxisTitle').get('value')"
|
||||
placeholder="X-Axis Title"></div>
|
||||
<div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'yAxisTitle').get('value')"
|
||||
<div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'yAxisTitle').get('value')"
|
||||
placeholder="Y-Axis Title"></div>
|
||||
<div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_0').get('value')"
|
||||
<div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'data_title_0').get('value')"
|
||||
placeholder="Data Title"></div>
|
||||
<div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_1').get('value')"
|
||||
<div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'data_title_1').get('value')"
|
||||
placeholder="Data Title"></div>
|
||||
<div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'start_year').get('value')"
|
||||
<div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'start_year').get('value')"
|
||||
placeholder="Year (From)"></div>
|
||||
<div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'end_year').get('value')"
|
||||
<div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s"
|
||||
[formInput]="getParameter(i, 'end_year').get('value')"
|
||||
placeholder="Year (To)"></div>
|
||||
<div *ngIf="getParameter(i, 'statsProfile') && statsProfiles" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'statsProfile').get('value')"
|
||||
<div *ngIf="getParameter(i, 'statsProfile') && statsProfiles" input
|
||||
class="uk-width-1-3@s" [formInput]="getParameter(i, 'statsProfile').get('value')"
|
||||
[type]="'select'" [options]="statsProfiles" placeholder="Stats Profile"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -397,7 +590,8 @@
|
|||
<div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
|
||||
class="uk-width-1-1 uk-height-large refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<a class="uk-position-center uk-text-center uk-link-reset" (click)="refreshIndicator()">
|
||||
<a class="uk-position-center uk-text-center uk-link-reset"
|
||||
(click)="refreshIndicator()">
|
||||
<div>
|
||||
<icon name="refresh"></icon>
|
||||
</div>
|
||||
|
|
@ -405,11 +599,15 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" [class.uk-blend-multiply]="!isFullscreen"
|
||||
[src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"
|
||||
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
|
||||
[class.uk-blend-multiply]="!isFullscreen"
|
||||
[src]="indicator.indicatorPaths[i].safeResourceUrl" allowfullscreen="true"
|
||||
mozallowfullscreen="true" webkitallowfullscreen="true"
|
||||
class="uk-width-1-1 uk-height-large"></iframe>
|
||||
<div *ngIf="indicator.indicatorPaths[i].source === 'image'">
|
||||
<img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
|
||||
<img class="uk-width-1-1 uk-height-large uk-blend-multiply"
|
||||
[src]="indicator.indicatorPaths[i].url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -418,13 +616,15 @@
|
|||
<div #editChartNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
<modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
|
||||
<modal-alert #deleteModal (alertOutput)="deleteIndicator()" [overflowBody]="false"
|
||||
classTitle="uk-background-primary uk-light">
|
||||
<div [class.uk-invisible]="editing" class="uk-position-relative">
|
||||
<div *ngIf="editing">
|
||||
<loading class="uk-position-center"></loading>
|
||||
</div>
|
||||
You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
|
||||
"{{indicator.name ? indicator.name : (indicator.indicatorPaths[0]?.parameters?.title?indicator.indicatorPaths[0].parameters.title:'')}}"</span> indicator permanently.
|
||||
"{{ indicator.name ? indicator.name : (indicator.indicatorPaths[0]?.parameters?.title ? 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>
|
||||
|
|
@ -432,7 +632,8 @@
|
|||
<div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
<modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false" classTitle="uk-background-primary uk-light">
|
||||
<modal-alert #deleteSectionModal (alertOutput)="deleteSection()" [overflowBody]="false"
|
||||
classTitle="uk-background-primary uk-light">
|
||||
<div [class.uk-invisible]="editing" class="uk-position-relative">
|
||||
<div *ngIf="editing">
|
||||
<loading class="uk-position-center"></loading>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
Visibility
|
||||
} from "../../monitor/entities/stakeholder";
|
||||
import {
|
||||
AbstractControl,
|
||||
AbstractControl, FormArray, FormGroup,
|
||||
UntypedFormArray,
|
||||
UntypedFormBuilder,
|
||||
UntypedFormControl,
|
||||
|
|
@ -45,6 +45,7 @@ import {NotificationHandler} from "../../utils/notification-handler";
|
|||
import {IndicatorStakeholderBaseComponent} from "../utils/stakeholder-base.component";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {StatsProfilesService} from "../utils/services/stats-profiles.service";
|
||||
import {TransitionGroupComponent} from "../../utils/transition-group/transition-group.component";
|
||||
|
||||
declare var UIkit;
|
||||
declare var copy;
|
||||
|
|
@ -101,6 +102,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
@ViewChild('editNumberNotify', {static: true}) editNumberNotify: NotifyFormComponent;
|
||||
@ViewChild('editChartNotify', {static: true}) editChartNotify: NotifyFormComponent;
|
||||
@ViewChild('deleteNotify', {static: true}) deleteNotify: NotifyFormComponent;
|
||||
/* Transition Groups */
|
||||
@ViewChild('transitionGroup') transitionGroup: TransitionGroupComponent;
|
||||
|
||||
public isFullscreen: boolean = false;
|
||||
|
||||
|
|
@ -266,7 +269,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
setNumbers() {
|
||||
this.numberSections = this.fb.array([]);
|
||||
this.numberResults.clear();
|
||||
let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
|
||||
let urls: Map<string, [number, number, number][]> = new Map<string, [number, number, number][]>();
|
||||
this.numbers.forEach((section, i) => {
|
||||
this.numberSections.push(this.fb.group({
|
||||
_id: this.fb.control(section._id),
|
||||
|
|
@ -278,13 +281,15 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
indicators: this.fb.control(section.indicators)
|
||||
}));
|
||||
section.indicators.forEach((number, j) => {
|
||||
let url = this.indicatorUtils.getFullUrl(this.stakeholder, number.indicatorPaths[0]);
|
||||
const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
|
||||
number.indicatorPaths.forEach((indicatorPath, k) => {
|
||||
let url = this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath);
|
||||
const pair = JSON.stringify([indicatorPath.source, url]);
|
||||
const indexes = urls.get(pair) ? urls.get(pair) : [];
|
||||
indexes.push([i, j]);
|
||||
indexes.push([i, j, k]);
|
||||
urls.set(pair, indexes);
|
||||
});
|
||||
});
|
||||
});
|
||||
this.numberSubscription.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
|
|
@ -304,10 +309,10 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
});
|
||||
}
|
||||
|
||||
private calculateResults(response: any, indexes: [number, number][]) {
|
||||
indexes.forEach(([i, j]) => {
|
||||
private calculateResults(response: any, indexes: [number, number, number][]) {
|
||||
indexes.forEach(([i, j, k]) => {
|
||||
let result = JSON.parse(JSON.stringify(response));
|
||||
this.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
|
||||
this.numbers[i].indicators[j].indicatorPaths[k].jsonPath.forEach(jsonPath => {
|
||||
if (result) {
|
||||
result = result[jsonPath];
|
||||
}
|
||||
|
|
@ -320,7 +325,7 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
} else {
|
||||
result = 0;
|
||||
}
|
||||
this.numberResults.set(i + '-' + j, result);
|
||||
this.numberResults.set(i + '-' + j + '-' + k, result);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -367,6 +372,14 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
return this.chartIndicatorFb.get('indicatorPaths') as UntypedFormArray;
|
||||
}
|
||||
|
||||
public getActiveIndicatorPath(indicator: Indicator) {
|
||||
if(indicator.activePath) {
|
||||
return indicator.indicatorPaths[indicator.activePath];
|
||||
} else {
|
||||
return indicator.indicatorPaths[0];
|
||||
}
|
||||
}
|
||||
|
||||
public getNumberClassBySize(size: IndicatorSize) {
|
||||
if (size === 'small') {
|
||||
return 'uk-width-medium@m uk-width-1-1';
|
||||
|
|
@ -579,6 +592,65 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
}
|
||||
}
|
||||
|
||||
public removeNumberIndicatorPath(index: number) {
|
||||
this.numberIndicatorPaths.removeAt(index);
|
||||
this.indicator.indicatorPaths.splice(index, 1);
|
||||
this.transitionGroup.init();
|
||||
if(this.indicator.activePath === index) {
|
||||
this.activeNumberIndicatorPath(Math.max(0, index - 1));
|
||||
} else if(this.indicator.activePath > index) {
|
||||
this.activeNumberIndicatorPath(this.indicator.activePath - 1);
|
||||
}
|
||||
this.numberIndicatorFb.markAsDirty();
|
||||
}
|
||||
|
||||
public removeChartIndicatorPath(index: number) {
|
||||
this.chartIndicatorPaths.removeAt(index);
|
||||
this.indicator.indicatorPaths.splice(index, 1);
|
||||
this.transitionGroup.init();
|
||||
if(this.indicator.activePath === index) {
|
||||
this.activeChartIndicatorPath(Math.max(0, index - 1));
|
||||
} else if(this.indicator.activePath > index) {
|
||||
this.activeChartIndicatorPath(this.indicator.activePath - 1);
|
||||
}
|
||||
this.chartIndicatorFb.markAsDirty();
|
||||
}
|
||||
|
||||
public moveIndicatorPath(form: FormGroup,
|
||||
indicatorPaths: FormArray, index: number,
|
||||
newIndex: number = index - 1) {
|
||||
this.transitionGroup.init();
|
||||
let a = indicatorPaths.at(index);
|
||||
let b = indicatorPaths.at(newIndex);
|
||||
indicatorPaths.setControl(index , b);
|
||||
indicatorPaths.setControl(newIndex , a);
|
||||
HelperFunctions.swap(this.indicator.indicatorPaths, index , newIndex);
|
||||
if(this.indicator.activePath === index) {
|
||||
this.indicator.activePath = newIndex;
|
||||
} else if(this.indicator.activePath === newIndex) {
|
||||
this.indicator.activePath = index;
|
||||
}
|
||||
form.markAsDirty();
|
||||
}
|
||||
|
||||
public activeNumberIndicatorPath(index: number) {
|
||||
let paths = this.numberIndicatorPaths;
|
||||
if(index == paths.length) {
|
||||
this.addNumberIndicatorPath();
|
||||
this.transitionGroup.init();
|
||||
}
|
||||
this.indicator.activePath = index;
|
||||
}
|
||||
|
||||
public activeChartIndicatorPath(index: number) {
|
||||
let paths = this.chartIndicatorPaths;
|
||||
if(index == paths.length) {
|
||||
this.addChartIndicatorPath();
|
||||
this.transitionGroup.init();
|
||||
}
|
||||
this.indicator.activePath = index;
|
||||
}
|
||||
|
||||
private getJsonPathAsFormArray(indicatorPath: IndicatorPath): UntypedFormArray {
|
||||
let jsonPath = this.fb.array([]);
|
||||
if (indicatorPath.jsonPath) {
|
||||
|
|
@ -1273,25 +1345,29 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
|
|||
|
||||
if (chart.type == "chart") {
|
||||
indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.indicatorUtils.getChartSource(chart.url), chart.url, chart.type, stakeholder);
|
||||
for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts) {
|
||||
for (let chart of section.indicators) {
|
||||
if (JSON.stringify(chart.indicatorPaths[0].chartObject) == JSON.stringify(indicatorPath.chartObject)) {
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].charts.forEach((section: Section) => {
|
||||
section.indicators.forEach(indicator => {
|
||||
indicator.indicatorPaths.forEach(path => {
|
||||
if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
|
||||
duplicates++;
|
||||
exists = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (chart.type == "number") {
|
||||
indicatorPath = this.indicatorUtils.generateIndicatorByNumberUrl(this.indicatorUtils.getNumberSource(chart.url), chart.url, stakeholder,
|
||||
chart.jsonPath, this.indicatorUtils.numberSources.get(this.indicatorUtils.getNumberSource(chart.url)));
|
||||
for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers) {
|
||||
for (let chart of section.indicators) {
|
||||
if (JSON.stringify(chart.indicatorPaths[0].chartObject) == JSON.stringify(indicatorPath.chartObject)) {
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index].numbers.forEach((section: Section) => {
|
||||
section.indicators.forEach(indicator => {
|
||||
indicator.indicatorPaths.forEach(path => {
|
||||
if (JSON.stringify(path.chartObject) == JSON.stringify(indicatorPath.chartObject)) {
|
||||
duplicates++;
|
||||
exists = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
if (!exists) {
|
||||
let i: Indicator = new Indicator(chart.name, chart.description, chart.additionalDescription, chart.type, chart.width, chart.height, this.showVisibility?"RESTRICTED":this.stakeholderUtils.defaultValue(this.stakeholderUtils.visibilities), [indicatorPath]);
|
||||
|
|
|
|||
|
|
@ -242,30 +242,18 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
}
|
||||
|
||||
topicChanged(callback: Function, save: boolean = false) {
|
||||
if(this.topics && save) {
|
||||
this.topics.disable();
|
||||
}
|
||||
if(this.categories) {
|
||||
this.categories.disable();
|
||||
}
|
||||
if(this.subCategories) {
|
||||
this.subCategories.disable();
|
||||
}
|
||||
if(callback) {
|
||||
callback();
|
||||
}
|
||||
this.cdr.detectChanges();
|
||||
if(this.topics && save) {
|
||||
this.topics.init();
|
||||
this.topics.enable();
|
||||
}
|
||||
if(this.categories) {
|
||||
this.categories.init();
|
||||
this.categories.enable();
|
||||
}
|
||||
if(this.subCategories) {
|
||||
this.subCategories.init();
|
||||
this.subCategories.enable();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -359,6 +347,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
this.stakeholder.topics.splice(this.index, 1);
|
||||
if(this.topicIndex === this.index) {
|
||||
this.chooseTopic(Math.max(0, this.index - 1));
|
||||
} else if(this.topicIndex > this.index) {
|
||||
this.chooseTopic(this.topicIndex - 1);
|
||||
}
|
||||
}, true);
|
||||
};
|
||||
|
|
@ -388,23 +378,15 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
}
|
||||
|
||||
categoryChanged(callback: Function, save: boolean = false) {
|
||||
if(this.categories && save) {
|
||||
this.categories.disable();
|
||||
}
|
||||
if(this.subCategories) {
|
||||
this.subCategories.disable();
|
||||
}
|
||||
if(callback) {
|
||||
callback();
|
||||
}
|
||||
this.cdr.detectChanges();
|
||||
if(this.categories && save) {
|
||||
this.categories.init();
|
||||
this.categories.enable();
|
||||
}
|
||||
if(this.subCategories) {
|
||||
this.subCategories.init();
|
||||
this.subCategories.enable();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -500,6 +482,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
|
||||
if(this.categoryIndex === this.index) {
|
||||
this.chooseCategory(Math.max(0, this.index - 1));
|
||||
} else if(this.categoryIndex > this.index) {
|
||||
this.chooseCategory(this.categoryIndex - 1);
|
||||
}
|
||||
}, true);
|
||||
};
|
||||
|
|
@ -528,16 +512,12 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
}
|
||||
|
||||
subCategoryChanged(callback: Function, save: boolean = false) {
|
||||
if(this.subCategories && save) {
|
||||
this.subCategories.disable();
|
||||
}
|
||||
if(callback) {
|
||||
callback();
|
||||
}
|
||||
this.cdr.detectChanges();
|
||||
if(this.subCategories && save) {
|
||||
this.subCategories.init();
|
||||
this.subCategories.enable();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -640,6 +620,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
|
|||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
|
||||
if(this.subCategoryIndex === this.index) {
|
||||
this.chooseSubcategory(Math.max(0, this.index - 1));
|
||||
} else if(this.subCategoryIndex > this.index) {
|
||||
this.chooseSubcategory(this.subCategoryIndex - 1);
|
||||
}
|
||||
}, true);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,11 +20,12 @@ import {TransitionGroupModule} from "../../utils/transition-group/transition-gro
|
|||
import {NumberRoundModule} from "../../utils/pipes/number-round.module";
|
||||
import {SideBarModule} from "../../dashboard/sharedComponents/sidebar/sideBar.module";
|
||||
import {SidebarMobileToggleModule} from "../../dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
|
||||
import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
|
||||
ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule, SidebarMobileToggleModule
|
||||
ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule, NumberRoundModule, SideBarModule, SidebarMobileToggleModule, SliderTabsModule
|
||||
],
|
||||
declarations: [
|
||||
TopicComponent, IndicatorsComponent
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@ export class StakeholderConfiguration {
|
|||
{icon: 'incognito', value: "PRIVATE", label: 'Private'},
|
||||
];
|
||||
public static CACHE_INDICATORS: boolean = true;
|
||||
public static NUMBER_MULTI_INDICATOR_PATHS = false;
|
||||
public static CHART_MULTI_INDICATOR_PATHS = true;
|
||||
}
|
||||
|
||||
export class StakeholderUtils {
|
||||
|
|
@ -82,6 +84,14 @@ export class StakeholderUtils {
|
|||
return StakeholderConfiguration.CACHE_INDICATORS;
|
||||
}
|
||||
|
||||
get hasMultiNumberIndicatorPaths() {
|
||||
return StakeholderConfiguration.NUMBER_MULTI_INDICATOR_PATHS;
|
||||
}
|
||||
|
||||
get hasMultiChartIndicatorPaths() {
|
||||
return StakeholderConfiguration.CHART_MULTI_INDICATOR_PATHS;
|
||||
}
|
||||
|
||||
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string>(this.visibilities.map(option => [option.value, option.icon]));
|
||||
|
||||
defaultValue(options: Option[]) {
|
||||
|
|
|
|||
|
|
@ -183,6 +183,7 @@ export class Indicator {
|
|||
visibility: Visibility;
|
||||
defaultId: string;
|
||||
indicatorPaths: IndicatorPath[];
|
||||
activePath: number = 0;
|
||||
overlay: Overlay = false;
|
||||
|
||||
constructor(name: string, description: string, additionalDescription:string, type: IndicatorType, width: IndicatorSize,height: IndicatorSize, visibility: Visibility, indicatorPaths: IndicatorPath[], defaultId: string = null) {
|
||||
|
|
|
|||
|
|
@ -214,15 +214,17 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
|
|||
(this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
|
||||
//clear numbers when filters change
|
||||
this.numberResults.clear();
|
||||
let urls: Map<string, [number, number][]> = new Map<string, [number, number][]>();
|
||||
let urls: Map<string, [number, number, number][]> = new Map<string, [number, number, number][]>();
|
||||
this.activeSubCategory.numbers.forEach((section, i) => {
|
||||
section.indicators.forEach((number, j) => {
|
||||
if (this.hasPermission(number.visibility)) {
|
||||
let url = this.getFullUrl(number.indicatorPaths[0]);
|
||||
const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
|
||||
number.indicatorPaths.forEach((indicatorPath, k) => {
|
||||
let url = this.getFullUrl(indicatorPath);
|
||||
const pair = JSON.stringify([indicatorPath.source, url]);
|
||||
const indexes = urls.get(pair) ? urls.get(pair) : [];
|
||||
indexes.push([i, j]);
|
||||
indexes.push([i, j, k]);
|
||||
urls.set(pair, indexes);
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -231,10 +233,10 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
|
|||
let activeSubcategory = this.activeSubCategory._id;
|
||||
this.subscriptions.push(this.statisticsService.getNumbers(this.indicatorUtils.getSourceType(pair[0]), pair[1]).subscribe(response => {
|
||||
if(activeSubcategory === this.activeSubCategory._id) {
|
||||
indexes.forEach(([i, j]) => {
|
||||
indexes.forEach(([i, j, k]) => {
|
||||
if( this.activeSubCategory?.numbers[i]?.indicators[j]) {
|
||||
let result = JSON.parse(JSON.stringify(response));
|
||||
this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[0].jsonPath.forEach(jsonPath => {
|
||||
this.activeSubCategory.numbers[i].indicators[j].indicatorPaths[k].jsonPath.forEach(jsonPath => {
|
||||
if (result) {
|
||||
result = result[jsonPath];
|
||||
}
|
||||
|
|
@ -247,7 +249,7 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
|
|||
} else {
|
||||
result = 0;
|
||||
}
|
||||
this.numberResults.set(i + '-' + j, result);
|
||||
this.numberResults.set(i + '-' + j + '-' + k, result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -255,10 +257,10 @@ export abstract class MonitorIndicatorStakeholderBaseComponent extends Indicator
|
|||
});
|
||||
this.activeSubCategory.charts.forEach((section, i) => {
|
||||
section.indicators.forEach((indicator, j) => {
|
||||
if (indicator.indicatorPaths.length > 0) {
|
||||
indicator.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[0]);
|
||||
this.chartsActiveType.set(i + '-' + j, indicator.indicatorPaths[0]);
|
||||
}
|
||||
indicator.indicatorPaths.forEach((indicatorPath, k) => {
|
||||
indicator.indicatorPaths[k].safeResourceUrl = this.getUrlByStakeHolder(indicator.indicatorPaths[k]);
|
||||
this.chartsActiveType.set(i + '-' + j + '-' + k, indicator.indicatorPaths[k]);
|
||||
});
|
||||
});
|
||||
});
|
||||
if (this.cdr && !(this.cdr as ViewRef).destroyed) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {TransitionGroupItemDirective} from "./transition-group-item.directive";
|
||||
import {
|
||||
AfterViewInit,
|
||||
AfterViewInit, ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChildren,
|
||||
ElementRef, Input,
|
||||
|
|
@ -29,15 +29,14 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
|
|||
@ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;
|
||||
@Input()
|
||||
public id: string;
|
||||
private disabled: boolean = false;
|
||||
public size: number;
|
||||
private subscription: Subscription;
|
||||
|
||||
constructor(public element: ElementRef) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.init();
|
||||
this.subscription = this.items.changes.subscribe(items => {
|
||||
if(!this.disabled) {
|
||||
if(items.length === this.size) {
|
||||
items.forEach(item => item.prevPos = item.newPos || item.prevPos);
|
||||
items.forEach(this.runCallback);
|
||||
this.refreshPosition('newPos');
|
||||
|
|
@ -80,6 +79,7 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
|
|||
init() {
|
||||
this.refreshPosition('prevPos');
|
||||
this.refreshPosition('newPos');
|
||||
this.size = this.items.length;
|
||||
}
|
||||
|
||||
runCallback(item: TransitionGroupItemDirective) {
|
||||
|
|
@ -126,17 +126,17 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
|
|||
|
||||
/**
|
||||
* Enable transition
|
||||
*
|
||||
* @deprecated
|
||||
* */
|
||||
enable() {
|
||||
this.disabled = false;
|
||||
console.debug('Deprecated')
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable transition
|
||||
*
|
||||
* @deprecated
|
||||
* */
|
||||
disable() {
|
||||
this.disabled = true;
|
||||
console.debug('Deprecated')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue