[MonitorDashboard]: Add edit stakeholder modal

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

src/app/home/home.component.html

@@ -3,12 +3,12 @@
     <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
       <div>
         <div dashboard-input [formInput]="filters.get('privacy')"
-             type="select" [options]="[all].concat(indicatorUtils.isPublic)"
+             type="select" [options]="[all].concat(stakeholderUtils.isPublic)"
              label="Privacy"></div>
       </div>
       <div>
         <div dashboard-input [formInput]="filters.get('status')"
-             type="select" [options]="[all].concat(indicatorUtils.isActive)"
+             type="select" [options]="[all].concat(stakeholderUtils.isActive)"
              label="Status"></div>
       </div>
     </div>
@@ -41,12 +41,13 @@
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
-                  <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
+                  <i
+                    class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
                 </span>
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
-                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                     [class.md-color-green-300]="stakeholder.isActive">{{stakeholderUtils.isActiveIcon}}</i>
                   {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
                 </span>
                 <div class="md-card-dropdown uk-inline">
@@ -64,12 +65,12 @@
             <div *ngIf="grid" class="md-card-content">
               <div class="uk-flex uk-flex-center" uk-grid>
                 <div class="uk-width-1-2 uk-text-center">
-                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
+                  <i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   <div>{{(stakeholder.isPublic) ? 'Public' : 'Private'}}</div>
                 </div>
                 <div class="uk-width-1-2 uk-text-center">
                   <i class="material-icons md-24"
-                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                     [class.md-color-green-300]="stakeholder.isActive">{{stakeholderUtils.isActiveIcon}}</i>
                   <div>{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}</div>
                 </div>
               </div>
@@ -92,12 +93,13 @@
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
-                  <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
+                  <i
+                    class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
                 </span>
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
-                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                     [class.md-color-green-300]="stakeholder.isActive">{{stakeholderUtils.isActiveIcon}}</i>
                   {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
                 </span>
                 <div class="md-card-dropdown uk-inline">
@@ -105,8 +107,12 @@
                      (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
                   <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
                     <ul class="uk-nav uk-dropdown-nav">
-                      <li><a (click)="editStakeholder(i)">Edit</a></li>
+                      <li><a
-                      <li><a (click)="deleteStakeholder(i)">Delete</a></li>
+                        (click)="$event.stopPropagation();editStakeholder(stakeholder);$event.preventDefault()">Edit</a>
+                      </li>
+                      <li><a
+                        (click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);$event.preventDefault()">Delete</a>
+                      </li>
                     </ul>
                   </div>
                 </div>
@@ -116,12 +122,12 @@
             <div *ngIf="grid" class="md-card-content">
               <div class="uk-flex uk-flex-center" uk-grid>
                 <div class="uk-width-1-2 uk-text-center">
-                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
+                  <i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   <div>{{(stakeholder.isPublic) ? 'Public' : 'Private'}}</div>
                 </div>
                 <div class="uk-width-1-2 uk-text-center">
                   <i class="material-icons md-24"
-                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                     [class.md-color-green-300]="stakeholder.isActive">{{stakeholderUtils.isActiveIcon}}</i>
                   <div>{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}</div>
                 </div>
               </div>
@@ -132,3 +138,33 @@
     </div>
   </div>
 </div>
+<modal-alert #editStakeholderModal
+             (alertOutput)="saveStakeholder()"
+             [okDisabled]="stakeholderFb && (stakeholderFb.invalid || (!stakeholderFb.dirty && index !==-1))">
+  <div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
+    <div dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('index_name')" label="Name"></div>
+    <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
+      <div dashboard-input [formInput]="stakeholderFb.get('index_id')"
+           label="ID">
+      </div>
+      <div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
+           label="Short name">
+      </div>
+      <div dashboard-input [formInput]="stakeholderFb.get('alias')"
+           label="Alias">
+      </div>
+    </div>
+    <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
+      <div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
+           label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
+      </div>
+      <div dashboard-input [formInput]="stakeholderFb.get('isActive')"
+           label="Status" [options]="stakeholderUtils.isActive" type="select">
+      </div>
+      <div dashboard-input [formInput]="stakeholderFb.get('type')"
+           label="Type" [options]="stakeholderUtils.types" type="select">
+      </div>
+    </div>
+  </div>
+</modal-alert>
+<modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert>

src/app/home/home.component.ts

@@ -1,11 +1,12 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
 import {StakeholderService} from "../services/stakeholder.service";
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
 import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
 import {Stakeholder} from "../utils/entities/stakeholder";
 import {Subscriber, zip} from "rxjs";
-import {IndicatorUtils, Option} from "../utils/indicator-utils";
+import {IndicatorUtils, Option, StakeholderUtils} from "../utils/indicator-utils";
-import {FormBuilder, FormGroup} from "@angular/forms";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 
 @Component({
   selector: 'home',
@@ -15,15 +16,19 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   public properties: EnvProperties;
   public loading: boolean = true;
-  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
+  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   public defaultStakeholders: Stakeholder[];
   public stakeholders: Stakeholder[];
-  public stakeholder: FormGroup;
+  public stakeholder: Stakeholder;
+  public stakeholderFb: FormGroup;
+  public index: number;
+
   /**
    *  Filtered Stakeholders
    */
   public displayDefaultStakeholders: Stakeholder[];
   public displayStakeholders: Stakeholder[];
+
   /**
    * Top filters
    */
@@ -39,6 +44,9 @@ export class HomeComponent implements OnInit, OnDestroy {
   public grid: boolean = true;
   private subscriptions: any[] = [];
 
+  @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
+  @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
+
   constructor(private stakeholderService: StakeholderService,
               private propertiesService: EnvironmentSpecificService,
               private fb: FormBuilder) {
@@ -136,10 +144,53 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
   }
 
-  public editStakeholder(index = -1) {
+  public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) {
-    /*let stakeholder = this.d
+    if(isDefault) {
-    this.fb.group({
+      this.index = (stakeholder)?this.defaultStakeholders.findIndex(value => value._id === stakeholder._id):-1;
-      _id: this.fb.control()
+    } else {
-    })*/
+      this.index = (stakeholder)?this.stakeholders.findIndex(value => value._id === stakeholder._id):-1;
+    }
+    if(!stakeholder) {
+      this.stakeholder = new Stakeholder(null, null, null,
+        null, null, isDefault, null, false, false);
+    } else {
+      this.stakeholder = stakeholder;
+    }
+    this.stakeholderFb = this.fb.group( {
+      _id: this.fb.control(stakeholder._id),
+      index_name: this.fb.control(stakeholder.index_name, Validators.required),
+      index_id: this.fb.control(stakeholder.index_id, Validators.required),
+      index_shortName: this.fb.control(stakeholder.index_shortName, Validators.required),
+      isDefaultProfile: this.fb.control(stakeholder.isDefaultProfile),
+      alias: this.fb.control(stakeholder.alias, Validators.required),
+      isPublic: this.fb.control(stakeholder.isPublic),
+      isActive: this.fb.control(stakeholder.isActive),
+      type: this.fb.control(stakeholder.type, Validators.required),
+      topics: this.fb.control(stakeholder.topics)
+    });
+    if(this.index !== -1) {
+      this.stakeholderFb.get('type').disable();
+    }
+    this.editStakeholderModal.cancelButtonText = 'Cancel';
+    this.editStakeholderModal.okButtonText = 'Save Changes';
+    this.editStakeholderModal.okButtonLeft = false;
+    this.editStakeholderModal.alertMessage = false;
+    this.editStakeholderModal.open();
+  }
+
+  public saveStakeholder() {
+
+  }
+
+  public deleteStakeholderOpen(stakeholder: Stakeholder, isDefault = false) {
+    if(isDefault) {
+      this.index = (stakeholder)?this.defaultStakeholders.findIndex(value => value._id === stakeholder._id):-1;
+    } else {
+      this.index = (stakeholder)?this.stakeholders.findIndex(value => value._id === stakeholder._id):-1;
+    }
+  }
+
+  public deleteStakeholder() {
+
   }
 }

src/app/home/home.module.ts

@@ -7,6 +7,8 @@ import {CommonModule} from "@angular/common";
 import {RouterModule} from "@angular/router";
 import {InputModule} from "../library/sharedComponents/input/input.module";
 import {LoadingModule} from "../library/sharedComponents/loading/loading.module";
+import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
+import {ReactiveFormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [HomeComponent],
@@ -15,7 +17,9 @@ import {LoadingModule} from "../library/sharedComponents/loading/loading.module"
     CommonModule,
     RouterModule,
     InputModule,
-    LoadingModule
+    LoadingModule,
+    AlertModalModule,
+    ReactiveFormsModule
   ],
   providers: [
     FreeGuard, PreviousRouteRecorder,

src/app/library/sharedComponents/input/input.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnDestroy, OnInit} from "@angular/core";
 import {Option} from "../../../utils/indicator-utils";
-import {FormControl} from "@angular/forms";
+import {AbstractControl} from "@angular/forms";
 import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
 
 @Component({
@@ -20,7 +20,7 @@ import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.cl
   `
 })
 export class InputComponent implements OnInit, OnDestroy {
-  @Input('formInput') formControl: FormControl;
+  @Input('formInput') formControl: AbstractControl;
   @Input('type') type: string = 'text';
   @Input('label') label: string;
   @Input('rows') rows: number = 3;

src/app/topic/indicators.component.ts

@@ -310,7 +310,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
 
   public editIndicatorOpen(id = null) {
-    this.index = this.charts.findIndex(value => value._id === id);
+    this.index = (id)?this.charts.findIndex(value => value._id === id):-1;
     if (this.index !== -1) {
       this.indicator = HelperFunctions.copy(this.charts[this.index]);
     }

src/app/utils/indicator-utils.ts

@@ -8,6 +8,29 @@ export interface Option {
   label: string
 }
 
+export class StakeholderUtils {
+  types: Option[] = [
+    {value: 'funder', label: 'Funder'}
+  ];
+
+  isPublic: Option[]  = [
+    {icon: 'public', value: true, label: 'Public'},
+    {icon: 'lock', value: false, label: 'Private'},
+  ];
+
+  isActive: Option[]  = [
+    {icon: 'brightness_1', iconClass: '', value: true, label: 'Active'},
+    {icon: 'brightness_1', value: false, label: 'Inactive'},
+  ];
+
+  isPublicIcon: Map<boolean, string> = new Map([
+    [true, 'public'],
+    [false, 'lock']
+  ]);
+
+  isActiveIcon: string = 'brightness_1';
+}
+
 export class IndicatorUtils {
 
   chartTypes: Option[] = [