File

C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-creator-dialog/live-apps-creator-dialog.component.ts

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

Index

Properties

Constructor

constructor(dialogRef: MatDialogRef, data: CaseCreatorSelectionContext)
Parameters :
Name Type Optional
dialogRef MatDialogRef<LiveAppsCreatorDialogComponent> No
data CaseCreatorSelectionContext No

Properties

Public application
Type : CaseType
Public autoClose
Type : boolean
closeDialog
Default value : () => {...}
Public createdCase
Type : ProcessId
Public customFormDefs
Type : CustomFormDefs
Public data
Type : CaseCreatorSelectionContext
Decorators :
@Inject(MAT_DIALOG_DATA)
Public dialogRef
Type : MatDialogRef<LiveAppsCreatorDialogComponent>
Public formConfig
Type : FormConfig
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>

live-apps-creator-dialog.component.css

.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
Component
Html element with directive

result-matching ""

    No results matching ""