MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: 1. Indicator pages changes. 2. fix create new topic bug. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59736 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-11-02 14:46:19 +00:00
parent 3b094da655
commit 4746e10acd
15 changed files with 497 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/app.component.html
View File

@ -5,62 +5,8 @@
<div *ngIf="loading == false"> <div *ngIf="loading == false">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar" <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage"> [class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar" <div class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;">
class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;" >
<!-- <img
*ngIf="((!open && !hasMiniMenu) || !hasSidebar) && (properties.environment === 'beta' || properties.environment === 'development')"
class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
[alt]="properties.environment">-->
<!--<nav class="uk-navbar" [class.uk-light]="!isFrontPage">
<div *ngIf="stakeholder" class="uk-navbar-center">
<schema2jsonld *ngIf="properties" [URL]="properties.domain + properties.baseLink + '/' + stakeholder.alias"
[logoURL]="stakeholder.logoUrl" type="home"
[searchActionRoute]="properties.searchLinkToResults" [searchAction]="false"
[name]="'Monitor Dashboard | ' + this.stakeholder.name"
[description]="stakeholder.name + ' monitoring dashboard'">
</schema2jsonld>
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical uk-padding-remove-right">
&lt;!&ndash;<li>
<a class="uk-logo uk-navbar-item uk-link uk-margin-left "
[routerLink]="'/'+stakeholder.alias">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
</a>
</li>&ndash;&gt;
<li>
<a class="uk-logo uk-navbar-item uk-link "
[routerLink]="'/'+stakeholder.alias">
<div class="uk-text-capitalize uk-h4 uk-text-bold uk-margin-remove">
<span> {{stakeholder.name}}</span>
</div>
</a>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav user_actions">
<li *ngIf="isFrontPage" title="It is comming soon. Stay tuned!">
<a [routerLink]="(isAdmin()?['/admin']:null)">
Manage
</a>
</li>
<li>
<user-mini *ngIf="properties"
[user]="user" [dashboard]="true"
[redirectUrl]="properties.afterLoginRedirectLink"
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain
[userMenuItems]=userMenuItems>
</user-mini>
</li>
</ul>
</div>
</nav>-->
<!-- <navbar *ngIf="properties && showMenu" portal="monitor" [onlyTop]=false [stakeholder]="stakeholder"-->
<!-- [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"-->
<!-- [showMenu]=showMenu [properties]="properties"></navbar>-->
<navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader" <navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar> [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
</div> </div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems" <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"

8
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -83,12 +83,12 @@
</div> </div>
</div> </div>
<div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility"> <div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
<span class="clickable color"> <span class="clickable color">
<icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon> <icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
</span> </span>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility"> <li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
<a *ngIf="stakeholder.visibility != v.value" <a *ngIf="stakeholder.visibility != v.value"
(click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()"> (click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon> <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>

2
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -74,7 +74,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}); });
let data = zip( let data = zip(
this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL), this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL) this.stakeholderService.getMyStakeholders(this.properties.monitorServiceAPIURL)
); );
data.subscribe(res => { data.subscribe(res => {
this.defaultStakeholders = res[0]; this.defaultStakeholders = res[0];

11
src/app/topic/indicators.component.css Normal file
View File

@ -0,0 +1,11 @@
.uk-card {
min-height: 270px;
}
div[id*="number-"] .uk-card-body {
padding-top: 60px;
}
div[id*="chart-"] .uk-card-body {
padding-top: 75px;
}

672
src/app/topic/indicators.component.html
View File

@ -1,296 +1,250 @@
<div *ngIf="stakeholder && canEdit" > <div *ngIf="stakeholder && canEdit">
<div class="uk-padding-small md-bg-white" uk-grid> <div>
<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 class="uk-flex uk-flex-right">
<div> <a class="uk-button uk-button-primary">
<div dashboard-input [formInput]="filters.get('chartType')" <icon name="preview"></icon>
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)" Preview
label="Chart Type"></div> <i uk-icon="chevron-down" class="uk-icon"></i>
</div> </a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
<div> class="uk-padding-remove-horizontal">
<div dashboard-input [formInput]="filters.get('status')" <ul class="uk-nav uk-dropdown-nav uk-margin-left">
type="select" [options]="[all].concat(stakeholderUtils.visibility)" <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}"
label="Status"></div> (click)="hide(element)">Public</a>
</div> </li>
</div> <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> </li>
<div class="uk-inline uk-width-medium"> </ul>
<span class="uk-position-center-right"><i uk-icon="search" class="uk-icon"></i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
</div>
</div>
</div>
<div class=" ">
<div class="uk-flex uk-flex-right">
<a class="uk-button uk-button-primary">
<icon name="preview"></icon>
Preview
<i uk-icon="chevron-down" class="uk-icon"></i>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<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>
</ul>
</div>
</div> </div>
</div> </div>
</div>
<div *ngIf="numberSections">
<h6 class="uk-text-bold">Number Indicators</h6> <h6 class="uk-text-bold">Number Indicators</h6>
<div *ngIf="numberSections"> <ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index">
<ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index"> <div [id]="'number-' + number._id" [class.section]="isAdministrator"
<div [id]="'number-' + number._id" [class.section]="isAdministrator" class="uk-grid-match uk-grid-small uk-grid uk-margin-top"
class="uk-grid-match uk-grid-small uk-grid uk-margin-top" uk-sortable="group: number" uk-grid>
uk-sortable="group: number" uk-grid> <div class="tools disable-sortable uk-sortable-nodrag">
<div class="tools disable-sortable uk-sortable-nodrag"> <div *ngIf="isAdministrator" class="actions">
<div *ngIf="isAdministrator" class="actions"> <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')" title="Create a new section">
title="Create a new section"><i <icon name="add"></icon>
uk-icon="icon:plus;ratio:0.8"></i></a> </a>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>--> <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<a [class.uk-disabled]="editing || number.defaultId " class="" <a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
[title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')" (click)="deleteSectionOpen(number, i, 'number', 'delete')">
(click)="deleteSectionOpen(number, i, 'number', 'delete')"><i uk-icon="icon:close;ratio:0.8"></i> <icon name="close"></icon>
</a> </a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"--> <!-- [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>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"--> <!-- [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>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- </ng-container>--> <!-- </ng-container>-->
</div>
</div> </div>
<div *ngIf="numberSections.at(i)" </div>
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag" <div *ngIf="numberSections.at(i)"
uk-grid> class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="numberSections.at(i).get('title')" <div dashboard-input [formInput]="numberSections.at(i).get('title')"
label="Add a section title"></div> [extraLeft]="false" class="uk-width-1-3"
<div class="uk-width-expand"> placeholder="Write a title for this section">
<button *ngIf="numberSections.at(i).dirty" class="md-btn" [disabled]="editing" <div [class.uk-invisible]="numberSections.at(i).get('title').pristine">
<button class="uk-button uk-button-secondary" [disabled]="editing"
(click)="saveSection(numberSections.at(i).value, i, 'number')"> (click)="saveSection(numberSections.at(i).value, i, 'number')">
Save Save
</button> </button>
</div> </div>
</div> </div>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> </div>
<div *ngIf="indicator" [id]="indicator._id" <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
[class.uk-width-1-5@m]="indicator.width === 'small'" <div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]=" indicator.width === 'medium'" [class.uk-width-1-5@m]="indicator.width === 'small'"
[class.uk-width-1-2@m]=" indicator.width === 'large'" [class.uk-width-1-3@m]=" indicator.width === 'medium'"
[class.disable-sortable]="!canReorder" [class.uk-width-1-2@m]=" indicator.width === 'large'"
[class.uk-sortable-nodrag]="!canReorder"> [class.disable-sortable]="!canReorder"
<div class="uk-card uk-card-default" [class.md-card-hover]="canReorder"> [class.uk-sortable-nodrag]="!canReorder">
<div class="uk-padding-small uk-padding-remove-bottom "> <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
<ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container> <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
<div class="md-card-toolbar-actions uk-float-right" > <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
<i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
<div class="md-card-dropdown uk-inline"> <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<i uk-icon="more-vertical" class="clickable"></i> <ul class="uk-nav uk-dropdown-nav">
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
class="uk-padding-remove-horizontal"> (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
<ul class="uk-nav uk-dropdown-nav uk-margin-left"> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(number._id,
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li> indicator, v.value); hide(element)">
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> {{'Make ' + v.label.toLowerCase()}}</a>
<li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(number._id, </li>
indicator, v.value); hide(element)"> </ng-template>
{{'Make ' + v.label.toLowerCase()}}</a> <hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider">
</li> <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
</ng-template> (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
<hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider"> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a <!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a> <!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- </ng-container>-->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>--> </li>
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>--> </ul>
<!-- </ng-container>-->
</li>
</ul>
</div>
</div>
</div>
</div>
<div class=" uk-padding-small uk-padding-remove-top">
<div class="">
<div class="uk-text-center">
{{indicator.name ? indicator.name : 'No title available'}}
</div>
<div class="uk-width-1-1">
{{indicator.description}}
</div>
<div class="uk-width-1-1">
{{indicator.additionalDescription}}
</div>
</div>
</div> </div>
</div> </div>
</div> <div>
</ng-template> <div class="uk-text-center uk-text-bold">
<div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag uk-width-1-3@m"> {{indicator.name ? indicator.name : 'No title available'}}
<div class="uk-card uk-card-default clickable" (click)="editNumberIndicatorOpen(number)"> </div>
<div class="uk-card-body"> <div *ngIf="indicator.description" class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
<div uk-grid class="uk-text-center"> {{indicator.description}}
<div class="uk-width-1-1 uk-text-center"> </div>
Create a new number Indicator <div *ngIf="indicator.additionalDescription"
</div> class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
<div class="uk-width-1-1 uk-flex uk-flex-center"> {{indicator.additionalDescription}}
<i uk-icon="plus"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> <div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag uk-width-1-1">
<div *ngIf="isAdministrator" class="new-section uk-margin-top"> <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
<div class="tools uk-flex uk-flex-middle"> <div>
<button class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection(-1, 'number')"> <h5 class="uk-text-bold">
<i uk-icon="plus"></i> Create a new number Indicator
</button> </h5>
<span>Create a new section</span> <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large">
<icon name="add" ratio="5"></icon>
</div>
</div>
</div>
</div> </div>
</div> </div>
</ng-template>
<div *ngIf="isAdministrator">
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
</div> </div>
</div>
<div *ngIf="chartSections" class="uk-margin-large-top">
<h6 class="uk-text-bold">Chart Indicators</h6> <h6 class="uk-text-bold">Chart Indicators</h6>
<div *ngIf="chartSections"> <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index"> <div [id]="'chart-' + chart._id"
<div [id]="'chart-' + chart._id" class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top" uk-sortable="group: chart" uk-grid>
uk-sortable="group: chart" uk-grid> <div class="tools disable-sortable uk-sortable-nodrag">
<div class="tools disable-sortable uk-sortable-nodrag"> <div class="actions">
<div class="actions"> <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)" title="Create a new section">
title="Create a new section"><i <icon name="add"></icon>
uk-icon="icon:plus;ratio:0.8"></i></a> </a>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>--> <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<a [class.uk-disabled]="editing || chart.defaultId " <a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
[title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
class="" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i <icon name="close"></icon>
uk-icon="icon:close;ratio:0.8"></i> </a>
</a> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"--> <!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- [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>-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>--> <!-- </button>-->
<!-- </button>--> <!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"--> <!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- [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>-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>--> <!-- </button>-->
<!-- </button>--> <!-- </ng-container>-->
<!-- </ng-container>-->
</div>
</div> </div>
<div *ngIf="chartSections.at(i)" </div>
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag" <div *ngIf="chartSections.at(i)"
uk-grid> class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')" <div dashboard-input [formInput]="chartSections.at(i).get('title')"
label="Add a section title"></div> [extraLeft]="false" class="uk-width-1-3"
<div class="uk-width-expand"> placeholder="Write a title for this section">
<button *ngIf="chartSections.at(i).dirty" class="md-btn" [disabled]="editing" <div [class.uk-invisible]="chartSections.at(i).get('title').pristine">
<button class="uk-button uk-button-secondary" [disabled]="editing"
(click)="saveSection(chartSections.at(i).value, i)"> (click)="saveSection(chartSections.at(i).value, i)">
Save Save
</button> </button>
</div> </div>
</div> </div>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> </div>
<div *ngIf="indicator" [id]="indicator._id" <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
[class.uk-width-1-3@m]="indicator.width === 'small'" <div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-2@m]=" indicator.width === 'medium'" [class.uk-width-1-3@m]="indicator.width === 'small'"
[class.uk-width-1-1@m]="indicator.width === 'large'" [class.uk-width-1-2@m]=" indicator.width === 'medium'"
[class.disable-sortable]="!canReorder" [class.uk-width-1-1@m]="indicator.width === 'large'"
[class.uk-sortable-nodrag]="!canReorder"> [class.disable-sortable]="!canReorder"
<div class="uk-card uk-card-default" [class.md-card-hover]="canReorder"> [class.uk-sortable-nodrag]="!canReorder">
<div class="uk-padding-small uk-padding-remove-bottom "> <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
<ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container> <ng-container *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator}"></ng-container>
<div class="md-card-toolbar-actions uk-float-right" > <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
<div class="md-card-dropdown uk-inline"> <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
<i uk-icon="more-vertical" class="clickable"></i> <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" <ul class="uk-nav uk-dropdown-nav">
class="uk-padding-remove-horizontal"> <li *ngIf="!editing"><a
<ul class="uk-nav uk-dropdown-nav uk-margin-left"> (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
<li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a> </li>
</li> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(chart._id,
<li *ngIf="indicator.visibility != v.value"><a (click)="toggleIndicatorStatus(chart._id,
indicator, v.value); hide(element)"> indicator, v.value); hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a> {{'Make ' + v.label.toLowerCase()}}</a>
</li> </li>
</ng-template> </ng-template>
<hr *ngIf="!indicator.defaultId " class="uk-nav-divider"> <hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
<li *ngIf="!editing && !indicator.defaultId "><a <li *ngIf="!editing && !indicator.defaultId "><a
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)"> (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
Delete</a> Delete</a>
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>--> <!-- <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>--> <!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
</li> </li>
</ul> </ul>
</div>
</div>
</div>
</div>
<div class="uk-padding-small uk-padding-remove-top">
<div class="">
<div class="uk-text-center">
{{indicator.name}}
</div>
<iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
class="uk-width-1-1 uk-height-medium"></iframe>
<!-- <div>Uncomment for iframes preview</div>-->
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[0].url">
</div>
<div class="uk-width-1-1 uk-text-muted uk-text-small">
{{indicator.description ? indicator.description : ''}}
</div>
<div class="uk-width-1-1 uk-text-muted uk-text-small">
{{indicator.additionalDescription ? indicator.additionalDescription : ''}}
</div>
</div>
</div> </div>
</div> </div>
</div> <div>
</ng-template> <div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
<div class="disable-sortable uk-sortable-nodrag uk-width-1-2@m"> {{indicator.name}}
<div class="uk-card uk-card-default clickable" (click)="editChartIndicatorOpen(chart)"> </div>
<div class="uk-card-body"> <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
<div > safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
<div class="uk-text-bold">Create a custom indicator</div> [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
<div class="uk-width-1-1"> class="uk-width-1-1 uk-height-medium"></iframe>
Use our advance tool to create a custom Indicator that suit the needs of your funding <!-- <div>Uncomment for iframes preview</div>-->
KPI's. <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
</div> <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[0].url">
<div class="uk-width-1-1 uk-flex uk-flex-center"> </div>
<i uk-icon="plus"></i> <div *ngIf="indicator.description" class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
</div> {{indicator.description}}
</div>
<div *ngIf="indicator.additionalDescription"
class="uk-width-1-1 uk-text-muted uk-text-small uk-margin-small-top">
{{indicator.additionalDescription}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
<div class="new-section uk-margin-top"> <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
<div class="tools uk-flex uk-flex-middle"> <div>
<button [disabled]="editing" class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection()"> <h5 class="uk-text-bold">
<i uk-icon="plus"></i> Create a custom indicator
</button> </h5>
<span>Create a new section</span> <div class="uk-text-muted uk-text-small">
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-secondary uk-margin-large">
<icon name="add" ratio="5"></icon>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </ng-template>
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
</div> </div>
</div>
<modal-alert #editNumberModal <modal-alert #editNumberModal
[classBody]="'large-modal'" [classBody]="'large-modal'"
(alertOutput)="saveIndicator()" (alertOutput)="saveIndicator()"
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)"> [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
@ -356,51 +310,47 @@
</div> </div>
</modal-alert> </modal-alert>
<modal-alert #editChartModal <modal-alert #editChartModal
[classBody]="'large-modal'" [large]="true"
(alertOutput)="saveIndicator()" (alertOutput)="saveIndicator()"
[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)"> [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
<div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb"> <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
<div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('name')" label="Title"></div> <div class="uk-grid" uk-grid>
<div *ngIf="isAdministrator" dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('description')" <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
label="Description" type="textarea"> <div *ngIf="isAdministrator" dashboard-input class="uk-width-1-1"
</div> [formInput]="chartIndicatorFb.get('description')"
<div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('additionalDescription')" label="Description" type="textarea">
label="Additional information" type="textarea">
</div>
<div class="uk-form-row uk-flex uk-flex-middle">
<div dashboard-input class="uk-width-small" [formInput]="chartIndicatorFb.get('visibility')"
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
</div> </div>
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="chartIndicatorFb.get('width')" <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
label="Additional information" type="textarea">
</div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
label="Status" [options]="stakeholderUtils.visibility" type="select">
</div>
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')"
type="select" [options]="indicatorUtils.indicatorSizes" type="select" [options]="indicatorUtils.indicatorSizes"
label="Chart Size"> label="Chart Size">
</div> </div>
</div> <ng-template [ngIf]="chartIndicatorPaths" formArrayName="indicatorPaths">
<h5 class="uk-text-bold uk-margin-top uk-margin-bottom"> <ng-template ngFor [ngForOf]="chartIndicatorPaths.controls" let-indicatorPath let-i="index"
Chart Settings [formGroup]="toFormGroup(indicatorPath)">
</h5> <div dashboard-input class="uk-width-1-1"
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths"> [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
<div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index" [formInput]="indicatorPath.get('url')"
[formGroup]="indicatorPath"> label="Chart Url"></div>
<div dashboard-input class="uk-form-row" <div *ngIf="urlParameterizedMessage.length > 0" class="uk-alert-warning uk-alert uk-width-1-1">
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''" {{urlParameterizedMessage}}
[formInput]="indicatorPath.get('url')"
label="Chart Url"></div>
<div *ngIf="urlParameterizedMessage.length > 0" class="uk-alert-warning uk-alert">
{{urlParameterizedMessage}}
</div>
<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>
<div *ngIf="getParameter(i, 'subtitle')" class="uk-form-row"> <ng-template formArrayName="parameters">
<div dashboard-input <div *ngIf="getParameter(i, 'title')" class="uk-width-1-1">
[formInput]="getParameter(i, 'subtitle').get('value')" <div dashboard-input
label="Chart Subtitle"></div> [formInput]="getParameter(i, 'title').get('value')"
</div> label="Chart Title"></div>
<div class="uk-grid-medium uk-form-row" uk-grid> </div>
<div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1">
<div dashboard-input
[formInput]="getParameter(i, 'subtitle').get('value')"
label="Chart Subtitle"></div>
</div>
<div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s"> <div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s">
<div dashboard-input [formInput]="indicatorPath.get('type')" <div dashboard-input [formInput]="indicatorPath.get('type')"
type="select" type="select"
@ -436,28 +386,30 @@
<div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')" <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
label="Year (To)"></div> label="Year (To)"></div>
</div> </div>
</div> </ng-template>
</div> <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
<div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl" class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
class="uk-margin-medium-top uk-position-relative"> <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
<div *ngIf="(hasDifference(i)) && !indicatorPath.invalid" class="uk-width-1-1 uk-height-large refresh-iframe">
class="uk-width-1-1 uk-height-medium refresh-iframe"> <div class="uk-position-relative uk-height-1-1">
<div class="uk-position-relative uk-height-1-1"> <div class="uk-position-center uk-text-center clickable"
<div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator()">
(click)="refreshIndicator()"> <div>
<div><i class="material-icons md-color-white">refresh</i></div> <icon name="refresh"></icon>
<span>Click to refresh the graph view</span> </div>
<span>Click to refresh the graph view</span>
</div>
</div> </div>
</div> </div>
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
[src]="indicator.indicatorPaths[i].safeResourceUrl"
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" [src]="indicator.indicatorPaths[i].url">
</div>
</div> </div>
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'" </ng-template>
[src]="indicator.indicatorPaths[i].safeResourceUrl" </ng-template>
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>
</div>
</div>
</div> </div>
</div> </div>
</modal-alert> </modal-alert>
@ -472,18 +424,18 @@
<!-- </span>--> <!-- </span>-->
Are you sure you want to proceed? Are you sure you want to proceed?
</modal-alert> </modal-alert>
<!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">--> <!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">
<!-- You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">--> 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.--> "{{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>--> <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?--> Are you sure you want to proceed?
<!--</modal-alert>--> </modal-alert>
<!--<modal-alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')">--> <modal-alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')">
<!-- You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">--> 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.--> "{{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>--> <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?--> Are you sure you want to proceed?
<!--</modal-alert>--> </modal-alert>-->
<modal-alert #deleteSectionModal (alertOutput)="deleteSection()"> <modal-alert #deleteSectionModal (alertOutput)="deleteSection()">
You are about to delete this section and its indicators permanently. You are about to delete this section and its indicators permanently.
<div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold"> <div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
@ -494,30 +446,46 @@
<!-- </span>--> <!-- </span>-->
Are you sure you want to proceed? Are you sure you want to proceed?
</modal-alert> </modal-alert>
<!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">--> <!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
<!-- You are about to delete this section and its indicators permanently.--> You are about to delete this section and its indicators permanently.
<!-- Are you sure you want to proceed?--> Are you sure you want to proceed?
<!--</modal-alert>--> </modal-alert>
<!--<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">--> <modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
<!-- You are about to delete this section and its indicators permanently.--> You are about to delete this section and its indicators permanently.
<!-- Are you sure you want to proceed?--> Are you sure you want to proceed?
<!--</modal-alert>--> </modal-alert>-->
<ng-template #visibilityOptions let-indicator="indicator" > <ng-template #visibilityOptions let-indicator="indicator">
<span class="uk-invisible-hover uk-padding-remove" (click)="$event.stopPropagation();$event.preventDefault()"> <span class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" class="clickable visibility"></i> <span class="clickable color">
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false"> <icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon>
<ul class="uk-nav uk-dropdown-nav"> </span>
<li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value == indicator.visibility"> <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<a <ul class="uk-nav uk-dropdown-nav">
*ngIf="indicator.visibility != v.value" <li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
(click)="$event.stopPropagation();toggleIndicatorStatus(indicator._id, indicator,v.value);hide(element);$event.preventDefault()"> <a *ngIf="indicator.visibility != v.value"
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}}</a> (click)="$event.stopPropagation();toggleIndicatorStatus(indicator._id, indicator,v.value);hide(element);$event.preventDefault()">
<a *ngIf="indicator.visibility == v.value"> <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}} <icon <span> {{v.label}}</span>
customClass="uk-text-secondary uk-float-right" [ratio]="0.5" </a>
name="bullet"></icon></a> <a *ngIf="indicator.visibility == v.value">
</li> <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
</ul> <span> {{v.label}}</span>
</div> <span class="uk-position-center-right">
</span> <icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
</ng-template> </span>
</a>
</li>
</ul>
</div>
</span>
</ng-template>
<ng-template #new_section let-type="type">
<div class="new-section uk-margin-large-top">
<div class="tools uk-flex uk-flex-middle clickable" (click)="createSection(-1, type)">
<button class="uk-margin-small-right uk-icon-button uk-button-secondary">
<icon name="add" [ratio]="1.5"></icon>
</button>
<span>Create a new section</span>
</div>
</div>
</ng-template>

46
src/app/topic/indicators.component.ts
View File

@ -27,7 +27,6 @@ import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholde
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"; import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {Session} from "../openaireLibrary/login/utils/helper.class"; import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../openaireLibrary/services/user-management.service";
@ -36,7 +35,8 @@ declare var UIkit;
@Component({ @Component({
selector: 'indicators', selector: 'indicators',
templateUrl: './indicators.component.html' templateUrl: './indicators.component.html',
styleUrls: ['indicators.component.css']
}) })
export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
@ -71,11 +71,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
/** /**
* Top filters * Top filters
*/ */
@Input()
public filters: FormGroup; public filters: FormGroup;
public all: Option = {
value: 'all',
label: 'All'
};
/** /**
* Toggles * Toggles
*/ */
@ -213,11 +210,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
} }
private buildFilters() { private buildFilters() {
this.filters = this.fb.group({
chartType: this.fb.control('all'),
status: this.fb.control('all'),
keyword: this.fb.control('')
});
this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe(value => { this.subscriptions.push(this.filters.get('chartType').valueChanges.subscribe(value => {
this.onChartTypeChange(value); this.onChartTypeChange(value);
})); }));
@ -380,6 +372,10 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
return this.chartIndicatorFb.get('indicatorPaths') as FormArray; return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
} }
public toFormGroup(value: any): FormGroup {
return value as FormGroup
}
public addJsonPath(index: number) { public addJsonPath(index: number) {
if(index==0 && this.getJsonPath(index).getRawValue()[index].indexOf(",")!=-1){ if(index==0 && this.getJsonPath(index).getRawValue()[index].indexOf(",")!=-1){
//if in the first path there are more than one paaths comma separated, split them and autogenerate the forms //if in the first path there are more than one paaths comma separated, split them and autogenerate the forms
@ -956,20 +952,22 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
// } // }
deleteSectionOpen(section: Section, index: number, type: IndicatorType, childrenAction: string = null) { deleteSectionOpen(section: Section, index: number, type: IndicatorType, childrenAction: string = null) {
this.sectionTypeToDelete = type; if(!this.editing && !section.defaultId) {
this.sectionChildrenActionOnDelete = null; this.sectionTypeToDelete = type;
if(childrenAction == "delete") { this.sectionChildrenActionOnDelete = null;
this.sectionChildrenActionOnDelete = childrenAction; if (childrenAction == "delete") {
} else if(childrenAction == "disconnect") { this.sectionChildrenActionOnDelete = childrenAction;
this.sectionChildrenActionOnDelete = childrenAction; } else if (childrenAction == "disconnect") {
this.sectionChildrenActionOnDelete = childrenAction;
}
this.section = section;
this.index = index;
this.deleteSectionModal.alertTitle = 'Delete Section';
this.deleteSectionModal.cancelButtonText = 'No';
this.deleteSectionModal.okButtonText = 'Yes';
this.deleteSectionModal.open();
} }
this.section = section;
this.index = index;
this.deleteSectionModal.alertTitle = 'Delete Section';
this.deleteSectionModal.cancelButtonText = 'No';
this.deleteSectionModal.okButtonText = 'Yes';
this.deleteSectionModal.open();
} }
deleteSection() { deleteSection() {

41
src/app/topic/topic.component.html
View File

@ -4,7 +4,7 @@
<div class="uk-text-center"> <div class="uk-text-center">
<a [routerLink]="'/admin/' + stakeholder.alias" <a [routerLink]="'/admin/' + stakeholder.alias"
class="uk-link-heading uk-text-uppercase uk-flex uk-flex-middle uk-flex-center"> class="uk-link-heading uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
<span class="" uk-icon="icon:close;ratio:1.8"></span> <icon name="close" ratio="2"></icon>
<span *ngIf="open" class="uk-margin-left">Indicators</span> <span *ngIf="open" class="uk-margin-left">Indicators</span>
</a> </a>
</div> </div>
@ -14,7 +14,7 @@
<li class="uk-visible-toggle" <li class="uk-visible-toggle"
[class.uk-active]="topicIndex == i"> [class.uk-active]="topicIndex == i">
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias" <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
class="uk-flex uk-flex-middle"> class="uk-flex uk-flex-middle" [title]="topic.name">
<span *ngIf="topic.icon"></span> <span *ngIf="topic.icon"></span>
<div class="uk-width-expand uk-position-relative uk-flex uk-flex-middle" <div class="uk-width-expand uk-position-relative uk-flex uk-flex-middle"
[class.uk-flex-center]="open"> [class.uk-flex-center]="open">
@ -69,12 +69,12 @@
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span> <span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
</div> </div>
</aside> </aside>
<div *ngIf="stakeholder" page-content> <div *ngIf="stakeholder && filters" page-content>
<div header> <div header>
<nav class=" "> <nav>
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class=""> <div *ngIf="stakeholder && stakeholder.topics[topicIndex]">
<ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0" <ul *ngIf="stakeholder.topics[topicIndex]"
class="customTabs uk-tab ignore admin uk-flex uk-flex-middle"> class="customTabs uk-tab ignore admin uk-flex uk-flex-middle" visibility="true">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index"> <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex uk-flex-middle" <li class="uk-visible-toggle uk-flex uk-flex-middle"
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias"> [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
@ -116,9 +116,8 @@
</ul> </ul>
</div> </div>
</nav> </nav>
<ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] && <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex]"
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0" visibility="true" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle">
class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
let-subCategory let-i="index"> let-subCategory let-i="index">
<li [class.uk-active]="(subCategory.alias === <li [class.uk-active]="(subCategory.alias ===
@ -166,11 +165,33 @@
</span> </span>
</li> </li>
</ul> </ul>
<!--<div class="uk-grid uk-margin-medium" 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>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(stakeholderUtils.visibility)"
label="Status"></div>
</div>
</div>
<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">
<span class="uk-position-center-right"><i uk-icon="search" class="uk-icon"></i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
</div>
</div>
</div>-->
</div> </div>
<div inner> <div inner>
<indicators [properties]="properties" <indicators [properties]="properties"
[topicIndex]="topicIndex" [topicIndex]="topicIndex"
[categoryIndex]="categoryIndex" [categoryIndex]="categoryIndex"
[filters]="filters"
[subcategoryIndex]="subCategoryIndex"></indicators> [subcategoryIndex]="subCategoryIndex"></indicators>
</div> </div>
</div> </div>

36
src/app/topic/topic.component.ts
View File

@ -15,10 +15,11 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert"; import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Subscriber, Subscription} from "rxjs"; import {Subscriber, Subscription} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {StakeholderUtils} from "../utils/indicator-utils"; import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class"; import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard"; import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
declare var UIkit; declare var UIkit;
@ -30,6 +31,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
public subscriptions: any[] = []; public subscriptions: any[] = [];
public properties: EnvProperties; public properties: EnvProperties;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public loading: boolean = true; public loading: boolean = true;
public stakeholder: Stakeholder; public stakeholder: Stakeholder;
/** /**
@ -60,7 +62,12 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
@ViewChild('deleteModal') deleteModal: AlertModal; @ViewChild('deleteModal') deleteModal: AlertModal;
@ViewChild('editModal') editModal: AlertModal; @ViewChild('editModal') editModal: AlertModal;
public elementChildrenActionOnDelete: string; public elementChildrenActionOnDelete: string;
public filters: FormGroup;
public all: Option = {
value: 'all',
label: 'All'
};
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
@ -89,9 +96,11 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
} }
this.categoryIndex = 0; this.categoryIndex = 0;
this.subCategoryIndex = 0; this.subCategoryIndex = 0;
// console.debug(this. stakeholder.topics[this.topicIndex]) this.filters = this.fb.group({
// console.debug(this. stakeholder.topics[this.topicIndex].categories) chartType: this.fb.control('all'),
// console.debug( this. stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subCategoryIndex]) status: this.fb.control('all'),
keyword: this.fb.control('')
});
if (this.topicIndex === -1) { if (this.topicIndex === -1) {
this.navigateToError(); this.navigateToError();
} else { } else {
@ -173,7 +182,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
})); }));
} }
public editTopicOpen(index=this.topicIndex) { public editTopicOpen(index= -1) {
this.index = index; this.index = index;
this.type = 'topic'; this.type = 'topic';
if (index === -1) { if (index === -1) {
@ -184,14 +193,21 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.editOpen(); this.editOpen();
} }
public saveTopic(index=this.topicIndex) { public saveTopic() {
this.index = index;
if (!this.form.invalid) { if (!this.form.invalid) {
let path = [this.stakeholder._id]; let path = [this.stakeholder._id];
let callback = (topic: Topic): void => { let callback = (topic: Topic): void => {
this.stakeholder.topics[this.index] = topic; if (this.index === -1) {
this.stakeholder.topics.push(topic);
} else {
this.stakeholder.topics[this.index] = HelperFunctions.copy(topic);
}
}; };
this.save('Topic has been successfully saved', path, this.form.value, callback, true); if (this.index === -1) {
this.save('Topic has been successfully created', path, this.form.value, callback);
} else {
this.save('Topic has been successfully saved', path, this.form.value, callback);
}
} }
} }

4
src/app/topic/topic.module.ts
View File

@ -15,7 +15,7 @@ import {InputModule} from "../openaireLibrary/dashboard/sharedComponents/input/i
import {ClickModule} from "../openaireLibrary/utils/click/click.module"; import {ClickModule} from "../openaireLibrary/utils/click/click.module";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard"; import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service"; import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {preview, bullet, add, earth, lock, group} from "../openaireLibrary/utils/icons/icons"; import {preview, bullet, add, earth, lock, group, refresh, close} from "../openaireLibrary/utils/icons/icons";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@ -37,6 +37,6 @@ import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/p
}) })
export class TopicModule { export class TopicModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([preview, bullet, add, earth, lock, group]); this.iconsService.registerIcons([preview, bullet, add, earth, lock, group, refresh, close]);
} }
} }

2
src/assets/dashboard-theme/main.css
View File

@ -6,3 +6,5 @@
@import "tabs-pills.css"; @import "tabs-pills.css";
@import "card.css"; @import "card.css";
@import "button.css"; @import "button.css";
@import "sortable.css";
@import "notification.css";

19
src/assets/dashboard-theme/notification.css Normal file
View File

@ -0,0 +1,19 @@
.uk-notification-message {
border-radius: 3px;
font-size: var(--small-font-size);
padding: 20px;
}
.uk-notification-message.uk-notification-message-success {
background-color: #e0f0d5;
color: #669a59;
}
.uk-notification-message.uk-notification-message-danger {
background-color: #f2dede;
color: #b25654;
}
.uk-notification-close.uk-close, .uk-notification-close.uk-close:hover {
color: var(--text-color);
}

20
src/assets/dashboard-theme/sortable.css Normal file
View File

@ -0,0 +1,20 @@
.dashboard .uk-sortable > * {
cursor: move;
}
.dashboard .uk-sortable-drag .uk-card.uk-card-hover {
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.dashboard .uk-sortable-drag {
overflow: unset !important;
}
.uk-drag .dashboard .disable-sortable {
pointer-events: none;
}
.dashboard .uk-sortable .uk-sortable-nodrag {
cursor: default;
}

1
src/assets/dashboard-theme/structure.css
View File

@ -67,6 +67,7 @@
#sidebar_switcher_toggle { #sidebar_switcher_toggle {
top: 50%; top: 50%;
color: var(--secondary-color);
transform: translateY(-50%); transform: translateY(-50%);
position: fixed; position: fixed;
background: #ffffff; background: #ffffff;

9
src/assets/dashboard-theme/tabs-pills.css
View File

@ -71,3 +71,12 @@
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.uk-subnav[visibility=true], .uk-tab[visibility=true] {
margin-left: -50px;
}
.uk-subnav[visibility=true] > li:not(:first-child):not(:last-child) > :first-child,
.uk-tab[visibility=true] > li:not(:first-child):not(:last-child) {
padding-left: 0;
}

56
src/assets/new.css
View File

@ -137,6 +137,7 @@
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle { .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
border-color: var(--monitor-portal-color); border-color: var(--monitor-portal-color);
color: var(--monitor-portal-color);
} }
/* Section Tools*/ /* Section Tools*/
@ -154,44 +155,40 @@
top: 0; top: 0;
left: 50%; left: 50%;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
width: 50px;
max-width: 50px;
background: var(--secondary-color);
color: var(--contrast-color);
-webkit-clip-path: polygon(15% 5%, 100% 5%, 100% 100%, 0% 100%);
clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
display: none; display: none;
} }
.dashboard .section:not(.list-view) { .dashboard .section {
border: white solid 1px; border: transparent solid 1px;
} }
.dashboard .section:not(.list-view):hover { .dashboard .section:hover {
border: var(--secondary-color) solid 1px; border: var(--secondary-color) solid 1px;
} }
.dashboard .section:not(.list-view):hover .tools { .dashboard .section:hover .tools {
display: block; display: block;
width: 50px;
background: var(--secondary-color);
color: white;
-webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%);
} }
.dashboard .section:not(.list-view):hover .tools a { .dashboard .section:hover .tools a {
color: white; color: currentColor;
}
.dashboard .section:hover .tools .actions a:last-child {
margin-left: 3px;
} }
/* New section*/ /* New section*/
.dashboard .new-section { .dashboard .new-section {
padding-top: 10px; border: #707070 dashed 1px;
padding-bottom: 10px; border-radius: 2px;
padding-right: 10px;
border: #cecece dashed 2px;
background-color: white; background-color: white;
min-height: 100px; min-height: 200px;
position: relative; position: relative;
box-shadow: 0 2px 6px #00000038;
} }
.dashboard .new-section .tools { .dashboard .new-section .tools {
@ -201,14 +198,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.dashboard .new-section .tools .md-btn {
background-color: var(--secondary-color);
position: relative;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
}
.dashboard .new-section .tools .md-btn .material-icons { .dashboard .new-section .tools .md-btn .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -245,3 +234,14 @@
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
} }
.refresh-iframe {
background-color: rgba(0, 0, 0, 0.50);
border-radius: 4px;
position: absolute;
color: white;
}
.uk-modal-container .uk-modal-dialog {
width: 900px;
}