2020-10-12 14:54:57 +02:00
< div * ngIf = "stakeholder && canEdit" >
< div class = "uk-padding-small md-bg-white" uk-grid >
< div * ngIf = "filters" class = "uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid >
< div >
< div dashboard-input [ formInput ] = " filters . get ( ' chartType ' ) "
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
label="Chart Type">< / div >
< / div >
2020-10-23 15:58:16 +02:00
2020-10-12 14:54:57 +02:00
< div >
< div dashboard-input [ formInput ] = " filters . get ( ' status ' ) "
2020-10-23 15:58:16 +02:00
type="select" [options]="[all].concat(stakeholderUtils.visibility)"
2020-10-12 14:54:57 +02:00
label="Status">< / div >
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-10-12 14:54:57 +02:00
< div class = "uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right" >
< div class = "uk-inline uk-width-medium" >
2020-10-23 15:58:16 +02:00
< span class = "uk-position-center-right" > < i uk-icon = "search" class = "uk-icon" > < / i > < / span >
2020-10-12 14:54:57 +02:00
< div dashboard-input [ formInput ] = " filters . get ( ' keyword ' ) " label = "Locate indicator" > < / div >
< / div >
2020-10-23 15:58:16 +02:00
2019-12-09 15:38:31 +01:00
< / div >
2019-11-08 16:47:47 +01:00
< / div >
2020-10-23 15:58:16 +02:00
< div class = " " >
2019-12-09 15:38:31 +01:00
< div class = "uk-flex uk-flex-right" >
2020-10-23 15:58:16 +02:00
< a class = "uk-button uk-button-primary" >
< icon name = "preview" > < / icon >
2020-01-10 15:20:42 +01:00
Preview
2020-10-23 15:58:16 +02:00
< i uk-icon = "chevron-down" class = "uk-icon" > < / i >
2020-01-10 15:20:42 +01:00
< / a >
< div # element uk-dropdown = "mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
2020-10-12 14:54:57 +02:00
< ul class = "uk-nav uk-dropdown-nav uk-margin-left" >
2020-01-14 20:48:13 +01:00
< li > < a target = "_blank" [ routerLink ] = " preview " [ queryParams ] = " { view: ' public ' } " ( click ) = " hide ( element ) " > Public< / a >
< / li >
< li > < a target = "_blank" [ routerLink ] = " preview " [ queryParams ] = " { view: ' private ' } " ( click ) = " hide ( element ) " > Private< / a >
< / li >
2020-01-10 15:20:42 +01:00
< / ul >
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
2020-10-23 15:58:16 +02:00
< h6 class = "uk-text-bold" > Number Indicators< / h6 >
2020-06-11 12:12:30 +02:00
< div * ngIf = "numberSections" >
< ng-template ngFor [ ngForOf ] = " displayNumbers " let-number let-i = "index" >
2020-10-23 15:58:16 +02:00
< div [ id ] = " ' number- ' + number . _id " [ class . section ] = " isAdministrator "
2020-06-25 10:10:42 +02:00
class="uk-grid-match uk-grid-small uk-grid uk-margin-top"
2020-06-11 12:12:30 +02:00
uk-sortable="group: number" uk-grid>
2020-10-23 15:58:16 +02:00
< div class = "tools disable-sortable uk-sortable-nodrag" >
2020-10-12 14:54:57 +02:00
< div * ngIf = "isAdministrator" class = "actions" >
< a [ class . uk-disabled ] = " editing " class = "" ( click ) = " createSection ( i , ' number ' ) "
2020-06-18 14:03:26 +02:00
title="Create a new section">< i
2020-10-12 14:54:57 +02:00
uk-icon="icon:plus;ratio:0.8">< / i > < / a >
2020-06-11 12:12:30 +02:00
<!-- <button class="md - btn md - btn - mini"><i class="material - icons rotate - 90">drag_indicator</i></button> -->
2020-10-12 14:54:57 +02:00
< a [ class . uk-disabled ] = " editing | | number . defaultId " class = ""
2020-06-24 12:13:29 +02:00
[title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
2020-10-12 14:54:57 +02:00
(click)="deleteSectionOpen(number, i, 'number', 'delete')">< i uk-icon = "icon:close;ratio:0.8" > < / i >
< / a >
2020-06-24 12:13:29 +02:00
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <button [disabled]="editing || number.defaultId " class="md - btn md - btn - mini" -->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')" -->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material - icons">highlight_off</i> -->
<!-- </button> -->
<!-- <button [disabled]="editing || number.defaultId " class="md - btn md - btn - mini" -->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')" -->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material - icons">link_off</i> -->
<!-- </button> -->
<!-- </ng - container> -->
2020-06-11 12:12:30 +02:00
< / div >
< / div >
2020-10-23 15:58:16 +02:00
< div * ngIf = "numberSections.at(i)"
2020-06-11 12:12:30 +02:00
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
uk-grid>
< div dashboard-input class = "uk-width-2-3 uk-width-1-3@m" [ formInput ] = " numberSections . at ( i ) . get ( ' title ' ) "
label="Add a section title">< / div >
< div class = "uk-width-expand" >
2020-06-16 10:23:51 +02:00
< button * ngIf = "numberSections.at(i).dirty" class = "md-btn" [ disabled ] = " editing "
2020-06-11 12:12:30 +02:00
(click)="saveSection(numberSections.at(i).value, i, 'number')">
Save
< / button >
< / div >
< / div >
< ng-template ngFor [ ngForOf ] = " number . indicators " let-indicator let-j = "index" >
< div * ngIf = "indicator" [ id ] = " indicator . _id "
2020-10-23 15:58:16 +02:00
[class.uk-width-1-5@m]="indicator.width === 'small'"
[class.uk-width-1-3@m]=" indicator.width === 'medium'"
[class.uk-width-1-2@m]=" indicator.width === 'large'"
2020-06-11 12:12:30 +02:00
[class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder">
2020-10-12 14:54:57 +02:00
< div class = "uk-card uk-card-default" [ class . md-card-hover ] = " canReorder " >
2020-10-29 10:17:39 +01:00
< div class = "uk-padding-small uk-padding-remove-bottom " >
2020-10-23 15:58:16 +02:00
< ng-container * ngTemplateOutlet = "visibilityOptions; context:{indicator: indicator}" > < / ng-container >
< div class = "md-card-toolbar-actions uk-float-right" >
2020-06-11 12:12:30 +02:00
< div class = "md-card-dropdown uk-inline" >
2020-10-23 15:58:16 +02:00
< i uk-icon = "more-vertical" class = "clickable" > < / i >
2020-06-11 12:12:30 +02:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
2020-10-12 14:54:57 +02:00
< ul class = "uk-nav uk-dropdown-nav uk-margin-left" >
2020-06-18 14:03:26 +02:00
< li * ngIf = "isAdministrator && !indicator.defaultId && !editing" > < a
2020-06-11 12:12:30 +02:00
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit< / a > < / li >
2020-10-23 15:58:16 +02:00
< ng-template ngFor [ ngForOf ] = " stakeholderUtils . visibility " let-v >
< li * ngIf = "indicator.visibility != v.value" > < a ( click ) = " toggleIndicatorStatus ( number . _id ,
indicator, v.value); hide(element)">
{{'Make ' + v.label.toLowerCase()}}< / a >
< / li >
< / ng-template >
2020-06-18 14:03:26 +02:00
< hr * ngIf = "isAdministrator && !indicator.defaultId" class = "uk-nav-divider" >
< li * ngIf = "isAdministrator && !indicator.defaultId && !editing" > < a
2020-06-23 10:33:13 +02:00
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete< / a >
2020-06-24 12:13:29 +02:00
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a> -->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a> -->
<!-- </ng - container> -->
2020-06-11 12:12:30 +02:00
< / li >
< / ul >
< / div >
< / div >
2020-01-14 20:48:13 +01:00
< / div >
2020-10-23 15:58:16 +02:00
2020-06-11 12:12:30 +02:00
< / div >
2020-10-29 10:17:39 +01:00
< div class = " uk-padding-small uk-padding-remove-top" >
< div class = "" >
< div class = "uk-text-center" >
2020-10-23 15:58:16 +02:00
{{indicator.name ? indicator.name : 'No title available'}}
< / div >
2020-06-11 12:12:30 +02:00
< div class = "uk-width-1-1" >
{{indicator.description}}
< / div >
2020-10-29 10:17:39 +01:00
< div class = "uk-width-1-1" >
{{indicator.additionalDescription}}
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
< / div >
< / div >
2020-06-11 12:12:30 +02:00
< / ng-template >
2020-10-23 15:58:16 +02:00
< div * ngIf = "isAdministrator" class = "disable-sortable uk-sortable-nodrag uk-width-1-3@m" >
2020-10-12 14:54:57 +02:00
< div class = "uk-card uk-card-default clickable" ( click ) = " editNumberIndicatorOpen ( number ) " >
2020-10-23 15:58:16 +02:00
< div class = "uk-card-body" >
< div uk-grid class = "uk-text-center" >
< div class = "uk-width-1-1 uk-text-center" >
2020-06-11 12:12:30 +02:00
Create a new number Indicator
< / div >
< div class = "uk-width-1-1 uk-flex uk-flex-center" >
2020-10-12 14:54:57 +02:00
< i uk-icon = "plus" > < / i >
2020-06-11 12:12:30 +02:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
< / div >
< / div >
2019-11-08 16:47:47 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / ng-template >
2020-10-23 15:58:16 +02:00
< div * ngIf = "isAdministrator" class = "new-section uk-margin-top" >
2020-06-11 12:12:30 +02:00
< div class = "tools uk-flex uk-flex-middle" >
2020-10-12 14:54:57 +02:00
< button class = "uk-margin-small-right uk-icon-button portal-button" ( click ) = " createSection ( -1 , ' number ' ) " >
< i uk-icon = "plus" > < / i >
2020-06-11 12:12:30 +02:00
< / button >
< span > Create a new section< / span >
2020-06-09 16:49:52 +02:00
< / div >
< / div >
2020-01-10 15:20:42 +01:00
< / div >
2020-10-23 15:58:16 +02:00
< h6 class = "uk-text-bold" > Chart Indicators< / h6 >
2020-01-14 20:48:13 +01:00
< div * ngIf = "chartSections" >
2020-01-09 14:15:39 +01:00
< ng-template ngFor [ ngForOf ] = " displayCharts " let-chart let-i = "index" >
2020-10-23 15:58:16 +02:00
< div [ id ] = " ' chart- ' + chart . _id "
2020-01-14 20:48:13 +01:00
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
uk-sortable="group: chart" uk-grid>
2020-10-23 15:58:16 +02:00
< div class = "tools disable-sortable uk-sortable-nodrag" >
2020-10-12 14:54:57 +02:00
< div class = "actions" >
< a [ class . uk-disabled ] = " editing " class = "" ( click ) = " createSection ( i ) "
2020-06-18 14:03:26 +02:00
title="Create a new section">< i
2020-10-12 14:54:57 +02:00
uk-icon="icon:plus;ratio:0.8">< / i > < / a >
2020-05-12 17:30:49 +02:00
<!-- <button class="md - btn md - btn - mini"><i class="material - icons rotate - 90">drag_indicator</i></button> -->
2020-10-12 14:54:57 +02:00
< a [ class . uk-disabled ] = " editing | | chart . defaultId "
2020-06-18 14:03:26 +02:00
[title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
2020-10-12 14:54:57 +02:00
class="" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">< i
uk-icon="icon:close;ratio:0.8">< / i >
< / a >
2020-06-24 12:13:29 +02:00
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <button [disabled]="editing || chart.defaultId " class="md - btn md - btn - mini" -->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')" -->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material - icons">highlight_off</i> -->
<!-- </button> -->
<!-- <button [disabled]="editing || chart.defaultId " class="md - btn md - btn - mini" -->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')" -->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material - icons">link_off</i> -->
<!-- </button> -->
<!-- </ng - container> -->
2020-01-09 14:15:39 +01:00
< / div >
< / div >
2020-10-23 15:58:16 +02:00
< div * ngIf = "chartSections.at(i)"
2020-01-14 20:48:13 +01:00
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
uk-grid>
< div dashboard-input class = "uk-width-2-3 uk-width-1-3@m" [ formInput ] = " chartSections . at ( i ) . get ( ' title ' ) "
label="Add a section title">< / div >
2020-01-10 16:49:26 +01:00
< div class = "uk-width-expand" >
2020-06-16 10:23:51 +02:00
< button * ngIf = "chartSections.at(i).dirty" class = "md-btn" [ disabled ] = " editing "
2020-06-11 12:12:30 +02:00
(click)="saveSection(chartSections.at(i).value, i)">
2020-01-10 16:49:26 +01:00
Save
< / button >
< / div >
2020-01-09 14:15:39 +01:00
< / div >
< ng-template ngFor [ ngForOf ] = " chart . indicators " let-indicator let-j = "index" >
< div * ngIf = "indicator" [ id ] = " indicator . _id "
2020-10-23 15:58:16 +02:00
[class.uk-width-1-3@m]="indicator.width === 'small'"
[class.uk-width-1-2@m]=" indicator.width === 'medium'"
[class.uk-width-1-1@m]="indicator.width === 'large'"
2020-01-09 14:15:39 +01:00
[class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder">
2020-10-12 14:54:57 +02:00
< div class = "uk-card uk-card-default" [ class . md-card-hover ] = " canReorder " >
2020-10-23 15:58:16 +02:00
< div class = "uk-padding-small uk-padding-remove-bottom " >
< ng-container * ngTemplateOutlet = "visibilityOptions; context:{indicator: indicator}" > < / ng-container >
< div class = "md-card-toolbar-actions uk-float-right" >
2020-01-09 14:15:39 +01:00
< div class = "md-card-dropdown uk-inline" >
2020-10-23 15:58:16 +02:00
< i uk-icon = "more-vertical" class = "clickable" > < / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; delay-hide: 0; flip: false"
2020-01-09 14:15:39 +01:00
class="uk-padding-remove-horizontal">
2020-10-12 14:54:57 +02:00
< ul class = "uk-nav uk-dropdown-nav uk-margin-left" >
2020-06-24 12:13:29 +02:00
< li * ngIf = "!editing" > < a ( click ) = " editChartIndicatorOpen ( chart , indicator . _id ) ; hide ( element ) " > Edit< / a >
< / li >
2020-10-23 15:58:16 +02:00
< ng-template ngFor [ ngForOf ] = " stakeholderUtils . visibility " let-v >
< li * ngIf = "indicator.visibility != v.value" > < a ( click ) = " toggleIndicatorStatus ( chart . _id ,
indicator, v.value); hide(element)">
{{'Make ' + v.label.toLowerCase()}}< / a >
< / li >
< / ng-template >
2020-06-18 14:03:26 +02:00
< hr * ngIf = "!indicator.defaultId " class = "uk-nav-divider" >
2020-06-24 12:13:29 +02:00
< li * ngIf = "!editing && !indicator.defaultId " > < a
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
2020-06-23 10:33:13 +02:00
Delete< / a >
2020-06-24 12:13:29 +02:00
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a> -->
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a> -->
2020-06-23 10:33:13 +02:00
< / li >
2020-01-09 14:15:39 +01:00
< / ul >
< / div >
2020-01-08 12:00:50 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-06-25 10:10:42 +02:00
2020-10-23 15:58:16 +02:00
< / div >
< div class = "uk-padding-small uk-padding-remove-top" >
< div class = "" >
< div class = "uk-text-center" >
{{indicator.name}}
2020-01-08 12:00:50 +01:00
< / div >
2020-05-13 17:10:44 +02:00
< iframe * ngIf = "indicator.indicatorPaths[0] & & indicator . indicatorPaths [ 0 ] . source ! = = ' image ' & &
2020-06-02 14:45:08 +02:00
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
2020-05-12 13:05:53 +02:00
class="uk-width-1-1 uk-height-medium">< / iframe >
2020-10-23 15:58:16 +02:00
<!-- <div>Uncomment for iframes preview</div> -->
2020-05-12 17:30:49 +02:00
< div * ngIf = "indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'" >
2020-06-24 12:13:29 +02:00
< img class = "uk-width-1-1 uk-height-medium" [ src ] = " indicator . indicatorPaths [ 0 ] . url " >
2020-05-12 13:05:53 +02:00
< / div >
2020-06-25 10:10:42 +02:00
< div class = "uk-width-1-1 uk-text-muted uk-text-small" >
{{indicator.description ? indicator.description : ''}}
< / div >
2020-10-29 10:17:39 +01:00
< div class = "uk-width-1-1 uk-text-muted uk-text-small" >
{{indicator.additionalDescription ? indicator.additionalDescription : ''}}
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< / div >
< / div >
< / div >
2020-01-09 14:15:39 +01:00
< / ng-template >
2020-10-23 15:58:16 +02:00
< div class = "disable-sortable uk-sortable-nodrag uk-width-1-2@m" >
2020-10-12 14:54:57 +02:00
< div class = "uk-card uk-card-default clickable" ( click ) = " editChartIndicatorOpen ( chart ) " >
2020-10-23 15:58:16 +02:00
< div class = "uk-card-body" >
< div >
< div class = "uk-text-bold" > Create a custom indicator< / div >
2020-01-09 14:15:39 +01:00
< div class = "uk-width-1-1" >
Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's.
< / div >
< div class = "uk-width-1-1 uk-flex uk-flex-center" >
2020-10-12 14:54:57 +02:00
< i uk-icon = "plus" > < / i >
2020-01-09 14:15:39 +01:00
< / div >
2020-01-08 12:00:50 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-19 15:25:19 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-01-10 15:20:42 +01:00
< / div >
2020-01-09 14:15:39 +01:00
< / ng-template >
2020-10-23 15:58:16 +02:00
< div class = "new-section uk-margin-top" >
2020-01-14 20:48:13 +01:00
< div class = "tools uk-flex uk-flex-middle" >
2020-10-12 14:54:57 +02:00
< button [ disabled ] = " editing " class = "uk-margin-small-right uk-icon-button portal-button" ( click ) = " createSection ( ) " >
< i uk-icon = "plus" > < / i >
2020-01-14 20:48:13 +01:00
< / button >
< span > Create a new section< / span >
< / div >
< / div >
2020-01-09 14:15:39 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2020-10-12 14:54:57 +02:00
< modal-alert # editNumberModal
2019-11-24 17:30:04 +01:00
[classBody]="'large-modal'"
2019-11-19 15:25:19 +01:00
(alertOutput)="saveIndicator()"
2020-06-09 16:49:52 +02:00
[okDisabled]="numberIndicatorFb & & (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
< div * ngIf = "numberIndicatorFb" class = "uk-padding-small" [ formGroup ] = " numberIndicatorFb " >
< div dashboard-input class = "uk-form-row" [ formInput ] = " numberIndicatorFb . get ( ' name ' ) " label = "Title" > < / div >
2020-10-29 10:17:39 +01:00
< div * ngIf = "isAdministrator" dashboard-input class = "uk-form-row" [ formInput ] = " numberIndicatorFb . get ( ' description ' ) "
2019-12-09 15:38:31 +01:00
label="Description" type="textarea">
< / div >
2020-10-29 10:17:39 +01:00
< div dashboard-input class = "uk-form-row" [ formInput ] = " numberIndicatorFb . get ( ' additionalDescription ' ) "
label="Additional information" type="textarea">
< / div >
2019-12-09 15:38:31 +01:00
< div class = "uk-form-row uk-flex uk-flex-middle" >
2020-10-23 15:58:16 +02:00
< div dashboard-input class = "uk-width-small" [ formInput ] = " numberIndicatorFb . get ( ' visibility ' ) "
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
2019-12-09 15:38:31 +01:00
< / div >
2020-06-09 16:49:52 +02:00
< div dashboard-input class = "uk-margin-small-left uk-width-small" [ formInput ] = " numberIndicatorFb . get ( ' width ' ) "
type="select" [options]="indicatorUtils.indicatorSizes"
label="Number Size">
< / div >
< / div >
< h5 class = "uk-text-bold uk-margin-top uk-margin-bottom" >
Number Settings
< / h5 >
< div * ngIf = "numberIndicatorPaths" formArrayName = "indicatorPaths" >
< div * ngFor = "let indicatorPath of numberIndicatorPaths.controls; let i=index"
[formGroup]="indicatorPath">
< div class = "uk-grid-medium uk-form-row uk-flex uk-flex-middle" uk-grid >
< div class = "uk-width-2-3@s" >
2020-06-11 12:12:30 +02:00
< div dashboard-input [ formInput ] = " indicatorPath . get ( ' url ' ) " type = "textarea" rows = "3"
label="Number path url">< / div >
2020-06-09 16:49:52 +02:00
< / div >
2020-08-06 09:34:41 +02:00
< div * ngIf = "urlParameterizedMessage.length > 0" class = "uk-alert-warning uk-alert" >
{{urlParameterizedMessage}}
< / div >
< div class = "uk-width-1-3@s" >
2020-06-09 16:49:52 +02:00
< div dashboard-input [ formInput ] = " indicatorPath . get ( ' source ' ) " label = "Source"
type="select" [options]="indicatorUtils.sourceTypes">
< / div >
2020-08-06 09:34:41 +02:00
< / div >
2020-06-09 16:49:52 +02:00
< / div >
< div formArrayName = "jsonPath" >
< div class = "uk-margin-top uk-margin-bottom uk-text-large" >
JSON Path
< / div >
< div class = "uk-grid uk-grid-medium" uk-grid >
< div * ngFor = "let jsonPath of getJsonPath(i).controls; let j=index" class = "uk-flex uk-flex-middle" >
< div dashboard-input class = "uk-width-small"
[formInput]="jsonPath"
[label]="'Level ' + +(j + 1)">< / div >
2020-06-11 12:12:30 +02:00
< i * ngIf = "getJsonPath(i).length !== 1"
class="material-icons md-24 uk-margin-left uk-text-danger clickable" (click)="removeJsonPath(i, j)">close< / i >
2020-06-09 16:49:52 +02:00
< div * ngIf = "j < (getJsonPath(i).length - 1)" class = "uk-text-center uk-margin-left" >
< i class = "material-icons" > arrow_forward< / i >
< / div >
< div * ngIf = "j === (getJsonPath(i).length - 1)" class = "uk-margin-left" >
< button class = "md-btn md-btn-small md-btn-primary" ( click ) = " addJsonPath ( i ) " > Add level< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / modal-alert >
< modal-alert # editChartModal
[classBody]="'large-modal'"
(alertOutput)="saveIndicator()"
[okDisabled]="chartIndicatorFb & & (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
< div * ngIf = "chartIndicatorFb" class = "uk-padding-small" [ formGroup ] = " chartIndicatorFb " >
< div dashboard-input class = "uk-form-row" [ formInput ] = " chartIndicatorFb . get ( ' name ' ) " label = "Title" > < / div >
2020-10-29 10:17:39 +01:00
< div * ngIf = "isAdministrator" dashboard-input class = "uk-form-row" [ formInput ] = " chartIndicatorFb . get ( ' description ' ) "
2020-06-09 16:49:52 +02:00
label="Description" type="textarea">
< / div >
2020-10-29 10:17:39 +01:00
< div dashboard-input class = "uk-form-row" [ formInput ] = " chartIndicatorFb . get ( ' additionalDescription ' ) "
label="Additional information" type="textarea">
< / div >
2020-06-09 16:49:52 +02:00
< div class = "uk-form-row uk-flex uk-flex-middle" >
2020-10-23 15:58:16 +02:00
< div dashboard-input class = "uk-width-small" [ formInput ] = " chartIndicatorFb . get ( ' visibility ' ) "
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
2020-06-09 16:49:52 +02:00
< / div >
< div dashboard-input class = "uk-margin-small-left uk-width-small" [ formInput ] = " chartIndicatorFb . get ( ' width ' ) "
type="select" [options]="indicatorUtils.indicatorSizes"
2019-12-09 15:38:31 +01:00
label="Chart Size">
< / div >
< / div >
2019-12-15 23:02:39 +01:00
< h5 class = "uk-text-bold uk-margin-top uk-margin-bottom" >
Chart Settings
< / h5 >
2020-06-09 16:49:52 +02:00
< div * ngIf = "chartIndicatorPaths" formArrayName = "indicatorPaths" >
< div * ngFor = "let indicatorPath of chartIndicatorPaths.controls; let i=index"
2019-12-09 15:38:31 +01:00
[formGroup]="indicatorPath">
2019-12-13 16:56:48 +01:00
< div dashboard-input class = "uk-form-row"
2020-06-02 14:45:08 +02:00
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
2019-12-13 16:56:48 +01:00
[formInput]="indicatorPath.get('url')"
label="Chart Url">< / div >
2020-06-02 14:45:08 +02:00
< div * ngIf = "urlParameterizedMessage.length > 0" class = "uk-alert-warning uk-alert" >
{{urlParameterizedMessage}}
< / div >
2019-12-09 15:38:31 +01:00
< div formArrayName = "parameters" >
< div * ngIf = "getParameter(i, 'title')" class = "uk-form-row" >
< div dashboard-input
[formInput]="getParameter(i, 'title').get('value')"
label="Chart Title">< / div >
< / div >
< div * ngIf = "getParameter(i, 'subtitle')" class = "uk-form-row" >
< div dashboard-input
[formInput]="getParameter(i, 'subtitle').get('value')"
label="Chart Subtitle">< / div >
< / div >
< div class = "uk-grid-medium uk-form-row" uk-grid >
2020-06-02 17:44:45 +02:00
< div * ngIf = "!getParameter(i, 'type')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " indicatorPath . get ( ' type ' ) "
type="select"
[options]="(indicatorPath.get('type').value == 'table' & & getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
label="Chart Type">< / div >
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'type')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' type ' ) . get ( ' value ' ) "
2020-06-02 17:44:45 +02:00
type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
2019-12-09 15:38:31 +01:00
label="Chart Type">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'xAxisTitle')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' xAxisTitle ' ) . get ( ' value ' ) "
label="X-Axis Title">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'yAxisTitle')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' yAxisTitle ' ) . get ( ' value ' ) "
label="Y-Axis Title">< / div >
2019-11-24 17:30:04 +01:00
< / div >
2020-05-28 11:35:57 +02:00
< div * ngIf = "getParameter(i, 'data_title_0')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' data_title_0 ' ) . get ( ' value ' ) "
label="Data title">< / div >
< / div >
< div * ngIf = "getParameter(i, 'data_title_1')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' data_title_1 ' ) . get ( ' value ' ) "
label="Data title">< / div >
< / div >
2019-12-09 15:38:31 +01:00
< div * ngIf = "getParameter(i, 'start_year')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' start_year ' ) . get ( ' value ' ) "
label="Year (From)">< / div >
< / div >
< div * ngIf = "getParameter(i, 'end_year')" class = "uk-width-1-3@s" >
< div dashboard-input [ formInput ] = " getParameter ( i , ' end_year ' ) . get ( ' value ' ) "
label="Year (To)">< / div >
< / div >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-13 16:56:48 +01:00
< div * ngIf = "indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
2019-12-09 15:38:31 +01:00
class="uk-margin-medium-top uk-position-relative">
2019-12-15 23:02:39 +01:00
< div * ngIf = "(hasDifference(i)) && !indicatorPath.invalid"
2019-12-09 15:38:31 +01:00
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()">
< div > < i class = "material-icons md-color-white" > refresh< / i > < / div >
< span > Click to refresh the graph view< / span >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
< iframe * ngIf = "indicator.indicatorPaths[i].source !== 'image'"
[src]="indicator.indicatorPaths[i].safeResourceUrl"
class="uk-width-1-1 uk-height-medium">< / iframe >
< div * ngIf = "indicator.indicatorPaths[i].source === 'image'" >
< img class = "uk-width-1-1 uk-height-medium" [ src ] = " indicator . indicatorPaths [ i ] . url " >
< / div >
2019-11-24 17:30:04 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-19 15:25:19 +01:00
< / div >
2019-12-09 15:38:31 +01:00
< / div >
2019-11-20 11:32:28 +01:00
< / modal-alert >
2019-12-19 12:17:32 +01:00
< modal-alert # deleteModal ( alertOutput ) = " deleteIndicator ( ) " >
You are about to delete < span class = "uk-text-bold" * ngIf = "indicator && index !== -1" >
2020-01-08 12:00:50 +01:00
"{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"< / span > indicator permanently.
2020-06-23 10:33:13 +02:00
< div * ngIf = "indicatorChildrenActionOnDelete == 'delete'" class = "uk-text-bold" >
Indicators of all profiles based on this default indicator, will be deleted as well.
< / div >
2020-06-24 12:13:29 +02:00
<!-- <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk - text - bold"> -->
<!-- Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore. -->
<!-- </span> -->
2019-12-19 12:17:32 +01:00
Are you sure you want to proceed?
< / modal-alert >
2020-06-23 10:33:13 +02:00
<!-- <modal - alert #deleteAllModal (alertOutput)="deleteIndicator('delete')"> -->
<!-- You are about to delete <span class="uk - text - bold" *ngIf="indicator && index !== - 1"> -->
<!-- "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently. -->
<!-- <span class="uk - text - bold">Indicators of all profiles based on this default indicator, will be deleted as well.</span> -->
<!-- Are you sure you want to proceed? -->
<!-- </modal - alert> -->
<!-- <modal - alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')"> -->
<!-- You are about to delete <span class="uk - text - bold" *ngIf="indicator && index !== - 1"> -->
<!-- "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently. -->
<!-- <span class="uk - text - bold">Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.</span> -->
<!-- Are you sure you want to proceed? -->
<!-- </modal - alert> -->
< modal-alert # deleteSectionModal ( alertOutput ) = " deleteSection ( ) " >
You are about to delete this section and its indicators permanently.
2020-06-25 10:10:42 +02:00
< div * ngIf = "sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class = "uk-text-bold" >
2020-06-23 10:33:13 +02:00
Sections of all profiles based on this default section and their contents, will be deleted as well.
< / div >
2020-06-24 12:13:29 +02:00
<!-- <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk - text - bold"> -->
<!-- Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore. -->
<!-- </span> -->
2020-05-12 17:30:49 +02:00
Are you sure you want to proceed?
< / modal-alert >
2020-06-23 10:33:13 +02:00
<!-- <modal - alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')"> -->
<!-- You are about to delete this section and its indicators permanently. -->
<!-- Are you sure you want to proceed? -->
<!-- </modal - alert> -->
<!-- <modal - alert #deleteChartSectionModal (alertOutput)="deleteSection()"> -->
<!-- You are about to delete this section and its indicators permanently. -->
<!-- Are you sure you want to proceed? -->
<!-- </modal - alert> -->
2020-10-23 15:58:16 +02:00
< ng-template # visibilityOptions let-indicator = "indicator" >
< span class = "uk-invisible-hover uk-padding-remove" ( click ) = " $ event . stopPropagation ( ) ; $ event . preventDefault ( ) " >
2020-10-31 17:02:30 +01:00
< i [ attr . uk-icon ] = " stakeholderUtils . visibilityIcon . get ( indicator . visibility ) " class = "clickable visibility" > < / i >
2020-10-23 15:58:16 +02:00
< div # element uk-dropdown = "mode: click; pos: bottom-left; delay-hide: 0; flip: false" >
< ul class = "uk-nav uk-dropdown-nav" >
< li * ngFor = "let v of stakeholderUtils.visibility" [ class . selectedVisibility ] = " v . value = = indicator . visibility " >
< a
*ngIf="indicator.visibility != v.value"
(click)="$event.stopPropagation();toggleIndicatorStatus(indicator._id, indicator,v.value);hide(element);$event.preventDefault()">
2020-10-31 17:02:30 +01:00
< i [ attr . uk-icon ] = " stakeholderUtils . visibilityIcon . get ( v . value ) " > < / i > {{v.label}}< / a >
2020-10-23 15:58:16 +02:00
< a * ngIf = "indicator.visibility == v.value" >
2020-10-31 17:02:30 +01:00
< i [ attr . uk-icon ] = " stakeholderUtils . visibilityIcon . get ( v . value ) " > < / i > {{v.label}} < icon
2020-10-23 15:58:16 +02:00
customClass="uk-text-secondary uk-float-right" [ratio]="0.5"
name="bullet">< / icon > < / a >
< / li >
< / ul >
< / div >
< / span >
< / ng-template >
