[Monitor Dashboard | Trunk]: Add edit and create number indicator for Administrators. Search by keyword: Check chart title also.

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

src/app/topic/indicators.component.html

@@ -114,15 +114,15 @@
                   <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                        class="uk-padding-remove-horizontal">
                     <ul class="uk-nav uk-dropdown-nav">
-                      <!--<li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>-->
+                      <li *ngIf="isAdministrator"><a (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
                       <li><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
                         {{indicator.isActive ? 'Inactive' : 'Active'}}</a>
                       </li>
                       <li><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
                         {{indicator.isPublic ? 'Private' : 'Public'}}</a>
                       </li>
-                      <hr class="uk-nav-divider">
+                      <hr *ngIf="isAdministrator" class="uk-nav-divider">
-                      <li><a (click)="deleteIndicatorOpen(number, indicator._id, 'number');hide(element)">Delete</a>
+                      <li *ngIf="isAdministrator"><a (click)="deleteIndicatorOpen(number, indicator._id, 'number');hide(element)">Delete</a>
                       </li>
                     </ul>
                   </div>
@@ -151,6 +151,31 @@
           </div>
         </div>
       </ng-template>
+      <div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag"
+           [class.uk-width-1-3@m]="grid"
+           [class.uk-width-1-1@m]="!grid">
+        <div class="md-card clickable" (click)="editNumberIndicatorOpen(number)">
+          <div class="md-card-toolbar">
+            <div class="md-card-toolbar-heading-text"
+                 [class.uk-flex-middle]="!grid"
+                 [class.uk-flex]="!grid"
+                 [class.uk-flex-center]="!grid">
+              <i *ngIf="!grid" class="material-icons md-36">add</i>
+              <span>Create a custom Indicator</span>
+            </div>
+          </div>
+          <div *ngIf="grid" class="md-card-content">
+            <div uk-grid>
+              <div class="uk-width-1-1">
+                Create a new number Indicator
+              </div>
+              <div class="uk-width-1-1 uk-flex uk-flex-center">
+                <i class="material-icons md-48">add</i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <h4 class="uk-text-bold">Chart Indicators</h4>
     <div *ngIf="chartSections">
@@ -312,32 +337,92 @@
     </div>
   </div>
 </div>
-<modal-alert #editModal
+<modal-alert #editNumberModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
-             [okDisabled]="indicatorFb && (indicatorFb.invalid || indicatorFb.pristine)">
+             [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
-  <div *ngIf="indicatorFb" class="uk-padding-small" [formGroup]="indicatorFb">
+  <div *ngIf="numberIndicatorFb" class="uk-padding-small" [formGroup]="numberIndicatorFb">
-    <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
+    <div dashboard-input class="uk-form-row" [formInput]="numberIndicatorFb.get('name')" label="Title"></div>
-    <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"
+    <div dashboard-input class="uk-form-row" [formInput]="numberIndicatorFb.get('description')"
          label="Description" type="textarea">
     </div>
     <div class="uk-form-row uk-flex uk-flex-middle">
-      <div dashboard-input class="uk-width-small" [formInput]="indicatorFb.get('isPublic')"
+      <div dashboard-input class="uk-width-small" [formInput]="numberIndicatorFb.get('isPublic')"
            label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
       </div>
-      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('isActive')"
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="numberIndicatorFb.get('isActive')"
            label="Visibility" [options]="indicatorUtils.isActive" type="select">
       </div>
-      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('width')"
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="numberIndicatorFb.get('width')"
-           type="select" [options]="indicatorUtils.chartSizes"
+           type="select" [options]="indicatorUtils.indicatorSizes"
+           label="Number Size">
+      </div>
+    </div>
+    <h5 class="uk-text-bold uk-margin-top uk-margin-bottom">
+      Number Settings
+    </h5>
+    <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
+      <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
+           [formGroup]="indicatorPath">
+        <div class="uk-grid-medium uk-form-row uk-flex uk-flex-middle" uk-grid>
+          <div class="uk-width-2-3@s">
+            <div dashboard-input [formInput]="indicatorPath.get('url')" type="textarea" rows="3" label="Number path url"></div>
+          </div>
+          <div class="uk-width-1-3@s">
+            <div dashboard-input [formInput]="indicatorPath.get('source')" label="Source"
+                 type="select" [options]="indicatorUtils.sourceTypes">
+            </div>
+          </div>
+        </div>
+        <div formArrayName="jsonPath">
+          <div class="uk-margin-top uk-margin-bottom uk-text-large">
+            JSON Path
+          </div>
+          <div class="uk-grid uk-grid-medium" uk-grid>
+            <div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
+              <div dashboard-input class="uk-width-small"
+                   [formInput]="jsonPath"
+                   [label]="'Level ' + +(j + 1)"></div>
+              <i *ngIf="getJsonPath(i).length !== 1" class="material-icons md-24 uk-margin-left uk-text-danger clickable" (click)="removeJsonPath(i, j)">close</i>
+              <div *ngIf="j < (getJsonPath(i).length - 1)" class="uk-text-center uk-margin-left">
+                <i class="material-icons">arrow_forward</i>
+              </div>
+              <div *ngIf="j === (getJsonPath(i).length - 1)" class="uk-margin-left">
+                <button class="md-btn md-btn-small md-btn-primary" (click)="addJsonPath(i)">Add level</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</modal-alert>
+<modal-alert #editChartModal
+             [classBody]="'large-modal'"
+             (alertOutput)="saveIndicator()"
+             [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
+  <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
+    <div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
+    <div dashboard-input class="uk-form-row" [formInput]="chartIndicatorFb.get('description')"
+         label="Description" type="textarea">
+    </div>
+    <div class="uk-form-row uk-flex uk-flex-middle">
+      <div dashboard-input class="uk-width-small" [formInput]="chartIndicatorFb.get('isPublic')"
+           label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
+      </div>
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="chartIndicatorFb.get('isActive')"
+           label="Visibility" [options]="indicatorUtils.isActive" type="select">
+      </div>
+      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="chartIndicatorFb.get('width')"
+           type="select" [options]="indicatorUtils.indicatorSizes"
            label="Chart Size">
       </div>
     </div>
     <h5 class="uk-text-bold uk-margin-top uk-margin-bottom">
       Chart Settings
     </h5>
-    <div *ngIf="indicatorPaths" formArrayName="indicatorPaths">
+    <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths">
-      <div *ngFor="let indicatorPath of indicatorPaths.controls; let i=index"
+      <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index"
            [formGroup]="indicatorPath">
         <div dashboard-input class="uk-form-row"
              [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
@@ -423,6 +508,10 @@
   "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
   Are you sure you want to proceed?
 </modal-alert>
+<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
+  You are about to delete this section and his indicators permanently.
+  Are you sure you want to proceed?
+</modal-alert>
 <modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
   You are about to delete this section and his indicators permanently.
   Are you sure you want to proceed?

src/app/topic/indicators.component.ts

@@ -22,6 +22,8 @@ import {Subscriber} from "rxjs";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
 import {Router} from "@angular/router";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 
 declare var UIkit;
 
@@ -41,9 +43,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   public subcategoryIndex: number = 0;
   @Input()
   public stakeholder: Stakeholder = null;
+  public user = null;
   public preview: string;
   public indicatorUtils: IndicatorUtils = new IndicatorUtils();
-  public indicatorFb: FormGroup;
+  public numberIndicatorFb: FormGroup;
+  public chartIndicatorFb: FormGroup;
   public chartSections: FormArray;
   public numberSections: FormArray;
   /**
@@ -74,14 +78,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   
   private subscriptions: any[] = [];
   private urlSubscriptions: any[] = [];
-  @ViewChild('editModal') editModal: AlertModal;
+  @ViewChild('editChartModal') editChartModal: AlertModal;
+  @ViewChild('editNumberModal') editNumberModal: AlertModal;
   @ViewChild('deleteModal') deleteModal: AlertModal;
   @ViewChild('deleteChartSectionModal') deleteChartSectionModal: AlertModal;
-
+  @ViewChild('deleteNumberSectionModal') deleteNumberSectionModal: AlertModal;
+  
   urlParameterizedMessage = "";
   constructor(private layoutService: LayoutService,
               private stakeholderService: StakeholderService,
               private statisticsService: StatisticsService,
+              private userManagementService: UserManagementService,
               private fb: FormBuilder,
               private router: Router,
               private cdr: ChangeDetectorRef,
@@ -89,6 +96,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   ngOnInit(): void {
+    this.userManagementService.getUserInfo().subscribe(user => {
+      this.user = user;
+    });
     this.buildFilters();
     this.buildSections();
   }
@@ -244,6 +254,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
       this.filters.value.status),
       this.filters.value.privacy);
+    console.log(this.numbers);
     this.buildSections();
   }
   
@@ -295,7 +306,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     if (value !== null && value !== '') {
       sections.forEach(section =>
         section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase()))
-          || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))));
+          || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase()))
+          || indicator.indicatorPaths.filter(indicatorPath => (indicatorPath.parameters && indicatorPath.parameters.title &&
+            indicatorPath.parameters.title.includes(value.toLowerCase()))).length > 0));
     }
     return sections;
   }
@@ -344,12 +357,28 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
   }
   
-  public get indicatorPaths(): FormArray {
+  public get numberIndicatorPaths(): FormArray {
-    return this.indicatorFb.get('indicatorPaths') as FormArray;
+    return this.numberIndicatorFb.get('indicatorPaths') as FormArray;
+  }
+  
+  public get chartIndicatorPaths(): FormArray {
+    return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
+  }
+  
+  public addJsonPath(index: number) {
+    this.getJsonPath(index).push(this.fb.control('', Validators.required));
+  }
+  
+  public removeJsonPath(i: number, j:number) {
+    this.getJsonPath(i).removeAt(j);
+  }
+  
+  public getJsonPath(index: number): FormArray {
+    return this.numberIndicatorPaths.at(index).get('jsonPath') as FormArray;
   }
   
   public getParameters(index: number): FormArray {
-    return this.indicatorPaths.at(index).get('parameters') as FormArray;
+    return this.chartIndicatorPaths.at(index).get('parameters') as FormArray;
   }
   
   public getParameter(index: number, key: string): FormControl {
@@ -365,8 +394,20 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath));
   }
   
-  public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type:string=null) {
+  public addNumberIndicatorPath(url: string = '', source: string = 'search', jsonPath: FormArray = new FormArray([])) {
-    this.indicatorPaths.push(this.fb.group({
+    if(jsonPath.length === 0) {
+      jsonPath.push(this.fb.control('', Validators.required));
+    }
+    this.numberIndicatorPaths.push(this.fb.group({
+        url: this.fb.control(url, Validators.required),
+        jsonPath: jsonPath,
+        source: this.fb.control(source, Validators.required)
+      }
+    ));
+  }
+  
+  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,
           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\.' +
@@ -376,14 +417,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       }
     ));
     if(disableUrl) {
-      for(let index = 0; index < this.indicatorPaths.length; index++) {
+      for(let index = 0; index < this.chartIndicatorPaths.length; index++) {
-        this.indicatorPaths.at(index).get('url').disable();
+        this.chartIndicatorPaths.at(index).get('url').disable();
       }
     } else {
-      for(let index = 0; index < this.indicatorPaths.length; index++) {
+      for(let index = 0; index < this.chartIndicatorPaths.length; index++) {
-        this.urlSubscriptions.push(this.indicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
+        this.urlSubscriptions.push(this.chartIndicatorPaths.at(index).get('url').valueChanges.subscribe(value => {
-            if (this.indicatorPaths.at(index).get('url').valid) {
+            if (this.chartIndicatorPaths.at(index).get('url').valid) {
-              let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, this.indicatorPaths.at(index).get('type').value, this.stakeholder);
+              let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value), value, this.chartIndicatorPaths.at(index).get('type').value, this.stakeholder);
               if(indicatorPath.chartObject && Object.keys(indicatorPath.parameters).indexOf("index_id") ==-1 && Object.keys(indicatorPath.parameters).indexOf("index_name") ==-1  && Object.keys(indicatorPath.parameters).indexOf("index_shortName") ==-1 ){
                 // default profile
                 if(this.stakeholder.defaultId == null){
@@ -394,9 +435,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
               }else {
                 this.urlParameterizedMessage = "";
               }
-              (this.indicatorPaths.at(index) as FormGroup).get('type').setValue(indicatorPath.type);
+              (this.chartIndicatorPaths.at(index) as FormGroup).get('type').setValue(indicatorPath.type);
               let parameters = this.getParametersAsFormArray(indicatorPath);
-              (this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
+              (this.chartIndicatorPaths.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);
@@ -411,6 +452,16 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     }
   }
   
+  private getJsonPathAsFormArray(indicatorPath: IndicatorPath): FormArray {
+    let jsonPath = this.fb.array([]);
+    if (indicatorPath.jsonPath) {
+      indicatorPath.jsonPath.forEach(path => {
+        jsonPath.push(this.fb.control(path, Validators.required));
+      });
+    }
+    return jsonPath;
+  }
+  
   private getParametersAsFormArray(indicatorPath: IndicatorPath): FormArray {
     let parameters = this.fb.array([]);
     if (indicatorPath.parameters) {
@@ -433,6 +484,53 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return parameters;
   }
   
+  public editNumberIndicatorOpen(section: Section, id = null) {
+    this.section = section;
+    this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
+    if (this.index !== -1) {
+      this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
+      this.numberIndicatorFb = this.fb.group({
+        _id: this.fb.control(this.indicator._id),
+        name: this.fb.control(this.indicator.name),
+        description: this.fb.control(this.indicator.description),
+        isPublic: this.fb.control(this.indicator.isPublic),
+        isActive: this.fb.control(this.indicator.isActive),
+        indicatorPaths: this.fb.array([], Validators.required),
+        type: this.fb.control(this.indicator.type),
+        width: this.fb.control(this.indicator.width),
+        defaultId: this.fb.control(this.indicator.defaultId)
+      });
+      this.indicator.indicatorPaths.forEach(indicatorPath => {
+        this.addNumberIndicatorPath(indicatorPath.url, indicatorPath.source, this.getJsonPathAsFormArray(indicatorPath));
+      });
+    } else {
+      this.indicator = new Indicator('', '', 'number', 'small', false, false, []);
+      this.numberIndicatorFb = this.fb.group({
+        _id: this.fb.control(this.indicator._id),
+        name: this.fb.control(this.indicator.name),
+        description: this.fb.control(this.indicator.description),
+        isPublic: this.fb.control(this.indicator.isPublic),
+        isActive: this.fb.control(this.indicator.isActive),
+        indicatorPaths: this.fb.array([], Validators.required),
+        type: this.fb.control(this.indicator.type),
+        width: this.fb.control(this.indicator.width),
+        defaultId: this.fb.control(this.indicator.defaultId)
+      });
+      this.addNumberIndicatorPath();
+    }
+    this.editNumberModal.cancelButtonText = 'Cancel';
+    this.editNumberModal.okButtonLeft = false;
+    this.editNumberModal.alertMessage = false;
+    if (this.index === -1) {
+      this.editNumberModal.alertTitle = 'Create a new number indicator';
+      this.editNumberModal.okButtonText = 'Save';
+    } else {
+      this.editNumberModal.alertTitle = 'Edit number indicator\'s information';
+      this.editNumberModal.okButtonText = 'Save Changes';
+    }
+    this.editNumberModal.open();
+  }
+  
   public editChartIndicatorOpen(section: Section, id = null) {
     this.urlParameterizedMessage = "";
     this.urlSubscriptions.forEach(value => {
@@ -444,9 +542,9 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     this.index = (id) ? section.indicators.findIndex(value => value._id === id) : -1;
     if (this.index !== -1) {
       this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
-      this.indicatorFb = this.fb.group({
+      this.chartIndicatorFb = this.fb.group({
-        id: this.fb.control(this.indicator._id),
+        _id: this.fb.control(this.indicator._id),
-        name: this.fb.control(this.indicator.name/*, Validators.required*/),
+        name: this.fb.control(this.indicator.name),
         description: this.fb.control(this.indicator.description),
         isPublic: this.fb.control(this.indicator.isPublic),
         isActive: this.fb.control(this.indicator.isActive),
@@ -455,14 +553,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         defaultId: this.fb.control(this.indicator.defaultId)
       });
       this.indicator.indicatorPaths.forEach(indicatorPath => {
-        this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
+        this.addChartIndicatorPath(this.getUrlByStakeHolder(indicatorPath),
           this.getParametersAsFormArray(indicatorPath), this.indicator.defaultId !== null, indicatorPath.type);
         indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
       });
     } else {
       this.indicator = new Indicator('', '', 'chart', 'small', false, false, []);
-      this.indicatorFb = this.fb.group({
+      this.chartIndicatorFb = this.fb.group({
-        id: this.fb.control(null),
+        _id: this.fb.control(null),
         name: this.fb.control(''),
         description: this.fb.control(''),
         isPublic: this.fb.control(false),
@@ -471,25 +569,27 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         width: this.fb.control('small', Validators.required),
         defaultId: this.fb.control(null)
       });
-      this.addIndicatorPath();
+      this.addChartIndicatorPath();
     }
-    this.editModal.cancelButtonText = 'Cancel';
+    this.editChartModal.cancelButtonText = 'Cancel';
-    this.editModal.okButtonLeft = false;
+    this.editChartModal.okButtonLeft = false;
-    this.editModal.alertMessage = false;
+    this.editChartModal.alertMessage = false;
     if (this.index === -1) {
-      this.editModal.alertTitle = 'Create a new chart indicator';
+      this.editChartModal.alertTitle = 'Create a new chart indicator';
-      this.editModal.okButtonText = 'Save';
+      this.editChartModal.okButtonText = 'Save';
     } else {
-      this.editModal.alertTitle = 'Edit chart indicator\'s information';
+      this.editChartModal.alertTitle = 'Edit chart indicator\'s information';
-      this.editModal.okButtonText = 'Save Changes';
+      this.editChartModal.okButtonText = 'Save Changes';
     }
-    this.editModal.open();
+    this.editChartModal.open();
   }
   
   saveIndicator() {
     if (this.indicator.type === 'chart') {
-      this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
+      this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths);
       this.section = this.charts.find(section => section._id === this.section._id);
+    } else {
+      this.indicator = this.numberIndicatorFb.value;
     }
     let path = [
       this.stakeholder._id,
@@ -505,14 +605,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         this.section.indicators.push(indicator);
       }
       this.filterCharts();
-      this.indicatorFb = null;
+      this.chartIndicatorFb = null;
       UIkit.notification('Indicator has been successfully saved', {
         status: 'success',
         timeout: 3000,
         pos: 'top-left'
       });
     }, error => {
-      this.indicatorFb = null;
+      this.chartIndicatorFb = null;
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
@@ -542,7 +642,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   
   hasDifference(index: number): boolean {
     let hasDifference = false;
-    this.indicatorPaths.at(index).value.parameters.forEach((parameter) => {
+    this.chartIndicatorPaths.at(index).value.parameters.forEach((parameter) => {
       if (parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
         hasDifference = true;
         return;
@@ -552,8 +652,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString();
   }
   
+  public get isAdministrator(): boolean {
+    return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isCommunityCurator(this.user)
+  }
+  
   refreshIndicator() {
-    this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
+    this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths);
     this.indicator.indicatorPaths.forEach(indicatorPath => {
       indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
     });
@@ -723,6 +827,15 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     });
   }
   
+  deleteNumberSectionOpen(section: Section, index: number) {
+    this.section = section;
+    this.index = index;
+    this.deleteNumberSectionModal.alertTitle = 'Delete Section';
+    this.deleteNumberSectionModal.cancelButtonText = 'No';
+    this.deleteNumberSectionModal.okButtonText = 'Yes';
+    this.deleteNumberSectionModal.open();
+  }
+  
   deleteChartSectionOpen(section: Section, index: number) {
     this.section = section;
     this.index = index;

src/app/utils/indicator-utils.ts

@@ -158,12 +158,18 @@ export class IndicatorUtils {
   ];
   basicChartTypes:IndicatorPathType[] =["pie", "line", "column", "bar"];
   defaultChartType:IndicatorPathType = "other";
-  chartSizes: Option[] = [
+  indicatorSizes: Option[] = [
     {value: 'small', label: 'Small'},
     {value: 'medium', label: 'Medium'},
     {value: 'large', label: 'Large'}
   ];
 
+  sourceTypes: Option[]  = [
+    {value: 'search', label: 'Search'},
+    {value: 'statistics', label: 'Statistics'},
+    {value: 'metrics', label: 'Metrics'}
+  ]
+  
   isPublic: Option[] = [
     {icon: 'public', value: true, label: 'Public'},
     {icon: 'lock', value: false, label: 'Private'},