import {Component, Input} from "@angular/core";
import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {StakeholderUtils} from "../../utils/indicator-utils";
import {Option} from "../../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Subscription} from "rxjs";
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../environments/environment";
import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
import {UtilitiesService} from "../../openaireLibrary/services/utilities.service";
@Component({
selector: 'edit-stakeholder',
template: `
No default profiles has been found
for this type.
0" [placeholder]="'Select a template'"
hint="Select a template for your profile"
dashboard-input class="uk-width-1-1" [formInput]="stakeholderFb.get('defaultId')"
label="Template" [options]="defaultStakeholdersOptions" type="select">
`
})
export class EditStakeholderComponent {
@Input()
public maxHeight = 'none';
public stakeholderFb: FormGroup;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public defaultStakeholdersOptions: Option[];
public defaultStakeholders: Stakeholder[];
public stakeholders: Stakeholder[];
public stakeholder: Stakeholder;
public isDefault: boolean;
public isNew: boolean;
public properties: EnvProperties = properties;
private subscriptions: any[] = [];
/**
* Photo upload
* */
public file: File;
public photo: string | ArrayBuffer;
public uploadError: string;
public deleteCurrentPhoto: boolean = false;
private maxsize: number = 200 * 1024;
constructor(private fb: FormBuilder,
private stakeholderService: StakeholderService,
private utilsService: UtilitiesService) {
}
public init(stakeholder: Stakeholder, stakeholders: Stakeholder[], defaultStakeholders: Stakeholder[], isDefault: boolean, isNew: boolean) {
this.uploadError = null;
this.deleteCurrentPhoto = false;
this.stakeholder = stakeholder;
this.stakeholders = stakeholders;
this.defaultStakeholders = defaultStakeholders;
this.isDefault = isDefault;
this.isNew = isNew;
this.stakeholderFb = this.fb.group({
_id: this.fb.control(this.stakeholder._id),
defaultId: this.fb.control(this.stakeholder.defaultId),
name: this.fb.control(this.stakeholder.name, Validators.required),
description: this.fb.control(this.stakeholder.description),
index_name: this.fb.control(this.stakeholder.index_name, Validators.required),
index_id: this.fb.control(this.stakeholder.index_id, Validators.required),
index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required),
creationDate: this.fb.control(this.stakeholder.creationDate),
alias: this.fb.control(this.stakeholder.alias,
[
Validators.required,
this.stakeholderUtils.aliasValidator(
(isDefault) ?
this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) :
this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
)]
),
isDefault: this.fb.control(isDefault),
visibility: this.fb.control(this.stakeholder.visibility, Validators.required),
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();
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) {
setTimeout(() => {
this.stakeholderFb.get('type').enable();
}, 0);
} else {
if (this.stakeholderFb.value.type) {
setTimeout(() => {
this.stakeholderFb.get('type').disable();
}, 0);
} else {
setTimeout(() => {
this.stakeholderFb.get('type').enable();
}, 0);
}
}
}
public get disabled(): boolean {
return this.stakeholderFb && (this.stakeholderFb.invalid || (this.stakeholderFb.pristine && !this.isNew && !this.file));
}
reset() {
this.stakeholderFb = null;
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
onTypeChange(value, defaultStakeholders: Stakeholder[]) {
this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required));
this.defaultStakeholdersOptions = [{
label: 'New blank profile',
value: '-1'
}];
defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
this.defaultStakeholdersOptions.push({
label: 'Use ' + stakeholder.name + ' profile',
value: stakeholder._id
})
});
}
public save(callback: Function) {
if (this.file) {
this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
this.deletePhoto();
this.removePhoto();
this.stakeholderFb.get('logoUrl').setValue(res.filename);
this.saveStakeholder(callback);
}, error => {
this.uploadError = "An error has been occurred during upload your image. Try again later";
this.saveStakeholder(callback);
});
} else if (this.deleteCurrentPhoto) {
this.deletePhoto();
this.saveStakeholder(callback);
} else {
this.saveStakeholder(callback);
}
}
public saveStakeholder(callback: Function) {
if (this.isNew) {
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 : [])));
}
this.removePhoto();
this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
this.stakeholderFb.value).subscribe(stakeholder => {
callback(stakeholder);
});
} else {
this.stakeholderFb.get('type').enable();
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
callback(stakeholder);
});
}
}
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.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()
} else {
this.uploadError = null;
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.photo = reader.result;
this.stakeholderFb.get('isUpload').setValue(true);
};
}
}
}
initPhoto() {
if (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';
}
}
removePhoto() {
if (typeof document != 'undefined') {
(document.getElementById("photo")).value = "";
}
this.initPhoto();
this.file = null;
}
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;
}
}
public deletePhoto() {
if (this.stakeholder.logoUrl) {
this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
}
}
}