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

Add new sidebar in topics component (need to investigate about transition). Add hasInternalSidebar for topics component. Move categories under topics in monitor sidebar

This commit is contained in:
Konstantinos Triantafyllou 2022-11-04 16:36:51 +02:00
parent fea494fd0e
commit b970b9c302
9 changed files with 235 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
View File

@ -21,20 +21,19 @@ import {RouterModule} from "@angular/router";
{
path: 'indicators',
loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
data: {hasInternalSidebar: true},
pathMatch: 'full'
},
{
path: 'indicators/:topic',
loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
data: {hasInternalSidebar: true},
pathMatch: 'full'
},
{
path: 'admin-tools',
loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
data: {
param: 'stakeholder',
parentClass: 'monitor'
}
data: {param: 'stakeholder', parentClass: 'monitor'}
}
])]
})

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

@ -2,14 +2,15 @@
<loading [full]="true"></loading>
</div>
<div *ngIf="!loading" [class.monitor]="isFrontPage">
<div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu)"
[class.sidebar_mini]="!open && (hasSidebar || hasAdminMenu)">
<div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu || hasInternalSidebar)"
[class.sidebar_mini]="!open && (hasSidebar || hasAdminMenu || hasInternalSidebar)">
<div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
<div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" queryParamsHandling="merge" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar && !hasInternalSidebar" queryParamsHandling="merge" [items]="sideBarItems"
[activeItem]="activeTopic?activeTopic.alias:null" [activeSubItem]="activeCategory?activeCategory.alias:null"></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasAdminMenu && !hasInternalSidebar" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
<main>
<router-outlet></router-outlet>
</main>

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

@ -7,7 +7,13 @@ import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder
import {BehaviorSubject, Subscriber} from "rxjs";
import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
import {Stakeholder, StakeholderEntities, Topic, Visibility} from "./openaireLibrary/monitor/entities/stakeholder";
import {
Category,
Stakeholder,
StakeholderEntities,
Topic,
Visibility
} from "./openaireLibrary/monitor/entities/stakeholder";
import {LinksResolver} from "./search/links-resolver";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {properties} from "../environments/environment";
@ -32,6 +38,7 @@ export class AppComponent implements OnInit, OnDestroy {
hasSidebar: boolean = false;
hasHeader: boolean = false;
hasAdminMenu: boolean = false;
hasInternalSidebar: boolean = false;
isFrontPage: boolean = false;
isViewPublic: boolean = false;
sideBarItems: MenuItem[] = [];
@ -57,6 +64,7 @@ export class AppComponent implements OnInit, OnDestroy {
adminMenuItems: MenuItem[] = [];
stakeholder: Stakeholder = null;
activeTopic: Topic = null;
activeCategory: Category = null;
loading: boolean = true;
paramsResolved: boolean = false;
innerWidth;
@ -110,6 +118,10 @@ export class AppComponent implements OnInit, OnDestroy {
this.hasAdminMenu = hasAdminMenu;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasInternalSidebar.subscribe(hasInternalSidebar => {
this.hasInternalSidebar = hasInternalSidebar;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
this.isFrontPage = isFrontPage;
this.cdr.detectChanges();
@ -134,6 +146,11 @@ export class AppComponent implements OnInit, OnDestroy {
} else {
this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
}
if (params && params['category']) {
this.activeCategory = this.activeTopic.categories.find(category => category.alias === decodeURIComponent(params['category']) && this.isPublicOrIsMember(category.visibility));
} else {
this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
}
this.setSideBar();
this.buildMenu();
this.loading = false;
@ -152,6 +169,11 @@ export class AppComponent implements OnInit, OnDestroy {
} else {
this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.visibility));
}
if (params && params['category']) {
this.activeCategory = this.activeTopic.categories.find(category => category.alias === decodeURIComponent(params['category']) && this.isPublicOrIsMember(category.visibility));
} else {
this.activeCategory = this.activeTopic.categories.find(category => this.isPublicOrIsMember(category.visibility));
}
this.loading = false;
}
} else {
@ -237,12 +259,16 @@ export class AppComponent implements OnInit, OnDestroy {
private setSideBar() {
let items: MenuItem[] = [];
if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
this.stakeholder.topics.forEach((topic) => {
this.stakeholder.topics.forEach((topic: Topic) => {
if (this.isPublicOrIsMember(topic.visibility)) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
'/' + this.stakeholder.alias + '/' + topic.alias),
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", '/' + this.stakeholder.alias + '/' + topic.alias,
null, [], [], {}, {svg: topic.icon}, null, null, (
'/' + this.stakeholder.alias + '/' + topic.alias));
topicItem.items = topic.categories.map(category => {
return new MenuItem(category.alias, category.name, "", ('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias),
null, [], [], {}, {svg: topic.icon}, null, null,
('/' + this.stakeholder.alias + '/' + topic.alias + '/' + category.alias));
});
items.push(topicItem);
}
});

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

@ -47,31 +47,18 @@
</div>
</div>
</div>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" class="uk-margin-medium-top" actions>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-margin-medium-top" actions>
<ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[class.uk-active]="subCategory.alias === activeSubCategory.alias">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[queryParams]="queryParams">
<span class="title">{{category.name}}</span>
<span class="title">{{subCategory.name}}</span>
</a>
</li>
</ng-template>
</ul>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
<ul class="uk-subnav uk-subnav-pill-alt">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
<a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
[queryParams]="queryParams"
class="uk-margin-remove-bottom"
><span>{{subCategory.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
</div>
<div inner>
<div *ngIf="privateStakeholder" class="message">

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 56a8a035cc5df422fc5fa442694bdc87894cdd26
Subproject commit 7bae3b1ebb01a87246f9cc886cc5777ab5ddcf33

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

@ -12,90 +12,166 @@
</a>
</div>
<div class="menu_section uk-margin-large-top">
<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">
<li class="uk-visible-toggle" [class.uk-active]="topicIndex == i" transition-group-item>
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
[attr.uk-tooltip]="'title: ' + topic.name + '; delay: 500'">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="topic.icon" class="uk-width-auto">
<icon class="menu-icon" [svg]="topic.icon" [flex]="true"></icon>
</div>
<span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
class="uk-width-expand uk-text-truncate uk-margin-small-left">
{{topic.name}}
</span>
<span *ngIf="open" class="uk-margin-xsmall-left" [class.uk-invisible-hover]="topicIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator">
<li>
<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 *ngIf="i > 0 || i < stakeholder.topics.length - 1" 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 class="uk-nav-divider"></li>
</ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="topic.visibility === v.value">
<a (click)="openVisibilityModal(i, v.value, 'topic'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<ng-container *ngIf="!topic.defaultId && isCurator">
<li class="uk-nav-divider">
<li>
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
</div>
</a>
<!--<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>
</ul>
</div>
</span>
<ul #topics class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group uk-nav="duration: 400">
<li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i" transition-group-item>
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
[title]="topic.name" class="uk-visible-toggle">
<span class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="topic.icon" class="uk-width-auto">
<icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
</div>
</a>
</li>
</ng-template>
<span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
class="uk-width-expand uk-text-truncate uk-margin-small-left">
{{topic.name}}
</span>
<span *ngIf="open" class="uk-margin-xsmall-left" [class.uk-invisible-hover]="topicIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator">
<li>
<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 *ngIf="i > 0 || i < stakeholder.topics.length - 1" 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 class="uk-nav-divider"></li>
</ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="topic.visibility === v.value">
<a (click)="openVisibilityModal(i, v.value, 'topic'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<ng-container *ngIf="!topic.defaultId && isCurator">
<li class="uk-nav-divider">
<li>
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
</div>
</a>
<!--<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>
</ul>
</div>
</span>
</span>
</a>
<ul class="uk-nav-sub" #categories transition-group>
<li *ngFor="let category of topic.categories; let j=index" transition-group-item class="uk-visible-toggle" [class.uk-active]="categoryIndex == j">
<a (click)="chooseCategory(j)" [title]="category.name">
<div class="uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
<span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
<span *ngIf="open" class="uk-margin-xsmall-left" [class.uk-invisible-hover]="categoryIndex !== j"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator">
<li>
<a (click)="editCategoryOpen(j); 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 *ngIf="j > 0 || j < stakeholder.topics[topicIndex].categories.length - 1" class="uk-nav-divider"></li>
<li *ngIf="j > 0">
<a (click)="hide(element);moveCategory(j)">
<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="j < stakeholder.topics[topicIndex].categories.length - 1">
<a (click)="hide(element);moveCategory(j, j + 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 class="uk-nav-divider"></li>
</ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="category.visibility === v.value">
<a (click)="openVisibilityModal(j, v.value, 'category'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<ng-container *ngIf="!category.defaultId && isCurator">
<li class="uk-nav-divider">
<li>
<a (click)="deleteCategoryOpen(j, 'delete'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
</div>
</a>
</li>
</ng-container>
</ul>
</div>
</span>
</div>
</a>
</li>
<li>
<a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span>Create new category</span>
</a>
</li>
</ul>
</li>
<li *ngIf="isCurator">
<a (click)="editTopicOpen(-1); $event.preventDefault()">
<div class="uk-flex uk-flex-middle uk-flex-center">
@ -124,105 +200,22 @@
</div>
<div actions>
<div class="uk-margin-medium-top uk-margin-bottom">
<ul *ngIf="stakeholder.topics[topicIndex]" #categories transition-group class="uk-tab">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i" transition-group-item>
<a (click)="chooseCategory(i)">
<span class="title"> {{category.name}}</span>
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
#subCategories transition-group class="uk-tab">
<ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
<a (click)="chooseSubcategory(i)">
<span class="title"> {{subCategory.name}}</span>
</a>
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="categoryIndex !== i"
[class.uk-invisible-hover]="subCategoryIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator">
<li>
<a (click)="editCategoryOpen(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 *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories.length - 1"
class="uk-nav-divider"></li>
<li *ngIf="i > 0">
<a (click)="hide(element);moveCategory(i)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="west" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Left</span>
</div>
</a>
</li>
<li *ngIf="i < stakeholder.topics[topicIndex].categories.length - 1">
<a (click)="hide(element);moveCategory(i, i + 1)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="east" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Move Right</span>
</div>
</a>
</li>
<li class="uk-nav-divider"></li>
</ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="category.visibility === v.value">
<a (click)="openVisibilityModal(i, v.value, 'category'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="category.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<ng-container *ngIf="!category.defaultId && isCurator">
<li class="uk-nav-divider">
<li>
<a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
</div>
</a>
</li>
</ng-container>
</ul>
</div>
</span>
</li>
</ng-template>
<li *ngIf="isCurator">
<a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span>Create new category</span>
</a>
</li>
</ul>
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
<div class="uk-width-expand">
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
#subCategories class="uk-subnav uk-subnav-pill" transition-group>
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
let-subCategory let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
<a (click)="chooseSubcategory(i);$event.preventDefault()" class="uk-margin-small-left">
<span>{{subCategory.name}}</span>
</a>
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="subCategoryIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator">
<li>
@ -252,32 +245,15 @@
</a>
</li>
<li class="uk-nav-divider"></li>
<li *ngIf="indicators">
<a (click)=" indicators.exportIndicators(i);hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="download" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Export indicators</span>
</div>
</a>
</li>
<li *ngIf="indicators">
<a (click)="file.value = ''; this.index=i; file.click(); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="upload" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Import indicators</span>
</div>
</a>
</li>
<li class="uk-nav-divider"></li>
</ng-container>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li [class.uk-active]="subCategory.visibility === v.value">
<a (click)="openVisibilityModal(i, v.value, 'subcategory'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done"
class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
@ -287,8 +263,8 @@
<li>
<a (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
<icon [flex]="true" name="delete" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">Delete</span>
</div>
</a>
</li>
@ -296,44 +272,15 @@
</ul>
</div>
</span>
</li>
</ng-template>
<li *ngIf="isCurator">
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span>Create new subcategory</span>
</a>
</li>
</ul>
</div>
<div *ngIf="stakeholder.topics.length > 0" class="uk-width-auto@m uk-width-1-1">
<div class="uk-flex uk-flex-center">
<button class="uk-button uk-button-primary uk-flex uk-flex-middle">
<icon name="visibility" [flex]="true"></icon>
<span class="uk-margin-small-left uk-margin-small-right">Preview</span>
<icon name="expand_more" [flex]="true"></icon>
</button>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li><a target="_blank"
[routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
[queryParams]="{view: 'public'}"
(click)="hide(element)">Public view</a>
</li>
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
stakeholder.topics[topicIndex].alias"
[queryParams]="{view: 'restricted'}"
(click)="hide(element)">Restricted view</a>
</li>
<!--<li class="disabled"><a class="uk-disabled uk-text-muted"
uk-tooltip="Note: available only in administration dashboard"
(click)="hide(element)">Private view</a>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</li>
</ng-template>
<li *ngIf="isCurator">
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span>Create new subcategory</span>
</a>
</li>
</ul>
</div>
</div>
<div inner>

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

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -25,7 +25,7 @@ declare var UIkit;
selector: 'topic',
templateUrl: './topic.component.html',
})
export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeactivateComponent {
private topicSubscriptions: any[] = [];
private subscriptions: any[] = [];
public properties: EnvProperties = properties;
@ -136,6 +136,10 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}))
}
ngAfterViewInit() {
UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, false);
}
public ngOnDestroy() {
this.topicSubscriptions.forEach(value => {
if (value instanceof Subscriber) {

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit fc2e0b805ae3011f0f181983b27905908e528083
Subproject commit bcceb8367e2e9c1bd480f54ff2822235c51c1650

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 1866a893c6b467f5e26a9659e37acaf4071a7f6c
Subproject commit 67483e8b95c23aa8dcb2d1203e1fe89a4d7f033f