File
Description
Dialog used on home screen to allow case creation (wraps other components)
Example
<tcla-live-apps-creator-dialog></tcla-live-apps-creator-dialog>
Metadata
| selector |
tcla-live-apps-creator-dialog |
| styleUrls |
live-apps-creator-dialog.component.css |
| templateUrl |
live-apps-creator-dialog.component.html |
|
closeDialog
|
Default value : () => {...}
|
|
|
|
Public
customFormDefs
|
Type : CustomFormDefs
|
|
|
|
Public
formsFramework
|
Type : string
|
|
|
|
Public
handleCaseCreated
|
Default value : () => {...}
|
|
|
|
Public
headerText
|
Type : string
|
|
|
|
Public
initialData
|
Type : any
|
|
|
|
Public
legacyCreators
|
Type : boolean
|
|
|
|
openCase
|
Default value : () => {...}
|
|
|
|
Public
sandboxId
|
Type : number
|
|
|
import {Component, Inject, Input, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {CaseCreatorSelectionContext} from '../../models/tc-case-creator';
import {CaseRoute, CaseType, ProcessId} from '../../models/liveappsdata';
import {CustomFormDefs} from '@tibco-tcstk/tc-forms-lib';
import {FormConfig} from '../../models/tc-liveapps-config';
/**
* Dialog used on home screen to allow case creation (wraps other components)
*
*@example <tcla-live-apps-creator-dialog></tcla-live-apps-creator-dialog>
*/
@Component({
selector: 'tcla-live-apps-creator-dialog',
templateUrl: 'live-apps-creator-dialog.component.html',
styleUrls: ['live-apps-creator-dialog.component.css']
})
export class LiveAppsCreatorDialogComponent {
public application: CaseType;
public sandboxId: number;
public initialData: any;
public createdCase: ProcessId;
public customFormDefs: CustomFormDefs;
public legacyCreators: boolean;
public formsFramework: string;
public formConfig: FormConfig;
public autoClose: boolean;
public headerText: string;
constructor(
public dialogRef: MatDialogRef<LiveAppsCreatorDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: CaseCreatorSelectionContext) {
this.application = data.application;
this.sandboxId = data.sandboxId;
this.initialData = data.initialData;
this.customFormDefs = data.customFormDefs;
this.legacyCreators = data.legacyCreators;
this.formsFramework = data.formsFramework;
this.formConfig = data.formConfig;
this.autoClose = data.autoClose;
if (data.headerText) {
this.headerText = data.headerText;
} else {
this.headerText = 'Create New ' + this.application.applicationName;
}
}
public handleCaseCreated = (createdCase: ProcessId) => {
this.createdCase = createdCase;
if (!this.createdCase.caseIdentifier && !this.createdCase.caseReference) {
// legacy process form (no case reference available)
} else if (this.createdCase.caseReference === '-1') {
// legacy process cancelled
this.dialogRef.close();
}
if (this.autoClose) {
this.dialogRef.close(true);
}
}
openCase = () => {
const caseRoute = new CaseRoute().deserialize(
{ caseRef: this.createdCase.caseReference, appId: this.application.applicationId, typeId: this.application.id });
this.dialogRef.close(caseRoute);
}
closeDialog = () => {
this.dialogRef.close();
}
}
<div class="tcs-dialog-outer-div">
<mat-toolbar class="tcs-case-creation-dialog-toolbar">
<div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
<span class="tcs-case-creation-dialog-toolbar-text">{{headerText}}</span>
</div>
<mat-icon fxLayout="column" fxLayoutAlign="start end" class="tcs-case-creation-dialog-icons" [svgIcon]="'tcs-close-icon'" (click)="closeDialog()"></mat-icon>
</mat-toolbar>
<div mat-dialog-content class="tcs-case-creation-dialog" fxLayout="column">
<div *ngIf="!createdCase" class="tcs-case-creation-dialog-details">
<tcla-live-apps-creators [sandboxId]="sandboxId" [applicationId]="application.applicationId"
[typeId]="application.id" [dataOverride]="initialData"
[customFormDefs]="customFormDefs"
[formsFramework]="formsFramework"
[legacyCreators]="legacyCreators"
[formConfig]="formConfig"
(caseCreated)="handleCaseCreated($event)"></tcla-live-apps-creators>
</div>
<div *ngIf="createdCase" class="tcs-case-created-confirmation-details" fxLayout="row" fxLayoutAlign="center start">
<span class="tcs-case-created-confirmation-text">New {{application.applicationName}}
case successfully submitted</span>
</div>
</div>
<!--div class="tcs-spacer"></div-->
<mat-dialog-actions *ngIf="createdCase" class="tcs-dialog-actions" style="height: 100%" fxLayout="row" fxLayoutAlign="end end">
<button *ngIf="createdCase.caseReference && !autoClose" mat-button mat-flat-button color="primary" (click)="openCase()">Open Case</button>
<button mat-button (click)="closeDialog()">Close</button>
</mat-dialog-actions>
</div>
.tcs-dialog-outer-div {
height: 100%;
display: flex;
flex-direction: column;
}
.tcs-spacer {
flex-grow: 1;
}
.tcs-case-creation-dialog-toolbar {
padding-left: 20px;
padding-right: 20px;
background-color: #ffffff;
border-bottom: 1px solid #dcdcdc;
min-height: 63px;
}
.tcs-case-creation-dialog.mat-dialog-content {
height: 100%;
}
.tcs-case-creation-dialog-toolbar-text {
font-family: Source Sans Pro;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: 0.3px;
}
.tcs-case-creation-dialog-details {
height: 100%;
padding: 20px;
}
.tcs-case-created-confirmation-text {
font-family: Source Sans Pro;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #b6b6b6;
}
.tcs-case-creation-dialog-actions {
padding: 20px;
}
:host ::ng-deep .tcs-dialog-actions.mat-dialog-actions {
margin-bottom: 0px;
padding: 20px;
}
.tcs-case-creation-dialog.mat-dialog-content {
padding: 0px;
margin: 0px;
}
.tcs-case-created-confirmation-details {
padding: 20px;
}
.tcs-case-creation-dialog-icons {
height: 16px;
width: 16px;
}
.tcs-case-creation-dialog-icons:hover {
cursor: pointer;
}
:host ::ng-deep .tcs-case-creation-dialog-icons:hover .svg-content {
fill: #0081cb;
}
Legend
Html element with directive