[Monitor Dashboard | Trunk]: Add upload image functionality for stakeholder's logo

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

src/app/app-routing.module.ts

@@ -31,6 +31,11 @@ const routes: Routes = [
     resolve: {envSpecific: EnvironmentSpecificResolver},
     data: {hasAdminMenu: true}
   },
+  /*{
+    path: 'admin/:stakeholder/users',
+    loadChildren: './users/users.module#UsersModule',
+    resolve: {envSpecific: EnvironmentSpecificResolver}
+  },*/
   {
     path: 'admin/:stakeholder',
     loadChildren: './stakeholder/stakeholder.module#StakeholderModule',

src/app/manageStakeholders/manageStakeholders.component.html

@@ -202,6 +202,7 @@
   </div>
 </div>
 <modal-alert #editStakeholderModal
+             id="edit_modal"
              (alertOutput)="save()"
              [okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
   <div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
@@ -221,24 +222,32 @@
            label="Index short name">
       </div>
     </div>
-    <div class="uk-grid uk-flex uk-flex-top" uk-grid>
+    <div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
       <div class="uk-width-1-5">
         <img [src]="photo">
       </div>
-      <div class="uk-width-expand">
+      <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 class="uk-text-center uk-margin-bottom">
+    <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
       <div>- OR -</div>
       <div class="uk-margin-small-top">
-        <div uk-form-custom class="uk-width-auto">
+        <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
-          <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" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="removePhoto()">Remove</button>
       </div>
-      <div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</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')"

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -12,7 +12,6 @@ import {Title} from "@angular/platform-browser";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 import {Session} from "../openaireLibrary/login/utils/helper.class";
 import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
-import {templateJitUrl} from "@angular/compiler";
 
 declare var UIkit;
 
@@ -59,8 +58,9 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
    * */
   public file: File;
   public photo: string | ArrayBuffer;
+  public uploadError: string;
+  public deleteCurrentPhoto: boolean = false;
   private maxsize: number = 200 * 1024;
-  private uploadError: string;
   
   @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
   @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
@@ -94,12 +94,17 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
           this.loading = false;
         });
       });
+    this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => {
+      this.removePhoto();
+    }));
   }
   
   ngOnDestroy(): void {
     this.subscriptions.forEach(value => {
       if (value instanceof Subscriber) {
         value.unsubscribe();
+      } else if (value instanceof Function) {
+        value();
       }
     });
   }
@@ -222,6 +227,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       type: this.fb.control(this.stakeholder.type, Validators.required),
       topics: this.fb.control(this.stakeholder.topics),
       managers: this.fb.control(this.stakeholder.managers),
+      isUpload: this.fb.control(this.stakeholder.isUpload),
       logoUrl: this.fb.control(this.stakeholder.logoUrl),
     });
     this.initPhoto();
@@ -231,6 +237,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     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) {
@@ -253,6 +261,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       }, 0);
       this.editStakeholderModal.okButtonText = 'Create';
     }
+    this.uploadError = null;
+    this.deleteCurrentPhoto = false;
     this.editStakeholderModal.cancelButtonText = 'Cancel';
     this.editStakeholderModal.okButtonLeft = false;
     this.editStakeholderModal.alertMessage = false;
@@ -263,12 +273,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     if (this.file) {
       this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
         this.deletePhoto();
-        this.stakeholderFb.get('logoUrl').setValue(this.properties.utilsService + "/download/" + res.filename);
+        this.removePhoto();
+        this.stakeholderFb.get('logoUrl').setValue(res.filename);
         this.saveStakeholder();
       }, error => {
         this.uploadError = "An error has been occurred during upload your image. Try again later";
         this.saveStakeholder();
       });
+    } else if (this.deleteCurrentPhoto) {
+      this.deletePhoto();
+      this.saveStakeholder();
     } else {
       this.saveStakeholder();
     }
@@ -280,9 +294,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
         let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
         this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
           (stakeholder ? stakeholder.topics : [])));
-      } /*else {
+      }
-        this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
+      this.removePhoto();
-      }*/
       this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
         this.stakeholderFb.value).subscribe(stakeholder => {
         if (stakeholder.defaultId === null) {
@@ -293,7 +306,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       });
     } else {
       this.stakeholderFb.get('type').enable();
-      this.removePhoto();
       this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
         if (stakeholder.defaultId == null) {
           this.defaultStakeholders[this.index] = stakeholder;
@@ -351,11 +363,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   }
   
   public deletePhoto() {
-    if(this.stakeholderFb.get('logoUrl').value) {
+    if (this.stakeholder.logoUrl) {
-      let filename = this.stakeholderFb.get('logoUrl').value.split(this.properties.utilsService + "/download/")[1];
+      this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
-      if(filename) {
-        this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe();
-      }
     }
   }
   
@@ -364,19 +373,19 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       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.file = null;
+        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.file = null;
+        this.stakeholderFb.get('isUpload').setValue(false);
+        this.removePhoto()
       } else {
         this.uploadError = null;
         const reader = new FileReader();
         reader.readAsDataURL(this.file);
         reader.onload = () => {
           this.photo = reader.result;
-          setTimeout(() => {
+          this.stakeholderFb.get('isUpload').setValue(true);
-            this.stakeholderFb.get('logoUrl').disable();
-          }, 0);
         };
       }
     }
@@ -384,7 +393,11 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   
   initPhoto() {
     if (this.stakeholderFb.get('logoUrl').value) {
-      this.photo = this.stakeholderFb.get('logoUrl').value;
+      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';
     }
@@ -396,6 +409,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     }
     this.initPhoto();
     this.file = null;
-    this.stakeholderFb.get('logoUrl').enable();
+  }
+  
+  remove() {
+    this.stakeholderFb.get('isUpload').setValue(false);
+    if (this.file) {
+      this.removePhoto();
+    }
+    if (this.stakeholder.isUpload) {
+      this.stakeholderFb.get('logoUrl').setValue(null);
+      this.deleteCurrentPhoto = true;
+    }
   }
 }

src/app/users/users-routing.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
+import {UsersComponent} from "./users.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: UsersComponent,
+        canActivate: [AdminDashboardGuard],
+        canDeactivate: [PreviousRouteRecorder]
+      }
+    ])
+  ]
+})
+export class UsersRoutingModule {
+}

src/app/users/users.component.html

@@ -0,0 +1,2 @@
+<div id="page_content">
+</div>

src/app/users/users.component.ts

@@ -0,0 +1,7 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: 'users',
+  templateUrl: 'users.component.html'
+})
+export class UsersComponent {}

src/app/users/users.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {UsersComponent} from "./users.component";
+import {CommonModule} from "@angular/common";
+import {UsersRoutingModule} from "./users-routing.module";
+import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
+
+@NgModule({
+  imports: [CommonModule, UsersRoutingModule],
+  declarations: [UsersComponent],
+  exports: [UsersComponent],
+  providers: [AdminDashboardGuard]
+})
+export class UsersModule {}

src/environments/environment.ts

@@ -49,6 +49,10 @@ export let properties: EnvProperties = {
   vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/",
   piwikBaseUrl: "https://analytics.openaire.eu/piwik.php?idsite=",
   piwikSiteId: "80",
+  /*registryUrl: 'http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/registry/',
+  loginUrl: "http://mpagasas.di.uoa.gr:8180/dnet-login/openid_connect_login",
+  userInfoUrl: "http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
+  logoutUrl: 'http://mpagasas.di.uoa.gr:8180/dnet-login/openid_logout',*/
   loginUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-login/openid_connect_login",
   userInfoUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
   logoutUrl: "https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",