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

[Monitor Dashboard|Trunk] 

Merge branch to trunk (59477:59555 https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/branches/themeChange/monitor_dashboard)
Changes applied: remove theme css and classes, update with new admin UI



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59556 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Argiro Kokogiannaki 2020-10-12 12:54:57 +00:00
parent 98ced85b37
commit e179a6094c
19 changed files with 1481 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
angular.json
View File

@ -27,6 +27,9 @@
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"src/assets/common-assets/common/jquery.js",
"src/assets/common-assets/common/uikit.min.js",
"src/assets/common-assets/common/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
@ -104,8 +107,10 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
"src/assets/common-assets/common/jquery.js",
"src/assets/common-assets/common/uikit.min.js",
"src/assets/common-assets/common/uikit-icons.min.js",
"node_modules/jquery/dist/jquery.js"
],
"styles": [
"src/styles.css",

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

@ -32,17 +32,29 @@ const routes: Routes = [
data: {hasAdminMenu: true}
},
{
path: 'admin/:stakeholder/users',
loadChildren: './users/users.module#UsersModule',
resolve: {envSpecific: EnvironmentSpecificResolver}
path: 'admin/:stakeholder/general',
loadChildren: './manageStakeholder/manageStakeholder.module#ManageStakeholderModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {hasAdminMenu: true}
},
{
path: 'admin/:stakeholder',
path: 'admin/:stakeholder/users',
loadChildren: './users/users.module#UsersModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {hasAdminMenu: true}
},
{
path: 'admin/:stakeholder',
loadChildren: './stakeholder/stakeholder.module#StakeholderModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
},
{
path: 'admin/:stakeholder/:topic',
path: 'admin/:stakeholder/indicators/:topic',
loadChildren: './topic/topic.module#TopicModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
},
{ path: 'admin/:stakeholder/indicators',
loadChildren: './topic/topic.module#TopicModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
},

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

@ -1,13 +1,14 @@
<!--disable_transitions -->
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasMiniMenu && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar">
<img
[class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar"
class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;" >
<!-- <img
*ngIf="((!open && !hasMiniMenu) || !hasSidebar) && (properties.environment === 'beta' || properties.environment === 'development')"
class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
[alt]="properties.environment">
<nav class="uk-navbar" [class.uk-light]="!isFrontPage">
[alt]="properties.environment">-->
<!--<nav class="uk-navbar" [class.uk-light]="!isFrontPage">
<div *ngIf="stakeholder" class="uk-navbar-center">
<schema2jsonld *ngIf="properties" [URL]="properties.domain + properties.baseLink + '/' + stakeholder.alias"
[logoURL]="stakeholder.logoUrl" type="home"
@ -16,12 +17,12 @@
[description]="stakeholder.name + ' monitoring dashboard'">
</schema2jsonld>
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical uk-padding-remove-right">
<!--<li>
&lt;!&ndash;<li>
<a class="uk-logo uk-navbar-item uk-link uk-margin-left "
[routerLink]="'/'+stakeholder.alias">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
</a>
</li>-->
</li>&ndash;&gt;
<li>
<a class="uk-logo uk-navbar-item uk-link "
[routerLink]="'/'+stakeholder.alias">
@ -50,23 +51,23 @@
</li>
</ul>
</div>
</nav>
</nav>-->
<!-- <navbar *ngIf="properties && showMenu" portal="monitor" [onlyTop]=false [stakeholder]="stakeholder"-->
<!-- [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"-->
<!-- [showMenu]=showMenu [properties]="properties"></navbar>-->
<navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
</div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
[activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
[searchLink]="(properties.showContent)?properties.searchLinkToResults:null"
[specialMenuItem]="specialSideBarMenuItem"
[searchParams]="createSearchParameters()"
[headerUrl]="properties.domain + properties.baseLink" queryParamsHandling="preserve"
></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor"
headerDashboard="Administration Panel" [headerUrl]="properties.domain + properties.baseLink"
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Admin"
headerDashboard="Administration Panel" [headerUrl]="properties.domain + properties.baseLink" [specialMenuItem]="specialSideBarMenuItem"
></dashboard-sidebar>
<div *ngIf="hasSidebar" id="hide_controls">
<div id="toggle" [class.sidebar_main_open]="open" (click)="toggleOpen($event)" class="uk-margin-auto">
<i class="material-icons">play_circle_filled</i>
<span *ngIf="open" class="uk-margin-small-left">Hide Controls</span>
</div>
</div>
<router-outlet></router-outlet>
<role-verification *ngIf="stakeholder && properties.environment === 'development'"
[id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>

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

@ -7,7 +7,7 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder.service";
import {BehaviorSubject, Subscriber} from "rxjs";
import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
import {MenuItem, RootMenuItem} from "./openaireLibrary/sharedComponents/menu";
import {Stakeholder, Topic} from "./openaireLibrary/monitor/entities/stakeholder";
import {LinksResolver} from "./search/links-resolver";
@ -27,6 +27,9 @@ export class AppComponent implements OnInit, OnDestroy {
isFrontPage: boolean = false;
isViewPublic: boolean = false;
sideBarItems: MenuItem[] = [];
specialSideBarMenuItem:MenuItem = null;
menuItems: RootMenuItem[] = [];
menuHeader = { route: "/", url: null, title: "Default menu header", logoUrl: null, logoSmallUrl:null, position:'center', badge: false };
userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})];
adminMenuItems: MenuItem[] = [];
stakeholder: Stakeholder = null;
@ -95,8 +98,10 @@ export class AppComponent implements OnInit, OnDestroy {
this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
if(stakeholder) {
this.stakeholder = stakeholder;
this.buildMenu();
LinksResolver.setProperties(this.stakeholder.alias);
this.stakeholderService.setStakeholder(stakeholder);
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
if (isSearch) {
this.activeTopic = null;
@ -110,13 +115,16 @@ export class AppComponent implements OnInit, OnDestroy {
this.stakeholderService.setStakeholder(null);
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
}
}, error => {
this.stakeholderService.setStakeholder(null);
LinksResolver.resetProperties();
this.navigateToError();
this.buildMenu();
});
} else {
this.buildMenu();
if(isSearch) {
this.activeTopic = null;
} else if (params && params['topic']) {
@ -124,12 +132,14 @@ export class AppComponent implements OnInit, OnDestroy {
} else {
this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.isPublic) && topic.isActive);
}
}
} else {
LinksResolver.resetProperties();
this.stakeholderService.setStakeholder(null);
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
this.stakeholder = null;
this.buildMenu();
}
}));
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
@ -181,36 +191,91 @@ export class AppComponent implements OnInit, OnDestroy {
}
buildMenu() {
this.menuItems = [];
this.adminMenuItems = [];
this.userMenuItems = [];
/* if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push(new MenuItem("", "Manage helptexts",
"", "/helptexts", true, [], [], {communityId:'openaire'}))
}*/
if (this.isAdmin()) {
this.userMenuItems.push(new MenuItem("", "Manage profiles",
"", "/admin", true, [], [], {}))
}
if (this.user) {
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
if (this.adminMenuItems.length == 0) {
//nstructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i class=\"material-icons md-24\">settings</i>"));
/*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));
adminOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {}));
adminOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classes", false, [], [], {}));
this.adminMenuItems.push(adminOptions);
let monitorOptions = new MenuItem("monitorOptions", "Monitor Options", "", "", false, [], [], {})
monitorOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classContents", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("helptexts", "Help texts", "", "/helptexts", false, [], [], {communityId: 'openaire'}));
this.adminMenuItems.push(monitorOptions);*/
if(this.stakeholder) {
if (this.isFrontPage) {
this.menuHeader = {
route: "/" + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false
};
// if(this.isAdmin()) {
this.menuItems.push({
rootItem: new MenuItem("manage", "Manage",
"", "/admin", false, [], null, {}), items: []
});
// }
this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {})
this.specialSideBarMenuItem.icon = '<span uk-icon="search"></span>';
} else {
this.menuHeader = {
route: "/admin/" + this.stakeholder.alias,
url: null,
title: 'Admin - ' + this.stakeholder.name,
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false
};
this.menuItems.push({
rootItem: new MenuItem("", "Dashboard",
"", '/'+ this.stakeholder.alias+'/', false, [], null, {}), items: []
});
this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/"+this.stakeholder.alias + '/general', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/"+this.stakeholder.alias + '/indicators', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/"+this.stakeholder.alias+"/users", false, [], [], {}, "<i uk-icon=\"users\"></i>"));
this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin",false, [], null, {});
this.specialSideBarMenuItem.icon = '<span class="uk-icon-button uk-icon portal-button " uk-icon="chevron-left"></span>';
}
this.userMenuItems = [];
/* if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push(new MenuItem("", "Manage helptexts",
"", "/helptexts", true, [], [], {communityId:'openaire'}))
}*/
if (this.isAdmin()) {
this.userMenuItems.push(new MenuItem("", "Manage profiles",
"", "/admin", true, [], [], {}))
this.specialSideBarMenuItem = null;
}
if (this.user) {
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
}else{
if(this.isFrontPage || !this.hasAdminMenu){
this.menuHeader = { route: null, url: "https://" + (this.properties.environment =='beta'?'beta.':'')+'monitor.openaire.eu', title: "Monitor", logoUrl: 'assets/common-assets/logo-large-monitor.png', logoSmallUrl:"assets/common-assets/logo-small-monitor.png", position:'left' , badge: true };
//TODO monitor menu items?
}else{
this.menuHeader = { route: "/", url: null, title: "Monitor Dashboard", logoUrl: null, logoSmallUrl:null, position:'center' , badge: false };
this.adminMenuItems = [];
this.specialSideBarMenuItem = null;
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i uk-icon=\"cog\"></i>"));
/*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));
adminOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {}));
adminOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classes", false, [], [], {}));
this.adminMenuItems.push(adminOptions);
let monitorOptions = new MenuItem("monitorOptions", "Monitor Options", "", "", false, [], [], {})
monitorOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classContents", false, [], [], {communityId: 'openaire'}));
monitorOptions.items.push(new MenuItem("helptexts", "Help texts", "", "/helptexts", false, [], [], {communityId: 'openaire'}));
this.adminMenuItems.push(monitorOptions);*/
}
}
}
public isAdmin() {

4
src/app/error/errorPage.component.ts
View File

@ -3,7 +3,9 @@ import {Component} from '@angular/core';
@Component({
selector: 'openaire-error',
template: `
<error></error>
<div class="uk-margin-large-top">
<error></error>
</div>
`
})
export class OpenaireErrorPageComponent {

21
src/app/manageStakeholder/manageStakeholder-routing.module.ts Normal file
View File

@ -0,0 +1,21 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {ManageStakeholderComponent} from "./manageStakeholder.component";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: ManageStakeholderComponent,
canActivate: [AdminDashboardGuard],
canDeactivate: [PreviousRouteRecorder],
data: {hasSidebar: true}
}
])
]
})
export class ManageStakeholderRoutingModule {
}

73
src/app/manageStakeholder/manageStakeholder.component.html Normal file
View File

@ -0,0 +1,73 @@
<div id="page_content">
<div id="page_content_inner" class="uk-padding-large">
<modal-alert #editStakeholderModal
id="edit_modal"
(alertOutput)="save()"
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
<div dashboard-input [formInput]="stakeholderFb.get('alias')" label="Alias"></div>
</div>
<div dashboard-input class="uk-form-row" [type]="'textarea'" [rows]="4" [formInput]="stakeholderFb.get('description')" label="Description"></div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
label="Index id">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
label="Index name">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
label="Index short name">
</div>
</div>
<div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
<div class="uk-width-1-5">
<img [src]="photo">
</div>
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
</div>
<ng-template #uploadPhoto>
<div>
<div uk-form-custom class="uk-width-auto">
<input id="photo" type="file" (change)="fileChangeEvent($event)"/>
<button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
</div>
<button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove</button>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
</ng-template>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
</div>
</div>
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
<div>- OR -</div>
<div class="uk-margin-small-top">
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
</div>
</div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('isActive')"
label="Status" [options]="stakeholderUtils.isActive" type="select">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('type')"
label="Type" [options]="stakeholderUtils.types" type="select">
</div>
</div>
<div *ngIf="!stakeholderFb.get('isDefault').value && index === -1 && stakeholderFb.get('type').valid">
<div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for this type.</div>
<div *ngIf="defaultStakeholdersOptions.length > 0"
dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
</div>
</div>
</modal-alert>
</div>
</div>

383
src/app/manageStakeholder/manageStakeholder.component.ts Normal file
View File

@ -0,0 +1,383 @@
import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {Subscriber, zip} from "rxjs";
import {StakeholderUtils} from "../utils/indicator-utils";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Title} from "@angular/platform-browser";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
declare var UIkit;
@Component({
selector: 'home',
templateUrl: "./manageStakeholder.component.html"
})
export class ManageStakeholderComponent implements OnInit, OnDestroy {
public properties: EnvProperties;
public loading: boolean = true;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public defaultStakeholders: Stakeholder[];
public stakeholders: Stakeholder[];
public stakeholder: Stakeholder;
public stakeholderFb: FormGroup;
public index: number;
public user = null;
/**
* Filtered Stakeholders
*/
public displayDefaultStakeholders: Stakeholder[];
public displayStakeholders: Stakeholder[];
public defaultStakeholdersOptions: Option[] = [];
/**
* Top filters
*/
public filters: FormGroup;
public all: Option = {
value: 'all',
label: 'All'
};
/**
* Grid or List View
*/
public grid: boolean = true;
private subscriptions: any[] = [];
/**
* Photo upload
* */
public file: File;
public photo: string | ArrayBuffer;
public uploadError: string;
public deleteCurrentPhoto: boolean = false;
private maxsize: number = 200 * 1024;
@ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
@ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
constructor(private stakeholderService: StakeholderService,
private utilsService: UtilitiesService,
private userManagementService: UserManagementService,
private propertiesService: EnvironmentSpecificService,
private title: Title,
private fb: FormBuilder) {
}
ngOnInit(): void {
this.buildFilters();
this.propertiesService.loadEnvironment()
.then(properties => {
this.properties = properties;
this.title.setTitle('Manage profiles');
this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
});
let data = zip(
this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL)
);
data.subscribe(res => {
this.defaultStakeholders = res[0];
this.stakeholders = res[1];
this.displayDefaultStakeholders = res[0];
this.displayStakeholders = res[1];
this.loading = false;
});
});
this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => {
this.removePhoto();
}));
}
ngOnDestroy(): void {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof Function) {
value();
}
});
}
hide(element: any) {
UIkit.dropdown(element).hide();
}
public changeGrid(value) {
this.grid = value;
}
private buildFilters() {
this.filters = this.fb.group({
privacy: this.fb.control('all'),
status: this.fb.control('all'),
keyword: this.fb.control('')
});
this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe(value => {
this.onPrivacyChange(value);
}));
this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => {
this.onStatusChange(value);
}));
this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => {
this.onKeywordChange(value);
}));
}
onPrivacyChange(value) {
this.displayDefaultStakeholders = this.filterPrivacy(this.defaultStakeholders, value);
this.displayStakeholders = this.filterPrivacy(this.stakeholders, value);
}
onStatusChange(value) {
this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
this.displayStakeholders = this.filterStatus(this.stakeholders, value);
}
onKeywordChange(value) {
this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
}
onTypeChange(value) {
this.defaultStakeholdersOptions = [{
label: 'New blank profile',
value: '-1'
}];
this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
this.defaultStakeholdersOptions.push({
label: 'Use ' + stakeholder.name + ' profile',
value: stakeholder._id
})
});
}
private filterPrivacy(stakeholders: Stakeholder[], value): Stakeholder[] {
if (value === 'all') {
return stakeholders;
} else {
return stakeholders.filter(stakeholder => stakeholder.isPublic === value);
}
}
private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
if (value === 'all') {
return stakeholders;
} else {
return stakeholders.filter(stakeholder => stakeholder.isActive === value);
}
}
private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
if (value === null || value === '') {
return stakeholders;
} else {
return stakeholders.filter(stakeholder => (
stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) ||
stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) ||
stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase())
);
}
}
public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) {
if (isDefault) {
this.index = (stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === stakeholder._id) : -1;
} else {
this.index = (stakeholder) ? this.stakeholders.findIndex(value => value._id === stakeholder._id) : -1;
}
if (!stakeholder) {
this.stakeholder = new Stakeholder(null, null, null,
null, null, null, false, false, null);
} else {
this.stakeholder = stakeholder;
}
this.stakeholderFb = this.fb.group({
_id: this.fb.control(this.stakeholder._id),
defaultId: this.fb.control(this.stakeholder.defaultId),
name: this.fb.control(this.stakeholder.name, Validators.required),
description: this.fb.control(this.stakeholder.description),
index_name: this.fb.control(this.stakeholder.index_name, Validators.required),
index_id: this.fb.control(this.stakeholder.index_id, Validators.required),
index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required),
creationDate: this.fb.control(this.stakeholder.creationDate),
alias: this.fb.control(this.stakeholder.alias,
[
Validators.required,
this.stakeholderUtils.aliasValidator(
(isDefault) ?
this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) :
this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
)]
),
isDefault: this.fb.control(isDefault),
isPublic: this.fb.control(this.stakeholder.isPublic),
isActive: this.fb.control(this.stakeholder.isActive),
type: this.fb.control(this.stakeholder.type, Validators.required),
topics: this.fb.control(this.stakeholder.topics),
managers: this.fb.control(this.stakeholder.managers),
isUpload: this.fb.control(this.stakeholder.isUpload),
logoUrl: this.fb.control(this.stakeholder.logoUrl),
});
this.initPhoto();
this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
this.onTypeChange(value);
}));
this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => {
if(value) {
this.photo = value;
} else {
this.photo = 'assets/common-assets/curator-default.png';
}
}));
if (!isDefault) {
this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required));
}
if (this.index !== -1) {
if (this.stakeholderFb.value.type) {
setTimeout(() => {
this.stakeholderFb.get('type').disable();
}, 0);
} else {
setTimeout(() => {
this.stakeholderFb.get('type').enable();
}, 0);
}
this.editStakeholderModal.okButtonText = 'Save Changes';
} else {
setTimeout(() => {
this.stakeholderFb.get('type').enable();
}, 0);
this.editStakeholderModal.okButtonText = 'Create';
}
this.uploadError = null;
this.deleteCurrentPhoto = false;
this.editStakeholderModal.cancelButtonText = 'Cancel';
this.editStakeholderModal.okButtonLeft = false;
this.editStakeholderModal.alertMessage = false;
this.editStakeholderModal.open();
}
public save() {
if (this.file) {
this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
this.deletePhoto();
this.removePhoto();
this.stakeholderFb.get('logoUrl').setValue(res.filename);
this.saveStakeholder();
}, error => {
this.uploadError = "An error has been occurred during upload your image. Try again later";
this.saveStakeholder();
});
} else if (this.deleteCurrentPhoto) {
this.deletePhoto();
this.saveStakeholder();
} else {
this.saveStakeholder();
}
}
public saveStakeholder() {
if (this.index === -1) {
if (!this.stakeholderFb.value.isDefault) {
let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
(stakeholder ? stakeholder.topics : [])));
}
this.removePhoto();
this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.defaultId === null) {
this.defaultStakeholders.push(stakeholder);
} else {
this.stakeholders.push(stakeholder);
}
});
} else {
this.stakeholderFb.get('type').enable();
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.defaultId == null) {
this.defaultStakeholders[this.index] = stakeholder;
} else {
this.stakeholders[this.index] = stakeholder;
}
});
}
}
public isAdministrator(): boolean {
return Session.isPortalAdministrator(this.user);
}
public deletePhoto() {
if (this.stakeholder.logoUrl) {
this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
}
}
fileChangeEvent(event) {
if (event.target.files && event.target.files[0]) {
this.file = event.target.files[0];
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
this.stakeholderFb.get('isUpload').setValue(false);
this.removePhoto();
} else if (this.file.size > this.maxsize) {
this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
this.stakeholderFb.get('isUpload').setValue(false);
this.removePhoto()
} else {
this.uploadError = null;
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.photo = reader.result;
this.stakeholderFb.get('isUpload').setValue(true);
};
}
}
}
initPhoto() {
if (this.stakeholderFb.get('logoUrl').value) {
if (!this.stakeholderFb.value.isUpload) {
this.photo = this.stakeholderFb.get('logoUrl').value;
} else {
this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value;
}
} else {
this.photo = 'assets/common-assets/curator-default.png';
}
}
removePhoto() {
if (typeof document != 'undefined') {
(<HTMLInputElement>document.getElementById("photo")).value = "";
}
this.initPhoto();
this.file = null;
}
remove() {
this.stakeholderFb.get('isUpload').setValue(false);
if (this.file) {
this.removePhoto();
}
if (this.stakeholder.isUpload) {
this.stakeholderFb.get('logoUrl').setValue(null);
this.deleteCurrentPhoto = true;
}
}
}

31
src/app/manageStakeholder/manageStakeholder.module.ts Normal file
View File

@ -0,0 +1,31 @@
import {NgModule} from "@angular/core";
import {ManageStakeholderComponent} from "./manageStakeholder.component";
import {ManageStakeholderRoutingModule} from "./manageStakeholder-routing.module";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
import {InputModule} from "../openaireLibrary/dashboard/sharedComponents/input/input.module";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {ReactiveFormsModule} from "@angular/forms";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
@NgModule({
declarations: [ManageStakeholderComponent],
imports: [
ManageStakeholderRoutingModule,
CommonModule,
RouterModule,
InputModule,
LoadingModule,
AlertModalModule,
ReactiveFormsModule
],
providers: [
AdminDashboardGuard, PreviousRouteRecorder,
],
exports: [ManageStakeholderComponent]
})
export class ManageStakeholderModule {
}

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

@ -1,32 +1,32 @@
<div id="page_content">
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('privacy')"
type="select" [options]="[all].concat(stakeholderUtils.isPublic)"
label="Privacy"></div>
<div id="page_content_inner" class="uk-padding-large">
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('privacy')"
type="select" [options]="[all].concat(stakeholderUtils.isPublic)"
label="Privacy"></div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(stakeholderUtils.isActive)"
label="Status"></div>
</div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(stakeholderUtils.isActive)"
label="Status"></div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
class="material-icons">view_module</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
class="material-icons">view_module</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
</div>
</div>
<div id="page_content_inner">
<h4 class="uk-text-bold main">Default Profiles</h4>
<div [class.uk-child-width-1-4@m]="grid"
[class.uk-child-width-1-3@s]="grid"
@ -36,10 +36,11 @@
uk-grid>
<loading *ngIf="loading"></loading>
<ng-template ngFor [ngForOf]="defaultStakeholders" let-stakeholder let-i="index">
<a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<a *ngIf="stakeholder" [routerLink]="stakeholder.alias+'/indicators'+(stakeholder.topics.length > 0 ?
'/' + stakeholder.topics[0].alias:'')">
<div class="uk-card uk-card-default">
<div class=" uk-padding-small uk-card-header">
<div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
{{(stakeholder.isPublic) ? 'Public' : 'Private'}}
@ -50,10 +51,10 @@
{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
</span>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons"
(click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
<i uk-icon="more-vertical"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<li><a (click)="$event.stopPropagation();editStakeholder(stakeholder, true);hide(element);$event.preventDefault()">Edit</a>
</li>
<li><a (click)="$event.stopPropagation();toggleStakeholderStatus(stakeholder);hide(element);$event.preventDefault()">
@ -70,9 +71,9 @@
</div>
</div>
</div>
<div class="md-card-toolbar-heading-text">{{stakeholder.name}}</div>
<div class="uk-card-title">{{stakeholder.name}}</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-2 uk-text-center">
<i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
@ -89,23 +90,23 @@
</a>
</ng-template>
<div *ngIf="!loading">
<div class="md-card clickable" (click)="editStakeholder(null, true)">
<div class="md-card-toolbar">
<div class="md-card-toolbar-heading-text"
<div class="uk-card uk-card-default clickable" (click)="editStakeholder(null, true)">
<div class=" uk-padding-small uk-card-header">
<div class="uk-card-title"
[class.uk-flex-middle]="!grid"
[class.uk-flex]="!grid"
[class.uk-flex-center]="!grid">
<i *ngIf="!grid" class="material-icons md-36">add</i>
<i *ngIf="!grid" class="material-icons md-36" uk-icon="plus"></i>
<span>Create a default profile</span>
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div uk-grid>
<div class="uk-width-1-1">
Create a new default profile.
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<i class="material-icons md-48">add</i>
<i class="material-icons md-48" uk-icon="plus"></i>
</div>
</div>
</div>
@ -121,10 +122,12 @@
uk-grid>
<loading *ngIf="loading"></loading>
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
<a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<a *ngIf="stakeholder"
[routerLink]="stakeholder.alias+'/indicators'+(stakeholder.topics.length > 0 ?
'/' + stakeholder.topics[0].alias:'')">
<div class="uk-card uk-card-default">
<div class=" uk-padding-small uk-card-header">
<div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
{{(stakeholder.isPublic) ? 'Public' : 'Private'}}
@ -135,10 +138,10 @@
{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
</span>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons"
(click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
<i uk-icon="more-vertical"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<li><a
(click)="$event.stopPropagation();editStakeholder(stakeholder);hide(element);$event.preventDefault()">Edit</a>
</li>
@ -156,9 +159,9 @@
</div>
</div>
</div>
<div class="md-card-toolbar-heading-text">{{stakeholder.name}}</div>
<div class="uk-card-title">{{stakeholder.name}}</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-2 uk-text-center">
<i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
@ -175,24 +178,24 @@
</a>
</ng-template>
<div *ngIf="!loading">
<div class="md-card clickable" (click)="editStakeholder()">
<div class="md-card-toolbar">
<div class="md-card-toolbar-heading-text"
<div class="uk-card uk-card-default clickable" (click)="editStakeholder()">
<div class=" uk-padding-small uk-card-header">
<div class="uk-card-title"
[class.uk-flex-middle]="!grid"
[class.uk-flex]="!grid"
[class.uk-flex-center]="!grid">
<i *ngIf="!grid" class="material-icons md-36">add</i>
<i *ngIf="!grid" class="material-icons md-36" uk-icon="plus"></i>
<span>Create a profile</span>
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div uk-grid>
<div class="uk-width-1-1">
Create a new profile by selecting the type (Funder, Organization, Research Initiative or Project) and
select indicators based on a default or a blank profile.
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<i class="material-icons md-48">add</i>
<i class="material-icons md-48" uk-icon="plus"></i>
</div>
</div>
</div>

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

@ -2,7 +2,7 @@
<!-- <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
<span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin" >
<a (click)="clearPeriodFilter()" [class]="((loading)?' uk-disabled':' ')+' uk-link-text '"> <span class="selectedFilterLabel" [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
<i class=" material-icons"></i>
<i uk-icon="close"></i>
<span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
</span></a>
</span>
@ -40,7 +40,7 @@
</ng-template>
<div id="page_content" [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
<div>
<div class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
<div class="uk-navbar-container uk-navbar-transparent uk-sticky uk-sticky-fixed" style="top: 70px; position:
fixed; width: 100%">
<div class="uk-margin-large-left">
<nav class=" ">
@ -74,7 +74,7 @@
</div>
</div>
</div>
<div id="page_content_inner" class="" [style.padding-top.px]="(24+
<div id="page_content_inner" class="" [style.margin-top.px]="(24+
(activeCategory &&
activeCategory.subCategories.length > 1?40:0)+(activeTopic &&
activeTopic.categories.length > 1?20:0)+(countSelectedFilters()
@ -125,7 +125,7 @@
</div>
</div>
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
uk-height-match="target: div.md-card">
uk-height-match="target: div.uk-card">
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">
<h4 class="uk-width-1-1">{{number.title}}</h4>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
@ -133,10 +133,10 @@
[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="md-card" [attr.uk-tooltip]="indicator.description"
<div class="uk-card uk-card-default" [attr.uk-tooltip]="indicator.description"
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="md-card-content uk-text-center">
<div class="uk-card-body uk-text-center">
<div *ngIf="properties.environment == 'development'">Filtered:
{{indicator.indicatorPaths[0].filtersApplied}}
out of
@ -168,14 +168,14 @@
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div class="md-card"
<div class="uk-card uk-card-default"
[class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
><!--[
attr
.uk-tooltip]="indicator
.description">-->
<div class="md-card-content uk-text-center">
<div class="uk-card-body uk-text-center">
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
@ -217,28 +217,30 @@
</div>
</div>
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="filters_switcher"
[class.switcher_active]="filterToggle">
<div id="style_switcher_toggle" (click)="filterToggle= !filterToggle"
[style.display]="(filterToggle?'none':'inherit')">
<i class=" uk-text-muted">
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
fill="white" width="24px" height="24px">
<g>
<path d="M0,0h24 M24,24H0" fill="none"/>
<path
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/>
</g>
</svg>
</i>
<!--(click)="filterToggle= !filterToggle"
[style.display]="(filterToggle?'none':'inherit')"-->
<div *ngIf="stakeholder && !privateStakeholder" href="#style_switcher" uk-toggle="" id="filters_switcher_toggle" >
<i class=" uk-text-muted">
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
viewBox="0 0 20 20"
fill="white" width="24px" height="16px">
<g>
<path d="M0,0h24 M24,24H0" fill="none"/>
<path
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/>
</g>
</svg>
</i>
</div>
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class=" uk-offcanvas filters_switcher"
uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;" >
<div class="uk-offcanvas-bar offcanvas-white">
<div class="uk-float-right" >
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
</div>
<div class="" click-outside-or-esc
(clickOutside)="(filterToggle)?filterToggle = false:filterToggle" [clickClose]="false" >
<div class="uk-float-right" ><a (click)="filterToggle=!filterToggle"> <i
class=" material-icons md-icon"></i>
</a></div>
<div class="uk-padding">
<div class="uk-grid uk-flex uk-flex-middle"><div class="uk-h4 ">Filters</div><a *ngIf="countSelectedFilters() > 1"
class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>

30
src/app/stakeholder/stakeholder.component.html
View File

@ -1,4 +1,5 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@ -11,7 +12,7 @@
</div>
</div>
<div *ngIf="stakeholder" class="menu_section">
<ul>
<ul class="uk-list">
<li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
<a [routerLink]="'../'" class="md-color-white">
<span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
@ -24,13 +25,15 @@
[class.act_section]="analysisOpen"
class="submenu_trigger">
<a href="#" (click)="analysisOpen = !analysisOpen; $event.preventDefault()">
<span class="menu_icon"><i class="material-icons">donut_large</i></span>
<!-- <span class="menu_icon"><i class="material-icons">donut_large</i></span>-->
<span class="menu_title uk-width-expand">Analysis Indicators</span>
</a>
<ul [style.display]="(analysisOpen?'block':'none')">
<ul [style.display]="(analysisOpen?'block':'none')" class="uk-list">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li [title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')">
<a [routerLink]="topic.alias">
<li
[title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
class="uk-margin-top uk-margin-small-right">
<a [routerLink]="topic.alias" class="uk-flex">
<span *ngIf="topic.icon" class="menu_icon">
<span [innerHTML]="satinizeHTML(topic.icon)"></span>
</span>
@ -42,10 +45,10 @@
[class.md-color-green-300]="topic.isActive">brightness_1</i>-->
</div>
<div class="menu_on_hover" (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i>
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-list">
<li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleTopicStatus(topic); hide(element)">
{{topic.isActive ? 'Inactive' : 'Active'}}</a>
@ -76,10 +79,11 @@
</li>
</ul>
</div>
</div>
</aside>
<div id="page_content">
<div id="page_content_inner">
<h4 class="uk-text-bold">
<div id="page_content_inner" class="uk-padding-large">
<h4 class="uk-text-bold uk-margin-top">
Customise your Monitor Dashboard!
</h4>
<div class="uk-text-large uk-margin-bottom">
@ -108,12 +112,12 @@
<div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
<div>
<a [routerLink]="topic.alias" class="md-card">
<a [routerLink]="topic.alias" class="uk-card uk-card-default">
<div class="md-card-toolbar">
<!--<div class="md-card-toolbar-actions" >
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
<i uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
@ -136,11 +140,11 @@
</div>
</div>
</div>-->
<div class="md-card-toolbar-heading-text">
<div class="uk-card-header">
{{topic.name}}
</div>
</div>
<div class="md-card-content uk-grid">
<div class="uk-card-body uk-grid">
<!-- <h6 class="uk-text-bold">{{topic.name}}</h6>-->
<div class="uk-width-1-2 uk-text-center"
title="{{topic.isPublic?'Visible to all users':'Visible to members'}}">

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

@ -1,40 +1,39 @@
<div id="page_content">
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('chartType')"
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
label="Chart Type"></div>
<div *ngIf="stakeholder && canEdit" >
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('chartType')"
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
label="Chart Type"></div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('privacy')"
type="select" [options]="[all].concat(indicatorUtils.isPublic)"
label="Privacy"></div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(indicatorUtils.isActive)"
label="Status"></div>
</div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('privacy')"
type="select" [options]="[all].concat(indicatorUtils.isPublic)"
label="Privacy"></div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(indicatorUtils.isActive)"
label="Status"></div>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
</div>
<div [class.uk-active]="grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button " (click)="changeGrid(true)"><i
class="material-icons">view_module</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
<div [class.uk-active]="!grid" class="uk-margin-small-left">
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
</div>
</div>
</div>
</div>
<div *ngIf="stakeholder && canEdit" id="page_content_inner">
<div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
<div>
<ul id="breadcrumbs">
<!-- <div>
<ul class="uk-breadcrumb">
<li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
<li>
<span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
@ -44,7 +43,7 @@
</span>
</li>
</ul>
</div>
</div>-->
<div class="uk-flex uk-flex-right">
<a class="md-btn md-btn-primary waves-button waves-effect">
<i class="material-icons uk-margin-small-right">remove_red_eye</i>
@ -53,7 +52,7 @@
</a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
</li>
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
@ -69,15 +68,15 @@
class="uk-grid-match uk-grid-small uk-grid uk-margin-top"
uk-sortable="group: number" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div *ngIf="isAdministrator" class="md-btn-group">
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')"
<div *ngIf="isAdministrator" class="actions">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
title="Create a new section"><i
class="material-icons">add</i></button>
uk-icon="icon:plus;ratio:0.8"></i></a>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"
<a [class.uk-disabled]="editing || number.defaultId " class=""
[title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
(click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">clear</i>
</button>
(click)="deleteSectionOpen(number, i, 'number', 'delete')"><i uk-icon="icon:close;ratio:0.8"></i>
</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
@ -112,9 +111,9 @@
[class.uk-width-1-2@m]="!grid || indicator.width === 'large'"
[class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder">
<div class="md-card" [class.md-card-hover]="canReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
<div class="uk-padding-small uk-card-header">
<div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
@ -127,10 +126,10 @@
</div>
</ng-template>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
<i uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
<li *ngIf="!editing"><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
@ -151,11 +150,11 @@
</div>
</div>
</div>
<div class="md-card-toolbar-heading-text">
<div class="uk-card-title">
{{indicator.name ? indicator.name : 'No title available'}}
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-1">
{{indicator.description}}
@ -179,23 +178,23 @@
<div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag"
[class.uk-width-1-3@m]="grid"
[class.uk-width-1-1@m]="!grid">
<div class="md-card clickable" (click)="editNumberIndicatorOpen(number)">
<div class="md-card-toolbar">
<div class="md-card-toolbar-heading-text"
<div class="uk-card uk-card-default clickable" (click)="editNumberIndicatorOpen(number)">
<div class="uk-padding-small uk-card-header">
<div class="uk-card-title"
[class.uk-flex-middle]="!grid"
[class.uk-flex]="!grid"
[class.uk-flex-center]="!grid">
<i *ngIf="!grid" class="material-icons md-36">add</i>
<i *ngIf="!grid" uk-icon="plus"></i>
<span>Create a custom Indicator</span>
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div uk-grid>
<div class="uk-width-1-1">
Create a new number Indicator
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<i class="material-icons md-48">add</i>
<i uk-icon="plus"></i>
</div>
</div>
</div>
@ -205,8 +204,8 @@
</ng-template>
<div *ngIf="grid && isAdministrator" class="new-section uk-margin-top">
<div class="tools uk-flex uk-flex-middle">
<button class="md-btn uk-margin-small-right" (click)="createSection(-1, 'number')">
<i class="material-icons md-24 md-color-white">add</i>
<button class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection(-1, 'number')">
<i uk-icon="plus"></i>
</button>
<span>Create a new section</span>
</div>
@ -219,16 +218,16 @@
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
uk-sortable="group: chart" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)"
<div class="actions">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
title="Create a new section"><i
class="material-icons">add</i></button>
uk-icon="icon:plus;ratio:0.8"></i></a>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button [disabled]="editing || chart.defaultId "
<a [class.uk-disabled]="editing || chart.defaultId "
[title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
class="md-btn md-btn-mini" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
class="material-icons">clear</i>
</button>
class="" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
uk-icon="icon:close;ratio:0.8"></i>
</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
@ -263,9 +262,9 @@
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
[class.disable-sortable]="!canReorder"
[class.uk-sortable-nodrag]="!canReorder">
<div class="md-card" [class.md-card-hover]="canReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
<div class="uk-padding-small uk-card-header">
<div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">
<div *ngFor="let indicatorPath of indicator.indicatorPaths"
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
@ -291,10 +290,10 @@
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
</div>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
<i uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-margin-left">
<li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
</li>
<li *ngIf="!editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
@ -314,11 +313,11 @@
</div>
</div>
</div>
<div class="md-card-toolbar-heading-text">
<div class="">
{{indicator.name}}
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div class="uk-flex uk-flex-center" uk-grid>
<div class="uk-width-1-3 uk-text-center"
@ -362,24 +361,24 @@
<div class="disable-sortable uk-sortable-nodrag"
[class.uk-width-1-3@m]="grid"
[class.uk-width-1-1@m]="!grid">
<div class="md-card clickable" (click)="editChartIndicatorOpen(chart)">
<div class="md-card-toolbar">
<div class="md-card-toolbar-heading-text"
<div class="uk-card uk-card-default clickable" (click)="editChartIndicatorOpen(chart)">
<div class="uk-padding-small uk-card-header">
<div class=""
[class.uk-flex-middle]="!grid"
[class.uk-flex]="!grid"
[class.uk-flex-center]="!grid">
<i *ngIf="!grid" class="material-icons md-36">add</i>
<i *ngIf="!grid" uk-icon="plus"></i>
<span>Create a custom Indicator</span>
</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div *ngIf="grid" class="uk-card-body">
<div uk-grid>
<div class="uk-width-1-1">
Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's.
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<i class="material-icons md-48">add</i>
<i uk-icon="plus"></i>
</div>
</div>
</div>
@ -389,16 +388,16 @@
</ng-template>
<div *ngIf="grid" class="new-section uk-margin-top">
<div class="tools uk-flex uk-flex-middle">
<button [disabled]="editing" class="md-btn uk-margin-small-right" (click)="createSection()">
<i class="material-icons md-24 md-color-white">add</i>
<button [disabled]="editing" class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection()">
<i uk-icon="plus"></i>
</button>
<span>Create a new section</span>
</div>
</div>
</div>
</div>
</div>
<modal-alert #editNumberModal
<modal-alert #editNumberModal
[classBody]="'large-modal'"
(alertOutput)="saveIndicator()"
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">

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

@ -1,4 +1,5 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@ -11,7 +12,70 @@
</div>
</div>
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">
<ul>
<ul class="uk-list">
<li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
<a [routerLink]="'/admin/' + stakeholder.alias + '/general'" class="uk-link">
<span class="" uk-icon="icon:close;ratio:2"></span>
</a>
</li>
<li class="submenu_trigger">
<ul class="uk-nav-default">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li
[title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
class="uk-margin-top uk-margin-small-right uk-visible-toggle"
[class.uk-active]="topicIndex == i" [class.uk-text-primary]="topicIndex == i"
[class.uk-text-bold]="topicIndex == i">
<a [routerLink]="'../' + topic.alias" class="uk-flex">
<span *ngIf="topic.icon" class="menu_icon">
<!-- <span [innerHTML]="satinizeHTML(topic.icon)"></span>-->
</span>
<div class="menu_title uk-width-expand uk-text-center">
{{topic.name}}
<!--<i
class="material-icons md-18 uk-margin-small-left">{{topic.isPublic ? 'public' : 'lock'}}</i>
<i class="material-icons md-18"
[class.md-color-green-300]="topic.isActive">brightness_1</i>-->
</div>
<div class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav uk-list">
<li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleTopicStatus(i); hide(element)">
{{topic.isActive ? 'Inactive' : 'Active'}}</a>
</li>
<li><a (click)="toggleTopicAccess(i); hide(element)">
{{topic.isPublic?'Private':'Public'}}</a>
</li>
<hr *ngIf="!topic.defaultId" class="uk-nav-divider">
<li *ngIf="!topic.defaultId"><a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</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>
</ul>
</div>
</div>
</a>
</li>
</ng-template>
<li class="uk-text-center uk-margin-top uk-visible-toggle">
<a href="#" (click)="editTopicOpen(-1); $event.preventDefault()">
<!-- <span class="menu_icon"><i class="material-icons">add</i></span>-->
<span
class="menu_icon uk-icon-button uk-button-primary icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
<span class="uk-hidden-hover"> Create new topic</span>
</a>
</li>
</ul>
</li>
</ul>
<!-- <ul class="uk-list">
<li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
<a [routerLink]="'../'" class="md-color-white">
<span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
@ -20,10 +84,10 @@
</div>
<div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover md-color-white">more_vert</i>
<i class="onHover " uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<ul class="uk-nav uk-dropdown-nav uk-list">
<li><a (click)="editTopicOpen(); hide(element)">Edit</a></li>
<li><a (click)="toggleTopicStatus(); hide(element)">
{{stakeholder.topics[topicIndex].isActive ? 'Inactive' : 'Active'}}</a>
@ -35,10 +99,10 @@
<li *ngIf="!stakeholder.topics[topicIndex].defaultId"><a
(click)="deleteTopicOpen('delete'); hide(element)">Delete
</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>-->
&lt;!&ndash; <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash; <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash; <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash; </ng-container>&ndash;&gt;
</li>
</ul>
</div>
@ -50,18 +114,15 @@
[class.act_section]="selectedCategoryIndex === i && toggle"
[title]="category.name+': '+(category.isActive?'Active':'Inactive')+', '+(category.isPublic?'Public':'Private')"
class="submenu_trigger">
<a href="#" (click)="toggleCategory(i);$event.preventDefault()">
<a href="#" (click)="toggleCategory(i);$event.preventDefault()" class="uk-flex">
<span *ngIf="category.icon" class="menu_icon"><i
class="material-icons">{{category.icon}}</i></span>
<div class="menu_title uk-width-expand" >
{{category.name}}
<!-- <i class="material-icons md-18 uk-margin-small-left">{{category.isPublic ? 'public' : 'lock'}}</i>-->
<!-- <i class="material-icons md-18"-->
<!-- [class.md-color-green-300]="category.isActive">brightness_1</i>-->
</div>
<div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i>
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
@ -75,10 +136,10 @@
<hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId" class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
(click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>-->
&lt;!&ndash; <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash; <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash; <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash; </ng-container>&ndash;&gt;
</li>
</ul>
</div>
@ -89,18 +150,18 @@
let-subcategory let-j="index">
<li [class.act_item]="categoryIndex === i && subCategoryIndex === j"
[title]="subcategory.name +': ' + (subcategory.isActive?'Active':'Inactive')+', '+(subcategory.isPublic?'Public':'Private')">
<a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
<a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()" class="uk-flex">
<span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
class="material-icons">{{subcategory.icon}}</i></span>
<div class="menu_title uk-width-expand ">
{{subcategory.name}}
<!-- <i class="material-icons md-18 uk-margin-small-left">{{subcategory.isPublic ? 'public' : 'lock'}}</i>
&lt;!&ndash; <i class="material-icons md-18 uk-margin-small-left">{{subcategory.isPublic ? 'public' : 'lock'}}</i>
<i class="material-icons md-18"
[class.md-color-green-300]="subcategory.isActive">brightness_1</i>-->
[class.md-color-green-300]="subcategory.isActive">brightness_1</i>&ndash;&gt;
</div>
<div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i>
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
@ -115,10 +176,10 @@
class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId"><a
(click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>-->
&lt;!&ndash; <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash; <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash; <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash; </ng-container>&ndash;&gt;
</li>
</ul>
</div>
@ -128,7 +189,7 @@
</ng-template>
<li>
<a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
<span class="menu_icon"><i class="material-icons">add</i></span>
<span class="menu_icon"><i uk-icon="plus"></i></span>
<span class="menu_title">Create new Subcategory</span>
</a>
</li>
@ -137,17 +198,120 @@
</ng-template>
<li>
<a href="#" (click)="editCategoryOpen();$event.preventDefault()">
<span class="menu_icon"><i class="material-icons">add</i></span>
<span class="menu_icon"><i uk-icon="plus"></i></span>
<span class="menu_title">Create new Category</span>
</a>
</li>
</ul>
</ul>-->
</div>
</div>
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
(click)="toggleOpen($event)" >
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5" ></span>
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
</div>
</aside>
<indicators *ngIf="stakeholder" [properties]="properties"
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
<div id="page_content">
<div *ngIf="stakeholder"
class="uk-navbar-container uk-sticky uk-sticky-fixed"
style="top: 100px; position: fixed; width: 100%">
<div class="uk-margin-large-left">
<nav class=" ">
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="">
<ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
class="categoriesTabs uk-tab admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle"
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
<a (click)="toggleCategory(i)"
class="uk-margin-remove-bottom uk-h4"
><span>{{category.name}}</span>
<span class="uk-invisible-hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleCategoryStatus(i); hide(element)">
{{category.isActive ? 'Inactive' : 'Active'}}</a>
</li>
<li><a (click)="toggleCategoryAccess(i); hide(element)">
{{category.isPublic ? 'Private' : 'Public'}}</a>
</li>
<hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId" class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
(click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
</a>
</li>
</ng-template>
<li>
<span href="#" (click)="editCategoryOpen();$event.preventDefault()" class="uk-visible-toggle clickable">
<span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
<span class="uk-hidden-hover uk-te"> Create new category</span>
</span>
</li>
</ul>
</div>
</nav>
<ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] &&
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0"
class="uk-subnav uk-subnav-pill subCategoriesTabs admin">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
<li
[class.uk-active]="(subCategory.alias ===
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)" class=" uk-visible-toggle uk-flex uk-flex-middle">
<a (click)="chooseSubcategory(categoryIndex, i);$event.preventDefault()"
class="uk-margin-remove-bottom uk-h3"
><span>{{subCategory.name}}</span>
</a>
<span class="uk-invisible-hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class=" onHover" uk-icon="more-vertical"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
<li><a (click)="toggleSubcategoryStatus(i); hide(element)">
{{subCategory.isActive ? 'Inactive' : 'Active'}}</a>
</li>
<li><a (click)="toggleSubcategoryAccess(i); hide(element)">
{{subCategory.isPublic ? 'Private' : 'Public'}}</a>
</li>
<hr *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"
class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"><a
(click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
</li>
</ng-template>
<li>
<span href="#" (click)="editSubCategoryOpen();$event.preventDefault()"
class="uk-padding-remove uk-visible-toggle clickable">
<span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
<span class="uk-hidden-hover"> Create new sub category</span>
</span>
</li>
</ul>
</div>
</div>
<div id="page_content_inner" class="uk-padding-large" style="margin-top: 140px;">
<indicators *ngIf="stakeholder" [properties]="properties"
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"></indicators>
</div>
</div>
<modal-alert #deleteModal (alertOutput)="deleteElement()">
You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
<div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">

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

@ -1,6 +1,6 @@
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {DomSanitizer, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {Category, Section, Stakeholder, SubCategory, Topic} from "../openaireLibrary/monitor/entities/stakeholder";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
@ -11,6 +11,7 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {StakeholderUtils} from "../utils/indicator-utils";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
declare var UIkit;
@ -58,7 +59,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private router: Router,
private title: Title,
private fb: FormBuilder,
private stakeholderService: StakeholderService) {
private stakeholderService: StakeholderService,
private layoutService: LayoutService) {
}
public ngOnInit() {
@ -73,7 +75,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if (stakeholder) {
this.stakeholder = stakeholder;
this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
if(params['topic']) {
this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
}else{
this.topicIndex = 0;
}
this.categoryIndex = 0;
this.subCategoryIndex = 0;
// console.debug(this. stakeholder.topics[this.topicIndex])
// console.debug(this. stakeholder.topics[this.topicIndex].categories)
console.debug( this. stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subCategoryIndex])
if (this.topicIndex === -1) {
this.navigateToError();
} else {
@ -156,14 +167,19 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}));
}
public editTopicOpen() {
this.index = this.topicIndex;
public editTopicOpen(index=this.topicIndex) {
this.index = index;
this.type = 'topic';
this.buildTopic(this.stakeholder.topics[this.index]);
if (index === -1) {
this.buildTopic(new Topic(null, null, null, true, true));
} else {
this.buildTopic(this.stakeholder.topics[index]);
}
this.editOpen();
}
public saveTopic() {
public saveTopic(index=this.topicIndex) {
this.index = index;
if (!this.form.invalid) {
let path = [this.stakeholder._id];
let callback = (topic: Topic): void => {
@ -173,47 +189,46 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
}
}
public toggleTopicStatus() {
this.index = this.topicIndex;
public toggleTopicStatus(index=this.topicIndex) {
this.type = 'topic';
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id
this.stakeholder.topics[index]._id
];
this.toggleStatus(this.stakeholder.topics[this.topicIndex], path);
this.toggleStatus(this.stakeholder.topics[index], path);
}
public toggleTopicAccess() {
this.index = this.topicIndex;
public toggleTopicAccess(index=this.topicIndex) {
this.index = index;
this.type = 'topic';
let path = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id
this.stakeholder.topics[index]._id
];
this.toggleAccess(this.stakeholder.topics[this.topicIndex], path);
this.toggleAccess(this.stakeholder.topics[index], path);
}
public deleteTopicOpen(childrenAction: string = null) {
public deleteTopicOpen( index=this.topicIndex, childrenAction: string = null) {
this.type = 'topic';
this.index = this.topicIndex;
this.index = index;
this.element = this.stakeholder.topics[this.index];
this.deleteOpen(childrenAction);
}
public deleteTopic() {
public deleteTopic(index=this.topicIndex) {
let path: string[] = [
this.stakeholder._id,
this.stakeholder.topics[this.index]._id
this.stakeholder.topics[index]._id
];
let callback = (): void => {
this.stakeholder.topics.splice(this.index, 1);
this.stakeholder.topics.splice(index, 1);
};
this.delete('Topic has been successfully be deleted', path, callback, true);
}
public toggleCategory(index: number) {
if (this.selectedCategoryIndex !== index) {
this.selectedCategoryIndex = index;
if (this.categoryIndex !== index) {
this.categoryIndex = index;
this.toggle = true;
} else {
this.toggle = !this.toggle;
@ -558,4 +573,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
return this.type;
}
}
public get isSmallScreen() {
return this.layoutService.isSmallScreen;
}
public get open() {
return this.layoutService.open;
}
public toggleOpen(event: MouseEvent) {
event.preventDefault();
this.layoutService.setOpen(!this.open);
}
}

99
src/assets/monitor-custom.css
View File

@ -20,6 +20,7 @@
/* Dashboard variables*/
--sidebar-width: 320px;
--sidebar-mini-width: 130px;
--sidebar-font-size: 14px;
--header-height: 70px;
--primary-color: #0d47a1;
@ -40,11 +41,7 @@
.stakeholderPage #sidebar_main .sidebar_main_header .logo{
margin-top: 15px;
}
.stakeholderPage .uk-navbar-container{
/*background-color: white !important;*/
padding-left: 0;
}
.stakeholderPage .uk-navbar-center .uk-logo{
max-height: var(--header-height);
}
@ -56,10 +53,10 @@
.stakeholderPage #header_main{
padding-left: 6px;
}
#header_main.light_header {
/*#header_main.light_header {
background: #F9FBFC !important;
color: #000000B3;
}
}*/
.dashboard #header_main.light_header .uk-navbar-nav > li > user-mini > a, .dashboard #header_main.light_header .uk-navbar-nav > li > a {
color: #000000B3;
@ -71,38 +68,12 @@
stroke: #000000B3;
}
.stakeholderPage #hide_controls:hover #toggle:hover .material-icons, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
color: var(--portal-main-color);
/*border: var(--portal-main-color) solid 0px;*/
}
.stakeholderPage #hide_controls #toggle:hover .material-icons , .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons, #hide_controls #toggle .material-icons{
color: var(--portal-main-color) !important;
}
.stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon svg * {
color: #1A1A1A !important;
fill: #1A1A1A !important;
}
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg * {
color: var(--portal-main-color) !important;
fill: var(--portal-main-color) !important;
}
.sidebar_mini #sidebar_main .menu_section > ul > li {
margin-bottom: 15px !important;
}
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover,
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a:hover
{
/*background-color: var(--portal-main-color) !important;*/
}
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_title,.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover .menu_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons,
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg *
/*, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a > .menu_icon svg **/
/*.stakeholderPage #sidebar_main .menu_section > ul > li:hover > a > .menu_icon .material-icons*/
{
/*color: white !important;*/
/*fill: white !important;*/
color: var(--portal-main-color) !important;
font-weight: 700;
}
@ -111,22 +82,9 @@
max-height: calc(var(--header-height) - 30px);
}
.stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
/*border-bottom-color: var(--portal-main-color) !important;*/
border: 0px !important;
border: 0 transparent !important;
color: var(--portal-main-color) !important
}
.stakeholderPage #style_switcher {
top:200px;
}
.stakeholderPage .uk-navbar-container{
/*box-shadow: 0px 1px 3px #0000004D;*/
}
/*
.stakeholderPage #sidebar_main{
background-color: #F0F4F2;
}*/
.stakeholderPage .categoriesTabs >li a{
font-size: 14px;
text-transform: capitalize;
@ -150,12 +108,9 @@ bottom a:not(.license), bottom a > :not(svg) {
text-decoration: underline;
}
#style_switcher{
#style_switcher .uk-offcanvas-bar{
width:450px !important;
}
#style_switcher:not(.switcher_active){
margin-right: -450px !important;
}
.ng5-slider .ng5-slider-pointer, .ng5-slider .ng5-slider-selection {
background-color: var(--portal-main-color) !important;
@ -169,13 +124,6 @@ bottom a:not(.license), bottom a > :not(svg) {
top:200px !important;
}
#style_switcher{
top: 0 !important;
bottom: 0 !important;
/*padding: 50px !important;*/
z-index: 1105 !important;
}
.uk-subnav.recentyears > :first-child {
padding-left: 0 !important;
@ -185,13 +133,6 @@ bottom a:not(.license), bottom a > :not(svg) {
padding-left: 0 !important;
}
/*add miniTitle*/
.sidebar_mini #sidebar_main .menu_section > ul > li > a .menu_icon{
height:35px !important;
}
/* #sidebar_main .menu_section > ul > li > a .menu_icon{*/
/* height:35px !important;*/
/*}*/
#sidebar_main .menu_section > ul > li > a {
height:inherit !important;
}
@ -221,10 +162,6 @@ bottom a:not(.license), bottom a > :not(svg) {
margin-left: auto;
}
.stakeholderPage #sidebar_main .menu_section > ul > li > a {
display: inherit !important;
text-align: center;
}
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
width: 150px;
height: 100%;
@ -238,7 +175,7 @@ bottom a:not(.license), bottom a > :not(svg) {
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 35px auto 30px auto;
margin: 63px auto 63px auto;
}
.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
-webkit-transform: rotate(0deg);
@ -258,11 +195,9 @@ bottom a:not(.license), bottom a > :not(svg) {
border: 1px solid #1a1a1a;
color: #1a1a1a;
border-radius: 40px;
background-color: white;
background-color: transparent;
opacity: 0.5 ;
/*background: var(--portal-main-color) !important;*/
/*color: var(--portal-main-contrast) !important;*/
padding: 5px 10px;
}
@ -278,7 +213,7 @@ bottom a:not(.license), bottom a > :not(svg) {
}
.stakeholderPage #style_switcher {
.stakeholderPage #style_switcher .uk-offcanvas-bar {
box-shadow: none;
border: 1px solid var(--monitor-portal-color);
}
@ -287,10 +222,10 @@ bottom a:not(.license), bottom a > :not(svg) {
border-right: 1px solid var(--monitor-portal-color);
}
.stakeholderPage .md-card.uk-disabled, .stakeholderPage .md-card.semiFiltered{
.stakeholderPage .uk-card.uk-disabled, .stakeholderPage .uk-card.semiFiltered{
opacity: 0.5;
}
.stakeholderPage .md-card.semiFiltered > * > .highcharts-series-group{
.stakeholderPage .uk-card.semiFiltered > * > .highcharts-series-group{
opacity: 0.5;
}
.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul.searchLink {
@ -303,11 +238,9 @@ bottom a:not(.license), bottom a > :not(svg) {
}
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{
background-color: #F9FBFC !important;
box-shadow: none;
}
.stakeholderPage #page_content_inner > div.indicators{
padding: 0px 150px;
}
.stakeholderPage #page_content_inner {
background-image: url(/assets/monitor-shapes-bg.svg);
@ -317,10 +250,6 @@ bottom a:not(.license), bottom a > :not(svg) {
background-attachment: fixed;
}
/*Don't grey out */
.sidebar_main_active #page_content, .sidebar_main_active #header_main, .sidebar_main_active #top_bar {
margin-left: 320px !important;
}
@media only screen and (max-width: 1219px) {
.sidebar_main_active #page_content:before {
opacity: 0 !important;
@ -332,6 +261,6 @@ bottom a:not(.license), bottom a > :not(svg) {
opacity: 0.8;
}
.dashboard .sidebar_mini #hide_controls {
width: 130px;
.uk-navbar-container:not(.uk-navbar-transparent){
background-color: #F9FBFC !important;
}

372
src/assets/new.css Normal file
View File

@ -0,0 +1,372 @@
:root {
--portal-main-color: #4686E5; /*#8DCA26;*/
--portal-main-contrast: white;
--portal-dark-color: #004494;/*#7c9144;*/
--openaire-main-color: #313179;
--explore-portal-color: #D95F2D;
--provide-portal-color: #37C7E9;
--monitor-portal-color: #8DCA26;
--connect-portal-color: #EBB13E;
--develop-portal-color: #DA65AB;
--explore-portal-lower-tone: #a0462c;
--provide-portal-lower-tone: #3A8FA3;
--monitor-portal-lower-tone: #7c9144;
--connect-portal-lower-tone: #b48536;
--develop-portal-lower-tone: #9f4e7e;
/* Dashboard variables*/
--sidebar-width: 320px;
--sidebar-mini-width: 130px;
--sidebar-font-size: 14px;
--header-height: 70px;
--primary-color: #0d47a1;
--secondary-color: #1CA9D5;
--monitor-header-menu-height: 100px;
}
/*Stakeholder Specific*/
.publicationsSearchForm{
background-image: none;
}
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{
background-color: #F9FBFC !important;
box-shadow: none;
}
/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
/* background: #F9FBFC !important;*/
/*}*/
.stakeholderPage #page_content_inner {
background-image: url(/assets/monitor-shapes-bg.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
}
/*General*/
#sidebar_main #sidebar_content{
width:var(--sidebar-width);
position: fixed;
height: 100%;
top: 0;
bottom: 0;
left: 0;
z-index: 981;
background: #fff;
}
.stakeholderPage {
background: #F9FBFC !important;
}
#style_switcher .uk-offcanvas-bar {
box-sizing: border-box;
padding: 16px;
}
#style_switcher_toggle {
top: 320px !important;
position: fixed;
height: 36px;
/*background: #fff;*/
background-color: rgb(255, 255, 255);
border-radius: 4px 0 0 4px;
cursor: pointer;
padding: 0 8px;
box-shadow: -2px 2px 5px rgba(0,0,0,.26);
box-sizing: border-box;
/*z-index: 981;*/
}
#filters_switcher_toggle {
top: 320px !important;
position: fixed;
height: 36px;
background-color: var(--portal-main-color);
border-radius: 4px 0 0 4px;
cursor: pointer;
padding: 0 2px;
box-shadow: -2px 2px 5px rgba(0,0,0,.26);
box-sizing: border-box;
/*z-index: 981;*/
right: 0;
}
.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle{
left:calc( var(--sidebar-mini-width) + 0px);
}
.sidebar_main_swipe #sidebar_switcher_toggle{
left:calc( var(--sidebar-width) + 0px);
}
#sidebar_switcher_toggle {
top: 320px !important;
position: fixed;
background: #fff;
background-color: rgb(255, 255, 255);
border: 1px solid var(--portal-dark-color);
border-left: 0px ;
cursor: pointer;
padding: 0 4px;
width:10px;
height: 66px;
z-index: 981;
}
/*Sidebar*/
.badge {
height: 59px;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
background-color: transparent;
display: block !important;
}
/*Style*/
#sidebar_main .menu_section > ul li > a {
font-size: var(--sidebar-font-size);
color: rgba(0,0,0,.7);
}
.dashboard #sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a {
color: var(--portal-main-color);
}
/*#sidebar_main .menu_section > ul li.current_section > a {*/
/* font-size: var(--sidebar-font-size);*/
/* color: rgba(0,0,0,.7);*/
/*}*/
.sidebar_main_swipe #page_content{
padding-left: var(--sidebar-width);
transition: 0.5s;
}
/*Sidebar close*/
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content{
padding-left:0;
transition: 0.5s;
}
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
display: none;
width:0;
}
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle{
left: 10px;
}
/*Sidebar mini*/
.sidebar_main_swipe.sidebar_mini #page_content{
padding-left:var(--sidebar-mini-width);
transition: 0.5s;
}
.sidebar_mini #sidebar_main #sidebar_content {
width: var(--sidebar-mini-width);
}
#sidebar_main .menu_section > ul > li > a {
display: block;
}
.dashboard #sidebar_main #sidebar_content{
border-right: 1px solid var(--portal-dark-color);
}
/*Sidebar Header logo */
#sidebar_main .sidebar_main_header .portalLogo{
background: url("/assets/logo-large-monitor.png") no-repeat;
background-size: contain ;
margin-left: 35px;
margin-top: 5px;
height:50px;
}
.sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{
background: url("/assets/logo-small-monitor.png") no-repeat !important;
background-size: 50px 50px !important;
}
/*Sidebar Rotation*/
.stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
width: 150px;
height: 100%;
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: 63px auto 63px auto;
}
.stakeholderPage #sidebar_main .menu_section > ul > li {
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
/*display: block;*/
/*text-align: center;*/
/*margin-right: auto;*/
/*margin-left: auto;*/
}
.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
width: inherit;
height: inherit;
margin: 0px 0px;
}
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
border-color: var(--monitor-portal-color);
}
/*tabs
*/
.categoriesTabs.uk-tab > li > a, .categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
border: 0 transparent !important;
}
.categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
color: var(--portal-main-color) !important
}
.categoriesTabs >li a{
font-size: 14px;
text-transform: capitalize;
}
.subCategoriesTabs >li a{
font-size: 13px;
text-transform: capitalize;
}
.categoriesTabs > li.uk-active a, .subCategoriesTabs > li.uk-active a{
font-weight:bold;
}
.uk-subnav-pill.subCategoriesTabs > li > a{
border: 1px solid #1a1a1a;
color: #1a1a1a;
border-radius: 40px;
background-color: transparent;
opacity: 0.5 ;
padding: 5px 10px;
}
.uk-subnav-pill.subCategoriesTabs > li.uk-active > a{
color: white;
border: 1px solid var(--portal-main-color);
background-color: var(--portal-main-color);
opacity: 1 ;
}
.uk-tab.categoriesTabs::before {
border-bottom: none !important;
}
/*dashboard tabs*/
.categoriesTabs.uk-tab.admin > li.uk-active > a, .categoriesTabs.uk-tab.admin > li > a:focus, .categoriesTabs.uk-tab.admin > li > a:hover {
color: var(--portal-dark-color) !important
}
.uk-subnav-pill.subCategoriesTabs.admin > li.uk-active > a{
border: 1px solid var(--portal-dark-color);
background-color: var(--portal-dark-color);
}
/* Section Tools*/
.dashboard .section {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: rgba(0, 0, 0, 0) solid 1px;
position: relative;
}
.dashboard .section .tools {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
display: none;
}
.dashboard .section:not(.list-view) {
border: white solid 1px;
}
.dashboard .section:not(.list-view):hover {
border: var(--secondary-color) solid 1px;
}
.dashboard .section:not(.list-view):hover .tools {
display: block;
width: 50px;
background: var(--secondary-color) ;
color: white;
-webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%);
}
.dashboard .section:not(.list-view):hover .tools a{
color: white;
}
.dashboard .section:hover .tools .actions a:last-child {
margin-left: 3px
;
}
/* New section*/
.dashboard .new-section {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: #cecece dashed 2px;
background-color: white;
min-height: 100px;
position: relative;
}
.dashboard .new-section .tools {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dashboard .new-section .tools .md-btn {
background-color: var(--secondary-color);
position: relative;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
}
.dashboard .new-section .tools .md-btn .material-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/*Search */
#searchFormPanel{
margin-top: 30px;
height: 250px;
}

4
src/index.html
View File

@ -32,10 +32,10 @@
<app-root></app-root>
</div>
</body>
<script src="assets/theme-assets/js/common.min.js"></script>
<!--<script src="assets/theme-assets/js/common.min.js"></script>
<script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
<script src="assets/theme-assets/uikit/js/uikit.min.js"></script>
<script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>
<script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>-->
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<script>
if(Modernizr.touch) {

26
src/styles.css
View File

@ -1,9 +1,21 @@
/* You can add global styles to this file, and also import other style files */
@import "assets/theme-assets/dashboard-custom.css";
@import "assets/monitor-custom.css";
@import "assets/theme-assets/uikit/css/uikit.min.css";
@import "assets/theme-assets/icons/flags/flags.min.css";
@import "assets/theme-assets/css/style_switcher.min.css";
@import "assets/theme-assets/css/main.css";
@import "assets/theme-assets/css/themes/my_theme.min.css";
/*@import "assets/theme-assets/dashboard-custom.css";*/
/*@import "assets/monitor-custom.css";*/
/*@import "assets/theme-assets/uikit/css/uikit.min.css";*/
/*@import "assets/theme-assets/icons/flags/flags.min.css";*/
/*@import "assets/theme-assets/css/style_switcher.min.css";*/
/*@import "assets/theme-assets/css/main.css";*/
/*@import "assets/theme-assets/css/themes/my_theme.min.css";*/
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "assets/common-assets/common/theme.css";
@import "assets/common-assets/common/custom.css";
@import "assets/common-assets/library.css";
/*@import "assets/theme-assets/dashboard-custom.css";*/
/*@import "assets/monitor-custom.css";*/
@import "assets/new.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import "assets/common-assets/common/theme-changes.css";