import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { RoleAttribute, TibcoCloudNewElementComponent, TibcoCloudUploadDialogComponent } from '@tibco-tcstk/tc-core-lib';
import { TcDocumentService } from '../../services/tc-document.service';
import { LandingPageConfig, LandingPageItemConfig } from '../../models/tc-live-apps-landing-page-config';
/**
* Configuration page home
*
*@example <tcla-live-apps-setting-landing></tcla-live-apps-setting-landing>
*/
@Component({
selector: 'tcla-live-apps-settings-landing',
templateUrl: './live-apps-settings-landing.component.html',
styleUrls: ['./live-apps-settings-landing.component.css']
})
export class LiveAppsSettingsLandingComponent implements OnInit {
@Input() sandboxId: number;
@Input() uiAppId: string;
@Input() landingPages: LandingPageConfig[];
@Input() allRoles: RoleAttribute[];
public allowCreation: boolean = true;
@Input('allowCreation') set AllowCreation(allowCreation: boolean) {
if (allowCreation!=undefined){
this.allowCreation = allowCreation;
}
}
@Output() handleSave: EventEmitter<void> = new EventEmitter();
public selectedWelcomePage: LandingPageConfig;
public selectedRole: RoleAttribute[];
constructor(
private dialog: MatDialog,
private documentsService: TcDocumentService
) { }
/**
* @ignore
*/
ngOnInit() {
// If there is only one landing page selects it automatically
if (this.landingPages.length == 1) {
this.selectedWelcomePage = this.landingPages[0];
}
}
/**
* Save Button
*/
runSave(){
this.handleSave.emit();
}
/**
* Delete Configuration
*/
runDeleteConfiguration(){
const pages = this.landingPages;
pages.forEach(element => {
if (element == this.selectedWelcomePage){
const index = pages.indexOf(element, 0);
pages.splice(index, 1);
this.selectedWelcomePage = undefined;
}
});
}
/**
* New Configuration
*/
runNewConfiguration = ():void => {
const dialogRef = this.dialog.open(TibcoCloudNewElementComponent, {
width: '50%',
height: '30%',
maxWidth: '100vw',
maxHeight: '100vh',
panelClass: 'tcs-style-dialog',
data: { resourceType: 'Landing Page' }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const newElement = new LandingPageConfig().deserialize({
key: result.id,
description: result.name,
highlights: [new LandingPageItemConfig(), new LandingPageItemConfig(), new LandingPageItemConfig()]
});
this.landingPages.push(newElement);
this.selectedWelcomePage = newElement;
}
});
}
/**
* Helper to Compare Objects
*/
compareObjects = (o1: string, o2: string): boolean => {
return o1 === o2;
}
public openDialog(imageFormat: string, location: string, index?: number): void {
const dialogRef = this.dialog.open(TibcoCloudUploadDialogComponent, {
width: '500px',
data: {
title: 'Upload New ' + location + ' image',
allowedExtensions: imageFormat,
location: location,
index: index
}
});
dialogRef.componentInstance.fileevent.subscribe(($e) => {
this.uploadFile($e.file, location, index);
})
dialogRef.afterClosed().subscribe(result => {
});
}
public uploadFile(file: File, location: string, index?: number) {
if (file) {
switch (location) {
case 'background':
this.selectedWelcomePage.backgroundURL = file.name;
break;
case 'hightlight':
this.selectedWelcomePage.highlights[index].iconURL = file.name;
break;
default:
break;
}
this.documentsService.uploadDocument('orgFolders', this.uiAppId, this.sandboxId, file, location + '%2F' + file.name, '')
.subscribe(
val => {
console.log("*********** DONE")
},
error => { console.log('error', error.errorMsg) }); //); this.errorMessage = 'Error uploading state icon: ' +
}
}
}
<div fxLayout="column" fxFill>
<tc-tibco-cloud-widget-header style="height: 40px;" [icon]="'tcs-capabilities'"
[headerText]="'Landing Page Configuration'"></tc-tibco-cloud-widget-header>
<div fxFlex style="padding: 20px; overflow: hidden" fxLayout="column">
<div style="overflow: auto;">
<div fxLayout="column" fxFlex>
<p>You can manage the configuration for the landing pages here.</p>
<br>
<mat-form-field>
<mat-label>Welcome Page Configuration</mat-label>
<mat-select [(value)]="selectedWelcomePage">
<mat-option *ngFor="let landingPage of landingPages" [value]="landingPage">
{{landingPage.key}}-{{landingPage.description}}
</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="selectedWelcomePage">
<div fxLayoutGap="10px">
<mat-form-field fxFlex="50">
<input matInput placeholder="Title" [(ngModel)]="selectedWelcomePage.title">
</mat-form-field>
<mat-form-field fxFlex="50">
<input matInput placeholder="Subtitle" [(ngModel)]="selectedWelcomePage.subtitle">
</mat-form-field>
</div>
<div fxLayoutGap="10px">
<div fxFlex="50">
<mat-form-field fxFlex>
<input matInput placeholder="Background URL" [(ngModel)]="selectedWelcomePage.backgroundURL">
</mat-form-field>
<mat-icon (click)="openDialog('.jpeg,.png', 'background')"
class="tcs-icon tcs-icon-active tcs-document-edit-buttons tcs-document-upload-icon"
matTooltip="Upload Document"
matTooltipPosition="left" matTooltipShowDelay="1000" svgIcon="tcs-document-upload"></mat-icon>
</div>
<mat-form-field fxFlex="50">
<input matInput placeholder="Margin above highlight panel (px)" type="number" min="0" [(ngModel)]="selectedWelcomePage.topMargin">
</mat-form-field>
</div>
<div fxLayoutGap="10px">
<mat-form-field fxFlex="50">
<mat-label>Used in roles</mat-label>
<mat-select [(ngModel)]="selectedWelcomePage.roles" [compareWith]="compareObjects" multiple>
<mat-option *ngFor="let role of allRoles" [value]="role.id">{{role.display}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="50">
<input matInput placeholder="Home route" [(ngModel)]="selectedWelcomePage.homeRoute">
</mat-form-field>
</div>
<div>Hightlights</div>
<div *ngFor="let highlight of selectedWelcomePage.highlights; let i = index" fxLayoutGap="10px">
<div fxFlex="15">
<mat-form-field fxFlex="80">
<input matInput placeholder="Icon URL" [(ngModel)]="highlight.iconURL">
</mat-form-field>
<mat-icon fxFlex="20" (click)="openDialog('.svg', 'hightlight', i)"
class="tcs-icon tcs-icon-active tcs-document-edit-buttons tcs-document-upload-icon" matTooltip="Upload Document"
matTooltipPosition="left" matTooltipShowDelay="1000" svgIcon="tcs-document-upload"></mat-icon>
</div>
<mat-form-field fxFlex="30">
<input matInput placeholder="Title" [(ngModel)]="highlight.title">
</mat-form-field>
<mat-form-field fxFlex="55">
<textarea matInput placeholder="Subtitle" [(ngModel)]="highlight.content" cdkAutosizeMinRows="3" cdkAutosizeMaxRows="3"></textarea>
</mat-form-field>
</div>
</div>
</div>
</div>
<div fxFlex class="tcs-filler-panel"></div>
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="end end" style="min-height: 50px">
<button mat-raised-button color="secundary" *ngIf="allowCreation" (click)="runDeleteConfiguration()">Delete</button>
<button mat-raised-button color="secundary" *ngIf="allowCreation" (click)="runNewConfiguration()">New</button>
<button mat-raised-button color="primary" (click)="runSave()">Save</button>
</div>
</div>
</div>