MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: Add upload logo functionality 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59487 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-09-28 21:30:31 +00:00
parent 25053f5d84
commit 1da99c1e03
2 changed files with 109 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -202,8 +202,8 @@
</div>
</div>
<modal-alert #editStakeholderModal
(alertOutput)="saveStakeholder()"
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1))">
(alertOutput)="save()"
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
@ -221,7 +221,25 @@
label="Index short name">
</div>
</div>
<div dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<div class="uk-width-1-5">
<img [src]="photo">
</div>
<div class="uk-width-expand">
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
</div>
</div>
<div class="uk-text-center uk-margin-bottom">
<div>- OR -</div>
<div class="uk-margin-small-top">
<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" 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')"
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">

94
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -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') {
(<HTMLInputElement>document.getElementById("photo")).value = "";
}
this.initPhoto();
this.file = null;
this.stakeholderFb.get('logoUrl').enable();
}
}