File

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

Description

Wraps legacy angularjs form renderer

Extends

LiveAppsComponent

Implements

OnDestroy OnDestroy AfterViewInit

Example

<tcla-live-apps-legacy-form></tcla-live-apps-legacy-form>

Metadata

selector tcla-live-apps-legacy-process
styleUrls ./live-apps-legacy-process.component.css
templateUrl ./live-apps-legacy-process.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners
Accessors

Constructor

constructor(visibilityService: TcVisibilityService, host: ElementRef, legacyIframeService: LegacyIframeService)
Parameters :
Name Type Optional
visibilityService TcVisibilityService No
host ElementRef No
legacyIframeService LegacyIframeService No

Inputs

applicationId
Type : string
caseRef
Type : string
caseState
Type : string
legacyIframeId
Type : string
process
Type : LaProcessSelection
type
Type : string
typeId
Type : string

Outputs

processCancelled
Type : EventEmitter
processComplete
Type : EventEmitter

HostListeners

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

Methods

Public isFormActive
isFormActive()
Returns : boolean
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
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

Public cancelProcess
Default value : () => {...}
Public changeProcess
Default value : () => {...}
Private formDiv
Private hideProcess
Default value : () => {...}
Private initialize
Default value : () => {...}
Public legacyIframeId
Type : string
Default value : 'legacyProcessFrame'
Private openProcessId
Private processActive
Default value : false
Private receiveMessage
Default value : () => {...}
Public renderProcess
Default value : () => {...}
Private resizeProcess
Default value : () => {...}
Private target
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

LegacyIframeId
setLegacyIframeId(legacyIframeId: string)
Parameters :
Name Type Optional
legacyIframeId string No
Returns : void
import {
  AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnDestroy,
  Output
} from '@angular/core';
import {LiveAppsComponent} from '../live-apps-component/live-apps-component.component';
import {LegacyIframeService} from '@tibco-tcstk/tc-core-lib';
import {TcVisibilityService} from '@tibco-tcstk/tc-core-lib';
import {LaProcessSelection} from '../../models/tc-case-processes';

/**
 * Wraps legacy angularjs form renderer
 *
 *@example <tcla-live-apps-legacy-form></tcla-live-apps-legacy-form>
 */

@Component({
  selector: 'tcla-live-apps-legacy-process',
  templateUrl: './live-apps-legacy-process.component.html',
  styleUrls: ['./live-apps-legacy-process.component.css']
})
export class LiveAppsLegacyProcessComponent extends LiveAppsComponent implements OnDestroy, OnDestroy, AfterViewInit {

  public legacyIframeId: string = 'legacyProcessFrame';
  @Input('legacyIframeId') set LegacyIframeId(legacyIframeId: string) {
    if (legacyIframeId){
      this.legacyIframeId = legacyIframeId;
    }
  }

  @Input() process: LaProcessSelection;
  @Input() type: string; // creator/process
  @Input() applicationId: string;
  @Input() typeId: string;
  @Input() caseRef: string;
  @Input() caseState: string;
  @Output() processComplete = new EventEmitter();
  @Output() processCancelled = new EventEmitter();

  private target;
  private formDiv;
  private processActive = false;
  private openProcessId;

  constructor (protected visibilityService: TcVisibilityService, protected host: ElementRef, protected legacyIframeService: LegacyIframeService) {
    super();
  }

  public isFormActive() {
    return this.processActive;
  }

  public changeProcess = (process: LaProcessSelection) => {
    // process has changed
    this.renderProcess(process);
  }

  public renderProcess = (process: LaProcessSelection) => {
    if (this.processActive && this.openProcessId) {
      // opening a new process so cancel old one
      this.cancelProcess(false);
    }

    // send message to external form app
    this.formDiv.contentWindow.postMessage({
      action: this.type === 'creator' ? 'runCreator' : 'runAction',
      processId: process.process.id,
      caseRef: this.caseRef,
      caseState: this.caseState,
      applicationId: this.applicationId,
      typeId: this.typeId
    }, window.location.origin);

    // position the form iframe over the processDiv placeholder
    this.processActive = true;
    this.openProcessId = process.process.id;
    this.resizeProcess();
  }

  private receiveMessage = (event) => {
    if (event.data.action === 'processComplete') {
      this.processActive = false;
      this.openProcessId = undefined;
      this.hideProcess();
      this.processComplete.emit();
    } else if (event.data.action === 'processCancelled') {
      this.processActive = false;
      this.openProcessId = undefined;
      this.hideProcess();
      this.processCancelled.emit();
    }
  }

  public cancelProcess = (emit?: boolean) => {
    this.formDiv.contentWindow.postMessage({ 'action': 'cancelProcess' }, window.location.origin);
    this.processActive = false;
    this.openProcessId = undefined;
    this.hideProcess();
    if (emit) {
      this.processCancelled.emit();
    }
  }

  private hideProcess = () => {
  // hide the iframe!
      this.formDiv.style.top = '-1000px';
      this.formDiv.style.left = '-1000px';
      this.formDiv.style.zIndex = '1';
  }

  private resizeProcess = () => {
    // position the form iframe over the processDiv placeholder
    setTimeout(handler => {
      const rect = this.target.getBoundingClientRect();
      this.formDiv.style.top = rect.top.toString() + 'px';
      this.formDiv.style.left = rect.left.toString() + 'px';
      this.formDiv.style.height = rect.height.toString() + 'px';
      this.formDiv.style.width = rect.width.toString() + 'px';
      this.formDiv.style.position = 'absolute';
      // creator needs 1001 so it is over the dialog box
      this.formDiv.style.zIndex = (this.type === 'creator') ? '1001' : '1000';
    }, 1000);
  }

  private initialize = () => {
    // listen for messages from the iframe
    window.addEventListener('message', this.receiveMessage, false);

    // we only want to render the process when the element is visible
    const inSight$ = this.visibilityService.elementInSight(this.host);
    inSight$.subscribe(next => {
      if (!next) {
        // element not visible so hide the process if it is showing
        if (this.processActive && this.target) {
          this.hideProcess();
        }
      } else {
        // element is visible
        if (!this.processActive) {
          // if process not already showing - show it
          // first get a handle on the target div and the legacy iframe
          this.target = document.getElementById('processDiv');
          this.formDiv = document.getElementById(this.legacyIframeId);
          if (this.openProcessId) {
            // trigger display of the process
            this.renderProcess(this.process);
          }
        } else {
          this.resizeProcess();
        }
      }
    });
  }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.openProcessId = this.process.process.id;
    this.containerChanges$.subscribe(widget => {
      if (this.processActive && this.target) {
        this.resizeProcess();
      }
    });

    // wait for iframe to load before doing anything else
    // this observable will emit true once the iFrame is loaded
    this.legacyIframeService.processStatus.subscribe(loaded => {
      if (loaded) {
        // iframe is loaded
        this.initialize();
      }
    });
  }

  ngOnDestroy() {
    if (this.openProcessId) {
      this.cancelProcess();
    }
  }
}
<div #componentDiv fxFill id="processDiv" style="border: none;"></div>

./live-apps-legacy-process.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""