connect-admin/src/app/pages/connect-admin-customization/connect-admin-customization...

117 lines
4.2 KiB
TypeScript

import {Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {CustomizationService} from "../../openaireLibrary/services/customization.service";
import {properties} from "../../../environments/environment";
import {Layout} from "../../openaireLibrary/connect/community/CustomizationOptions";
declare var UIkit;
@Component({
selector: 'connect-admin-customization',
template: `
<div page-content>
<div header>
<div class="uk-flex uk-flex-middle uk-margin-top info">
<img src="assets/common-assets/placeholder.png" class="uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Options</div>
<h1 class="uk-h4 uk-margin-remove">Super Admin</h1>
</div>
</div>
<admin-tabs tab="customization" portal="connect"></admin-tabs>
</div>
<div inner>
<div class="uk-alert uk-alert-warning uk-margin-top ">
<div class="uk-text-large">Use only after connect deployment. And only if there are css updates!</div>
Press the following button to update the timestamp in the saved layouts and recreate the css files.
</div>
<button (click)="updateCss()" class="uk-button uk-button-danger" [class.uk-disabled]="savingChanges"> Update CSS</button>
<ng-container *ngIf="properties.domain != 'production'">
<hr>
<div class="uk-alert uk-alert-danger uk-margin-top ">
Delete after next deployment
</div>
<div class="uk-alert uk-alert-warning uk-margin-top ">
<div class="uk-text-large">Use to clean up multiple layouts of a community id.</div>
</div>
<div input [(value)]="community" [placeholder]="'e.g. galaxy'"></div>
<button (click)="deleteLayout()" class="uk-button uk-button-danger" [class.uk-disabled]="!community"> Delete layout</button>
</ng-container>
</div>
</div>
`
})
export class ConnectAdminCustomizationComponent implements OnInit {
private subscriptions: any[] = [];
savingChanges = false;
community;
properties = properties;
constructor( private customizationService: CustomizationService) {
}
ngOnInit() {
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
updateCss(){
let date = new Date();
this.savingChanges = true;
let connectCssIsSaved = false;
let defaultCssIsSaved = false;
this.subscriptions.push(this.customizationService.getLayouts(properties, ).subscribe(layouts => {
for(let layout of layouts){
layout.date = date;
if(layout.portalPid == 'connect'){
connectCssIsSaved = true;
this.callSaveAndCreate(layout, "connect")
}else if(layout.portalPid == 'default'){
defaultCssIsSaved = true;
this.callSaveAndCreate(layout, "connect")
}else {
this.callSaveAndCreate(layout, "community");
}
}
if(!connectCssIsSaved){
let layout = new Layout("connect", null);
layout.date = date;
this.callSaveAndCreate(layout, "connect")
}
if(!defaultCssIsSaved){
let layout = new Layout("default", null);
layout.date = date;
this.callSaveAndCreate(layout, "connect")
}
}));
}
callSaveAndCreate(layout, portalType){
this.subscriptions.push(this.customizationService.saveLayout(properties, layout.portalPid, layout, portalType).subscribe(data =>{
this.subscriptions.push(this.customizationService.createCSS(layout.portalPid,properties.connectPortalUrl, layout.date.valueOf(), layout.layoutOptions).subscribe(data =>{
UIkit.notification(layout.portalPid +"-"+ layout.date.valueOf() + ".css " + " was created successfully! ", {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}));
}));
}
deleteLayout(){
if(this.community && this.community.length > 0) {
this.subscriptions.push(this.customizationService.deleteLayout(properties, this.community, "community").subscribe(data => {
}));
}
}
}