From 2eb711011e147ff5cc8c091fdd77e443006a0401 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Fri, 15 May 2020 12:26:59 +0000
Subject: [PATCH] [Monitor_Dashboard | Trunk]: Add default badge. Fix a bug
 with indicators deafultId. Add option to create a blank profile.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58707 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../manageStakeholders.component.html         |  2 +-
 .../manageStakeholders.component.ts           |  9 ++--
 src/app/monitor/monitor.component.html        |  2 +-
 .../stakeholder/stakeholder.component.html    |  9 ++--
 src/app/topic/indicators.component.ts         | 46 +++++++++++--------
 src/app/topic/topic.component.html            | 19 ++++----
 src/app/utils/indicator-utils.ts              |  9 +++-
 src/assets/monitor-custom.css                 |  4 +-
 src/assets/theme-assets/dashboard-custom.css  | 12 +++--
 9 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html
index d6774ad..097f77c 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.html
+++ b/src/app/manageStakeholders/manageStakeholders.component.html
@@ -234,7 +234,7 @@
       <div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for this type.</div>
       <div *ngIf="defaultStakeholdersOptions.length > 0"
            dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
-           label="Profile" [options]="defaultStakeholdersOptions" type="select"></div>
+           label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
     </div>
   </div>
 </modal-alert>
diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts
index 7fcd96d..0fa8447 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.ts
+++ b/src/app/manageStakeholders/manageStakeholders.component.ts
@@ -129,10 +129,13 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   }
   
   onTypeChange(value) {
-    this.defaultStakeholdersOptions = [];
+    this.defaultStakeholdersOptions = [{
+      label: 'New blank profile',
+      value: '-1'
+    }];
     this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
       this.defaultStakeholdersOptions.push({
-        label: stakeholder.name,
+        label: 'Use ' +  stakeholder.name + ' profile',
         value: stakeholder._id
       })
     });
@@ -238,7 +241,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       if (!this.stakeholderFb.value.isDefault) {
         let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
         this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
-          stakeholder.topics));
+          (stakeholder?stakeholder.topics:[])));
       } /*else {
         this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
       }*/
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 434a7f0..50b58c6 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -5,7 +5,7 @@
       <nav class="uk-navbar">
 
         <div class="uk-navbar-left">
-          <img class="badge "
+          <img class="badge"
                src="assets/theme-assets/prototype_flag.svg"
                alt="BETA">
           <a *ngIf="stakeholder"
diff --git a/src/app/stakeholder/stakeholder.component.html b/src/app/stakeholder/stakeholder.component.html
index 8e6229b..e5646ea 100644
--- a/src/app/stakeholder/stakeholder.component.html
+++ b/src/app/stakeholder/stakeholder.component.html
@@ -1,9 +1,12 @@
 <aside id="sidebar_main">
-  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom">
-    <img    class="badge"
+  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
+    <img class="badge"
          src="assets/theme-assets/prototype_flag.svg"
          alt="BETA">
-    <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
+    <div class="uk-position-relative uk-display-inline-block uk-margin-small-top">
+      <div *ngIf="!stakeholder.defaultId" class="uk-badge default">Default</div>
+      <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
+    </div>
   </div>
   <div *ngIf="stakeholder" class="menu_section">
     <ul>
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index 8cc5acd..36446ea 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -364,7 +364,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath));
   }
   
-  public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([])) {
+  public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false) {
     this.indicatorPaths.push(this.fb.group({
         url: this.fb.control(value, [Validators.required,
           Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
@@ -373,22 +373,29 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         parameters: parameters
       }
     ));
-    let index = this.indicatorPaths.length - 1;
-    this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
-        if (this.indicatorPaths.at(index).get('url').valid) {
-          let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, 'bar', this.stakeholder);
-          let parameters = this.getParametersAsFormArray(indicatorPath);
-          (this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
-          if (!this.indicator.indicatorPaths[index]) {
-            this.indicator.indicatorPaths[index] = indicatorPath;
-            this.indicator.indicatorPaths[index].safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
-          } else {
-            indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl;
-            this.indicator.indicatorPaths[index] = indicatorPath;
-          }
-        }
-      })
-    );
+    if(disableUrl) {
+      for(let index = 0; index < this.indicatorPaths.length; index++) {
+        this.indicatorPaths.at(index).get('url').disable();
+      }
+    } else {
+      for(let index = 0; index < this.indicatorPaths.length; index++) {
+        this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
+            if (this.indicatorPaths.at(index).get('url').valid) {
+              let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, 'bar', this.stakeholder);
+              let parameters = this.getParametersAsFormArray(indicatorPath);
+              (this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
+              if (!this.indicator.indicatorPaths[index]) {
+                this.indicator.indicatorPaths[index] = indicatorPath;
+                this.indicator.indicatorPaths[index].safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
+              } else {
+                indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl;
+                this.indicator.indicatorPaths[index] = indicatorPath;
+              }
+            }
+          })
+        );
+      }
+    }
   }
   
   private getParametersAsFormArray(indicatorPath: IndicatorPath): FormArray {
@@ -431,9 +438,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         isActive: this.fb.control(this.indicator.isActive),
         indicatorPaths: this.fb.array([]),
         width: this.fb.control(this.indicator.width),
+        defaultId: this.fb.control(this.indicator.defaultId)
       });
       this.indicator.indicatorPaths.forEach(indicatorPath => {
-        this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath), this.getParametersAsFormArray(indicatorPath));
+        this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
+          this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null);
         indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
       });
     } else {
@@ -446,6 +455,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         isActive: this.fb.control(false),
         indicatorPaths: this.fb.array([]),
         width: this.fb.control('small', Validators.required),
+        defaultId: this.fb.control(null)
       });
       this.addIndicatorPath();
     }
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 0d21a13..17703df 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -1,9 +1,12 @@
 <aside id="sidebar_main">
-  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom">
-    <img    class="badge"
-            src="assets/theme-assets/prototype_flag.svg"
-            alt="BETA">
-    <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
+  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
+    <img class="badge"
+         src="assets/theme-assets/prototype_flag.svg"
+         alt="BETA">
+    <div class="uk-position-relative uk-display-inline-block uk-margin-small-top">
+      <div *ngIf="!stakeholder.defaultId" class="uk-badge default">Default</div>
+      <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
+    </div>
   </div>
   <div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">
     <ul>
@@ -24,7 +27,7 @@
                   {{stakeholder.topics[topicIndex].isActive ? 'Inactive' : 'Active'}}</a>
                 </li>
                 <li><a (click)="toggleTopicAccess(); hide(element)">
-                    {{stakeholder.topics[topicIndex].isPublic?'Private':'Public'}}</a>
+                  {{stakeholder.topics[topicIndex].isPublic ? 'Private' : 'Public'}}</a>
                 </li>
                 <hr class="uk-nav-divider">
                 <li><a (click)="deleteTopicOpen(); hide(element)">Delete</a></li>
@@ -55,7 +58,7 @@
                     {{category.isActive ? 'Inactive' : 'Active'}}</a>
                   </li>
                   <li><a (click)="toggleCategoryAccess(i); hide(element)">
-                      {{category.isPublic?'Private':'Public'}}</a>
+                    {{category.isPublic ? 'Private' : 'Public'}}</a>
                   </li>
                   <hr class="uk-nav-divider">
                   <li><a (click)="deleteCategoryOpen(i); hide(element)">Delete</a></li>
@@ -84,7 +87,7 @@
                           {{subcategory.isActive ? 'Inactive' : 'Active'}}</a>
                         </li>
                         <li><a (click)="toggleSubcategoryAccess(j); hide(element)">
-                          {{subcategory.isPublic?'Private':'Public'}}</a>
+                          {{subcategory.isPublic ? 'Private' : 'Public'}}</a>
                         </li>
                         <hr class="uk-nav-divider">
                         <li><a (click)="deleteSubcategoryOpen(j); hide(element)">Delete</a></li>
diff --git a/src/app/utils/indicator-utils.ts b/src/app/utils/indicator-utils.ts
index df7ebd8..a757dae 100644
--- a/src/app/utils/indicator-utils.ts
+++ b/src/app/utils/indicator-utils.ts
@@ -14,8 +14,13 @@ export class StakeholderUtils {
   defaultProfiles = {"funder":{
       index_id:"ec__________::EC",
   index_name:     "European Commission", index_shortName:"EC"}};
+  
+  
   types: Option[] = [
-    {value: 'funder', label: 'Funder'}
+    {value: 'funder', label: 'Funder'},
+    {value: 'ri', label: 'Reasearch Initiative'},
+    {value: 'project', label: 'Project'},
+    {value: 'organization', label: 'Organization'}
   ];
 
   isPublic: Option[] = [
@@ -224,7 +229,7 @@ export class IndicatorUtils {
 
   generateIndicatorByForm(form: any, indicatorPaths: IndicatorPath[]): Indicator {
     let indicator: Indicator = new Indicator(form.name, form.description, 'chart',
-      form.width, form.isActive, form.isPublic, indicatorPaths);
+      form.width, form.isActive, form.isPublic, indicatorPaths, form.defaultId);
     indicator._id = form.id;
     form.indicatorPaths.forEach((indicatorPath, index) => {
       indicatorPath.parameters.forEach(parameter => {
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index b8ed524..9ef5822 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -69,8 +69,8 @@
     pointer-events: none;
     border-color: transparent;
     border-bottom-color: #ECECEC;
-    border-width: 15px;
-    margin-left: -15px;
+    border-width: 13px;
+    transform: translateX(-50%);
 }
 
 
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index b1865ec..73ad222 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -47,9 +47,6 @@ html .dashboard {
 
 .dashboard #sidebar_main .sidebar_main_header .logo {
   height: calc(var(--header-height) - 20px);
-  margin-left: 25px;
-  margin-top: 10px;
-  margin-bottom: 10px;
 }
 
 .dashboard #sidebar_main .menu_section {
@@ -496,3 +493,12 @@ body.dashboard {
   right: 0;
 }
 
+.dashboard .default.uk-badge {
+  padding: 1px 15px;
+  height: auto;
+  position: absolute;
+  left: -5px;
+  top: 0;
+  background-color: var(--primary-color);
+}
+