[Monitor Dashboard | Trunk]: Add note for https on edit-stakeholder. Change number indicator form logic

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

src/app/general/edit-stakeholder/edit-stakeholder.component.ts

@@ -10,6 +10,7 @@ import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeho
 import {UtilitiesService} from "../../openaireLibrary/services/utilities.service";
 import {Session, User} from "../../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
+import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
 
 declare var UIkit;
 
@@ -73,6 +74,15 @@ declare var UIkit;
             </div>
           </div>
         </div>
+        <div class="uk-margin-remove-top uk-width-1-1">
+          <div class="uk-flex uk-flex-right" uk-grid>
+            <div class="uk-width-3-5@l uk-width-1-1 uk-text-small">
+              <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://example.com/my-secure-image.png</span>" instead
+              of "http://example.com/my-image.png".
+              <span class="uk-text-bold">Browsers may not load non secure content.</span>
+            </div>
+          </div>
+        </div>
         <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
         <div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('visibility')"
              [placeholder]="'Select a status'"
@@ -155,7 +165,7 @@ export class EditStakeholderComponent implements OnDestroy {
             [
               Validators.required,
               this.stakeholderUtils.aliasValidatorString(
-                  this.alias.filter(alias => alias !== this.stakeholder.alias)
+                this.alias.filter(alias => alias !== this.stakeholder.alias)
               )]
           ),
           isDefault: this.fb.control((this.isDefault)),
@@ -163,7 +173,7 @@ export class EditStakeholderComponent implements OnDestroy {
           type: this.fb.control(this.stakeholder.type, Validators.required),
           topics: this.fb.control(this.stakeholder.topics),
           isUpload: this.fb.control(this.stakeholder.isUpload),
-          logoUrl: this.fb.control(this.stakeholder.logoUrl),
+          logoUrl: this.fb.control(this.stakeholder.logoUrl, StringUtils.urlValidator()),
         });
         this.initPhoto();
         if (!isDefault) {

src/app/monitor/monitor.component.html

@@ -137,8 +137,9 @@
                       out of
                       {{countSelectedFilters()}}</div>
                     <div class="uk-text-bold ">{{indicator.name}}</div>
-                    <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold">
+                    <h3 class="uk-margin-medium-top uk-text-bold">
-                      <span>{{numberResults.get(i + '-' + j) | number}}</span>
+                      <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
+                      <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                     </h3>
                     <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
                   </div>

src/app/monitor/monitor.component.ts

@@ -435,6 +435,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
               result = result[jsonPath];
             }
           });
+          if (typeof result === 'string' || typeof result === 'number') {
+            result = Number(result);
+            if (result === Number.NaN) {
+              result = 0;
+            }
+          } else {
+            result = 0;
+          }
           this.numberResults.set(i + '-' + j, result);
         });
       }));

src/app/topic/indicators.component.html

@@ -76,8 +76,9 @@
                 <div class="uk-text-center uk-text-bold">
                   {{indicator.name ? indicator.name : 'No title available'}}
                 </div>
-                <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold">
+                <h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
-                  <span>{{numberResults.get(i + '-' + j) | number}}</span>
+                  <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
+                  <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                 </h3>
                 <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
               </div>
@@ -270,12 +271,10 @@
               </div>
             </div>
             <div formArrayName="jsonPath" class="uk-width-1-1">
-              <h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom"
+              <h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom">
-                  [class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
                 <span>JSON Path</span>
               </h6>
-              <div
+              <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
-                  *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
                 <div class="uk-text-danger uk-text-small">
                   This JSON path is not valid or the result has not been calculated yet.
                   Please press calculate on box below to see the result.
@@ -286,11 +285,13 @@
                   <div dashboard-input class="uk-width-1-1"
                        [extraLeft]="false"
                        [formInput]="jsonPath"
-                       placeholder="Write a field name"
+                       placeholder="Write a field"
                        [label]="'Level ' + +(j + 1)">
                     <div class="uk-flex uk-flex-middle">
                     <span *ngIf="getJsonPath(i).length !== 1"
-                          class=" uk-margin-small-left uk-text-danger clickable"
+                          [class.uk-hidden]="numberIndicatorFb.get('defaultId').value"
+                          class="uk-margin-small-left uk-text-danger clickable"
+                          [class.uk-disabled]="getJsonPath(i).disabled"
                           (click)="removeJsonPath(i, j)">
                       <icon name="close"></icon>
                     </span>
@@ -310,15 +311,20 @@
             </div>
             <div class="uk-width-1-1 uk-flex uk-flex-center">
               <div class="uk-flex uk-position-relative">
-                <span class="uk-padding number number-preview">
+                <span class="uk-padding number number-preview uk-text-center">
-                  <span
+                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
-                      *ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span>
+                    {{numberIndicatorPaths.at(i).get('result').value | number}}
+                  </span>
+                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
+                    --
+                  </span>
                 </span>
                 <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
                      class="uk-width-1-1 uk-height-1-1 refresh-indicator">
                   <div class="uk-position-relative uk-height-1-1">
                     <div class="uk-position-center uk-text-center clickable uk-text-small"
-                         (click)="validateJsonPath(i)">
+                         [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
+                         (click)="validateJsonPath(i, true)">
                       <div>
                         <icon name="refresh"></icon>
                       </div>

src/app/topic/indicators.component.ts

@@ -30,6 +30,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
 import {Router} from "@angular/router";
 import {Session} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
 declare var UIkit;
 
@@ -172,6 +173,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
               result = result[jsonPath];
             }
           });
+          if (typeof result === 'string' || typeof result === 'number') {
+            result = Number(result);
+            if (result === Number.NaN) {
+              result = 0;
+            }
+          } else {
+            result = 0;
+          }
           this.numberResults.set(i + '-' + j, result);
         });
       }));
@@ -431,7 +440,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   
   public addJsonPath(index: number) {
     if (index == 0 && this.getJsonPath(index).getRawValue()[index].indexOf(",") != -1) {
-      //if in the first path there are more than one paaths comma separated, split them and autogenerate the forms
+      //if in the first path there are more than one paths comma separated, split them and autogenerate the forms
       let paths = this.getJsonPath(index).getRawValue()[index].split(",");
       for (let i = 0; i < paths.length; i++) {
         if (i != 0) {
@@ -439,19 +448,18 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         }
       }
       this.getJsonPath(index).setValue(paths)
-      return;
+    } else {
+      this.getJsonPath(index).push(this.fb.control('', Validators.required));
     }
-    this.getJsonPath(index).push(this.fb.control('', Validators.required));
   }
   
   public removeJsonPath(i: number, j: number) {
-    this.getJsonPath(i).removeAt(j);
+    if(this.getJsonPath(i).enabled) {
-    if (this.getJsonPath(i).length !== this.getCurrentJsonPath(i).length) {
+      this.getJsonPath(i).removeAt(j);
-      this.getJsonPath(i).markAsDirty();
     }
   }
   
-  public validateJsonPath(index: number) {
+  public validateJsonPath(index: number, dirty: boolean = false) {
     let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index);
     if (this.indicator.defaultId === null) {
       this.getJsonPath(index).disable();
@@ -467,20 +475,33 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       setTimeout(() => {
         if (this.indicator.defaultId === null) {
           this.getJsonPath(index).enable();
+          if(dirty) {
+            this.getJsonPath(index).markAsDirty();
+          }
         }
         indicatorPath.get('result').setErrors(null);
-        console.debug(result);
         if (typeof result === 'string' || typeof result === 'number') {
           result = Number(result);
           if (result !== Number.NaN) {
             indicatorPath.get('result').setValue(result);
           } else {
-            indicatorPath.get('result').setValue(null);
+            indicatorPath.get('result').setValue(0);
           }
         } else {
-          indicatorPath.get('result').setValue(null);
+          indicatorPath.get('result').setValue(0);
         }
       }, 500);
+    }, error => {
+      setTimeout(() => {
+        if (this.indicator.defaultId === null) {
+          this.getJsonPath(index).enable();
+          if (dirty) {
+            this.getJsonPath(index).markAsDirty();
+          }
+        }
+        indicatorPath.get('result').setErrors(null);
+        indicatorPath.get('result').setValue(0);
+      }, 500);
     }));
   }
   
@@ -514,7 +535,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       jsonPath.push(this.fb.control('', Validators.required));
     }
     this.numberIndicatorPaths.push(this.fb.group({
-        url: this.fb.control(url, Validators.required),
+        url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
         jsonPath: jsonPath,
         result: this.fb.control(0, Validators.required),
         // parameters: parameters,
@@ -587,10 +608,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   
   public addChartIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type: string = null) {
     this.chartIndicatorPaths.push(this.fb.group({
-        url: this.fb.control(value, [Validators.required,
+        url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
-          Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
-            '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
-            '[a-zA-Z0-9]+\.[^\s]{2,}')]),
         parameters: parameters,
         type: this.fb.control(type)
       }

src/app/topic/topic.component.html

@@ -57,7 +57,7 @@
               <span class="uk-icon-button small portal-icon-button">
                 <icon name="add"></icon>
               </span>
-              <span class="uk-hidden-hover space" [class.uk-hidden]="!open"> Create new topic</span>
+              <span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="space" [class.uk-hidden]="!open"> Create new topic</span>
             </span>
           </li>
         </ul>
@@ -141,7 +141,7 @@
                 <span class="uk-icon-button small portal-icon-button">
                   <icon name="add"></icon>
                 </span>
-                <span class="uk-hidden-hover space">Create new category</span>
+                <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span>
               </span>
           </li>
         </ul>
@@ -194,7 +194,7 @@
               <span class="uk-icon-button small portal-icon-button">
                 <icon name="add"></icon>
               </span>
-              <span class="uk-hidden-hover space">Create new subcategory</span>
+              <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[selectedCategoryIndex].subCategories.length > 0" class="space">Create new subcategory</span>
             </span>
       </li>
     </ul>

src/assets/dashboard-theme/input.css

@@ -10,7 +10,7 @@
 }
 
 .input-box {
-  background-color: #FAFAFA;
+  background-color: #FAFAFA !important;
   border: 1px solid transparent;
   padding: 16px;
   border-radius: 4px;

src/assets/new.css

@@ -10,7 +10,6 @@
   --primary-color-rgb: var(--theme-secondary-color-rgb);
   --secondary-color-rgb: var(--theme-secondary-color-rgb);
 }
-
 /*Stakeholder Specific*/
 .publicationsSearchForm {
   background-image: none;
@@ -145,9 +144,10 @@
   max-width: 50px;
   background: var(--secondary-color);
   color: var(--contrast-color);
-  -webkit-clip-path: polygon(15% 5%, 100% 5%, 100% 100%, 0% 100%);
+  -webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
   clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
   display: none;
+  padding-left: 10px;
 }
 
 .dashboard .section {