297 lines
12 KiB
TypeScript
297 lines
12 KiB
TypeScript
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
|
import {ActivatedRoute, Router} from '@angular/router';
|
|
|
|
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
|
|
|
import {Session} from '../../openaireLibrary/login/utils/helper.class';
|
|
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
|
|
import {DomSanitizer, Title} from '@angular/platform-browser';
|
|
import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
|
|
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
|
|
import {LayoutService} from '../../openaireLibrary/services/layout.service';
|
|
import {properties} from '../../../environments/environment';
|
|
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
|
import {Subscription} from 'rxjs';
|
|
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
|
|
import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
|
|
import {MenuItem} from "../../openaireLibrary/sharedComponents/menu";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'customization',
|
|
templateUrl: './customization.component.html',
|
|
styles:[`
|
|
.functionalities-container{
|
|
padding-left:15px;
|
|
}
|
|
.functionalities-border{
|
|
border-left: 1px solid #EAEAEA;
|
|
padding: 5px 10px;
|
|
margin: 25px 0px;
|
|
}
|
|
|
|
.refresh-indicator {
|
|
background-color: rgba(0, 0, 0, 0.50);
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
color: white;
|
|
}
|
|
iframe, .refresh-indicator{
|
|
height:100%
|
|
}
|
|
#ipadcontainer{
|
|
background-image: url('/assets/iPad-Pro.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 900px;
|
|
|
|
}
|
|
#iframecontainer{
|
|
height: 64%;
|
|
width: 73%;
|
|
}
|
|
.uk-nav-sub{
|
|
padding-left: 25px;
|
|
}
|
|
`]
|
|
})
|
|
|
|
export class CustomizationComponent implements OnInit {
|
|
homeMenu = {name:"Customization", id : "home", icon: "" }
|
|
menuSelected = this.homeMenu;
|
|
buttonsSelected = 'light';
|
|
color = 'white';
|
|
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
|
|
publishedLayout: Layout = null;
|
|
publishedCustomizationOptions: CustomizationOptions = null;
|
|
draftCustomizationOptions: CustomizationOptions = null;
|
|
appliedCustomizationOptions: CustomizationOptions = null;
|
|
previewUrl = null;
|
|
previewCustomization = null;
|
|
public showLoading = true;
|
|
public communityId = null;
|
|
public properties: EnvProperties = null;
|
|
private subscriptions: any[] = [];
|
|
public enabled = true;
|
|
sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
|
|
{name:"Backgrounds", id : "backgrounds", icon: "wallpaper" },
|
|
{name:"Buttons", id : "buttons", icon: "smart_button" }]
|
|
|
|
constructor(private element: ElementRef,
|
|
private route: ActivatedRoute,
|
|
private _router: Router,
|
|
private title: Title,
|
|
private sanitizer: DomSanitizer,
|
|
private layoutService: LayoutService,
|
|
private utilsService: UtilitiesService,
|
|
private userManagementService: UserManagementService) {
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.deleteDraftImages();
|
|
|
|
}
|
|
cleanUp(){
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscription) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
ngOnInit() {
|
|
|
|
this.properties = properties;
|
|
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
|
if (!user) {
|
|
this._router.navigate(['/user-info'], {
|
|
queryParams: {
|
|
"errorCode": LoginErrorCodes.NOT_VALID,
|
|
"redirectUrl": this._router.url
|
|
}
|
|
});
|
|
}
|
|
}));
|
|
|
|
this.subscriptions.push(this.route.params.subscribe((params) => {
|
|
this.communityId = params['community'];
|
|
if(this.communityId == "covid-19"){
|
|
this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
|
|
}
|
|
this.title.setTitle('Administration Dashboard | Customization');
|
|
this.showLoading = true;
|
|
this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
|
|
this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
|
|
this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
|
|
this.initializeCustomizationOptions(true);
|
|
}, error => {
|
|
this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
|
|
this.initializeCustomizationOptions(true);
|
|
UIkit.notification("An error occured fetching customizations options", {
|
|
status: 'danger',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
}));
|
|
}));
|
|
|
|
|
|
|
|
}
|
|
formHasChanges(obj1:CustomizationOptions, obj2:CustomizationOptions){
|
|
return obj1.backgrounds.form.imageUrl != obj2.backgrounds.form.imageUrl ||
|
|
obj1.backgrounds.form.imageFile != obj2.backgrounds.form.imageFile ||
|
|
obj1.backgrounds.form.position != obj2.backgrounds.form.position;
|
|
}
|
|
hasChanges(object1,object2):boolean{
|
|
return JSON.stringify(object1) != JSON.stringify(object2);
|
|
}
|
|
saveLayout() {
|
|
if (!Session.isLoggedIn()) {
|
|
this._router.navigate(['/user-info'], {
|
|
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
});
|
|
}
|
|
this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
|
|
this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
|
|
this.deleteOldImages();
|
|
this.publishedLayout = layout;
|
|
this.publishedCustomizationOptions = layout.layoutOptions;
|
|
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
|
|
UIkit.notification("Customizations was succesfully saved!", {
|
|
status: 'success',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
}, error => {
|
|
|
|
UIkit.notification("An error occured on save", {
|
|
status: 'danger',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
}));
|
|
}
|
|
private deleteOldImages( ) {
|
|
if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
|
|
this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile)
|
|
}
|
|
}
|
|
private deleteDraftImages( ) {
|
|
if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
|
|
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
|
|
re => {
|
|
this.cleanUp()
|
|
}
|
|
));
|
|
}else{
|
|
this.cleanUp()
|
|
}
|
|
}
|
|
private deleteImage( filename:string) {
|
|
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe());
|
|
}
|
|
initializeCustomizationOptions(updatePreviewUrl) {
|
|
this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
|
|
this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
|
|
if(updatePreviewUrl){
|
|
this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
|
|
}
|
|
|
|
}
|
|
|
|
applyLayout() {
|
|
this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);
|
|
if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
|
|
this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
|
|
}
|
|
}
|
|
|
|
resetLayout() {
|
|
this.deleteDraftImages();
|
|
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
|
|
}
|
|
resetBackgroundsTo(backgrounds) {
|
|
this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
|
|
this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
|
|
this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
|
|
|
|
}
|
|
resetImageTo(backgrounds) {
|
|
this.deleteDraftImages();
|
|
this.draftCustomizationOptions.backgrounds.form.imageUrl = backgrounds.form.imageUrl;
|
|
this.draftCustomizationOptions.backgrounds.form.imageFile = backgrounds.form.imageFile;
|
|
this.draftCustomizationOptions.backgrounds.form.position = backgrounds.form.position;
|
|
}
|
|
|
|
resetBackgroundsAndButtonsTo(c:CustomizationOptions){
|
|
this.resetBackgroundsTo(c.backgrounds);
|
|
this.resetButtonsTo(c.buttons);
|
|
}
|
|
resetBackgroundsAndButtonsToPublished(){
|
|
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
|
|
}
|
|
resetBackgroundsAndButtonsToDefault(){
|
|
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity();
|
|
}
|
|
|
|
resetButtonsTo(buttonsToRevert) {
|
|
this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
|
|
}
|
|
|
|
resetIdentityTo( original:CustomizationOptions) {
|
|
this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
|
|
this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
|
|
}
|
|
resetIdentityToPublished() {
|
|
this.resetIdentityTo( this.publishedCustomizationOptions);
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity()
|
|
}
|
|
resetIdentityToDefault() {
|
|
this.resetIdentityTo( this.defaultCustomizationOptions);
|
|
this.draftCustomizationOptions.identityIsCustom = false;
|
|
this.updateBackgroundsAndButtonsBasedOnIdentity()
|
|
|
|
}
|
|
updateBackgroundsAndButtonsBasedOnIdentity(){
|
|
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
|
|
if(!this.draftCustomizationOptions.backgroundsIsCustom) {
|
|
this.resetBackgroundsTo(tmp.backgrounds);
|
|
}
|
|
if(!this.draftCustomizationOptions.buttonsIsCustom) {
|
|
this.resetButtonsTo(tmp.buttons);
|
|
}
|
|
}
|
|
getCommunityUrlSatinized(layout: string) {
|
|
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
|
|
}
|
|
getCommunityUrl() {
|
|
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
|
|
}
|
|
|
|
getCommunityUrlNewLayout(layout: string) {
|
|
this.previewCustomization = layout;
|
|
return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
|
|
}
|
|
|
|
copyObject(obj) {
|
|
return JSON.parse(JSON.stringify(obj));
|
|
}
|
|
|
|
changeMenu( menuSelected){
|
|
this.menuSelected = menuSelected;
|
|
}
|
|
close(){
|
|
if(this.menuSelected.id !='home'){
|
|
this.menuSelected = this.homeMenu;
|
|
return;
|
|
}
|
|
if(!this.hasChanges(this.publishedCustomizationOptions, this.draftCustomizationOptions)) {
|
|
this._router.navigate(["../info/profile"], {relativeTo: this.route});
|
|
}else{
|
|
alert("TODO " + "Changes that you made may not be saved."+" Με buttons από κάτω cancel (αριστερά) και leave (δεξιά)");
|
|
}
|
|
}
|
|
}
|