[Monitor Dashboard]: Fix validation of names in dropdown edit. Move getFullUrl on inidicator Utils

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57618 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/home/home.component.html

@@ -41,7 +41,7 @@
                         <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 && (!copyTopic.name || copyTopic.name === '')"
+                                 [class.uk-form-danger]="!valid && !copyTopic.name"
                                  type="text">
                         </div>
                         <div class="uk-width-1-1">
@@ -96,7 +96,7 @@
                       <div class="uk-width-1-1">
                         <label class="uk-text-bold">New Topic</label>
                         <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
-                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
+                               [class.uk-form-danger]="!valid && !copyTopic.name"
                                type="text">
                       </div>
                       <div class="uk-width-1-1">

src/app/home/home.component.ts

@@ -70,6 +70,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   public hide(element) {
+    this.valid = true;
     UIkit.drop(element).hide();
   }
 
@@ -95,7 +96,6 @@ export class HomeComponent implements OnInit, OnDestroy {
         this.copyTopic = HelperFunctions.copy(this.stakeholder.topics[index]);
       }
       this.show(element);
-      this.valid = true;
     }
   }
 

src/app/library/sharedComponents/sidebar/sideBar.service.ts

@@ -13,8 +13,7 @@ export class SideBarService {
   private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   /**
-   *  Set this variable to false on Init of components that is not needed to have sidebar
+   *  Add hasSidebar: false on data of route config, if sidebar is not needed.
-   *  and on Destroy set this to true.
    */
   private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 

src/app/monitor/monitor.component.ts

@@ -15,6 +15,7 @@ import {Category, IndicatorPath, Stakeholder, SubCategory, Topic} from "../utils
 import {StatisticsService} from "../utils/services/statistics.service";
 import {Item, Sidebar} from "../utils/entities/sidebar";
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
+import {IndicatorUtils} from "../utils/indicator-utils";
 
 @Component({
   selector: 'monitor',
@@ -26,6 +27,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public divContents = null;
   public status: number;
   public loading: boolean = true;
+  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
   public activeTopic: Topic = null;
   public activeCategory: Category = null;
   public activeSubCategory: SubCategory = null;
@@ -221,7 +223,8 @@ export class MonitorComponent implements OnInit, OnDestroy {
   }
 
   public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.statisticsService.getChartUrl(indicatorPath.source, indicatorPath.getFullUrl()));
+    return this.sanitizer.bypassSecurityTrustResourceUrl(
+      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)));
   }
 
   public setActiveChart(index, type: string) {

src/app/topic/topic.component.html

@@ -31,7 +31,7 @@
                   <div class="uk-width-1-1">
                     <label class="uk-text-bold">Topic Settings</label>
                     <input class="uk-input uk-form-small" [(ngModel)]="topic.name"
-                           [class.uk-form-danger]="!valid && (!topic.name || topic.name === '')" type="text">
+                           [class.uk-form-danger]="!valid && !topic.name" type="text">
                   </div>
                   <div class="uk-width-1-1">
                     <label>Description</label>
@@ -78,7 +78,7 @@
             <div class="menu_title uk-inline">
               {{category.name}}
               <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                      (click)="$event.stopPropagation();editCategoryOpen(i, editCategory)">
+                      (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
                 <i class="material-icons">more_horiz</i>
               </button>
             </div>
@@ -94,8 +94,9 @@
                   <div class="uk-grid-small" uk-grid>
                     <div class="uk-width-1-1">
                       <label class="uk-text-bold">Category Settings</label>
-                      <input class="uk-input uk-form-small" [(ngModel)]="copyCategory.name"
+                      <input class="uk-input uk-form-small"
-                             [class.uk-form-danger]="!valid" type="text">
+                             [(ngModel)]="copyCategory.name"
+                             [class.uk-form-danger]="!valid && !copyCategory.name" type="text">
                     </div>
                     <div class="uk-width-1-2">
                       <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isPublic">
@@ -135,7 +136,7 @@
                   <div class="menu_title uk-inline">
                     {{subcategory.name}}
                     <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                            (click)="$event.stopPropagation();editSubCategoryOpen(j, editSubCategory);$event.preventDefault()">
+                            (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
                     <i class="material-icons">more_horiz</i>
                   </button>
                   </div>
@@ -152,7 +153,7 @@
                           <div class="uk-width-1-1">
                             <label class="uk-text-bold">Subcategory Settings</label>
                             <input class="uk-input uk-form-small" [(ngModel)]="copySubCategory.name"
-                                   [class.uk-form-danger]="!valid" type="text">
+                                   [class.uk-form-danger]="!valid && !copySubCategory.name" type="text">
                           </div>
                           <div class="uk-width-1-2">
                             <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isPublic">
@@ -185,11 +186,11 @@
               </li>
             </ng-template>
             <li>
-              <a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
+              <a href="#" (click)="editSubCategoryOpen(newSubCategory);$event.preventDefault()">
                 <span class="menu_icon"><i class="material-icons">add</i></span>
                 <span class="menu_title">Create new Subcategory</span>
               </a>
-              <div uk-drop="mode: click; offset: -2; delay-hide: 0" #newSubCategory
+              <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newSubCategory
                    class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
                 <div *ngIf="copySubCategory">
                   <div class="md-card">
@@ -201,7 +202,7 @@
                         <div class="uk-width-1-1">
                           <label class="uk-text-bold">New Subcategory</label>
                           <input class="uk-input uk-form-small" [(ngModel)]="copySubCategory.name"
-                                 [class.uk-form-danger]="!valid" type="text">
+                                 [class.uk-form-danger]="!valid && !copySubCategory.name" type="text">
                         </div>
                         <div class="uk-width-1-2">
                           <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isPublic">
@@ -236,11 +237,11 @@
         </li>
       </ng-template>
       <li>
-        <a href="#" (click)="editCategoryOpen();$event.preventDefault()">
+        <a href="#" (click)="editCategoryOpen(newCategory);$event.preventDefault()">
           <span class="menu_icon"><i class="material-icons">add</i></span>
           <span class="menu_title">Create new Category</span>
         </a>
-        <div uk-drop="mode: click; offset: -2; delay-hide: 0" #newCategory
+        <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newCategory
              class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
           <div *ngIf="copyCategory">
             <div class="md-card">
@@ -252,7 +253,7 @@
                   <div class="uk-width-1-1">
                     <label class="uk-text-bold">New Category</label>
                     <input class="uk-input uk-form-small" [(ngModel)]="copyCategory.name"
-                           [class.uk-form-danger]="!valid" type="text">
+                           [class.uk-form-danger]="!valid && !copyCategory.name" type="text">
                   </div>
                   <div class="uk-width-1-2">
                     <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isPublic">

src/app/topic/topic.component.ts

@@ -90,6 +90,7 @@ export class TopicComponent implements OnInit, OnDestroy {
   }
 
   public hide(element) {
+    this.valid = true;
     UIkit.drop(element).hide();
   }
 
@@ -102,7 +103,6 @@ export class TopicComponent implements OnInit, OnDestroy {
       this.hide(element);
     } else {
       this.topic = HelperFunctions.copy(this.stakeholder.topics[this.topicIndex]);
-      this.valid = true;
       this.show(element);
     }
   }
@@ -140,17 +140,16 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
 
-  public editCategoryOpen(index:number = -1, element = null) {
+  public editCategoryOpen(element, index:number = -1) {
-    if(index === -1) {
-      this.copyCategory = new Category(null, null, null, true, true);
-    } else {
     if(element.className.indexOf('uk-open') !== -1) {
       this.hide(element);
+    } else {
+      if(index === -1) {
+        this.copyCategory = new Category(null, null, null, true, true);
       } else {
         this.copyCategory = HelperFunctions.copy(this.stakeholder.topics[this.topicIndex].categories[index]);
-        this.show(element);
-        this.valid = true;
       }
+      this.show(element);
     }
   }
 
@@ -191,18 +190,17 @@ export class TopicComponent implements OnInit, OnDestroy {
     this.delete('Category has been successfully be deleted', path);
   }
 
-  public editSubCategoryOpen(index:number = -1, element = null) {
+  public editSubCategoryOpen(element, index:number = -1) {
-    if(index === -1) {
-      this.copySubCategory = new SubCategory(null, null, null, true, true);
-    } else {
     if(element.className.indexOf('uk-open') !== -1) {
       this.hide(element);
+    } else {
+      if(index === -1) {
+        this.copySubCategory = new SubCategory(null, null, null, true, true);
       } else {
         this.copySubCategory = HelperFunctions.copy(this.stakeholder.topics[this.topicIndex].
           categories[this.categoryIndex].subCategories[index]);
-        this.show(element);
-        this.valid = true;
       }
+      this.show(element);
     }
   }
 

src/app/utils/entities/stakeholder.ts

@@ -361,6 +361,7 @@ export class IndicatorPath {
     this.parameters = new Map<string, string>();
     this.filters = new Map<string, Map<string,string>>();
   }
+
   static createParameters(funderName:string=null, title:string=null, chartType:string=null):Map<string, string>{
     let parameters = new Map<string, string>();
     parameters.set("funder_name",funderName);
@@ -368,13 +369,4 @@ export class IndicatorPath {
     parameters.set("type",chartType);
     return parameters;
   }
-  getFullUrl():string{
-    let replacedUrl = this.chartObject;
-    this.parameters.forEach((value: string, key: string) => {
-      replacedUrl = replacedUrl.replace(ChartHelper.prefix+key+ChartHelper.suffix,value);
-    });
-
-    return this.url + encodeURIComponent(replacedUrl);
-  }
-
 }

src/app/utils/indicator-utils.ts

@@ -18,8 +18,17 @@ export class IndicatorUtils {
 
   isActiveIcon: string = 'brightness_1';
 
+  public getFullUrl(indicatorPath: IndicatorPath):string{
+    let replacedUrl = indicatorPath.chartObject;
+    if(indicatorPath.parameters) {
+      Object.entries(indicatorPath.parameters).forEach((key, value) => {
+        replacedUrl = replacedUrl.replace(ChartHelper.prefix + key + ChartHelper.suffix, value.toString());
+      });
+    }
+    return indicatorPath.url + encodeURIComponent(replacedUrl);
+  }
 
-  generateIndicatorByChartUrl(url:string):Indicator{
+  generateIndicatorByChartUrl(url:string): Indicator{
     let indicator = new Indicator("","","chart","small",true,true,[]);
     let indicatorPath = new IndicatorPath("","","","",[]);
     indicator.indicatorPaths.push(indicatorPath);

src/assets/theme-assets/dashboard-custom.css

@@ -40,15 +40,19 @@ html .dashboard {
 
 .dashboard #sidebar_main .sidebar_main_header {
   color: #000000;
+  height: auto;
+  min-height: var(--header-height);
+}
+
+.dashboard .header_full #sidebar_main .sidebar_main_header {
+  min-height: auto;
 }
 
 .dashboard #sidebar_main .menu_section > ul > li > a {
   font-weight: 700;
-  font-size: var(--sidebar-font-size);
-  color: rgba(0, 0, 0, 0.7);
 }
 
-.dashboard #sidebar_main .menu_section > ul > li ul a {
+.dashboard #sidebar_main .menu_section > ul li > a {
   font-size: var(--sidebar-font-size);
   color: rgba(0, 0, 0, 0.7);
 }