File

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

Description

Handles rendering of case creator form.

Extends

LiveAppsComponent

Implements

OnInit OnChanges

Example

<tcla-live-apps-case-creator></tcla-live-apps-case-creator>

Metadata

selector tcla-live-apps-case-creator
styleUrls ./live-apps-case-creator.component.css
templateUrl ./live-apps-case-creator.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners
Accessors

Constructor

constructor(liveapps: LiveAppsService, formConfigService: TcFormConfigService)
Parameters :
Name Type Optional
liveapps LiveAppsService No
formConfigService TcFormConfigService No

Inputs

applicationId
Type : string

LA application ID

customFormDefs
Type : CustomFormDefs

Custom Form configuration file

dataOverride
Type : any

Data object that will be displayed on the form. Allows overriding over form data (eg. when selecting data in spotfire)

formConfig
formsFramework
Type : string
legacyCreators
Type : boolean
process
Type : LaProcessSelection

The process definition of the action or creator to execute

sandboxId
Type : number

sandboxId - this comes from claims resolver

typeId
Type : string

The LA Application Type Id (generally 1)

Outputs

caseChanged
Type : EventEmitter<ProcessId>

~event caseChanged : Case action started (process started) ~payload ProcessId : ProcessId object passed when a case has been updated or created by a process (action/creator)

HostListeners

window:resize
Arguments : '$event'
window:resize(event)
Inherited from LiveAppsComponent

Methods

initialize
initialize()
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnInit
ngOnInit()
Returns : void
ngAfterViewInit
ngAfterViewInit()
Inherited from LiveAppsComponent
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from LiveAppsComponent
Returns : void
ngOnInit
ngOnInit()
Inherited from LiveAppsComponent
Returns : void
setupWidthObserver
setupWidthObserver()
Inherited from LiveAppsComponent
Returns : void

Properties

data
Type : any
Public formConfig
Type : FormConfig
Default value : new FormConfig()

Custom Form Layout Configuration

formRef
Type : any
Public formsFramework
Type : string
Default value : 'material-design'

Allow override of forms framework Options: bootstrap-4 or material-design

Public handleFormOpen
Default value : () => {...}
handleLegacyProcessCancelled
Default value : () => {...}
handleLegacyProcessComplete
Default value : () => {...}
handleSubmit
Default value : () => {...}
isCustomForm
Default value : false
layout
Type : any[]
Public legacyCreators
Type : boolean
Default value : false

Enable legacy creators

options
Type : any
schema
Type : any
Protected _destroyed$
Default value : new Subject()
Inherited from LiveAppsComponent
componentChildDivs
Type : LiveAppsComponent[]
Decorators :
@ViewChildren('componentChildDiv')
Inherited from LiveAppsComponent
componentDiv
Type : ElementRef
Decorators :
@ViewChild('componentDiv', {static: false})
Inherited from LiveAppsComponent
Protected containerChanges$
Type : Observable<TcComponent>
Inherited from LiveAppsComponent
Private observer
Inherited from LiveAppsComponent
Public resize
Default value : () => {...}
Inherited from LiveAppsComponent
Public widget
Type : TcComponent
Inherited from LiveAppsComponent

Accessors

FormConfig
setFormConfig(formConfig)
Parameters :
Name Optional
formConfig No
Returns : void
LegacyCreators
setLegacyCreators(legacyCreators: boolean)
Parameters :
Name Type Optional
legacyCreators boolean No
Returns : void
FormsFramework
setFormsFramework(formsFramework: string)
Parameters :
Name Type Optional
formsFramework string No
Returns : void
import {Component, EventEmitter, Input, OnInit, Output, OnDestroy, SimpleChanges, OnChanges} from '@angular/core';
import {LiveAppsComponent} from '../live-apps-component/live-apps-component.component';
import {ProcessId} from '../../models/liveappsdata';
import {LaProcessSelection} from '../../models/tc-case-processes';
import {LiveAppsService} from '../../services/live-apps.service';
import {map, take, takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';
import {CustomFormDefs} from '@tibco-tcstk/tc-forms-lib';
import {FormConfig} from '../../models/tc-liveapps-config';
import {TcFormConfigService} from '../../services/tc-form-config.service';
import {TcCoreCommonFunctions} from '@tibco-tcstk/tc-core-lib';

/**
 * Handles rendering of case creator form.
 *
 *@example <tcla-live-apps-case-creator></tcla-live-apps-case-creator>
 */
@Component({
  selector: 'tcla-live-apps-case-creator',
  templateUrl: './live-apps-case-creator.component.html',
  styleUrls: ['./live-apps-case-creator.component.css']
})
export class LiveAppsCaseCreatorComponent extends LiveAppsComponent implements OnInit, OnChanges {
  /**
   * sandboxId - this comes from claims resolver
   */
  @Input() sandboxId: number;

  /**
   * LA application ID
   */
  @Input() applicationId: string;

  /**
   * The LA Application Type Id (generally 1)
   */
  @Input() typeId: string;

  /**
   * The process definition of the action or creator to execute
   */
  @Input() process: LaProcessSelection;

  /**
   * Data object that will be displayed on the form. Allows overriding over form data (eg. when selecting data in spotfire)
   */
  @Input() dataOverride: any;

  /**
   * Custom Form Layout Configuration
   */
  public formConfig: FormConfig = new FormConfig();
  @Input('formConfig') set FormConfig(formConfig: FormConfig) {
    if (formConfig){
      this.formConfig = formConfig;
    }
  }

  /**
   * Custom Form configuration file
   */
  @Input() customFormDefs: CustomFormDefs;

  /**
   * Enable legacy creators
   */
  public legacyCreators: boolean = false;
  @Input('legacyCreators') set LegacyCreators(legacyCreators: boolean) {
    if (legacyCreators){
      this.legacyCreators = legacyCreators;
    }
  }

  /**
   * Allow override of forms framework
   * Options: bootstrap-4 or material-design
   */
  public formsFramework: string = 'material-design';
  @Input('formsFramework') set FormsFramework(formsFramework: string) {
    if (formsFramework){
      this.formsFramework = formsFramework;
    }
  }

  /**
   * ~event caseChanged : Case action started (process started)
   * ~payload ProcessId : ProcessId object passed when a case has been updated or created by a process (action/creator)
   */
  @Output() caseChanged: EventEmitter<ProcessId> = new EventEmitter<ProcessId>();

  data: any;
  schema: any;
  layout: any[];
  options: any;
  isCustomForm = false;
  formRef: any;

  public handleFormOpen = (event) => {
    this.formRef = event;
  }

  handleSubmit = (data, caseRef) => {
    // if no_process_submit then no need to run process as this was done inside a custom form app
    if (data !== 'NO_PROCESS_SUBMIT') {
      // run the process
      this.liveapps.runProcess(this.sandboxId, this.applicationId, this.process.process.id, caseRef, data)
        .pipe(
          take(1),
          takeUntil(this._destroyed$)
        )
        .subscribe(response => {
          if (response) {
            if (!response.data.errorMsg) {
              // parse data to object
              response.data = JSON.parse(response.data);
              // case created send back response including caseIdentifier if one is present
              let caseIdentifier;
              let caseReference;
              if (response.caseIdentifier) {
                caseIdentifier = response.caseIdentifier;
              }
              if (response.caseReference) {
                caseReference = response.caseReference;
              }
              const processResponse = new ProcessId().deserialize({'caseIdentifier': caseIdentifier, 'caseReference': caseReference});
              this.caseChanged.emit(processResponse);
              this.schema = undefined;
              this.data = undefined;
              this.layout = undefined;
            } else {
              console.error('Unable to run case creator');
              console.error(response.data.errorMsg);
            }
          }
        }, error => {
            console.error('Unable to run case creator');
            console.error(error);
          }
        );
    } else {
      const processResponse = new ProcessId().deserialize({'caseIdentifier': undefined, 'caseReference': undefined});
      this.caseChanged.emit(processResponse);
      this.schema = undefined;
      this.data = undefined;
      this.layout = undefined;
    }
  }

  handleLegacyProcessComplete = (event) => {
    // event.detail.destroy();
    const processResponse = new ProcessId().deserialize({'caseIdentifier': undefined, 'caseReference': undefined});
    this.formRef = undefined;
    this.caseChanged.emit(processResponse);
  }

  handleLegacyProcessCancelled = (event) => {
    // event.detail.destroy();
    // -1 for caseReference means cancelled
    const processResponse = new ProcessId().deserialize({'caseIdentifier': undefined, 'caseReference': '-1'});
    this.formRef.detail.form.destroy();
    this.formRef = undefined;
    this.caseChanged.emit(processResponse);
  }

  constructor(protected liveapps: LiveAppsService, protected formConfigService: TcFormConfigService) {
    super();
  }

  ngOnInit() {
    this.options = {
      defaultOptions: {
        'appearance': 'legacy'
      }
    };
  }

  initialize() {
    if (this.formConfig) {
      this.layout = this.formConfigService.getLayoutFromConfig(this.process.ref, this.formConfig);
    }
    if (this.customFormDefs && this.customFormDefs.customForms) {
      this.isCustomForm = (this.customFormDefs.customForms.findIndex((form) => {
        return (form === this.process.ref);
      }) !== -1);
    } else {
      this.isCustomForm = false;
    }
    if (this.process.process.jsonSchema.$schema === 'NOSCHEMA') {
      this.schema = undefined;
    } else {
      this.schema = this.process.process.jsonSchema;
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    // handle input param changes
    /* if (changes.process && changes.process.currentValue && (changes.process.currentValue !== changes.process.previousValue)) {
      this.initialize(changes.process.currentValue);
    } else if (changes.applicationId && (changes.applicationId.currentValue !== changes.applicationId.previousValue)) {
      // appId has changed: make sure no process selected/form displayed
      this.process = undefined;
    }*/
    /*if (changes.layout && (changes.layout.currentValue !== changes.layout.previousValue)) {
      this.layout = changes.layout.currentValue;
    }*/
    if (changes.dataOverride && (changes.dataOverride.currentValue !== changes.dataOverride.previousValue)) {
      this.data = this.dataOverride;
    }

    if (this.process) {
      this.initialize();
    }

  }

}
<div fxFill>
  <tcfrm-rendered-form *ngIf="process && (!legacyCreators || isCustomForm)" style="overflow: auto;"
                       [formsFramework]="formsFramework" [layout]="layout" [customFormDefs]=customFormDefs
                       [formRef]="process.ref" [appId]="applicationId" [customFormDefs]="customFormDefs"
                       [schema]="schema" [layout]="layout" [data]="data" [options]="options"
                       (formSubmit)="handleSubmit($event, undefined)"></tcfrm-rendered-form>
  <!--tcla-live-apps-legacy-process *ngIf="process && legacyCreators && !isCustomForm" [process]="process" [type]="'creator'" [applicationId]="applicationId" [typeId]="typeId" (processCancelled)="handleLegacyProcessCancelled()" (processComplete)="handleLegacyProcessComplete()" class="live-apps-widget" fxFill></tcla-live-apps-legacy-process-->
  <!--tcla-live-apps-legacy-process *ngIf="process && legacyCreators && !isCustomForm" [process]="process" [type]="'creator'" [applicationId]="applicationId" [typeId]="typeId" (processCancelled)="handleLegacyProcessCancelled()" (processComplete)="handleLegacyProcessComplete()" class="live-apps-widget" fxFill></tcla-live-apps-legacy-process-->
  <div *ngIf="process && legacyCreators && !isCustomForm">
    <div class="live-apps-form" id="creatorFormDiv"></div>
    <tib-la-casecreator-form
      [sandbox]="sandboxId"
      [formDivId]="'creatorFormDiv'"
      [id]="process.process.id"
      [name]="process.creator.name"
      [label]="process.creator.label"
      [version]="process.creator.version"
      [applicationId]="process.creator.applicationId"
      [applicationName]="process.creator.applicationName"
      [activityId]="process.creator.activityId"
      [activityName]="process.creator.activityName"
      (formLoad) ="handleFormOpen($event)"
      (formSubmit)="handleLegacyProcessComplete($event)"
      (formCancel)="handleLegacyProcessCancelled($event)"
    >
    </tib-la-casecreator-form>
  </div>
</div>

./live-apps-case-creator.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""