[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
2019-11-29 12:14:49 +00:00 · 2019-11-29 12:14:49 +00:00 · b3fdeb99c5
parent d8a57c8c1c
commit b3fdeb99c5
6 changed files with 140 additions and 26 deletions
--- a/src/app/home/home.component.html
+++ b/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 (click)="deleteStakeholder(i)">Delete</a></li>
+                      <li><a
+                        (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>
--- a/src/app/home/home.component.ts
+++ b/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 {FormBuilder, FormGroup} from "@angular/forms";
+import {IndicatorUtils, Option, StakeholderUtils} from "../utils/indicator-utils";
+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) {
-    /*let stakeholder = this.d
-    this.fb.group({
-      _id: this.fb.control()
-    })*/
+  public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = 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;
+    }
+    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() {
+
  }
 }
--- a/src/app/home/home.module.ts
+++ b/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,
--- a/src/app/library/sharedComponents/input/input.component.ts
+++ b/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;
--- a/src/app/topic/indicators.component.ts
+++ b/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]);
    }
--- a/src/app/utils/indicator-utils.ts
+++ b/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[] = [