[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:
parent
25053f5d84
commit
1da99c1e03
|
@ -202,8 +202,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<modal-alert #editStakeholderModal
|
<modal-alert #editStakeholderModal
|
||||||
(alertOutput)="saveStakeholder()"
|
(alertOutput)="save()"
|
||||||
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1))">
|
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
|
||||||
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
|
<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 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>
|
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
|
||||||
|
@ -221,7 +221,25 @@
|
||||||
label="Index short name">
|
label="Index short name">
|
||||||
</div>
|
</div>
|
||||||
</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 class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
|
||||||
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
|
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
|
||||||
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
|
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
|
||||||
|
|
|
@ -7,11 +7,12 @@ import {Subscriber, zip} from "rxjs";
|
||||||
import {StakeholderUtils} from "../utils/indicator-utils";
|
import {StakeholderUtils} from "../utils/indicator-utils";
|
||||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||||
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
||||||
import {StakeholderCreator} from "../utils/entities/stakeholderCreator";
|
|
||||||
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
|
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
|
||||||
import {Title} from "@angular/platform-browser";
|
import {Title} from "@angular/platform-browser";
|
||||||
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
|
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
|
||||||
import {Session} from "../openaireLibrary/login/utils/helper.class";
|
import {Session} from "../openaireLibrary/login/utils/helper.class";
|
||||||
|
import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
|
||||||
|
import {templateJitUrl} from "@angular/compiler";
|
||||||
|
|
||||||
declare var UIkit;
|
declare var UIkit;
|
||||||
|
|
||||||
|
@ -53,10 +54,20 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
public grid: boolean = true;
|
public grid: boolean = true;
|
||||||
private subscriptions: any[] = [];
|
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('editStakeholderModal') editStakeholderModal: AlertModal;
|
||||||
@ViewChild('deleteStakeholderModal') deleteStakeholderModal: 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 propertiesService: EnvironmentSpecificService,
|
||||||
private title: Title,
|
private title: Title,
|
||||||
private fb: FormBuilder) {
|
private fb: FormBuilder) {
|
||||||
|
@ -140,7 +151,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
}];
|
}];
|
||||||
this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
|
this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
|
||||||
this.defaultStakeholdersOptions.push({
|
this.defaultStakeholdersOptions.push({
|
||||||
label: 'Use ' + stakeholder.name + ' profile',
|
label: 'Use ' + stakeholder.name + ' profile',
|
||||||
value: stakeholder._id
|
value: stakeholder._id
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
@ -213,10 +224,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
managers: this.fb.control(this.stakeholder.managers),
|
managers: this.fb.control(this.stakeholder.managers),
|
||||||
logoUrl: this.fb.control(this.stakeholder.logoUrl),
|
logoUrl: this.fb.control(this.stakeholder.logoUrl),
|
||||||
});
|
});
|
||||||
|
this.initPhoto();
|
||||||
this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
|
this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
|
||||||
this.onTypeChange(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));
|
this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required));
|
||||||
}
|
}
|
||||||
if (this.index !== -1) {
|
if (this.index !== -1) {
|
||||||
|
@ -242,12 +259,27 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
this.editStakeholderModal.open();
|
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() {
|
public saveStakeholder() {
|
||||||
if (this.index === -1) {
|
if (this.index === -1) {
|
||||||
if (!this.stakeholderFb.value.isDefault) {
|
if (!this.stakeholderFb.value.isDefault) {
|
||||||
let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
|
let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
|
||||||
this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
|
this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
|
||||||
(stakeholder?stakeholder.topics:[])));
|
(stakeholder ? stakeholder.topics : [])));
|
||||||
} /*else {
|
} /*else {
|
||||||
this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
|
this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
|
||||||
}*/
|
}*/
|
||||||
|
@ -261,6 +293,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.stakeholderFb.get('type').enable();
|
this.stakeholderFb.get('type').enable();
|
||||||
|
this.removePhoto();
|
||||||
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
|
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
|
||||||
if (stakeholder.defaultId == null) {
|
if (stakeholder.defaultId == null) {
|
||||||
this.defaultStakeholders[this.index] = stakeholder;
|
this.defaultStakeholders[this.index] = stakeholder;
|
||||||
|
@ -312,8 +345,57 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
stakeholder.isPublic = isPublic;
|
stakeholder.isPublic = isPublic;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public isAdministrator(): boolean {
|
public isAdministrator(): boolean {
|
||||||
return Session.isPortalAdministrator(this.user);
|
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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue