[Monitor Dashboard]: Add form builder for edit indicator

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

src/app/services/stakeholder.service.ts

@@ -17,10 +17,10 @@ export class StakeholderService {
   }
 
   getStakeholder(url: string, alias:string): Observable<Stakeholder> {
-    // return new BehaviorSubject<Stakeholder>(Stakeholder.createECStakeholder()).asObservable();
-    return this.http.get<Stakeholder>(url + '/stakeholder/' + encodeURIComponent(alias)).pipe(map(stakeholder => {
-      return this.formalizeStakeholder([stakeholder])[0];
-    }));
+    return new BehaviorSubject<Stakeholder>(Stakeholder.createECStakeholder()).asObservable();
+    // return this.http.get<Stakeholder>(url + '/stakeholder/' + encodeURIComponent(alias)).pipe(map(stakeholder => {
+    //   return this.formalizeStakeholder([stakeholder])[0];
+    // }));
   }
 
   getAllStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {

src/app/topic/indicators.component.html

@@ -149,7 +149,7 @@
                   </i>
                   {{(indicator.isActive) ? 'Active' : 'Inactive'}}
                 </span>
-                <i class="md-icon material-icons">more_vert</i>
+                <i class="md-icon material-icons" (click)="editIndicatorOpen(i)">more_vert</i>
               </div>
               <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
             </div>
@@ -215,13 +215,13 @@
              [okDisabled]="indicatorFb && indicatorFb.invalid">
   <div *ngIf="indicatorFb" class="uk-form-stacked" [formGroup]="indicatorFb">
     <label class="uk-form-label">Name</label>
-    <div class="uk-form-controls" formArrayName="name">
+    <div class="uk-form-controls">
       <input class="uk-input"
              [class.uk-form-danger]="indicatorFb.get('name').invalid && indicatorFb.get('name').dirty"
              [formControl]="indicatorFb.get('name')">
     </div>
     <label class="uk-form-label">Description</label>
-    <div class="uk-form-controls" formArrayName="urls">
+    <div class="uk-form-controls">
       <textarea class="uk-textarea" rows="3"
                 [formControl]="indicatorFb.get('description')"></textarea>
     </div>
@@ -234,18 +234,23 @@
     </div>
   </div>
 </modal-alert>
-<!--<modal-alert #editIndicatorModal
+<modal-alert #editIndicatorModal
              (alertOutput)="saveIndicator()"
              [okDisabled]="editIndicatorFb && (editIndicatorFb.invalid || !editIndicatorFb.dirty)">
   <div *ngIf="editIndicatorFb" class="uk-form-stacked" [formGroup]="editIndicatorFb">
-    <label class="uk-form-label">Name</label>
-    <div class="uk-form-controls" formArrayName="name">
-      <input class="uk-input"
-             [class.uk-form-danger]="indicatorFb.get('name').status === 'INVALID' && indicatorFb.get('name').dirty"
-             [formControl]="indicatorFb.get('name')">
+    <div class="md-input-wrapper">
+      <label>Name</label>
+      <input type="text" class="md-input" (focus)="focus($event)">
+      <span class="md-input-bar "></span>
     </div>
-    <label class="uk-form-label">Description</label>
-    <div class="uk-form-controls" formArrayName="urls">
+    <label class="uk-form-label">Name</label>
+    <div class="uk-form-controls">
+      <input class="uk-input"
+             [class.uk-form-danger]="editIndicatorFb.get('name').status === 'INVALID' && editIndicatorFb.get('name').dirty"
+             [formControl]="editIndicatorFb.get('name')">
+    </div>
+    <!--<label class="uk-form-label">Description</label>
+    <div class="uk-form-controls">
       <textarea class="uk-textarea" rows="3"
                 [formControl]="indicatorFb.get('description')"></textarea>
     </div>
@@ -255,6 +260,6 @@
              [class.uk-form-danger]="chartUrl.status === 'INVALID' && chartUrl.dirty"
              *ngFor="let chartUrl of urls.controls;"
              [formControl]="chartUrl">
-    </div>
+    </div>-->
   </div>
-</modal-alert>-->
+</modal-alert>

src/app/topic/indicators.component.ts

@@ -1,11 +1,12 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
+import {ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
 import {SideBarService} from "../library/sharedComponents/sidebar/sideBar.service";
-import {Indicator, Stakeholder} from "../utils/entities/stakeholder";
+import {Indicator, IndicatorPath, Stakeholder} from "../utils/entities/stakeholder";
 import {IndicatorUtils} from "../utils/indicator-utils";
 import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 import {StatisticsService} from "../utils/services/statistics.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({
   selector: 'indicators',
@@ -55,7 +56,8 @@ export class IndicatorsComponent implements OnInit, OnChanges {
 
   constructor(private sideBarService: SideBarService,
               private statisticsService: StatisticsService,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private sanitizer: DomSanitizer) {
   }
 
   ngOnInit(): void {
@@ -64,7 +66,6 @@ export class IndicatorsComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     if (this.canEdit) {
       this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts;
-      console.log(this.charts);
       this.displayCharts = this.filterChartType(this.filterPrivacy(
         this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.status),
         this.privacy),
@@ -157,6 +158,11 @@ export class IndicatorsComponent implements OnInit, OnChanges {
     return this.indicatorFb.get('urls') as FormArray;
   }
 
+  private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(
+      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)));
+  }
+
   public addUrl() {
     this.urls.push(this.fb.control('', [Validators.required,
       Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
@@ -196,15 +202,29 @@ export class IndicatorsComponent implements OnInit, OnChanges {
         this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url));
     });
     let index = this.charts.push(this.indicator);
-    this.editIndicatorOpen(index -1);
+    this.editIndicatorOpen(index - 1);
   }
 
   public editIndicatorOpen(index: number) {
     this.indicator = HelperFunctions.copy(this.charts[index]);
-      let indicatorPaths = this.fb.array([]);
     this.indicator.indicatorPaths.forEach(indicatorPath => {
+      indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
+      console.log(indicatorPath.safeResourceUrl);
+    });
+    let indicatorPaths = this.fb.array([]);
+    this.indicator.indicatorPaths.forEach(indicatorPath => {
+      let parameters = this.fb.array([]);
+      indicatorPath.parameters.forEach((value, key) => {
+        if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
+          // TODO add Validators Map
+          parameters.push(this.fb.group({
+            key: this.fb.control(key),
+            value: this.fb.control(value, Validators.required)
+          }));
+        }
+      });
       indicatorPaths.push(this.fb.group({
-        parameters: this.fb.array([])
+        parameters: parameters
       }));
     });
     this.editIndicatorFb = this.fb.group({
@@ -216,15 +236,19 @@ export class IndicatorsComponent implements OnInit, OnChanges {
       width: this.fb.control(this.indicator.width, Validators.required),
     });
     console.log(this.editIndicatorFb.value);
-    /*this.editIndicatorModal.alertTitle = this.indicator.name;
+    this.editIndicatorModal.alertHeader = false;
     this.editIndicatorModal.cancelButtonText = 'Cancel';
     this.editIndicatorModal.okButtonText = 'Save Changes';
     this.editIndicatorModal.okButtonLeft = false;
     this.editIndicatorModal.alertMessage = false;
-    this.editIndicatorModal.open();*/
+    this.editIndicatorModal.open();
   }
 
   saveIndicator() {
 
   }
+
+  focus(event: FocusEvent) {
+    event.srcElement.parentElement.className = event.srcElement.parentElement.className + ' md-input-focus';
+  }
 }

src/app/utils/indicator-utils.ts

@@ -18,6 +18,8 @@ export class IndicatorUtils {
 
   isActiveIcon: string = 'brightness_1';
 
+  ignoredParameters = ['funder_name'];
+
   public getFullUrl(indicatorPath: IndicatorPath): string {
     let replacedUrl = indicatorPath.chartObject;
     if (indicatorPath.parameters) {

src/index.html

@@ -69,6 +69,7 @@
   </script>
   <script src="assets/theme-assets/js/common.min.js"></script>
   <script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
+<!--  <script src="assets/theme-assets/js/uikit_custom.min.js"></script>-->
   <script>
       if(isHighDensity) {
           // enable hires images
@@ -78,6 +79,10 @@
           // fastClick (touch devices)
           FastClick.attach(document.body);
       }
+      $window.load(function() {
+          // ie fixes
+          altair_helpers.ie_fix();
+      });
   </script>
   <script type="text/javascript">
       function loadAltmetrics(e, t, n) {