From f7db2d03b2eb3c4f14f7e0dc67dff0f9dc8947d8 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 7 Nov 2022 17:01:30 +0200
Subject: [PATCH] Merge indicators and indicators/:topic path in one route
 configuration. Fix transitions in admin dashboard

---
 .../admin-stakeholder-routing.module.ts       |  9 +--
 src/app/app.component.ts                      |  4 +-
 src/app/openaireLibrary                       |  2 +-
 src/app/topic/topic.component.html            |  8 +-
 src/app/topic/topic.component.ts              | 77 ++++++++++++++-----
 5 files changed, 67 insertions(+), 33 deletions(-)

diff --git a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
index 84d378d..fb8a2a8 100644
--- a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
+++ b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
@@ -1,5 +1,6 @@
 import {NgModule} from "@angular/core";
 import {RouterModule} from "@angular/router";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 
 @NgModule({
   imports: [RouterModule.forChild([
@@ -19,13 +20,7 @@ import {RouterModule} from "@angular/router";
       pathMatch: 'full'
     },
     {
-      path: 'indicators',
-      loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
-      data: {hasInternalSidebar: true},
-      pathMatch: 'full'
-    },
-    {
-      path: 'indicators/:topic',
+      matcher: HelperFunctions.routingMatcher(['indicators', 'indicators/:topic']),
       loadChildren: () => import('../topic/topic.module').then(m => m.TopicModule),
       data: {hasInternalSidebar: true},
       pathMatch: 'full'
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 089b784..c71c6a3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -350,8 +350,8 @@ export class AppComponent implements OnInit, OnDestroy {
             title: this.stakeholder.name,
             logoUrl: StringUtils.getLogoUrl(this.stakeholder),
             logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
-            logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Dashboard</div>' +
-              '<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
+            logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Monitor</div>' +
+              '<div class="uk-h6 uk-text-truncate uk-margin-remove">Dashboard</div></div>',
             position: 'center',
             badge: true,
             menuPosition: "center"
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index 7bae3b1..ed20502 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit 7bae3b1ebb01a87246f9cc886cc5777ab5ddcf33
+Subproject commit ed20502959df400f5ba38fdd5d4b3ba3cf9389c4
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index ca04ab4..cf30962 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -12,7 +12,7 @@
       </a>
     </div>
     <div class="menu_section uk-margin-large-top">
-      <ul #topics class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group uk-nav="duration: 400">
+      <ul class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" transition-group [id]="'topics'" uk-nav="duration: 400">
         <li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i" transition-group-item>
           <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
              [title]="topic.name" class="uk-visible-toggle">
@@ -93,7 +93,7 @@
               </span>
             </span>
           </a>
-          <ul class="uk-nav-sub" #categories transition-group>
+          <ul class="uk-nav-sub" [id]="'categories-' + i.toString()" transition-group>
             <li *ngFor="let category of topic.categories; let j=index"  transition-group-item  class="uk-visible-toggle" [class.uk-active]="categoryIndex == j">
               <a (click)="chooseCategory(j)" [title]="category.name">
                 <div class="uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
@@ -201,11 +201,11 @@
   <div actions>
     <div class="uk-margin-medium-top uk-margin-bottom">
       <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
-          #subCategories transition-group class="uk-tab">
+          transition-group class="uk-tab" [id]="'subCategories'">
         <ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
           <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
             <a (click)="chooseSubcategory(i)">
-              <span class="title"> {{subCategory.name}}</span>
+              <span> {{subCategory.name}}</span>
             </a>
             <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
                   [class.uk-invisible-hover]="subCategoryIndex !== i"
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index 7dd70df..4b7a5fc 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -1,4 +1,13 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@@ -64,10 +73,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
   @ViewChild('deleteModal', {static: true}) deleteModal: AlertModal;
   @ViewChild('editModal', {static: true}) editModal: AlertModal;
 	@ViewChild('visibilityModal', {static: true}) visibilityModal: AlertModal;
-  
-  @ViewChild("topics") topics: TransitionGroupComponent;
-  @ViewChild("categories") categories: TransitionGroupComponent;
-  @ViewChild("subCategories") subCategories: TransitionGroupComponent;
+  @ViewChildren(TransitionGroupComponent) transitions: QueryList<TransitionGroupComponent>;
   
   public elementChildrenActionOnDelete: string;
   public filters: UntypedFormGroup;
@@ -137,7 +143,14 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
   }
   
   ngAfterViewInit() {
-    UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, false);
+    if(this.topics) {
+      let activeIndex = UIkit.nav(this.topics.element.nativeElement).items.findIndex(item => item.classList.contains('uk-open'));
+      if(activeIndex !== this.topicIndex) {
+        setTimeout(() => {
+          UIkit.nav(this.topics.element.nativeElement).toggle(this.topicIndex, true);
+        });
+      }
+    }
   }
   
   public ngOnDestroy() {
@@ -163,6 +176,22 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
     return true;
   }
   
+  private findById(id: string) {
+    return this.transitions?this.transitions.find(item => item.id === id):null;
+  }
+  
+  get topics(): TransitionGroupComponent {
+    return this.findById('topics');
+  }
+  
+  get categories(): TransitionGroupComponent {
+    return this.findById('categories-' + this.topicIndex);
+  }
+  
+  get subCategories(): TransitionGroupComponent {
+    return this.findById('subCategories');
+  }
+  
   hide(element: any) {
     UIkit.dropdown(element).hide();
   }
@@ -319,9 +348,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
       this.stakeholder.topics[this.index]._id
     ];
     let callback = (): void => {
-      this.chooseTopic(Math.max(0, this.index - 1));
-      this.stakeholder.topics.splice(this.index, 1);
-      this.topics.init();
+      this.topicChanged(() => {
+        this.stakeholder.topics.splice(this.index, 1);
+        if(this.topicIndex === this.index) {
+          this.chooseTopic(Math.max(0, this.index));
+        }
+      }, true);
     };
     this.delete('Topic has been successfully be deleted', path, callback, (this.topicIndex === this.index));
   }
@@ -457,9 +489,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
       this.stakeholder.topics[this.topicIndex].categories[this.index]._id
     ];
     let callback = (): void => {
-      this.chooseCategory(Math.max(0, this.index - 1));
-      this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
-      this.categories.init();
+      this.categoryChanged(() => {
+        this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
+        if(this.categoryIndex === this.index) {
+          this.chooseCategory(Math.max(0, this.index));
+        }
+      }, true);
     };
     this.delete('Category has been successfully be deleted', path, callback);
   }
@@ -485,15 +520,15 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
     this.subCategoryIndexSubject.next(subcategoryIndex);
   }
   
-  subCategoryChanged(callback: Function) {
-    if(this.subCategories) {
+  subCategoryChanged(callback: Function, save: boolean = false) {
+    if(this.subCategories && save) {
       this.subCategories.disable();
     }
     if(callback) {
       callback();
     }
     this.cdr.detectChanges();
-    if(this.subCategories) {
+    if(this.subCategories && save) {
       this.subCategories.init();
       this.subCategories.enable();
     }
@@ -552,7 +587,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
           } else {
             this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index] = HelperFunctions.copy(subCategory);
           }
-        });
+        }, true);
       };
       if (this.index === -1) {
         this.save('Subcategory has been successfully created', path, this.form.value, callback);
@@ -572,7 +607,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
 		let callback = (subcategory: SubCategory): void => {
 			this.subCategoryChanged(() => {
 				this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index] = HelperFunctions.copy(subcategory);
-			});
+			}, true);
 		}
     this.changeStatus(this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index], path, this.visibility, callback, propagate);
 		this.visibilityModal.cancel();
@@ -594,8 +629,12 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
       this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.index]._id
     ];
     let callback = (): void => {
-      this.chooseSubcategory(Math.max(0, this.index - 1));
-      this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
+      this.subCategoryChanged(() => {
+        this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories.splice(this.index, 1);
+        if(this.subCategoryIndex === this.index) {
+          this.chooseSubcategory(Math.max(0, this.index));
+        }
+      }, true);
     };
     this.delete('Subcategory has been successfully be deleted', path, callback);
   }