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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -39,16 +39,19 @@
</div>
</div>
</ng-template>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<div page-content>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div class="uk-flex uk-flex-middle uk-margin-top info">
<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top">
</div>
<div actions>
<div class="uk-margin-top">
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic">
<ul class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
@ -62,6 +65,7 @@
</ul>
</div>
</div>
</div>
<div inner>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
<ul class="uk-subnav uk-subnav-pill-alt">
@ -85,6 +89,7 @@
</div>
</div>
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
<div class="uk-padding uk-padding-remove-vertical">
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
@ -243,6 +248,7 @@
</ng-template>
</div>
</div>
</div>
</div>
<!--(click)="filterToggle= !filterToggle"
[style.display]="(filterToggle?'none':'inherit')"-->

2
src/app/openaireLibrary

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

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

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

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

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

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

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

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

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

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

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

2
src/assets/dashboard-theme

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