diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html index bf29109..d094bd5 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.html +++ b/src/app/manageStakeholders/manageStakeholders.component.html @@ -202,8 +202,8 @@ + (alertOutput)="save()" + [okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
@@ -221,7 +221,25 @@ label="Index short name">
-
+
+
+ +
+
+
+
+
+
+
- OR -
+
+
+ + +
+ +
+
{{uploadError}}
+
diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts index 94ceb6c..aafe106 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.ts +++ b/src/app/manageStakeholders/manageStakeholders.component.ts @@ -7,11 +7,12 @@ import {Subscriber, zip} from "rxjs"; import {StakeholderUtils} from "../utils/indicator-utils"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {AlertModal} from "../openaireLibrary/utils/modal/alert"; -import {StakeholderCreator} from "../utils/entities/stakeholderCreator"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; 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; @@ -53,10 +54,20 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { public grid: boolean = true; private subscriptions: any[] = []; + /** + * Photo upload + * */ + public file: File; + public photo: string | ArrayBuffer; + private maxsize: number = 200 * 1024; + private uploadError: string; + @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal; @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal; - constructor(private stakeholderService: StakeholderService,private userManagementService: UserManagementService, + constructor(private stakeholderService: StakeholderService, + private utilsService: UtilitiesService, + private userManagementService: UserManagementService, private propertiesService: EnvironmentSpecificService, private title: Title, private fb: FormBuilder) { @@ -140,7 +151,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { }]; this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => { this.defaultStakeholdersOptions.push({ - label: 'Use ' + stakeholder.name + ' profile', + label: 'Use ' + stakeholder.name + ' profile', value: stakeholder._id }) }); @@ -213,10 +224,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { managers: this.fb.control(this.stakeholder.managers), logoUrl: this.fb.control(this.stakeholder.logoUrl), }); + this.initPhoto(); this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { this.onTypeChange(value); })); - if(!isDefault) { + this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => { + if(value) { + this.photo = value; + } + })); + if (!isDefault) { this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required)); } if (this.index !== -1) { @@ -242,12 +259,27 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { this.editStakeholderModal.open(); } + public save() { + 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.saveStakeholder(); + }, error => { + this.uploadError = "An error has been occurred during upload your image. Try again later"; + this.saveStakeholder(); + }); + } else { + this.saveStakeholder(); + } + } + public saveStakeholder() { if (this.index === -1) { if (!this.stakeholderFb.value.isDefault) { let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId); this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value, - (stakeholder?stakeholder.topics:[]))); + (stakeholder ? stakeholder.topics : []))); } /*else { this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value)); }*/ @@ -261,6 +293,7 @@ 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; @@ -312,8 +345,57 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { stakeholder.isPublic = isPublic; }); } - + public isAdministrator(): boolean { return Session.isPortalAdministrator(this.user); } + + public deletePhoto() { + if(this.stakeholderFb.get('logoUrl').value) { + let filename = this.stakeholderFb.get('logoUrl').value.split(this.properties.utilsService + "/download/")[1]; + if(filename) { + this.utilsService.deletePhoto(this.properties.utilsService + '/delete/' + filename).subscribe(); + } + } + } + + fileChangeEvent(event) { + if (event.target.files && event.target.files[0]) { + 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; + } else if (this.file.size > this.maxsize) { + this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.'; + this.file = null; + } else { + this.uploadError = null; + const reader = new FileReader(); + reader.readAsDataURL(this.file); + reader.onload = () => { + this.photo = reader.result; + setTimeout(() => { + this.stakeholderFb.get('logoUrl').disable(); + }, 0); + }; + } + } + } + + initPhoto() { + if (this.stakeholderFb.get('logoUrl').value) { + this.photo = this.stakeholderFb.get('logoUrl').value; + } else { + this.photo = 'assets/common-assets/curator-default.png'; + } + } + + removePhoto() { + if (typeof document != 'undefined') { + (document.getElementById("photo")).value = ""; + } + this.initPhoto(); + this.file = null; + this.stakeholderFb.get('logoUrl').enable(); + } }