Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

dashboard/menu/menu.component.html

@@ -1,5 +1,19 @@
-<div page-content class="admin-pages">
+<div page-content (stickyEmitter)="stickyPageHeader = $event">
 	<div header>
+		<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
+      <ng-container *ngIf="showLogo">
+        <img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
+      </ng-container>
+      <div>
+        <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Menu Items</div>
+        <h1 class="uk-h4 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
+      </div>
+    </div>
+    <div class="uk-margin uk-margin-remove-bottom">
+      <admin-tabs tab="menu" [portal]="portal"></admin-tabs>
+    </div>
+	</div>
+  <!-- <div header>
     <admin-tabs tab="menu" [portal]="portal"></admin-tabs>
     <div *ngIf="!showLoading" class="uk-grid" uk-grid>
       <div class="uk-width-1-1">
@@ -60,13 +74,25 @@
         </a>
       </div>
     </div>
-  </div>
+  </div> -->
   <div inner>
+		<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-middle uk-grid uk-margin-top" uk-grid>
+			<div>
+				<button class="uk-button uk-button-default uk-flex uk-flex-middle"
+					[disabled]="showLoading" [class.uk-disabled]="showLoading"
+					(click)="newMenuItem()"
+					uk-tooltip="title:<div>?</div>">
+					<icon name="add" [flex]="true"></icon>
+					<span class="uk-margin-small-left">New Menu Item</span>
+				</button>
+			</div>
+		</div>
+		<div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
 			<div *ngIf="showLoading" class="uk-position-center">
 				<loading></loading>
 			</div>
 			<div *ngIf="!showLoading">
-      <ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
+				<!-- <ul *ngIf='activeRootMenuId' class="uk-list submenu-items">
 					<li *ngFor="let child of childrenMenuItems" class="uk-card uk-card-default uk-margin-bottom">
 						<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
 							<div class="uk-width-4-5">
@@ -107,7 +133,7 @@
 							</div>
 						</div>
 					</li>
-      </ul>
+				</ul> -->
 				<div *ngIf="childrenMenuItems.length == 0 && !activeRootMenu.isFeatured"
 						 class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
 					<div>No menu items found</div>
@@ -118,6 +144,7 @@
 				</div>
 			</div>
 		</div>
+  </div>
 </div>
 <modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
              [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light">

dashboard/menu/menu.component.ts

@@ -15,6 +15,10 @@ import {MenuItem} from '../../sharedComponents/menu';
 import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
 import {Page} from '../../utils/entities/adminTool/page';
 import {Option} from '../../sharedComponents/input/input.component';
+import {CommunityInfo} from '../../connect/community/communityInfo';
+import {Stakeholder} from '../../monitor/entities/stakeholder';
+import {StakeholderService} from '../../monitor/services/stakeholder.service';
+import {CommunityService} from '../../connect/community/community.service';
 
 declare var UIkit;
 
@@ -45,6 +49,9 @@ export class MenuComponent implements OnInit {
   
   public communities: Portal[] = [];
   public portal: string;
+	public name: string;
+	public entity: CommunityInfo | Stakeholder;
+  public showLogo: boolean = true;
   
 	public newPageWindowOpen: boolean = false;
   public showLoading = true;
@@ -65,11 +72,14 @@ export class MenuComponent implements OnInit {
 	public properties: EnvProperties = properties;
   private subscriptions: any[] = [];
 	private typeSub: Subscription = null;
+	public stickyPageHeader: boolean = false;
   
   constructor(private element: ElementRef, private route: ActivatedRoute,
               private _router: Router, private title: Title,
               private _helpContentService: HelpContentService,
-              private userManagementService: UserManagementService, private _fb: FormBuilder) {
+              private userManagementService: UserManagementService, private _fb: FormBuilder,
+							private stakeholderService: StakeholderService,
+							private communityService: CommunityService) {
   }
   
   ngOnInit() {
@@ -84,9 +94,28 @@ export class MenuComponent implements OnInit {
       this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
 			this.getMenuItems();
       if (this.route.snapshot.data.portal) {
+				this.name = StringUtils.capitalize(this.portal);
         this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu');
       } else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
-        this.title.setTitle(this.portal.toUpperCase() + ' | Menu');
+        // this.title.setTitle(this.portal.toUpperCase() + ' | Menu');
+				if(this.route.snapshot.data.param === 'stakeholder') {
+					this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+						if(stakeholder) {
+							this.name = stakeholder.name;
+							this.entity = stakeholder;
+							this.title.setTitle(this.name + ' | Menu');
+						}
+					}));
+				} else {
+					this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
+						if(community) {
+							this.showLogo = false;
+							this.name = community.shortTitle;
+							this.entity = community;
+							this.title.setTitle(this.name + ' | Menu');
+						}
+					}));
+				}
       } else {
         this.title.setTitle('Administrator Dashboard | Menu');
       }
@@ -251,7 +280,7 @@ export class MenuComponent implements OnInit {
 		});
 		this.isChild = isChild;
 		this.addValidatorForUrlOrRoute();
-		this.menuItemsModalOpen('Create Menu Item', 'Create');
+		this.menuItemsModalOpen('Add Menu Item', 'Create');
 	}
 
 	public editMenuItem(menuItem: MenuItem, isChild: boolean = false) {

dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts

@@ -12,7 +12,9 @@ import { properties } from 'src/environments/environment';
       <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals">Portals</a></li>
       <li [class.uk-active]="tab === 'page'"><a  routerLink="../pages">Pages</a></li>
       <li [class.uk-active]="tab === 'entity'"><a  routerLink="../entities">Entities</a></li>
-			<li *ngIf="env === 'development' && portal && type === 'community'" [class.uk-active]="tab === 'menu'"><a  routerLink="../menu">Menu</a></li>
+			<!-- removing the type === 'community' condition below for now -->
+			<!-- && type === 'community' -->
+			<li *ngIf="env === 'development' && portal" [class.uk-active]="tab === 'menu'"><a  routerLink="../menu">Menu</a></li>
       <li  *ngIf="isPortalAdmin  && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes">Classes</a></li>
     </ul>
   `

utils/modal/alert.ts

@@ -49,7 +49,9 @@ declare var UIkit: any;
  * API to an open alert window.
  */
 export class AlertModal {
-  @Input() id: string = "modal";
+  private static MODAL_COUNTER: number = 0;
+
+  id: string = "modal";
   @Input() classTitle: string = "uk-background-primary-opacity";
   @Input() classBody: string = "";
   @Input() large: boolean = false;
@@ -138,6 +140,22 @@ export class AlertModal {
   constructor() {
   }
 
+  ngOnInit() {
+    AlertModal.MODAL_COUNTER++;
+    this.id = 'modal-' + AlertModal.MODAL_COUNTER;
+  }
+
+  ngOnDestroy() {
+    if(typeof document !== "undefined") {
+      const element = document.getElementById("modal-container");
+      for (let i = element.childNodes.length - 1; i >= 0; --i) {
+        let child: ChildNode = element.childNodes[i];
+        if (child['id'] == this.id) {
+          child.remove();
+        }
+      }
+    }
+  }
 
   /**
    * Opens an alert window creating backdrop.

utils/modal/full-screen-modal/full-screen-modal.component.ts

@@ -51,7 +51,9 @@ declare var ResizeObserver;
   `
 })
 export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
-  @Input() id: string = "fs-modal";
+  private static FS_MODAL_COUNTER: number = 0;
+
+  id: string = "fs-modal";
   @Input() classTitle: string = "uk-background-primary uk-light";
   @Input() classBody: string = 'uk-container-large';
   back: boolean = false;
@@ -79,6 +81,11 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
     this.changeHeight();
   }
 
+  ngOnInit() {
+    FullScreenModalComponent.FS_MODAL_COUNTER++;
+    this.id = 'fs-modal-' + FullScreenModalComponent.FS_MODAL_COUNTER;
+  }
+
   ngAfterViewInit() {
     if(typeof window !== "undefined") {
       this.observer = new ResizeObserver(entries => {
@@ -102,6 +109,16 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
     if(this.observer && this.observer instanceof ResizeObserver) {
       this.observer.disconnect();
     }
+    if(typeof document !== "undefined") {
+      const element = document.getElementById("modal-container");
+      for (let i = element.childNodes.length - 1; i >= 0; --i) {
+        let child: ChildNode = element.childNodes[i];
+        if (child['id'] == this.id) {
+          child.remove();
+        }
+      }
+    }
+
   }
   
   get isOpen() {