import {Component} from "@angular/core"; import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms"; import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties"; import {properties} from "../../../../../environments/environment"; import {CommunityInfo} from "../../../../openaireLibrary/connect/community/communityInfo"; import {Session, User} from "../../../../openaireLibrary/login/utils/helper.class"; import {CommunityService} from "../../../../openaireLibrary/connect/community/community.service"; import {UtilitiesService} from "../../../../openaireLibrary/services/utilities.service"; import {UserManagementService} from "../../../../openaireLibrary/services/user-management.service"; import {StringUtils} from "../../../../openaireLibrary/utils/string-utils.class"; import {Subscription} from "rxjs"; import {Option} from "../../../../openaireLibrary/sharedComponents/input/input.component"; import {NotificationHandler} from "../../../../openaireLibrary/utils/notification-handler"; import {ClearCacheService} from "../../../../openaireLibrary/services/clear-cache.service"; @Component({ selector: 'edit-community', template: `
Description of the community
OR
{{uploadError}}
`, styleUrls: ['edit-community.component.less'] }) export class EditCommunityComponent { public communityFb: UntypedFormGroup; public statuses: Option[] = [ // {label: 'Visible', value: 'all'}, {label: 'Visible', value: 'PUBLIC'}, // {label: 'Visible to managers', value: 'manager'}, {label: 'Visible to managers', value: 'RESTRICTED'}, {label: 'Hidden', value: 'hidden'} ] public claimOptions: Option[] = [ {label: 'Logged in users', value: 'all'}, {label: 'Members only', value: 'membersOnly'}, {label: 'Managers only', value: 'managersOnly'} ] public membershipOptions: Option[] = [ {label: 'Anyone can join', value: 'open'}, {label: 'By invitation', value: 'byInvitation'} ] public community: CommunityInfo; 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; user: User; constructor(private fb: UntypedFormBuilder, private communityService: CommunityService, private utilsService: UtilitiesService, private userManagementService: UserManagementService, private _clearCacheService: ClearCacheService) { } ngOnDestroy() { this.reset(); } public init(community: CommunityInfo, isNew: boolean = false) { this.reset(); this.deleteCurrentPhoto = false; this.community = community; this.isNew = isNew; this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.user = user; this.communityFb = this.fb.group({ communityId: this.fb.control(this.community.communityId), name: this.fb.control(this.community.title, Validators.required), shortName: this.fb.control(this.community.shortTitle, Validators.required), description: this.fb.control(this.community.description), status: this.fb.control(this.community.status), claim: this.fb.control(this.community.claim), membership: this.fb.control(this.community.membership), managers: this.fb.control(this.community.managers), isUpload: this.fb.control(this.community.isUpload), logoUrl: this.fb.control(this.community.logoUrl) }); if (this.community.isUpload) { this.communityFb.get('logoUrl').clearValidators(); this.communityFb.get('logoUrl').updateValueAndValidity(); } else { this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]); this.communityFb.get('logoUrl').updateValueAndValidity(); } this.subscriptions.push(this.communityFb.get('isUpload').valueChanges.subscribe(value => { if (value == true) { this.communityFb.get('logoUrl').clearValidators(); this.communityFb.updateValueAndValidity(); } else { this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]); this.communityFb.updateValueAndValidity(); } })); this.initPhoto(); if (!isNew) { if (!this.isAdmin) { setTimeout(() => { this.communityFb.get('shortName').disable(); }, 0); } } } )); } public get isAdmin() { return Session.isPortalAdministrator(this.user); } public get disabled(): boolean { return (this.communityFb && this.communityFb.invalid) || (this.communityFb && this.communityFb.pristine && !this.isNew && !this.file) || (this.uploadError && this.uploadError.length > 0); } public get dirty(): boolean { return this.communityFb && this.communityFb.dirty; } reset() { this.uploadError = null; this.communityFb = null; this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { subscription.unsubscribe(); } }); } public save(callback: Function, errorCallback: Function = null) { if (this.file) { this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/" + encodeURIComponent(this.community.communityId), this.file).subscribe(res => { this.deletePhoto(); this.communityFb.get('logoUrl').setValue(res.filename); this.removePhoto(); this.saveCommunity(callback, errorCallback); }, error => { this.uploadError = "An error has been occurred during upload your image. Try again later"; this.saveCommunity(callback, errorCallback); })); } else if (this.deleteCurrentPhoto) { this.deletePhoto(); this.saveCommunity(callback, errorCallback); } else { this.saveCommunity(callback, errorCallback); } } public saveCommunity(callback: Function, errorCallback: Function = null) { if (this.isNew) { this.removePhoto(); this.subscriptions.push(this.communityService.updateCommunity( this.properties.communityAPI + this.community.communityId, this.communityFb.getRawValue()).subscribe(() => { this._clearCacheService.clearCache("Community saved"); this._clearCacheService.purgeBrowserCache("Community saved", this.community.communityId); this.communityService.getCommunity(this.community.communityId, true).subscribe(community => { NotificationHandler.rise(community.shortTitle + ' has been successfully created'); callback(community); }); }, error => { NotificationHandler.rise('An error has occurred. Please try again later', 'danger'); if (errorCallback) { errorCallback(error) } })); } else { this.subscriptions.push(this.communityService.updateCommunity(this.properties.communityAPI + this.community.communityId, this.communityFb.getRawValue()).subscribe(() => { this._clearCacheService.clearCache("Community updated"); this._clearCacheService.purgeBrowserCache("Community updated", this.community.communityId); this.communityService.getCommunity(this.community.communityId, true).subscribe(community => { NotificationHandler.rise(community.shortTitle + ' has been successfully saved'); callback(community); }); }, error => { NotificationHandler.rise('An error has occurred. Please try again later', 'danger'); })); } } 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.communityFb.get('isUpload').setValue(false); this.communityFb.get('isUpload').markAsDirty(); this.removePhoto(); } else if (this.file.size > this.maxsize) { this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.'; this.communityFb.get('isUpload').setValue(false); this.communityFb.get('isUpload').markAsDirty(); this.removePhoto(); } else { this.uploadError = null; const reader = new FileReader(); reader.readAsDataURL(this.file); reader.onload = () => { this.photo = reader.result; this.communityFb.get('isUpload').setValue(true); this.communityFb.get('isUpload').markAsDirty(); }; } } } initPhoto() { if (this.communityFb.value.isUpload) { this.photo = this.properties.utilsService + "/download/" + this.communityFb.get('logoUrl').value; } } removePhoto() { if (this.file) { if (typeof document != 'undefined') { (document.getElementById("photo")).value = ""; } this.initPhoto(); this.file = null; } } remove() { this.communityFb.get('isUpload').setValue(false); this.communityFb.get('isUpload').markAsDirty(); this.removePhoto(); this.communityFb.get('logoUrl').setValue(null); if (this.community.isUpload) { this.deleteCurrentPhoto = true; } } public deletePhoto() { if (this.community.logoUrl && this.community.isUpload) { this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/community/' + encodeURIComponent(this.community.communityId) + '/' + this.community.logoUrl).subscribe()); } } }