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

[Monitor Dashboard | Trunk]: Some UI changes 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60004 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-12-01 15:43:43 +00:00
parent f51535542e
commit 479463ca63
13 changed files with 244 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
></dashboard-sidebar> ></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Admin" <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Admin"
headerDashboard="Administration Panel" [headerUrl]="'https://' + (properties.environment == 'beta' ? 'beta.' : '') + headerDashboard="Administration Panel" [headerUrl]="'https://' + (properties.environment == 'beta' ? 'beta.' : '') +
'monitor.openaire.eu'" 'monitor.openaire.eu'" headerPosition="right"
[specialMenuItem]="specialSideBarMenuItem" [specialMenuItem]="specialSideBarMenuItem"
></dashboard-sidebar> ></dashboard-sidebar>
<router-outlet></router-outlet> <router-outlet></router-outlet>

20
src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -269,17 +269,17 @@ export class EditStakeholderComponent implements OnDestroy {
this.removePhoto(); this.removePhoto();
this.subscriptions.push(this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, this.subscriptions.push(this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
this.stakeholderFb.value).subscribe(stakeholder => { this.stakeholderFb.value).subscribe(stakeholder => {
UIkit.notification(stakeholder.name + '\'s has been successfully created', { UIkit.notification(stakeholder.name + '\'s has been <b>successfully created</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
callback(stakeholder); callback(stakeholder);
}, error => { }, error => {
UIkit.notification('An error has occurred. Please try again later', { UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
if (errorCallback) { if (errorCallback) {
errorCallback(error) errorCallback(error)
@ -292,17 +292,17 @@ export class EditStakeholderComponent implements OnDestroy {
this.stakeholderFb.get('index_name').enable(); this.stakeholderFb.get('index_name').enable();
this.stakeholderFb.get('index_shortName').enable(); this.stakeholderFb.get('index_shortName').enable();
this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
UIkit.notification(stakeholder.name + '\'s has been successfully saved', { UIkit.notification(stakeholder.name + '\'s has been <b>successfully saved</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
callback(stakeholder); callback(stakeholder);
}, error => { }, error => {
UIkit.notification('An error has occurred. Please try again later', { UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }

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

@ -203,10 +203,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.index = (this.stakeholder) ? this.stakeholders.findIndex(value => value._id === this.stakeholder._id) : -1; this.index = (this.stakeholder) ? this.stakeholders.findIndex(value => value._id === this.stakeholder._id) : -1;
} }
this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, [this.stakeholder._id]).subscribe(() => { this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, [this.stakeholder._id]).subscribe(() => {
UIkit.notification(this.stakeholder.name+ ' has been successfully deleted', { UIkit.notification(this.stakeholder.name+ ' has been <b>successfully deleted</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
if (!this.stakeholder.defaultId) { if (!this.stakeholder.defaultId) {
this.defaultStakeholders.splice(this.index, 1); this.defaultStakeholders.splice(this.index, 1);
@ -216,8 +216,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}, error => { }, error => {
UIkit.notification('An error has occurred. Please try again later', { UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }
@ -228,16 +228,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
]; ];
this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => { this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => {
stakeholder.visibility = visibility; stakeholder.visibility = visibility;
UIkit.notification(stakeholder.name+ '\'s status has been successfully changed to ' + stakeholder.visibility.toLowerCase(), { UIkit.notification(stakeholder.name+ '\'s status has been <b>successfully changed</b> to ' + stakeholder.visibility.toLowerCase(), {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
}, error => { }, error => {
UIkit.notification('An error has occurred. Please try again later', { UIkit.notification('An error has occurred. Please try again later', {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }

3
src/app/monitor/monitor.component.css
View File

@ -0,0 +1,3 @@
.uk-card {
min-height: 270px;
}

133
src/app/monitor/monitor.component.html
View File

@ -76,8 +76,8 @@
</div> </div>
<div inner> <div inner>
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical"> <div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
<div *ngIf="privateStakeholder"> <div *ngIf="privateStakeholder" class="message">
<div class="uk-text-center uk-height-medium"> <div class="uk-text-center">
<h3><i> <h3><i>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
<path d="M0 0h24v24H0z" fill="none"/> <path d="M0 0h24v24H0z" fill="none"/>
@ -91,15 +91,14 @@
</div> </div>
</div> </div>
<div *ngIf="!privateStakeholder"> <div *ngIf="!privateStakeholder">
<div <div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 ||
*ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0)))
(activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0)))
&& ((activeSubCategory && && ((activeSubCategory &&
activeSubCategory.description && activeSubCategory.description &&
activeSubCategory.description.length > 0) || activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" (activeTopic && activeTopic.description && activeTopic.description.length > 0))"
class="uk-text-center"> class="uk-text-center">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
@ -107,65 +106,60 @@
</div> </div>
</div> </div>
<div *ngIf="!loading && !privateStakeholder && <ng-template [ngIf]="!loading && !privateStakeholder &&
(!activeSubCategory || (!activeSubCategory ||
( (
(activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && activeSubCategory.numbers[0].indicators.length == 0)) (activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && countIndicatorsToShow(activeSubCategory.numbers[0].indicators) == 0))
&& &&
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0)) (activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0))
) || !activeTopic || !activeCategory || !activeSubCategory)"> ) || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class=" uk-text-center"> <div class="message uk-text-center">
<h3> <h3>
No indicators available yet. Stay tuned! No indicators available yet. Stay tuned!
</h3> </h3>
</div> </div>
</div> </ng-template>
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top" <ng-template #content>
uk-height-match="target: div.uk-card"> <div class="uk-grid uk-grid-small uk-margin-bottom uk-margin-top"
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> uk-height-match="target: .uk-card">
<h4 *ngIf="countIndicatorsToShow(number.indicators)> 0 " class="uk-width-1-1">{{number.title}}</h4> <ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <h5 *ngIf="countIndicatorsToShow(number.indicators)> 0 "
<div *ngIf="isPublicOrIsMember(indicator.visibility)" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
[class.uk-width-1-3@m]="indicator.width === 'small'" <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
[class.uk-width-1-2@m]="indicator.width === 'medium'" <div *ngIf="isPublicOrIsMember(indicator.visibility)"
[class.uk-width-1-1]="indicator.width === 'large'" class=" uk-margin-bottom"> [ngClass]="getNumberClassBySize(indicator.width)" class=" uk-margin-bottom">
<div class="uk-card uk-card-default" <div class="uk-card uk-card-default"
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()" [class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center"> <div class="uk-card-body uk-text-center">
<div *ngIf="properties.environment == 'development'">Filtered: <div *ngIf="properties.environment == 'development'">Filtered:
{{indicator.indicatorPaths[0].filtersApplied}} {{indicator.indicatorPaths[0].filtersApplied}}
out of out of
{{countSelectedFilters()}}</div> {{countSelectedFilters()}}</div>
<div class="uk-text-bold ">{{indicator.name}}</div> <div class="uk-text-bold ">{{indicator.name}}</div>
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold"> <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span> <span>{{numberResults.get(i + '-' + j) | number}}</span>
</h3> </h3>
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> </ng-template>
</ng-template> </div>
</div> <div>
<div *ngIf="activeSubCategory"> <div *ngFor="let chart of activeSubCategory.charts; let i = index;"
<div *ngFor="let chart of activeSubCategory.charts; let i = index;" class="uk-grid uk-grid-small uk-margin-bottom uk-flex uk-flex-middle "
class="uk-grid uk-grid-medium uk-margin-bottom uk-flex uk-flex-middle " uk-height-match="target: .uk-card">
uk-height-match="target: div > div > div > div > .chartTitle"> <h5 *ngIf="chart.title && chart.title.length > 0 && countIndicatorsToShow(chart.indicators) > 0 "
class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<h3 *ngIf="chart.title && chart.title.length > 0 && countIndicatorsToShow(chart.indicators) > 0 " <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
class="uk-width-1-1 uk-margin-top">{{chart.title}}</h3> <div
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
<div [ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom">
*ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[class.uk-width-1-3@m]="indicator.width === 'small'"
[class.uk-width-1-2@m]="indicator.width === 'medium'"
[class.uk-width-1-1]="indicator.width === 'large'" class="uk-margin-bottom">
<div class="indicatorBox">
<div class="uk-card uk-card-default" <div class="uk-card uk-card-default"
[class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()" [class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()" [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
>
<div class="uk-card-body uk-text-center"> <div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom "> <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div> <div>{{indicator.name + " "}}</div>
@ -191,29 +185,30 @@
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' + [class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"> (indicator.height?indicator.height.toLowerCase():'medium')">
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-template> </div>
</div> </div>
</div> <div class="uk-margin-medium-top uk-flex">
<div *ngIf="!loading && !privateStakeholder && (activeSubCategory || (activeTopic && <!-- Last Stats Date-->
(activeTopic.categories == null || activeTopic.categories.length == 0)))" class="uk-margin-small-top uk-flex"> <div class="uk-width-2-3@m uk-width-1-2">
<!-- Last Stats Date--> <img src="assets/common-assets/graph.svg" style="opacity: 0.4">
<div class="uk-width-2-3@m uk-width-1-2"> <span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a
<img src="assets/common-assets/graph.svg" style="opacity: 0.4"> href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span> <span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}} . Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span> </span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-muted">Send us your <a [href]="mailText" target="_self"
(click)="mailMe()">feedback</a>.</span>
</div>
</div> </div>
<!--Feedback--> </ng-template>
<div class="uk-width-expand uk-text-right">
<span class="uk-text-muted">Send us your <a [href]="mailText" target="_self" (click)="mailMe()">feedback</a>.</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

22
src/app/monitor/monitor.component.ts
View File

@ -12,7 +12,7 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import { import {
Category, Indicator, Category, Indicator,
IndicatorPath, IndicatorPath, IndicatorSize,
Stakeholder, Stakeholder,
SubCategory, SubCategory,
Topic, Topic,
@ -525,4 +525,24 @@ export class MonitorComponent implements OnInit, OnDestroy {
mailMe() { mailMe() {
window.location.href = this.mailText; window.location.href = this.mailText;
} }
public getNumberClassBySize(size: IndicatorSize) {
if(size === 'small') {
return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
} else if(size === 'medium') {
return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
} else {
return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
}
}
public getChartClassBySize(size: IndicatorSize) {
if(size === 'small') {
return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
} else if(size === 'medium') {
return 'uk-width-1-2@l uk-width-1-1';
} else {
return 'uk-width-1-1';
}
}
} }

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

@ -43,9 +43,7 @@
</div> </div>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" <div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-5@m]="indicator.width === 'small'" [ngClass]="getNumberClassBySize(indicator.width)"
[class.uk-width-1-3@m]=" indicator.width === 'medium'"
[class.uk-width-1-2@m]=" indicator.width === 'large'"
[class.disable-sortable]="!canReorder" [class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder"> [class.uk-sortable-nodrag]="!canReorder">
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder"> <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
@ -81,20 +79,21 @@
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold"> <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span> <span>{{numberResults.get(i + '-' + j) | number}}</span>
</h3> </h3>
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div class="disable-sortable uk-sortable-nodrag uk-width-1-1"> <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
<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" <div class="uk-grid uk-grid-small" uk-grid>
(click)="editNumberIndicatorOpen(number)"> <div class="uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1">
<div> <div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
<h5 class="uk-text-bold"> <h5 class="uk-text-bold">
Create a new number Indicator Create a new number Indicator
</h5> </h5>
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large"> <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
<icon name="add" ratio="5"></icon> <icon name="add" ratio="5"></icon>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -147,9 +146,7 @@
</div> </div>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" <div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="indicator.width === 'small'" [ngClass]="getChartClassBySize(indicator.width)"
[class.uk-width-1-2@m]=" indicator.width === 'medium'"
[class.uk-width-1-1@m]="indicator.width === 'large'"
[class.disable-sortable]="!canReorder" [class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder"> [class.uk-sortable-nodrag]="!canReorder">
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder"> <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
@ -185,31 +182,33 @@
<iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' && <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))" safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))" [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
[class]="' uk-width-1-1 uk-height-' + [class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe> (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<!-- <div>Uncomment for iframes preview</div>--> <!-- <div>Uncomment for iframes preview</div>-->
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'"> <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img [class]="' uk-width-1-1 uk-height-' + <img [class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')" [src]="indicator.indicatorPaths[0].url"> (indicator.height?indicator.height.toLowerCase():'medium')"
[src]="indicator.indicatorPaths[0].url">
</div> </div>
<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div class="disable-sortable uk-sortable-nodrag uk-width-1-1"> <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
<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" <div class="uk-grid uk-grid-small" uk-grid>
(click)="editChartIndicatorOpen(chart)"> <div class="uk-width-1-3@xl uk-width-1-2@m uk-width-1-1">
<div> <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
<h5 class="uk-text-bold"> <h5 class="uk-text-bold">
Create a custom indicator Create a custom indicator
</h5> </h5>
<div class="uk-text-muted uk-text-small"> <div class="uk-text-muted uk-text-small">
Use our advance tool to create a custom Indicator that suit the needs of your funding Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's. KPI's.
</div> </div>
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large"> <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
<icon name="add" ratio="5"></icon> <icon name="add" ratio="5"></icon>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -267,7 +266,8 @@
[class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required"> [class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<span>JSON Path</span> <span>JSON Path</span>
</h6> </h6>
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required"> <div
*ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<div class="uk-text-danger uk-text-small"> <div class="uk-text-danger uk-text-small">
This JSON path is not valid or the result has not been calculated yet. This JSON path is not valid or the result has not been calculated yet.
Please press calculate on box below to see the result. Please press calculate on box below to see the result.
@ -302,9 +302,11 @@
<div class="uk-width-1-1 uk-flex uk-flex-center"> <div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-flex uk-position-relative"> <div class="uk-flex uk-position-relative">
<span class="uk-padding number number-preview"> <span class="uk-padding number number-preview">
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span> <span
*ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span>
</span> </span>
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid" class="uk-width-1-1 uk-height-1-1 refresh-indicator"> <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
<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 uk-text-small" <div class="uk-position-center uk-text-center clickable uk-text-small"
(click)="validateJsonPath(i)"> (click)="validateJsonPath(i)">
@ -331,7 +333,7 @@
<div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb"> <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div> <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description && <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description &&
indicator.description.length > 0) || !stakeholder.defaultId)" indicator.description.length > 0) || !stakeholder.defaultId)"
[formInput]="chartIndicatorFb.get('description')" [formInput]="chartIndicatorFb.get('description')"
label="Default Description" type="textarea"> label="Default Description" type="textarea">

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

@ -11,7 +11,7 @@ import {
} from "@angular/core"; } from "@angular/core";
import { import {
Indicator, Indicator,
IndicatorPath, IndicatorPath, IndicatorSize,
IndicatorType, IndicatorType,
Section, Section,
Stakeholder, Stakeholder,
@ -408,6 +408,26 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
return this.chartIndicatorFb.get('indicatorPaths') as FormArray; return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
} }
public getNumberClassBySize(size: IndicatorSize) {
if(size === 'small') {
return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
} else if(size === 'medium') {
return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
} else {
return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
}
}
public getChartClassBySize(size: IndicatorSize) {
if(size === 'small') {
return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
} else if(size === 'medium') {
return 'uk-width-1-2@l uk-width-1-1';
} else {
return 'uk-width-1-1';
}
}
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
@ -792,18 +812,18 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterNumbers(); this.filterNumbers();
this.numberIndicatorFb = null; this.numberIndicatorFb = null;
} }
UIkit.notification('Indicator has been successfully saved', { UIkit.notification('Indicator has been <b>successfully saved</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
this.chartIndicatorFb = null; this.chartIndicatorFb = null;
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));
@ -894,17 +914,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.numbers.find(section => section._id === this.section._id).indicators.splice(this.index, 1); this.numbers.find(section => section._id === this.section._id).indicators.splice(this.index, 1);
this.filterNumbers(); this.filterNumbers();
} }
UIkit.notification('Indicator has been successfully deleted', { UIkit.notification('Indicator has been <b>successfully deleted</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));
@ -922,17 +942,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
]; ];
this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => { this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => {
indicator.visibility = visibility; indicator.visibility = visibility;
UIkit.notification('Indicator has been successfully changed to ' + indicator.visibility.toLowerCase(), { UIkit.notification('Indicator has been <b>successfully changed</b> to ' + indicator.visibility.toLowerCase(), {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification('An error has been occurred. Try again later', { UIkit.notification('An error has been occurred. Try again later', {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));
@ -950,17 +970,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
]; ];
this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(visibility => { this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(visibility => {
indicator.visibility = visibility; indicator.visibility = visibility;
UIkit.notification('Indicator has been successfully changed to ' + (visibility?'public':'private'), { UIkit.notification('Indicator has been <b>successfully changed</b> to ' + (visibility?'public':'private'), {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}); });
@ -983,17 +1003,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterNumbers(); this.filterNumbers();
} }
this.initReorder(); this.initReorder();
UIkit.notification('Section has been successfully saved', { UIkit.notification('Section has been <b>successfully saved</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));
@ -1025,17 +1045,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterNumbers(); this.filterNumbers();
} }
this.initReorder(); this.initReorder();
UIkit.notification('Section has been successfully created', { UIkit.notification('Section has been <b>successfully created</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));
@ -1096,17 +1116,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterNumbers(); this.filterNumbers();
} }
this.initReorder(); this.initReorder();
UIkit.notification('Section has been successfully deleted', { UIkit.notification('Section has been <b>successfully deleted</b>', {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
this.editing = false; this.editing = false;
})); }));

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

@ -54,7 +54,7 @@
<li class="uk-margin-top" [class.uk-visible-toggle]="open"> <li class="uk-margin-top" [class.uk-visible-toggle]="open">
<span (click)="editTopicOpen(-1); $event.preventDefault()" <span (click)="editTopicOpen(-1); $event.preventDefault()"
class="clickable uk-flex uk-flex-middle uk-flex-center"> class="clickable uk-flex uk-flex-middle uk-flex-center">
<span class="uk-icon-button small portal-icon-button" [class.uk-margin-left]="open"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space" [class.uk-hidden]="!open"> Create new topic</span> <span class="uk-hidden-hover space" [class.uk-hidden]="!open"> Create new topic</span>

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

@ -474,8 +474,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
callback(saveElement); callback(saveElement);
UIkit.notification(message, { UIkit.notification(message, {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
if (redirect) { if (redirect) {
this.router.navigate(['../' + saveElement.alias], { this.router.navigate(['../' + saveElement.alias], {
@ -485,8 +485,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }
@ -497,8 +497,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.stakeholderService.setStakeholder(this.stakeholder); this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(message, { UIkit.notification(message, {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
if (redirect) { if (redirect) {
this.back(); this.back();
@ -506,8 +506,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }
@ -526,16 +526,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => { this.subscriptions.push(this.stakeholderService.changeVisibility(this.properties.monitorServiceAPIURL, path, visibility).subscribe(visibility => {
element.visibility = visibility; element.visibility = visibility;
this.stakeholderService.setStakeholder(this.stakeholder); this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + element.visibility.toLowerCase(), { UIkit.notification(StringUtils.capitalize(this.type) + ' has been <b>successfully changed</b> to ' + element.visibility.toLowerCase(), {
status: 'success', status: 'success',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
}, error => { }, error => {
UIkit.notification(error.error.message, { UIkit.notification(error.error.message, {
status: 'danger', status: 'danger',
timeout: 3000, timeout: 6000,
pos: 'top-left' pos: 'bottom-right'
}); });
})); }));
} }

2
src/app/utils/indicator-utils.ts
View File

@ -171,7 +171,7 @@ export class IndicatorUtils {
basicChartTypes:IndicatorPathType[] =["pie", "line", "column", "bar"]; basicChartTypes:IndicatorPathType[] =["pie", "line", "column", "bar"];
defaultChartType:IndicatorPathType = "other"; defaultChartType:IndicatorPathType = "other";
indicatorSizes: Option[] = [ indicatorSizes: Option[] = [
{value: 'small', label: 'Small'}, {value: 'small', label: 'Small(Enabled only for large screens)'},
{value: 'medium', label: 'Medium'}, {value: 'medium', label: 'Medium'},
{value: 'large', label: 'Large'} {value: 'large', label: 'Large'}
]; ];

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

@ -50,9 +50,14 @@
padding: 5px 0; padding: 5px 0;
} }
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a { #sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > *,
display: block; #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
}
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a,
#sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
display: block;
color: rgba(var(--text-color-rgb), 0.5); color: rgba(var(--text-color-rgb), 0.5);
} }
@ -85,7 +90,8 @@
transition-property: left; transition-property: left;
} }
.sidebar_main_swipe #page_content, .sidebar_main_swipe openaire-user > user > *, .sidebar_main_swipe #page_content,
.sidebar_main_swipe openaire-user > user > *,
.sidebar_main_swipe openaire-error > * { .sidebar_main_swipe openaire-error > * {
padding-left: var(--sidebar-width); padding-left: var(--sidebar-width);
padding-top: var(--header-height); padding-top: var(--header-height);
@ -96,6 +102,10 @@
-o-transition: 0.5s; -o-transition: 0.5s;
} }
.sidebar_main_swipe #page_content .message {
padding-left: var(--sidebar-width);
}
.sidebar_main_swipe bottom > * { .sidebar_main_swipe bottom > * {
padding-left: var(--sidebar-width); padding-left: var(--sidebar-width);
transition: 0.5s; transition: 0.5s;
@ -124,6 +134,7 @@
/*Sidebar mini*/ /*Sidebar mini*/
.sidebar_main_swipe.sidebar_mini #page_content, .sidebar_main_swipe.sidebar_mini #page_content,
.sidebar_main_swipe.sidebar_mini #page_content .message,
.sidebar_main_swipe.sidebar_mini openaire-user > user > *, .sidebar_main_swipe.sidebar_mini openaire-user > user > *,
.sidebar_main_swipe.sidebar_mini openaire-error > *, .sidebar_main_swipe.sidebar_mini openaire-error > *,
.sidebar_main_swipe.sidebar_mini bottom > * { .sidebar_main_swipe.sidebar_mini bottom > * {
@ -144,8 +155,16 @@
} }
#page_content { #page_content {
min-height: calc(100vh - var(--header-height)); min-height: calc(70vh - var(--header-height));
background-color: var(--background-color); background-color: var(--background-color);
position: relative;
}
#page_content .message {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
} }
#page_content_header { #page_content_header {

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

@ -14,7 +14,7 @@
.uk-subnav-pill > * > :first-child { .uk-subnav-pill > * > :first-child {
text-transform: none; text-transform: none;
font-size: 13px; font-size: var(--sidebar-font-size);
color: var(--text-color); color: var(--text-color);
} }
@ -35,11 +35,14 @@
.uk-tab > li > a { .uk-tab > li > a {
color: rgb(var(--text-color-rgb), 0.5) !important; color: rgb(var(--text-color-rgb), 0.5) !important;
font-size: var(--small-font-size);
font-family: "Open Sans", sans-serif !important; font-family: "Open Sans", sans-serif !important;
text-transform: capitalize; text-transform: capitalize;
} }
.uk-tab > li > * {
font-size: var(--small-font-size);
}
.uk-tab > li:hover > a { .uk-tab > li:hover > a {
color: var(--secondary-color) !important; color: var(--secondary-color) !important;
} }