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

Topics: Add reorder functionality. Change sticky header to sticky actions in general, monitor and manage stakeholders

This commit is contained in:
Konstantinos Triantafyllou 2022-07-14 14:38:20 +03:00
parent 14a4a6e393
commit 3ffed87ad4
15 changed files with 271 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app-routing.module.ts
View File

@ -11,6 +11,11 @@ const routes: Routes = [
loadChildren: () => import('./reload/libReload.module').then(m => m.LibReloadModule), loadChildren: () => import('./reload/libReload.module').then(m => m.LibReloadModule),
data: {hasSidebar: false} data: {hasSidebar: false}
}, },
{
path: 'user-info',
loadChildren: () => import('./login/libUser.module').then(m => m.LibUserModule),
data: {hasSidebar: false}
},
{ {
path: 'error', path: 'error',
component: OpenaireErrorPageComponent, component: OpenaireErrorPageComponent,

19
src/app/app.component.ts
View File

@ -46,7 +46,6 @@ export class AppComponent implements OnInit, OnDestroy {
logoSmallUrl: null, logoSmallUrl: null,
position: 'center', position: 'center',
badge: true, badge: true,
stickyAnimation: true,
menuPosition: "center" menuPosition: "center"
}; };
@ -305,29 +304,26 @@ export class AppComponent implements OnInit, OnDestroy {
, null, null, null, null), items: [] , null, null, null, null), items: []
}); });
} }
if (!this.hasAdminMenu && this.isFrontPage) { if (!this.hasAdminMenu && this.isFrontPage) {
this.menuHeader = { this.menuHeader = {
route: "/" + this.stakeholder.alias, route: null,
url: null, url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: this.stakeholder.name, title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg', logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg", logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
position: 'center', position: 'center',
badge: true, badge: true,
stickyAnimation: true,
menuPosition: "center" menuPosition: "center"
}; };
} else { } else {
this.menuHeader = { this.menuHeader = {
route: "/" + this.stakeholder.alias, route: null,
url: null, url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
title: this.stakeholder.name, title: "Monitor",
logoUrl: 'assets/common-assets/logo-services/monitor/small.svg', logoUrl: 'assets/common-assets/logo-services/monitor/small.svg',
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg", logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'center', position: 'center',
badge: false, badge: true,
stickyAnimation: true,
menuPosition: "center" menuPosition: "center"
}; };
} }
@ -342,7 +338,6 @@ export class AppComponent implements OnInit, OnDestroy {
logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg", logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
position: 'left', position: 'left',
badge: true, badge: true,
stickyAnimation: true,
menuPosition: "center" menuPosition: "center"
}; };
this.menuItems.push({ this.menuItems.push({

15
src/app/general/general.component.html
View File

@ -1,6 +1,6 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content>
<div header *ngIf="stakeholder"> <div header *ngIf="stakeholder">
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply"> <img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div>
@ -8,9 +8,9 @@
</div> </div>
</div> </div>
</div> </div>
<div inner> <div actions>
<div *ngIf="stakeholder" class="uk-container"> <div class="uk-section-xsmall uk-container">
<div class="uk-margin-top uk-flex uk-flex-center uk-flex-right@m"> <div class="uk-flex uk-flex-center uk-flex-right@m">
<button class="uk-button uk-button-default uk-margin-right" <button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="loading || !editStakeholderComponent.dirty" (click)="reset()" [class.uk-disabled]="loading || !editStakeholderComponent.dirty"
[disabled]="loading || !editStakeholderComponent.dirty">Reset [disabled]="loading || !editStakeholderComponent.dirty">Reset
@ -19,6 +19,11 @@
(click)="save()" [disabled]="loading || editStakeholderComponent.disabled">Save (click)="save()" [disabled]="loading || editStakeholderComponent.disabled">Save
</button> </button>
</div> </div>
</div>
</div>
<div inner>
<div *ngIf="stakeholder" class="uk-container">
<div class="uk-position-relative" style="min-height: 60vh"> <div class="uk-position-relative" style="min-height: 60vh">
<div [class.uk-hidden]="loading" class="uk-section uk-section-small"> <div [class.uk-hidden]="loading" class="uk-section uk-section-small">
<edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder> <edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder>

1
src/app/general/general.component.ts
View File

@ -20,7 +20,6 @@ export class GeneralComponent implements OnInit, OnDestroy {
public loading: boolean = false; public loading: boolean = false;
private subscriptions: any[] = []; private subscriptions: any[] = [];
@ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent; @ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
public stickyPageHeader: boolean = false;
constructor(private stakeholderService: StakeholderService, constructor(private stakeholderService: StakeholderService,
private title: Title) { private title: Title) {

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

@ -1,6 +1,6 @@
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content>
<div header> <div header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top info">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6"> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
Admin Dashboard - Manage profiles Admin Dashboard - Manage profiles
@ -14,11 +14,15 @@
<li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li> <li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>
</ul> </ul>
</div> </div>
<div inner> <div actions>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-margin-top"> <div class="uk-section-xsmall">
<div search-input [searchControl]="filters.get('keyword')" [expandable]="true" placeholder="Search Profiles" searchInputClass="outer" <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-right"></div> <div search-input [searchControl]="filters.get('keyword')" [expandable]="true" placeholder="Search Profiles" searchInputClass="outer"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-right"></div>
</div>
</div> </div>
</div>
<div inner>
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large"> <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
<loading></loading> <loading></loading>
</div> </div>

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

@ -33,7 +33,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder; public stakeholder: Stakeholder;
public index: number; public index: number;
public user = null; public user = null;
public stickyPageHeader: boolean = false;
public tab: Tab = 'all'; public tab: Tab = 'all';
public stakeholderEntities = StakeholderEntities; public stakeholderEntities = StakeholderEntities;
/** /**

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

@ -39,27 +39,31 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div page-content (stickyEmitter)="stickyPageHeader = $event"> <div page-content>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header> <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply"> <img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1> <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div> </div>
</div> </div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top"> </div>
<ul class="uk-tab"> <div actions>
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category> <div class="uk-margin-top">
<li *ngIf="isPublicOrIsMember(category.visibility)" <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic">
[class.uk-active]="category.alias === activeCategory.alias"> <ul class="uk-tab">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]" <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
[queryParams]="queryParams"> <li *ngIf="isPublicOrIsMember(category.visibility)"
<span class="title">{{category.name}}</span> [class.uk-active]="category.alias === activeCategory.alias">
</a> <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
</li> [queryParams]="queryParams">
</ng-template> <span class="title">{{category.name}}</span>
</ul> </a>
</li>
</ng-template>
</ul>
</div>
</div> </div>
</div> </div>
<div inner> <div inner>
@ -85,162 +89,164 @@
</div> </div>
</div> </div>
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section"> <div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0)) <div class="uk-padding uk-padding-remove-vertical">
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) || <div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || && ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center"> (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> (activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}} : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
</div> (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
</div>
<ng-template [ngIf]="!loading && !privateStakeholder &&
(!activeSubCategory ||
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class="message uk-text-center">
<h3>
No indicators available yet. Stay tuned!
</h3>
</div>
</ng-template>
<ng-template #content>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"
class="uk-margin-bottom">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center">
<!--<div *ngIf="properties.environment === 'development'">
Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
</div>-->
<div class="number uk-text-bold uk-text-background">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)"
class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<!-- <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding-small">
<div *ngIf="indicator.description">
{{indicator.description}}
</div>
<div *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</div>
</div>
</div> -->
</div>
</div>
</ng-template>
</div> </div>
</ng-container> </div>
<div [class.uk-margin-large-top]="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0"> <ng-template [ngIf]="!loading && !privateStakeholder &&
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;"> (!activeSubCategory ||
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0" ((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class="message uk-text-center">
<h3>
No indicators available yet. Stay tuned!
</h3>
</div>
</ng-template>
<ng-template #content>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid
uk-height-match="target: .uk-card"> uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)" <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"
[ngClass]="getChartClassBySize(indicator.width)"> class="uk-margin-bottom">
<div class="uk-card uk-card-default uk-position-relative" <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center uk-margin-small-bottom"> <div class="uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<!--<div *ngIf="properties.environment === 'development'"> <!--<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
{{countSelectedFilters()}}</div>--> </div>-->
<iframe <div class="number uk-text-bold uk-text-background">
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'" <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
class="uk-width-1-1 uk-blend-multiply" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div> </div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'" <!-- for printing only -->
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl" <span *ngIf="numberResults.get(i + '-' + j)"
class="uk-width-1-1 uk-blend-multiply" class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"> <!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription" <!-- <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom"> class="uk-overlay uk-position-bottom">
<a class="uk-display-inline-block uk-button uk-button-text" <div class="uk-padding-small">
(click)="toggleDescriptionOverlay($event, j)"> <div *ngIf="indicator.description">
<span class="uk-flex uk-flex-middle"> {{indicator.description}}
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="custom-description-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<icon name="close" ratio="1"></icon>
</button>
</div> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div *ngIf="indicator.additionalDescription">
<p *ngIf="indicator.description"> {{indicator.additionalDescription}}
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="printGap uk-hidden"></div>
</ng-template> </ng-template>
</div> </div>
</ng-container> </ng-container>
</div> <div [class.uk-margin-large-top]="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0">
<div class="uk-margin-medium-top uk-text-small uk-flex hideInfo"> <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<!-- Last Stats Date--> <div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
<div class="uk-width-2-3@m uk-width-1-2"> class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
<icon name="graph" customClass="text-graph"></icon> uk-height-match="target: .uk-card">
<span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span> <h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta"> <div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}} [ngClass]="getChartClassBySize(indicator.width)">
</span> <div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<!--<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>-->
<iframe
*ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
<img class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
src="assets/chart-placeholder.png">
</div>
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
<a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="custom-description-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="printGap uk-hidden"></div>
</ng-template>
</div>
</ng-container>
</div> </div>
<!--Feedback--> <div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
<div class="uk-width-expand uk-text-right"> <!-- Last Stats Date-->
<span class="uk-text-meta">Send us your </span> <div class="uk-width-2-3@m uk-width-1-2">
<a class="uk-link" [href]="feedback" target="_self">feedback</a> <icon name="graph" customClass="text-graph"></icon>
<span class="uk-text-meta">.</span> <span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-meta">Send us your </span>
<a class="uk-link" [href]="feedback" target="_self">feedback</a>
<span class="uk-text-meta">.</span>
</div>
</div> </div>
</div> </ng-template>
</ng-template> </div>
</div> </div>
</div> </div>
</div> </div>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 770c3fb3eff99ddab059f0de657f576443b01a7d Subproject commit 013ce7d5f45dd64e28e82585451b2741c41f9d2e

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

@ -42,7 +42,7 @@
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon> <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0"> <div #element class="uk-dropdown" uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
<li><a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a></li> <li><a (click)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a></li>

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

@ -15,11 +15,11 @@
</ul> </ul>
</div> </div>
<div class="menu_section uk-margin-large-top"> <div class="menu_section uk-margin-large-top">
<ul class="uk-list uk-nav uk-nav-default" uk-nav> <ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index"> <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="topicIndex == i"> <li class="uk-visible-toggle" [class.uk-active]="topicIndex == i" transition-group-item>
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias" <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
[title]="topic.name"> [attr.uk-tooltip]="'title: ' + topic.name + '; delay: 500'">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="topic.icon" class="uk-width-auto"> <div *ngIf="topic.icon" class="uk-width-auto">
<icon class="menu-icon" [svg]="topic.icon" [flex]="true"></icon> <icon class="menu-icon" [svg]="topic.icon" [flex]="true"></icon>
@ -38,13 +38,35 @@
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
<li> <li>
<a (click)="editTopicOpen(i); hide(element)">Edit</a> <a (click)="editTopicOpen(i); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="edit" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Edit</span>
</div>
</a>
</li>
<li class="uk-nav-divider"></li>
<li *ngIf="i > 0">
<a (click)="hide(element);moveTopic(i)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="north" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Up</span>
</div>
</a>
</li>
<li *ngIf="i < stakeholder.topics.length - 1">
<a (click)="hide(element);moveTopic(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="south" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Down</span>
</div>
</a>
</li> </li>
<li class="uk-nav-divider"></li> <li class="uk-nav-divider"></li>
</ng-container> </ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="topic.visibility === v.value"> <li [class.uk-active]="topic.visibility === v.value">
<a (click)="changeTopicStatus(i, v.value);"> <a (click)="changeTopicStatus(i, v.value)">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon> <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span> <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
@ -55,13 +77,18 @@
</ng-template> </ng-template>
<ng-container *ngIf="!topic.defaultId && isCurator"> <ng-container *ngIf="!topic.defaultId && isCurator">
<li class="uk-nav-divider"> <li class="uk-nav-divider">
<li> <li>
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</a> <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
<!--<ng-container *ngIf="!stakeholder.defaultId"> <div class="uk-flex uk-flex-middle">
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a> <icon [flex]="true" name="delete" ratio="0.6"></icon>
<a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a> <span class="uk-margin-small-left uk-width-expand">Delete</span>
</ng-container>--> </div>
</li> </a>
<!--<ng-container *ngIf="!stakeholder.defaultId">
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>
<a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>
</ng-container>-->
</li>
</ng-container> </ng-container>
</ul> </ul>
</div> </div>

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

@ -16,6 +16,9 @@ import {Option} from "../openaireLibrary/sharedComponents/input/input.component"
import {properties} from "../../environments/environment"; import {properties} from "../../environments/environment";
import {Session, User} from "../openaireLibrary/login/utils/helper.class"; import {Session, User} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {TransitionGroupComponent} from "../openaireLibrary/utils/transition-group/transition-group.component";
import {error} from "protractor";
import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";
declare var UIkit; declare var UIkit;
@ -59,6 +62,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
@ViewChild('deleteModal', {static: true}) deleteModal: AlertModal; @ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
@ViewChild('editModal', {static: true}) editModal: AlertModal; @ViewChild('editModal', {static: true}) editModal: AlertModal;
@ViewChild("topics") topics: TransitionGroupComponent;
public elementChildrenActionOnDelete: string; public elementChildrenActionOnDelete: string;
public filters: FormGroup; public filters: FormGroup;
public all: Option = { public all: Option = {
@ -209,6 +214,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
let callback = (topic: Topic): void => { let callback = (topic: Topic): void => {
if (this.index === -1) { if (this.index === -1) {
this.stakeholder.topics.push(topic); this.stakeholder.topics.push(topic);
this.topics.init();
} else { } else {
this.stakeholder.topics[this.index] = HelperFunctions.copy(topic); this.stakeholder.topics[this.index] = HelperFunctions.copy(topic);
} }
@ -230,7 +236,6 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.changeStatus(this.stakeholder.topics[index], path, visibility); this.changeStatus(this.stakeholder.topics[index], path, visibility);
} }
public deleteTopicOpen(index = this.topicIndex, childrenAction: string = null) { public deleteTopicOpen(index = this.topicIndex, childrenAction: string = null) {
this.type = 'topic'; this.type = 'topic';
this.index = index; this.index = index;
@ -246,10 +251,26 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
let callback = (): void => { let callback = (): void => {
this.topicIndex = Math.max(0, this.index - 1); this.topicIndex = Math.max(0, this.index - 1);
this.stakeholder.topics.splice(this.index, 1); this.stakeholder.topics.splice(this.index, 1);
this.topics.init();
}; };
this.delete('Topic has been successfully be deleted', path, callback, (this.topicIndex === this.index)); this.delete('Topic has been successfully be deleted', path, callback, (this.topicIndex === this.index));
} }
public moveTopic(index: number, newIndex: number = index - 1) {
this.topics.init();
let path = [this.stakeholder._id];
let ids = this.stakeholder.topics.map(topic => topic._id);
HelperFunctions.swap(ids, index, newIndex);
this.stakeholderService.reorderElements(properties.monitorServiceAPIURL, path, ids).subscribe(() => {
HelperFunctions.swap(this.stakeholder.topics, index, newIndex);
if(this.topicIndex === index) {
this.topicIndex = newIndex;
}
}, error => {
NotificationHandler.rise(error.error.message)
});
}
public chooseCategory(index: number) { public chooseCategory(index: number) {
this.categoryIndex = index; this.categoryIndex = index;
this.subCategoryIndex = 0; this.subCategoryIndex = 0;
@ -480,22 +501,14 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => { this.subscriptions.push(this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
callback(saveElement); callback(saveElement);
this.stakeholderChanged(); this.stakeholderChanged();
UIkit.notification(message, { NotificationHandler.rise(message);
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
if (redirect) { if (redirect) {
this.router.navigate(['../' + saveElement.alias], { this.router.navigate(['../' + saveElement.alias], {
relativeTo: this.route relativeTo: this.route
}); });
} }
}, error => { }, error => {
UIkit.notification(error.error.message, { NotificationHandler.rise(error.error.message, 'danger');
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
})); }));
} }
@ -503,37 +516,21 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => { this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => {
callback(); callback();
this.stakeholderChanged(); this.stakeholderChanged();
UIkit.notification(message, { NotificationHandler.rise(message);
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
if (redirect) { if (redirect) {
this.back(); this.back();
} }
}, error => { }, error => {
UIkit.notification(error.error.message, { NotificationHandler.rise(error.error.message, 'danger');
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
})); }));
} }
private changeStatus(element: Topic | Category | SubCategory, path: string[], visibility: Visibility) { private changeStatus(element: Topic | Category | SubCategory, path: string[], visibility: Visibility) {
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;
UIkit.notification(StringUtils.capitalize(this.type) + ' has been <b>successfully changed</b> to ' + element.visibility.toLowerCase(), { NotificationHandler.rise(StringUtils.capitalize(this.type) + ' has been <b>successfully changed</b> to ' + element.visibility.toLowerCase());
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}, error => { }, error => {
UIkit.notification(error.error.message, { NotificationHandler.rise(error.error.message, 'danger');
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
})); }));
} }

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

@ -19,11 +19,12 @@ import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/p
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/notify-form.module"; import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/notify-form.module";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {TransitionGroupModule} from "../openaireLibrary/utils/transition-group/transition-group.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule, CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule ReactiveFormsModule, InputModule, IconsModule, PageContentModule, LoadingModule, NotifyFormModule, LogoUrlPipeModule, TransitionGroupModule
], ],
declarations: [ declarations: [
TopicComponent, IndicatorsComponent TopicComponent, IndicatorsComponent

17
src/app/users/users.component.html
View File

@ -3,23 +3,18 @@
<loading></loading> <loading></loading>
</div> </div>
</div> </div>
<ng-template #tabs>
<div class="uk-margin uk-margin-remove-bottom">
<ul class="uk-tab">
<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
</ul>
</div>
</ng-template>
<role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)" <role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
[emailComposer]="emailComposer" [notificationFn]="notificationFn" (stickyEmitter)="stickyPageHeader = $event"> [emailComposer]="emailComposer" [notificationFn]="notificationFn">
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader"> <div class="uk-flex uk-flex-middle uk-margin-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply"> <img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div> <div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage {{users}}</div> <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage {{users}}</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1> <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div> </div>
</div> </div>
<ng-container [ngTemplateOutlet]="tabs"></ng-container> <ul class="uk-tab">
<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
</ul>
</role-users> </role-users>

1
src/app/users/users.component.ts
View File

@ -46,7 +46,6 @@ export class UsersComponent implements OnInit {
notification.groups = [recipient]; notification.groups = [recipient];
return notification; return notification;
} }
public stickyPageHeader: boolean = false;
constructor(private stakeholderService: StakeholderService, constructor(private stakeholderService: StakeholderService,
private userManagementService: UserManagementService, private userManagementService: UserManagementService,

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit 141c71c3104bab1382e6008697043ea87e03ea44 Subproject commit 00fc1f9e2b9158a6be224061d742cf80a043fab8