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

src/app/app-routing.module.ts

@@ -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,

src/app/app.component.ts

@@ -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,
+          route: null,
-          url: null,
+          url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
-          title: this.stakeholder.name,
+          title: "Monitor",
           logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
           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,
+          route: null,
-          url: null,
+          url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
-          title: this.stakeholder.name,
+          title: "Monitor",
           logoUrl: 'assets/common-assets/logo-services/monitor/small.svg',
           logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
           position: 'center',
-          badge: false,
+          badge: true,
-          stickyAnimation: 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({

src/app/general/general.component.html

@@ -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 actions>
-    <div *ngIf="stakeholder" class="uk-container">
+		<div class="uk-section-xsmall uk-container">
-			<div class="uk-margin-top uk-flex uk-flex-center uk-flex-right@m">
+			<div class="uk-flex uk-flex-center uk-flex-right@m">
 				<button class="uk-button uk-button-default uk-margin-right"
 								(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>

src/app/general/general.component.ts

@@ -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) {

src/app/manageStakeholders/manageStakeholders.component.html

@@ -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 actions>
-    <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-margin-top">
+    <div class="uk-section-xsmall">
+      <div 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>

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -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;
   /**

src/app/monitor/monitor.component.html

@@ -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')"-->

src/app/openaireLibrary

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

src/app/topic/topic.component.html

@@ -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>

src/app/topic/topic.component.ts

@@ -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, {
+      NotificationHandler.rise(message);
-        status: 'success',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
       if (redirect) {
         this.router.navigate(['../' + saveElement.alias], {
           relativeTo: this.route
         });
       }
     }, error => {
-      UIkit.notification(error.error.message, {
+      NotificationHandler.rise(error.error.message, 'danger');
-        status: 'danger',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
     }));
   }
   
@@ -503,37 +516,21 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     this.subscriptions.push(this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => {
       callback();
       this.stakeholderChanged();
-      UIkit.notification(message, {
+      NotificationHandler.rise(message);
-        status: 'success',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
       if (redirect) {
         this.back();
       }
     }, error => {
-      UIkit.notification(error.error.message, {
+      NotificationHandler.rise(error.error.message, 'danger');
-        status: 'danger',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
     }));
   }
   
   private changeStatus(element: Topic | Category | SubCategory, path: string[], visibility: Visibility) {
     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(), {
+      NotificationHandler.rise(StringUtils.capitalize(this.type) + ' has been <b>successfully changed</b> to ' + element.visibility.toLowerCase());
-        status: 'success',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
     }, error => {
-      UIkit.notification(error.error.message, {
+      NotificationHandler.rise(error.error.message, 'danger');
-        status: 'danger',
-        timeout: 6000,
-        pos: 'bottom-right'
-      });
     }));
   }
   

src/app/topic/topic.module.ts

@@ -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

src/app/users/users.component.html

@@ -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">
+            [emailComposer]="emailComposer" [notificationFn]="notificationFn">
-	<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
+	<div class="uk-flex uk-flex-middle uk-margin-top info">
 		<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
 		<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>
 

src/app/users/users.component.ts

@@ -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,

src/assets/dashboard-theme

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