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

[Monitor Dashboard]: Add my theme. Add uikit 3 js and icons. Add save functionality on elements. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57591 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-12 15:55:37 +00:00
parent 8210fe3e37
commit 48f9b30070
20 changed files with 488 additions and 4081 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,6 @@ import {User} from './openaireLibrary/login/utils/helper.class';
import {UserManagementService} from "./openaireLibrary/services/user-management.service";
import {SideBarService} from "./library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "./services/stakeholder.service";
import {Stakeholder} from "./utils/entities/stakeholder";
import {StakeholderCreator} from "./utils/entities/stakeholderCreator";
@Component({
selector: 'app-root',
@ -24,7 +22,7 @@ export class AppComponent {
private propertiesService: EnvironmentSpecificService,
private router: Router,
private userManagementService: UserManagementService,
private sideBarService: SideBarService,
private sidebarService: SideBarService,
private stakeholderService: StakeholderService,
private cdr: ChangeDetectorRef) {
}
@ -44,9 +42,8 @@ export class AppComponent {
if(!this.stakeholderService.stakeholder ||
this.stakeholderService.stakeholder.alias !== params['stakeholder']) {
this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
// stakeholder = Stakeholder.createECStakeholder();
// stakeholder = StakeholderCreator.createFunderFromDefaultProfile("ec","funder","ec__________::EC","European Commission","EC",false,"ec",true,true);
this.stakeholderService.setStakeholder(stakeholder);
this.stakeholderService.setStakeholder(stakeholder);
this.sidebarService.setOpen(true);
});
}
} else {
@ -63,22 +60,22 @@ export class AppComponent {
console.log(error);
});
});
this.sideBarService.hasSidebar.subscribe(hasSidebar => {
this.sidebarService.hasSidebar.subscribe(hasSidebar => {
this.hasSidebar = hasSidebar;
this.cdr.detectChanges();
});
}
public get open() {
return this.sideBarService.open;
return this.sidebarService.open;
}
public toggleOpen(event = null) {
if(!event) {
this.sideBarService.setOpen(!this.open);
this.sidebarService.setOpen(!this.open);
} else if(event && event['value'] === true) {
this.sideBarService.setOpen(false);
this.sidebarService.setOpen(false);
}
}
}

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

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
@Component({
@ -7,11 +7,15 @@ import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.servic
<error></error>
`
})
export class OpenaireErrorPageComponent implements OnInit{
export class OpenaireErrorPageComponent implements OnInit, OnDestroy{
constructor(private sidebarService: SideBarService) {}
ngOnInit(): void {
this.sidebarService.setHasSidebar(false);
}
ngOnDestroy(): void {
this.sidebarService.setHasSidebar(true);
}
}

92
src/app/home/home.component.html
View File

@ -2,8 +2,8 @@
<div *ngIf="stakeholder" class="sidebar_main_header">
<div class="uk-padding-small">
<img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
<div class="uk-text-bold">{{stakeholder.index_name}}</div>
<div>Admin Dashboard</div>
<h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>
<span class="uk-text-large">Admin Dashboard</span>
</div>
</div>
<div *ngIf="stakeholder" class="menu_section">
@ -19,21 +19,75 @@
<ul [style.display]="(analysisOpen?'block':'none')">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li>
<a [routerLink]="topic.alias">
<a (click)="navigateTo(topic.alias)">
<span *ngIf="topic.icon" class="menu_icon uk-margin-small-right"><i
class="material-icons">{{topic.icon}}</i></span>
<span class="menu_title">{{topic.name}}</span>
<div class="menu_title uk-inline">
{{topic.name}}
<button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
(click)="$event.stopPropagation();saveTopicOpen(editTopic, i)">
<i class="material-icons">more_horiz</i>
</button>
</div>
</a>
<div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
<div *ngIf="copyTopic">
<div class="md-card">
<div class="md-card-content uk-position-relative">
<a [routerLink]="" class="uk-position-top-right">
<i (click)="hide(editTopic)" class="material-icons">close</i>
</a>
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-1">
<label class="uk-text-bold">Topic Settings</label>
<input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
[class.uk-form-danger]="!valid" type="text">
</div>
<div class="uk-width-1-1">
<label>Description</label>
<textarea class="uk-textarea" [(ngModel)]="copyTopic.description"
rows="3"
[class.uk-form-danger]="!valid" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
</div>
</div>
<hr>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic, i)">Delete</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
(click)="saveTopic(editTopic, i)">Save
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ng-template>
<li>
<a [routerLink]="" (click)="newTopicOpen()">
<a [routerLink]="" (click)="saveTopicOpen(newTopic)">
<span class="menu_icon"><i class="material-icons">add</i></span>
<span class="menu_title">Create new Topic</span>
</a>
<div uk-drop="mode: click; offset: -2; delay-hide: 0" #newTopic
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #newTopic
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
<div *ngIf="topic">
<div *ngIf="copyTopic">
<div class="md-card">
<div class="md-card-content uk-position-relative">
<a [routerLink]="" class="uk-position-top-right">
@ -42,17 +96,23 @@
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-1">
<label class="uk-text-bold">New Topic</label>
<input class="uk-input uk-form-small" [(ngModel)]="topic.name"
<input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
[class.uk-form-danger]="!valid" type="text">
</div>
<div class="uk-width-1-1">
<label>Description</label>
<textarea class="uk-textarea" [(ngModel)]="copyTopic.description"
rows="3"
[class.uk-form-danger]="!valid" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
<select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isPublic">
<option [value]="true">Public</option>
<option [value]="false">Private</option>
</select>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" [(ngModel)]="topic.isActive">
<select class="uk-select uk-form-small" [(ngModel)]="copyTopic.isActive">
<option [value]="true">Active</option>
<option [value]="false">Inactive</option>
</select>
@ -64,7 +124,9 @@
<button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="createTopic(newTopic)">Create</button>
<button class="md-btn md-btn-small md-btn-primary uk-float-right" (click)="saveTopic(newTopic)">
Create
</button>
</div>
</div>
</div>
@ -85,7 +147,7 @@
<div class="uk-text-large uk-margin-bottom">
<div>
Modify or add new topics, categories and content.<br><br>
Start your navigation through the <span class="md-color-blue-700">left side menu!</span>
Start your navigation through the <span class="md-color-blue-900">left side menu!</span>
</div>
<div class="uk-margin-small-top uk-margin-small-bottom uk-margin-large-left">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="88" viewBox="0 0 30 88">
@ -102,10 +164,11 @@
</svg>
</div>
<div class="uk-width-1-1">
Select one of the <span class="md-color-blue-700">topics below</span>!
Select one of the <span class="md-color-blue-900">topics below</span>!
</div>
</div>
<div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium" uk-grid uk-height-match="target: .target">
<div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium" uk-grid
uk-height-match="target: .target">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
<div>
<a [routerLink]="topic.alias">
@ -123,3 +186,4 @@
</div>
</div>
</div>
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>

86
src/app/home/home.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -9,6 +9,7 @@ import {Stakeholder, Topic} from "../utils/entities/stakeholder";
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "../services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
declare var UIkit;
@ -23,10 +24,14 @@ export class HomeComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public analysisOpen: boolean = true;
private errorMessages: ErrorMessagesComponent;
public topic: Topic;
public copyTopic: Topic;
public valid = true;
public element: any;
public index: number;
properties: EnvProperties;
@ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
constructor(
private route: ActivatedRoute,
private router: Router,
@ -44,9 +49,8 @@ export class HomeComponent implements OnInit, OnDestroy {
this.properties = data.envSpecific;
this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if (stakeholder) {
this.sideBarService.setHasSidebar(true);
this.stakeholder = HelperFunctions.copy(stakeholder);
this.topic = null;
this.copyTopic = null;
this.title.setTitle(stakeholder.index_name);
}
});
@ -56,9 +60,8 @@ export class HomeComponent implements OnInit, OnDestroy {
public ngOnDestroy() {
}
public newTopicOpen() {
this.topic = new Topic(null, null, null,true, true);
this.valid = true;
public show(element) {
UIkit.drop(element).show();
}
public hide(element) {
@ -77,13 +80,72 @@ export class HomeComponent implements OnInit, OnDestroy {
}
}
public createTopic(element) {
if(this.topic.name && this.topic.name !== '') {
this.topic.alias = this.topic.name.toLowerCase();
this.stakeholder.topics.push(this.topic);
this.hide(element);
public saveTopicOpen(element, index = -1) {
if(index === -1) {
this.copyTopic = new Topic(null, null, null,true, true);
} else {
this.copyTopic = HelperFunctions.copy(this.stakeholder.topics[index]);
}
this.show(element);
this.valid = true;
}
public saveTopic(element, index = -1) {
if(this.copyTopic.name && this.copyTopic.name !== ''
&& this.copyTopic.description && this.copyTopic.description !== '') {
if(!this.copyTopic.alias) {
this.copyTopic.alias = this.copyTopic.name.toLowerCase().trim();
}
if(index === -1) {
this.stakeholder.topics.push(this.copyTopic);
this.save('Topic has been successfully created', element);
} else {
this.stakeholder.topics[index] = HelperFunctions.copy(this.copyTopic);
this.save('Topic has been successfully saved', element);
}
} else {
this.valid = false;
}
}
public deleteTopicOpen(element, index: number) {
this.element = element;
this.index = index;
this.deleteTopicModal.alertHeader = true;
this.deleteTopicModal.alertMessage = true;
this.deleteTopicModal.cancelButton = true;
this.deleteTopicModal.cancelButtonText = 'No';
this.deleteTopicModal.okButtonText = 'Yes';
this.deleteTopicModal.message = 'This topic will permanently be deleted. Are you sure you want to proceed?';
this.deleteTopicModal.open();
}
public navigateTo(alias: string) {
this.router.navigate(['./' + alias], {
relativeTo: this.route
});
}
private save(message: string, element) {
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification(message, {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
this.hide(element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(element);
});
}
deleteTopic() {
}
}

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

@ -10,10 +10,11 @@ import {HomeRoutingModule} from "./home-routing.module";
import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
import {RouterModule} from "@angular/router";
import {FormsModule} from "@angular/forms";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
@NgModule({
imports: [
CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule
CommonModule, HomeRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule
],
declarations: [
HomeComponent

12
src/app/library/sharedComponents/sidebar/sideBar.service.ts
View File

@ -6,8 +6,16 @@ import {BehaviorSubject, Observable} from "rxjs";
})
export class SideBarService {
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* Set this to true when sidebar items are ready.
*/
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* Set this variable to false in pages when it is not needed to have sidebar on Init
* and on Destroy set this to true.
*/
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
constructor() {}

8
src/app/services/stakeholder.service.ts
View File

@ -2,6 +2,7 @@ import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {BehaviorSubject, Observable} from "rxjs";
import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
@Injectable({
providedIn: "root"
@ -36,13 +37,14 @@ export class StakeholderService {
}
saveIndicator(url: string, path: string[], indicator: Indicator): Observable<Indicator> {
path = HelperFunctions.encodeArray(path);
return this.http.post<Indicator>(url + '/' + path.join('/') +
'/indicator/save', indicator);
}
deleteIndicator(url: string, path: string[], indicatorId: string): Observable<boolean> {
return this.http.delete<boolean>(url + '/' + path.join('/') +
'/indicator/delete/' + encodeURIComponent(indicatorId));
deleteElement(url: string, path: string[]): Observable<boolean> {
path = HelperFunctions.encodeArray(path);
return this.http.delete<boolean>(url + '/' + path.join('/'))
}
getStakeholderAsObservable(): Observable<Stakeholder> {

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

@ -54,17 +54,21 @@
<div *ngIf="stakeholder" id="page_content_inner">
<div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
<div>
<ul class="uk-breadcrumb">
<li class="uk-disabled">{{stakeholder.topics[topicIndex].name}}</li>
<li>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</li>
<li>{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}</li>
<ul id="breadcrumbs">
<li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
<li><span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
<li>
<span class="md-color-blue-900 uk-text-bold">
{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}
</span>
</li>
</ul>
</div>
<div class="uk-flex uk-flex-right">
<button class="md-btn md-btn-primary">Preview</button>
</div>
</div>
<h6 class="uk-text-bold">Number Indicators</h6>
<h5 class="uk-text-bold">Number Indicators</h5>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
@ -72,7 +76,7 @@
uk-grid>
<ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
<div>
<div class="md-card">
<div class="md-card" [class.uk-width-4-5@xl]="!grid">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
@ -87,7 +91,7 @@
</span>
<i class="md-icon material-icons">more_vert</i>
</div>
<h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
<div class="uk-text-bold">{{indicator.name}}</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div class="uk-flex uk-flex-center" uk-grid>
@ -109,7 +113,7 @@
</div>
</ng-template>
</div>
<h6 class="uk-text-bold">Chart Indicators</h6>
<h5 class="uk-text-bold">Chart Indicators</h5>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
@ -117,7 +121,7 @@
uk-grid>
<ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
<div>
<div class="md-card">
<div class="md-card" [class.uk-width-4-5@xl]="!grid">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">
@ -140,7 +144,7 @@
</span>
<i class="md-icon material-icons">more_vert</i>
</div>
<h3 class="md-card-toolbar-heading-text">{{indicator.name}}</h3>
<div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
</div>
<div *ngIf="grid" class="md-card-content">
<div class="uk-flex uk-flex-center" uk-grid>

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

@ -37,10 +37,17 @@ export class IndicatorsComponent implements OnInit, OnChanges {
if(this.stakeholder) {
this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].charts;
this.displayCharts = this.charts;
this.displayCharts = this.filterChartType(this.filterPrivacy(
this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.isActive),
this.isPublic),
this.chartType
);
this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].numbers;
this.displayNumbers = this.numbers;
this.displayNumbers = this.filterPrivacy(this.filterStatus(
this.filterByKeyword(this.numbers, this.keyword),
this.isActive),
this.isPublic);
}
}

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

@ -2,13 +2,13 @@
<div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom">
<div class="uk-padding-small">
<img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
<div class="uk-text-bold">{{stakeholder.index_name}}</div>
<div>Admin Dashboard</div>
<h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>
<span class="uk-text-large">Admin Dashboard</span>
</div>
</div>
<div *ngIf="stakeholder" class="menu_section">
<ul>
<li class="uk-margin-bottom md-bg-blue-700 uk-padding-small">
<li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
<a class="md-color-white uk-flex uk-flex-middle" (click)="back()">
<span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
<div class="menu_title uk-inline">
@ -33,6 +33,12 @@
<input class="uk-input uk-form-small" [(ngModel)]="topic.name"
[class.uk-form-danger]="!valid" type="text">
</div>
<div class="uk-width-1-1">
<label>Description</label>
<textarea class="uk-textarea" [(ngModel)]="topic.description"
rows="3"
[class.uk-form-danger]="!valid" type="text"></textarea>
</div>
<div class="uk-width-1-2">
<select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
<option [value]="true">Public</option>
@ -49,7 +55,7 @@
<hr>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="md-btn md-btn-small" (click)="deleteTopic(editTopic)">Delete</button>
<button class="md-btn md-btn-small" (click)="deleteTopicOpen(editTopic)">Delete</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
@ -108,7 +114,7 @@
<hr>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="md-btn md-btn-small" (click)="delete(editCategory)">Delete</button>
<button class="md-btn md-btn-small" (click)="deleteCategoryOpen(editCategory, i)">Delete</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
@ -165,7 +171,7 @@
<hr>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="md-btn md-btn-small" (click)="delete(editSubCategory)">Delete</button>
<button class="md-btn md-btn-small" (click)="deleteSubcategoryOpen(editSubCategory, j)">Delete</button>
</div>
<div>
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
@ -285,3 +291,7 @@
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"></indicators>
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>

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

@ -1,4 +1,4 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -6,6 +6,7 @@ import {Category, Stakeholder, SubCategory, Topic} from "../utils/entities/stake
import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
import {StakeholderService} from "../services/stakeholder.service";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
declare var UIkit;
@ -28,6 +29,13 @@ export class TopicComponent implements OnInit, OnDestroy {
public edit: boolean = false;
public toggle: boolean = false;
public element: any;
public index: number;
@ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
@ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
@ViewChild('deleteSubcategoryModal') deleteSubcategoryModal: AlertModal;
constructor(
private route: ActivatedRoute,
private router: Router,
@ -43,7 +51,6 @@ export class TopicComponent implements OnInit, OnDestroy {
this.route.params.subscribe( params => {
this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if (stakeholder) {
this.sideBarService.setHasSidebar(true);
this.stakeholder = HelperFunctions.copy(stakeholder);
this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
if(this.topicIndex === -1) {
@ -99,18 +106,45 @@ export class TopicComponent implements OnInit, OnDestroy {
public saveCategory(element, index = -1) {
if(this.copyCategory.name && this.copyCategory.name !== '') {
this.copyCategory.alias = this.copyCategory.name.toLowerCase();
if(!this.copyCategory.alias) {
this.copyCategory.alias = this.copyCategory.name.toLowerCase();
}
if(index === -1) {
this.stakeholder.topics[this.topicIndex].categories.push(this.copyCategory);
this.save('Category has been successfully created', element);
} else {
this.stakeholder.topics[this.topicIndex].categories[index] = HelperFunctions.copy(this.copyCategory);
this.save('Category has been successfully saved', element);
}
this.hide(element);
} else {
this.valid = false;
}
}
public deleteCategoryOpen(element, index) {
this.deleteOpen('category', this.deleteCategoryModal, element, index);
}
public deleteCategory() {
this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Category has been successfully deleted', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
});
}
public editSubCategoryOpen(index:number = -1, element = null) {
if(index === -1) {
this.copySubCategory = new SubCategory(null, null, null, true, true);
@ -128,13 +162,17 @@ export class TopicComponent implements OnInit, OnDestroy {
public saveSubCategory(element, index = -1) {
if(this.copySubCategory.name && this.copySubCategory.name !== '') {
this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
if(!this.copySubCategory.alias) {
this.copySubCategory.alias = this.copySubCategory.name.toLowerCase();
}
if(index === -1) {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
subCategories.push(this.copySubCategory);
this.save('Subcategory has been successfully created', element);
} else {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].
subCategories[index] = HelperFunctions.copy(this.copySubCategory);
this.save('Subcategory has been successfully saved', element);
}
this.hide(element);
} else {
@ -142,6 +180,31 @@ export class TopicComponent implements OnInit, OnDestroy {
}
}
public deleteSubcategoryOpen(element, index) {
this.deleteOpen('subcategory', this.deleteSubcategoryModal, element, index);
}
public deleteSubcategory() {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.
splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Subcategory has been successfully deleted', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
});
}
public editTopicOpen(element) {
if(element.className.indexOf('uk-open') !== -1) {
this.hide(element);
@ -153,28 +216,81 @@ export class TopicComponent implements OnInit, OnDestroy {
}
public saveTopic(element) {
if(this.topic.name && this.topic.name !== '') {
this.topic.alias = this.topic.name.toLowerCase();
if(this.topic.name && this.topic.name !== ''
&& this.topic.description && this.topic.description !== '') {
if(!this.topic.alias) {
this.topic.alias = this.topic.name.toLowerCase().trim();
}
this.stakeholder.topics[this.topicIndex] = HelperFunctions.copy(this.topic);
this.hide(element);
this.save('Topic has been successfully saved', element, true);
} else {
this.valid = false;
}
}
public deleteTopic(element) {
/*this.stakeholder.topics.splice(this.topicIndex, 1);
this.hide(element);
this.back();*/
public deleteTopicOpen(element) {
this.deleteOpen('topic', this.deleteTopicModal, element, this.topicIndex);
}
public deleteTopic() {
this.stakeholder.topics.splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Topic has been successfully deleted', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
this.back();
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
});
}
private navigateToError() {
this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
}
public getDefaultSubcategoryIndex(categoryIndex: number) {
return this.stakeholder.topics[this.topicIndex].categories[categoryIndex].
subCategories.findIndex(subcategory => subcategory.alias === null);
private deleteOpen(type: string, modal: AlertModal, element, index) {
this.element = element;
this.index = index;
modal.alertHeader = true;
modal.alertMessage = true;
modal.cancelButton = true;
modal.cancelButtonText = 'No';
modal.okButtonText = 'Yes';
modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
modal.open();
}
private save(message: string, element, redirect = false) {
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification(message, {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
if(redirect) {
this.router.navigate(['../' + this.topic.alias], {
relativeTo: this.route
});
}
this.hide(element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(element);
});
}
back() {
@ -184,9 +300,6 @@ export class TopicComponent implements OnInit, OnDestroy {
}
chooseSubcategory(categoryIndex: number, subcategoryIndex: number) {
/*let topic: Topic = this.stakeholder.topics[this.topicIndex];
let category: Category = topic.categories[this.categoryIndex];
let subCatetegory: SubCategory = category.subCategories[index];*/
this.categoryIndex = categoryIndex;
this.subCategoryIndex = subcategoryIndex;
}

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

@ -11,10 +11,11 @@ import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
import {RouterModule} from "@angular/router";
import {FormsModule} from "@angular/forms";
import {IndicatorsComponent} from "./indicators.component";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
@NgModule({
imports: [
CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule
CommonModule, TopicRoutingModule, ModalModule, RouterModule, FormsModule, AlertModalModule
],
declarations: [
TopicComponent, IndicatorsComponent

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

@ -17,44 +17,7 @@
--connect-portal-lower-tone: #b48536;
--develop-portal-lower-tone: #9f4e7e;
--sidebar-width: 300px;
--header-height: 60px;
--sidebar-width: 320px;
--sidebar-font-size: 16px;
--header-height: 70px;
}
/* On link hover, his items with this class will be displayed*/
li>a .onHover {
display: none;
}
li>a:hover .onHover {
display: block;
}
/*---*/
/* Custom width of sidebar, change var: sidebar-width*/
#sidebar_main {
width: var(--sidebar-width) !important;
-webkit-transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
}
.sidebar_main_active #sidebar_main {
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
}
@media only screen and (min-width: 1220px) {
.sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar {
margin-left: var(--sidebar-width) !important;
}
}
/* Custom height of header, change var: header-height*/
body {
padding-top: var(--header-height) !important;
}
#header_main {
padding: calc((var(--header-height) - 48px)/2) 25px !important;
}
/*---*/

72
src/assets/theme-assets/css/themes/my_theme.css
View File

@ -1,11 +1,11 @@
.app_my_theme .uk-alert {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme .md-btn-primary,
.app_my_theme .md-btn-primary:hover,
.app_my_theme .md-btn-primary:focus,
.app_my_theme .md-btn-primary:active {
background: #3f51b5;
background: #0d47a1;
color: #fff;
}
.app_my_theme .md-btn-flat-primary,
@ -20,7 +20,7 @@
background: #d1d6ef;
}
.app_my_theme .uk-badge-primary {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme .md-card-list-wrapper .md-card-list > ul > li.item-shown.md-card-list-item-selected:before {
background: #e8eaf6;
@ -35,116 +35,116 @@
background: #e8eaf6;
}
.app_my_theme .md-fab.md-fab-accent {
background: #ff4081;
background: #0d47a1;
}
.app_my_theme .md-list .uk-nestable-list > li.md-list-item-active,
.app_my_theme .md-list > li.md-list-item-active {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .md-list-addon > li.md-list-item-active .md-list-addon-element,
.app_my_theme .md-list-addon > li.md-list-item-active .md-list-addon-element .material-icons {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .uk-pagination > li > a:hover {
background: #ffd9e6;
}
.app_my_theme .uk-pagination > li.uk-active > a,
.app_my_theme .uk-pagination > li.uk-active > span {
background: #ff4081;
background: #0d47a1;
color: #fff;
}
.app_my_theme .uk-subnav-pill > .uk-active > * {
background: #ff4081;
background: #0d47a1;
}
.app_my_theme .uk-tab > li > a:hover,
.app_my_theme .uk-tab > li > a:focus {
border-bottom-color: #abb4e2;
}
.app_my_theme .uk-tab > li.uk-active > a {
border-bottom-color: #3f51b5;
border-bottom-color: #0d47a1;
}
.app_my_theme .uk-tab-bottom li > a:hover,
.app_my_theme .uk-tab-bottom li > a:focus {
border-top-color: #abb4e2;
}
.app_my_theme .uk-tab-bottom li.uk-active > a {
border-top-color: #3f51b5;
border-top-color: #0d47a1;
}
.app_my_theme .uk-tab-left li > a:hover,
.app_my_theme .uk-tab-left li > a:focus {
border-right-color: #abb4e2;
}
.app_my_theme .uk-tab-left li.uk-active > a {
border-right-color: #3f51b5;
border-right-color: #0d47a1;
}
.app_my_theme .uk-tab-right li > a:hover,
.app_my_theme .uk-tab-right li > a:focus {
border-left-color: #abb4e2;
}
.app_my_theme .uk-tab-right li.uk-active > a {
border-left-color: #3f51b5;
border-left-color: #0d47a1;
}
.app_my_theme .uk-tab-double-header li a:hover,
.app_my_theme .uk-tab-double-header li a:focus {
border-bottom-color: #606fc7;
}
.app_my_theme .uk-tab-double-header li.uk-active > a {
border-bottom-color: #ff4081;
border-bottom-color: #0d47a1;
}
.app_my_theme #header_main {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme.header_double_height:after {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme #top_bar .top_bar_nav > li > a:hover {
-webkit-box-shadow: inset 0 -3px 0 #3f51b5;
box-shadow: inset 0 -3px 0 #3f51b5;
-webkit-box-shadow: inset 0 -3px 0 #0d47a1;
box-shadow: inset 0 -3px 0 #0d47a1;
}
.app_my_theme #top_bar .top_bar_nav > li.uk-active a {
-webkit-box-shadow: inset 0 -3px 0 #3f51b5;
box-shadow: inset 0 -3px 0 #3f51b5;
-webkit-box-shadow: inset 0 -3px 0 #0d47a1;
box-shadow: inset 0 -3px 0 #0d47a1;
}
.app_my_theme .user_heading {
background: #303f9f;
}
.app_my_theme #sidebar_main .menu_section > ul > li ul li.act_item a {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme #sidebar_main .menu_section > ul > li.current_section > a .menu_title {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li > a > .menu_title {
background: #ff4081;
background: #0d47a1;
color: #fff;
}
.app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu {
background: #ff4081;
background: #0d47a1;
}
.app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu > a .menu_icon .material-icons {
color: #fff;
}
.app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li:hover.sidebar_submenu ul {
border-left-color: #ff4081;
border-left-color: #0d47a1;
}
.app_my_theme.sidebar_mini #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .clndr .clndr_days .clndr_days_grid .day.today > span {
background: #ff4081;
background: #0d47a1;
}
.app_my_theme .DTTT_print_info h6 {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .fc-unthemed .fc-button.fc-state-active:after {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .fc-unthemed .fc-highlight {
-webkit-box-shadow: inset 0 0 0 2px #3f51b5, inset 0 -1px 0 2px #3f51b5;
box-shadow: inset 0 0 0 2px #3f51b5, inset 0 -1px 0 2px #3f51b5;
-webkit-box-shadow: inset 0 0 0 2px #0d47a1, inset 0 -1px 0 2px #0d47a1;
box-shadow: inset 0 0 0 2px #0d47a1, inset 0 -1px 0 2px #0d47a1;
}
.app_my_theme .tablesorter-altair tbody > tr.row_highlighted > td {
background: #e8eaf6;
@ -155,10 +155,10 @@
.app_my_theme .tablesorter-altair .headerSortDown,
.app_my_theme .tablesorter-altair .tablesorter-headerSortDown,
.app_my_theme .tablesorter-altair .tablesorter-headerDesc {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .wizard > .steps {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme .wizard > .steps > ul > li.current a,
.app_my_theme .wizard > .steps > ul > li.current a:hover,
@ -171,7 +171,7 @@
background: #303f9f;
}
.app_my_theme .md-card-primary {
border-left-color: #3f51b5;
border-left-color: #0d47a1;
}
.app_my_theme .waves-effect.md-btn-flat-primary {
background: none;
@ -180,13 +180,13 @@
background: rgba(63, 81, 181, 0.4);
}
.app_my_theme .search_list_link {
color: #ff4081;
color: #0d47a1;
}
.app_my_theme .chatbox.cb_active .chatbox_header {
background: #303f9f;
}
.app_my_theme .chatbox_content .chatbox_message.own .chatbox_message_content li > span {
background: #3f51b5;
background: #0d47a1;
}
.app_my_theme .uk-table tr.row_checked td,
.app_my_theme .uk-table-hover tbody tr:hover {

2
src/assets/theme-assets/css/themes/my_theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

79
src/assets/theme-assets/dashboard-custom.css Normal file
View File

@ -0,0 +1,79 @@
/*
Define the following variables on your project css file.
--sidebar-width: 320px;
--sidebar-font-size: 16px;
--header-height: 70px;
*/
/* On link hover, his items with this class will be displayed*/
li>a .onHover {
display: none;
}
li>a:hover .onHover {
display: block;
}
/*---*/
/* Custom width of sidebar, change var: sidebar-width*/
#sidebar_main {
width: var(--sidebar-width) !important;
-webkit-transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
transform: translate3d(calc(-1 * var(--sidebar-width)),0,0) !important;
}
.sidebar_main_active #sidebar_main {
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
}
#sidebar_main .menu_section > ul > li > a {
font-weight: 700 !important;
font-size: var(--sidebar-font-size) !important;
}
#sidebar_main .menu_section > ul > li ul a {
font-size: var(--sidebar-font-size) !important;
}
@media only screen and (min-width: 1220px) {
.sidebar_main_active #header_main, .sidebar_main_active #page_content, .sidebar_main_active #top_bar {
margin-left: var(--sidebar-width) !important;
}
}
/* Custom height of header, change var: header-height*/
body {
padding-top: var(--header-height) !important;
}
#header_main {
padding: calc((var(--header-height) - 48px)/2) 25px !important;
}
/*---*/
/* Custom card*/
.md-card .md-card-toolbar-heading-text {
font-weight: 700 !important;
}
/*---*/
/* Breadcrumb*/
#breadcrumbs {
background: inherit !important;
}
/* Notification */
/*Remove the second close added by theme because it was used uikit 2*/
.uk-close::after {content: '' !important;}
/* Change z-index, because of sidebar and header z-index is larger that default */
.uk-notification {
z-index: 2000 !important;
}
/*---*/

4
src/assets/theme-assets/uikit/js/uikit-icons-max.js Normal file
View File

File diff suppressed because one or more lines are too long

3
src/assets/theme-assets/uikit/js/uikit-icons.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3925
src/assets/theme-assets/uikit/js/uikit.js
View File

File diff suppressed because one or more lines are too long

6
src/index.html
View File

@ -26,6 +26,7 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="assets/theme-assets/dashboard-custom.css">
<link rel="stylesheet" href="assets/monitor-custom.css">
<!-- uikit -->
<link rel="stylesheet" href="assets/theme-assets/uikit/css/uikit.min.css" media="all">
@ -40,9 +41,9 @@
<link rel="stylesheet" href="assets/theme-assets/css/main.min.css" media="all">
<!-- themes -->
<link rel="stylesheet" href="assets/theme-assets/css/themes/themes_combined.min.css" media="all">
<link rel="stylesheet" href="assets/theme-assets/css/themes/my_theme.min.css" media="all">
</head>
<body>
<body class="app_my_theme">
<div>
<app-root></app-root>
</div>
@ -51,6 +52,7 @@
<!-- uikit functions -->
<!-- <script src="assets/theme-assets/js/uikit_custom.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>
<!-- altair common functions/helpers -->
<script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
<script>