[Monitor Dashboard | Trunk]: Finish stakeholder form

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

src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css

@@ -0,0 +1,10 @@
+.uk-border-circle {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+.uk-border-circle > img {
+  max-width: 64px;
+  max-height: 64px;
+}

src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from "@angular/core";
+import {Component, Input, OnDestroy} from "@angular/core";
 import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {StakeholderUtils} from "../../utils/indicator-utils";
@@ -12,9 +12,11 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service
 @Component({
   selector: 'edit-stakeholder',
   template: `
-    <div *ngIf="stakeholderFb" [ngStyle]="{'max-height': maxHeight}" class="uk-padding-small uk-overflow-auto" [formGroup]="stakeholderFb">
+    <div *ngIf="stakeholderFb" [ngStyle]="{'max-height': maxHeight}" class="uk-padding-small uk-overflow-auto"
+         [formGroup]="stakeholderFb">
       <div class="uk-flex uk-flex-bottom" uk-grid>
-        <div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('name')" label="Name" placeholder="Write a name..."
+        <div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('name')" label="Name"
+             placeholder="Write a name..."
              hint="Set a name for your profile."></div>
         <div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('alias')"
              hint="Set an URL alias for your profile."
@@ -32,56 +34,61 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service
         <div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."
              hint="Write a description for your profile"
              [rows]="4" [formInput]="stakeholderFb.get('description')" label="Description"></div>
-        <div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('visibility')"
+        <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
+        <div dashboard-input class="uk-width-1-1" [hideControl]="stakeholderFb.get('isUpload').value"
+             hint="Upload or link the logo of your profile" [placeholder]="'Write link to the logo'"
+             [formInput]="stakeholderFb.get('logoUrl')" label="Logo">
+          <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-2-5@m uk-width-1-1">
+            <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
+              <div class="uk-width-1-2@m uk-width-1-1 uk-text-center">
+                <button class="uk-button uk-button-secondary" (click)="file.click()">Upload a file</button>
+              </div>
+              <div class="uk-text-center uk-text-bold uk-width-expand">
+                OR
+              </div>
+            </div>
+          </div>
+          <div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
+            <div class="uk-card uk-card-default uk-text-center uk-border-circle">
+              <img class="uk-position-center" [src]="photo">
+            </div>
+            <div class="uk-margin-left">
+              <button (click)="remove()" class="uk-button-secondary outlined uk-icon-button small">
+                <icon name="remove"></icon>
+              </button>
+            </div>
+            <div class="uk-margin-small-left">
+              <button class="uk-button-secondary uk-icon-button small" (click)="file.click()">
+                <icon name="edit"></icon>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
+        <div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('visibility')"
              [placeholder]="'Select a status'"
              label="Status" hint="Select the visibility status of your profile"
              [options]="stakeholderUtils.statuses" type="select">
         </div>
-        <div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('type')"
+        <div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('type')"
              [placeholder]="'Select a type'" hint="Select the type of your profile"
              label="Type" [options]="stakeholderUtils.types" type="select">
         </div>
         <ng-container *ngIf="!stakeholderFb.get('isDefault').value && isNew && stakeholderFb.get('type').valid">
-          <div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger uk-width-1-1">No default profiles has been found
+          <div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger uk-width-1-3@m">No default profiles
+            has been found
             for this type.
           </div>
           <div *ngIf="defaultStakeholdersOptions.length > 0" [placeholder]="'Select a template'"
                hint="Select a template for your profile"
-               dashboard-input class="uk-width-1-1" [formInput]="stakeholderFb.get('defaultId')"
+               dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('defaultId')"
                label="Template" [options]="defaultStakeholdersOptions" type="select"></div>
         </ng-container>
       </div>
-      <div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
+    </div>`,
-        <!--<div class="uk-width-1-5">
+  styleUrls: ['edit-stakeholder.component.css']
-          <img [src]="photo">
-        </div>-->
-        <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
-          <div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL">
-          </div>
-        </div>
-        <!--<ng-template #uploadPhoto>
-          <div>
-            <div uk-form-custom class="uk-width-auto">
-              <input id="photo" type="file" (change)="fileChangeEvent($event)"/>
-              <button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
-            </div>
-            <button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove</button>
-          </div>
-          <div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
-        </ng-template>
-        <div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
-          <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
-        </div>-->
-      </div>
-      <!--<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
-        <div>- OR -</div>
-        <div class="uk-margin-small-top">
-          <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
-        </div>
-      </div>-->
-    </div>`
 })
-export class EditStakeholderComponent {
+export class EditStakeholderComponent implements OnDestroy {
   @Input()
   public maxHeight = 'none';
   public stakeholderFb: FormGroup;
@@ -108,8 +115,12 @@ export class EditStakeholderComponent {
               private utilsService: UtilitiesService) {
   }
   
+  ngOnDestroy() {
+    this.reset();
+  }
+  
   public init(stakeholder: Stakeholder, stakeholders: Stakeholder[], defaultStakeholders: Stakeholder[], isDefault: boolean, isNew: boolean) {
-    this.uploadError = null;
+    this.reset();
     this.deleteCurrentPhoto = false;
     this.stakeholder = stakeholder;
     this.stakeholders = stakeholders;
@@ -143,17 +154,10 @@ export class EditStakeholderComponent {
       logoUrl: this.fb.control(this.stakeholder.logoUrl),
     });
     this.initPhoto();
+    if (!isDefault) {
       this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
         this.onTypeChange(value, defaultStakeholders);
       }));
-    this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => {
-      if (value) {
-        this.photo = value;
-      } else {
-        this.photo = 'assets/common-assets/curator-default.png';
-      }
-    }));
-    if (!isDefault) {
       this.stakeholderFb.setControl('defaultId', this.fb.control(stakeholder.defaultId, Validators.required));
     }
     if (isNew) {
@@ -174,10 +178,13 @@ export class EditStakeholderComponent {
   }
   
   public get disabled(): boolean {
-    return this.stakeholderFb && (this.stakeholderFb.invalid || (this.stakeholderFb.pristine && !this.isNew && !this.file));
+    return (this.stakeholderFb && this.stakeholderFb.invalid) ||
+      (this.stakeholderFb && this.stakeholderFb.pristine && !this.isNew && !this.file) ||
+      (this.uploadError && this.uploadError.length > 0);
   }
   
   reset() {
+    this.uploadError = null;
     this.stakeholderFb = null;
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof Subscription) {
@@ -202,7 +209,7 @@ export class EditStakeholderComponent {
   
   public save(callback: Function) {
     if (this.file) {
-      this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
+      this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholderFb.value.alias), this.file).subscribe(res => {
         this.deletePhoto();
         this.removePhoto();
         this.stakeholderFb.get('logoUrl').setValue(res.filename);
@@ -244,12 +251,10 @@ export class EditStakeholderComponent {
       this.file = event.target.files[0];
       if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
         this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
-        this.stakeholderFb.get('isUpload').setValue(false);
         this.removePhoto();
       } else if (this.file.size > this.maxsize) {
         this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
-        this.stakeholderFb.get('isUpload').setValue(false);
+        this.removePhoto();
-        this.removePhoto()
       } else {
         this.uploadError = null;
         const reader = new FileReader();
@@ -257,38 +262,34 @@ export class EditStakeholderComponent {
         reader.onload = () => {
           this.photo = reader.result;
           this.stakeholderFb.get('isUpload').setValue(true);
+          this.stakeholderFb.get('isUpload').markAsDirty();
         };
       }
     }
   }
   
   initPhoto() {
-    if (this.stakeholderFb.get('logoUrl').value) {
+    if (this.stakeholderFb.value.isUpload) {
-      if (!this.stakeholderFb.value.isUpload) {
-        this.photo = this.stakeholderFb.get('logoUrl').value;
-      } else {
       this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value;
     }
-    } else {
-      this.photo = 'assets/common-assets/curator-default.png';
-    }
   }
   
   removePhoto() {
+    this.stakeholderFb.get('isUpload').setValue(false);
+    this.stakeholderFb.get('isUpload').markAsDirty();
+    if (this.file) {
       if (typeof document != 'undefined') {
         (<HTMLInputElement>document.getElementById("photo")).value = "";
       }
       this.initPhoto();
       this.file = null;
     }
+  }
   
   remove() {
-    this.stakeholderFb.get('isUpload').setValue(false);
-    if (this.file) {
     this.removePhoto();
-    }
+    this.stakeholderFb.setControl('logoUrl', this.fb.control(null));
     if (this.stakeholder.isUpload) {
-      this.stakeholderFb.get('logoUrl').setValue(null);
       this.deleteCurrentPhoto = true;
     }
   }

src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts

@@ -3,10 +3,17 @@ import {EditStakeholderComponent} from "./edit-stakeholder.component";
 import {CommonModule} from "@angular/common";
 import {InputModule} from "../../openaireLibrary/dashboard/sharedComponents/input/input.module";
 import {ReactiveFormsModule} from "@angular/forms";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
+import {edit, remove} from "../../openaireLibrary/utils/icons/icons";
 
 @NgModule({
-  imports: [CommonModule, InputModule, ReactiveFormsModule],
+  imports: [CommonModule, InputModule, ReactiveFormsModule, IconsModule],
   declarations: [EditStakeholderComponent],
   exports: [EditStakeholderComponent]
 })
-export class EditStakeholderModule {}
+export class EditStakeholderModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([remove, edit]);
+  }
+}

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -181,19 +181,19 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     this.editStakeholderComponent.init(this.stakeholder, this.stakeholders, this.defaultStakeholders, isDefault, this.index === -1);
     if (this.index !== -1) {
       this.callback = (stakeholder: Stakeholder) => {
-        if (stakeholder.defaultId === null) {
+        if (stakeholder.defaultId == null) {
-          this.defaultStakeholders.push(stakeholder);
+          this.defaultStakeholders[this.index] = stakeholder;
         } else {
-          this.stakeholders.push(stakeholder);
+          this.stakeholders[this.index] = stakeholder;
         }
       };
       this.editStakeholderModal.okButtonText = 'Save Changes';
     } else {
       this.callback = (stakeholder: Stakeholder) => {
-        if (stakeholder.defaultId == null) {
+        if (stakeholder.defaultId === null) {
-          this.defaultStakeholders[this.index] = stakeholder;
+          this.defaultStakeholders.push(stakeholder);
         } else {
-          this.stakeholders[this.index] = stakeholder;
+          this.stakeholders.push(stakeholder);
         }
       };
       this.editStakeholderModal.okButtonText = 'Create';

src/assets/dashboard-theme/dropdowns.css

@@ -5,7 +5,7 @@
   text-align: left;
 }
 
-.uk-dropdown ul {
+.uk-dropdown > ul {
   padding: 0 !important;
 }
 

src/assets/dashboard-theme/main.css

@@ -2,6 +2,7 @@
 @import "text.css";
 @import "structure.css";
 @import "input.css";
-@import "tabs-pills.css";
-@import "card.css";
 @import "dropdowns.css";
+/*@import "tabs-pills.css";
+@import "card.css";
+@import "button.css";*/