[Library | Trunk]: Change input component base on new mocks. Add large parameter for modal

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59618 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/sharedComponents/input/input.component.css

@@ -0,0 +1 @@
+

dashboard/sharedComponents/input/input.component.ts

@@ -1,6 +1,8 @@
-import {Component, Input, OnDestroy, OnInit} from "@angular/core";
+import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";
 import {AbstractControl} from "@angular/forms";
 import {HelperFunctions} from "../../../utils/HelperFunctions.class";
+import {Subscription} from "rxjs";
+import {MatSelect} from "@angular/material/select";
 
 
 export interface Option {
@@ -13,54 +15,103 @@ export interface Option {
 @Component({
   selector: '[dashboard-input]',
   template: `
-    <mat-form-field *ngIf="type != 'checkbox'"  class="uk-width-1-1 uk-padding-remove">
-      <input *ngIf="type === 'text'" matInput [placeholder]="label"
-             [formControl]="formControl" [required]="required">
-      <textarea *ngIf="type === 'textarea'" [rows]="rows" matInput
-                [placeholder]="label" [formControl]="formControl" [required]="required"></textarea>
-      <mat-select *ngIf="type === 'select'" [placeholder]="label" [required]="required"
-                  (openedChange)="stopPropagation()" [formControl]="formControl" [disableOptionCentering]="true">
-        <mat-option *ngFor="let option of options" [value]="option.value">
-          {{option.label}}
-        </mat-option>
-      </mat-select>
-      
-    </mat-form-field>
-    <mat-checkbox *ngIf="type === 'checkbox'"  [formControl]="formControl" >{{label}}</mat-checkbox>
+    <div *ngIf="label"
+         class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
+    <div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
+    <div class="uk-grid" uk-grid>
+      <ng-content></ng-content>
+      <div class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
+        <ng-template [ngIf]="type === 'text'">
+          <input class="uk-input input-box uk-text-small" [placeholder]="placeholder" [formControl]="formControl"
+                 [class.uk-form-danger]="formControl.invalid && formControl.touched">
+        </ng-template>
+        <ng-template [ngIf]="type === 'textarea'">
+      <textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
+                [formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
+      </textarea>
+        </ng-template>
+        <ng-template [ngIf]="type === 'select'">
+          <div class="input-box clickable" [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
+            <mat-form-field class="uk-width-1-1">
+              <mat-select #select *ngIf="type === 'select'" [required]="required" [value]="null"
+                          (openedChange)="stopPropagation()" [formControl]="formControl" [disableOptionCentering]="true">
+                <mat-option *ngIf="placeholder && formControl.value === ''" [value]="''">{{placeholder}}</mat-option>
+                <mat-option *ngFor="let option of options" [value]="option.value">
+                  {{option.label}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+        </ng-template>
+      </div>
+    </div>
+    <mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
   `
 })
-export class InputComponent implements OnInit, OnDestroy {
+export class InputComponent implements OnInit, OnDestroy, OnChanges {
   @Input('formInput') formControl: AbstractControl;
   @Input('type') type: 'text' | 'textarea' | 'select' | 'checkbox' = 'text';
   @Input('label') label: string;
   @Input('rows') rows: number = 3;
   @Input('options') options: Option[];
+  @Input('hint') hint = null;
+  @Input('placeholder') placeholder = '';
+  @ViewChild('select') select: MatSelect;
+  @Input() extraLeft: boolean = true;
   public required: boolean = false;
   private initValue: any;
-
+  private subscriptions: any[] = [];
+  
   constructor() {
   }
-
+  
   ngOnInit(): void {
+    this.reset();
+  }
+  
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes.formControl) {
+      this.reset();
+    }
+  }
+  
+  reset() {
+    this.unsubscribe();
     this.initValue = HelperFunctions.copy(this.formControl.value);
-    if(this.formControl && this.formControl.validator) {
+    if (this.formControl && this.formControl.validator) {
       let validator = this.formControl.validator({} as AbstractControl);
       this.required = (validator && validator.required);
     }
-    this.formControl.valueChanges.subscribe(value => {
+    this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
       value = (value === '')?null:value;
       if(this.initValue === value) {
         this.formControl.markAsPristine();
       }
-    });
-  }
-
-  ngOnDestroy(): void {
-  }
-
-  stopPropagation() {
-    if(event) {
-      event.stopPropagation();
+    }));
+    if (!this.formControl.value) {
+      this.formControl.setValue('');
     }
   }
+  
+  unsubscribe() {
+    this.subscriptions.forEach(subscription => {
+      if(subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
+  openSelect() {
+    if(this.select) {
+      this.select.open();
+    }
+  }
+  
+  ngOnDestroy(): void {
+    this.unsubscribe();
+  }
+  
+  stopPropagation() {
+    event.stopPropagation();
+  }
 }

monitor/entities/stakeholder.ts

@@ -10,6 +10,7 @@ export type IndicatorType = 'number' | 'chart';
 export type IndicatorWidth = 'small' | 'medium' | 'large';
 export type IndicatorPathType = 'table' | 'bar' | 'column' | 'pie' | 'line' | 'other';
 export type SourceType = 'statistics' | 'search' | 'metrics' | 'stats-tool' | 'old' | 'image';
+export type Visibility = 'PUBLIC' | 'PRIVATE' | 'RESTRICTED';
 
 export class Stakeholder {
   _id: string;
@@ -22,6 +23,7 @@ export class Stakeholder {
   defaultId: string;
   isActive: boolean;
   isPublic: boolean;
+  visibility: Visibility;
   creationDate: Date = null;
   updateDate: Date;
   managers: string[];
@@ -30,15 +32,14 @@ export class Stakeholder {
   topics: Topic[];
   description: string;
   
-  constructor(id: string, type: StakeholderType, index_id, index_name: string, index_shortName: string, alias: string, isActive: boolean,
-              isPublic: boolean, logoUrl: string, defaultId: string = null, description: string = null) {
-    this.initializeFunder(id, type, index_id, index_name, index_shortName, defaultId, alias, isActive, isPublic, logoUrl, description);
+  constructor(id: string, type: StakeholderType, index_id, index_name: string, index_shortName: string, alias: string, visibility: Visibility, logoUrl: string, defaultId: string = null, description: string = null) {
+    this.initializeFunder(id, type, index_id, index_name, index_shortName, defaultId, alias, visibility, logoUrl, description);
     this.topics = [];
     this.managers = [];
   }
   
   initializeFunder(id: string, type: StakeholderType, index_id, index_name: string, index_shortName: string, defaultId: string,
-                   alias: string, isActive: boolean, isPublic: boolean, logoUrl: string, description: string = null) {
+                   alias: string, visibility: Visibility, logoUrl: string, description: string = null) {
     this._id = id;
     this.type = type;
     this.index_id = index_id;
@@ -46,9 +47,9 @@ export class Stakeholder {
     this.index_shortName = index_shortName;
     this.defaultId = defaultId;
     this.alias = alias;
-    this.isActive = isActive;
-    this.isPublic = isPublic;
+    this.visibility = visibility;
     this.logoUrl = logoUrl;
+    this.description = description;
   }
 }
 

utils/modal/alert.ts

@@ -5,7 +5,7 @@ declare var UIkit: any;
 @Component({
   selector: 'modal-alert',
   template: `
-    <div #element class="uk-modal" [id]="id" uk-modal>
+    <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal>
       <div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left"
            [ngClass]="classBody">
         <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
@@ -63,6 +63,7 @@ export class AlertModal {
   @Input() id: string = "modal";
   @Input() classTitle: string = "";
   @Input() classBody: string = "";
+  @Input() large: boolean = false;
   /**
    * Caption for the title.
    */