File

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

Description

Special (option list) rendering of LiveAppsCaseActionsComponent

Extends

LiveAppsCaseActionsComponent

Implements

OnInit OnChanges

Example

<tcla-live-apps-case-actions-list></tcla-live-apps-case-actions-list>

Metadata

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

Index

Properties
Methods
Inputs
Outputs
HostListeners
Accessors

Inputs

formFieldRendering
Type : boolean
label
Type : string
seletedActionId
Type : string

Pre-select specified actionId

actionFilter
Type : string[]

Dont show buttons for any actions that start with this string. eg: '$' will remove the action $Update

appId
Type : string

The LA Application Id

caseRef
Type : string

The case reference

loadOnDemand
Type : boolean
maxActions
Default value : 1

Max Actions that can be run simultaneously

sandboxId
Type : number

sandboxId - this comes from claims resolver

typeId
Type : string

Outputs

actionClicked
Type : EventEmitter<LaProcessSelection>

~event actionClicked : Case Action selected ~payload LaProcessSelection : LaProcessSelection object output when an action is clicked (ie. message to parent to run action component)

HostListeners

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

Methods

ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public selectAction
selectAction(action: CaseAction)
Parameters :
Name Type Optional
action CaseAction No
Returns : void
loadActions
loadActions(event)
Parameters :
Name Optional
event No
Returns : void
ngOnInit
ngOnInit()
Returns : void
Public selectAction
selectAction(action: CaseAction)
Parameters :
Name Type Optional
action CaseAction No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
setupWidthObserver
setupWidthObserver()
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

caseActionList
Type : Process[]
compareObjects
Default value : () => {...}
Public formFieldRendering
Type : boolean
Default value : false

Use Form field rendering around the selection box

Public label
Type : string
Default value : 'Case Actions'

Label for the actions selector

Public refresh
Default value : () => {...}
selectedAction
Type : Process
appSchema
Type : CaseTypesList
caseActionList
Type : Process[]
Public caseactions
Type : CaseAction[]
caseType
Type : CaseType
Public disabled
Default value : false
Public errorMessage
Type : string
Public isLoading
Default value : true
Public loadOnDemand
Type : boolean
Default value : false

Whether to load actions on component load. Default false.

Public refresh
Default value : () => {...}
Public toggleEnable
Default value : () => {...}
Public typeId
Type : string
Default value : '1'

The LA Application Type Id (generally 1)

Protected _destroyed$
Default value : new Subject()
componentChildDivs
Type : LiveAppsComponent[]
Decorators :
@ViewChildren('componentChildDiv')
componentDiv
Type : ElementRef
Decorators :
@ViewChild('componentDiv', {static: false})
Protected containerChanges$
Type : Observable<TcComponent>
Private observer
Public resize
Default value : () => {...}
Public widget
Type : TcComponent
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

FormFieldRendering
setFormFieldRendering(formFieldRendering: boolean)
Parameters :
Name Type Optional
formFieldRendering boolean No
Returns : void
Label
setLabel(label: string)
Parameters :
Name Type Optional
label string No
Returns : void
import { Component, OnInit, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { LiveAppsService } from '../../services/live-apps.service';
import { map, takeUntil, take, tap } from 'rxjs/operators';
import { Process, CaseAction } from '../../models/liveappsdata';
import { LaProcessSelection } from '../../models/tc-case-processes';
import { LiveAppsCaseActionsComponent } from '../live-apps-case-actions/live-apps-case-actions.component';


/**
 * Special (option list) rendering of LiveAppsCaseActionsComponent
 *
 *@example <tcla-live-apps-case-actions-list></tcla-live-apps-case-actions-list>
 */

@Component({
    selector: 'tcla-live-apps-case-actions-list',
    templateUrl: './live-apps-case-actions-list.component.html',
    styleUrls: ['./live-apps-case-actions-list.component.css']
})
export class LiveAppsCaseActionsListComponent extends LiveAppsCaseActionsComponent implements OnInit, OnChanges {
  /**
   * Pre-select specified actionId
   */
  @Input() seletedActionId: string;

  /**
   * Use Form field rendering around the selection box
   */
  public formFieldRendering: boolean = false;
  @Input('formFieldRendering') set FormFieldRendering(formFieldRendering: boolean) {
    if (formFieldRendering){
      this.formFieldRendering = formFieldRendering;
    }
  }

  /**
   * Label for the actions selector
   */
  public label: string = 'Case Actions';
  @Input('label') set Label(label: string) {
    if (label){
      this.label = label;
    }
  }

    caseActionList: Process[];
    selectedAction: Process;

    public refresh = () => {
        // retrieve the schema for this case type so we can display case creators and case actions for this case type
        this.liveapps.getCaseTypeSchema(this.sandboxId, this.appId, 100)
        .subscribe(schema => {
          // this.appSchema = schema;
          schema.casetypes.forEach((casetype) => {
              // the schema will contain definitions for both the 'case' and any defined types in that case.
              // We want the schema for this 'case'.
              if (casetype.applicationId === this.appId && casetype.id === this.typeId) {
                if (casetype.jsonSchema !== undefined) {
                  // this.caseType = casetype;
                  this.caseActionList = casetype.actions ? casetype.actions : [];
                  // if (this.caseActionList.length == 1) {
                  //     this.selectProcess(this.caseActionList[0]);
                  // }
                } else {
                  console.error('No schema returned for this case type: You may need to update/re-deploy the live apps application');
                }
              }
            }
          );
        });
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.appId && (changes.appId.currentValue !== changes.appId.previousValue)) {
            this.caseActionList = [];
            this.refresh();
        }
    }

    compareObjects = (o1: any, o2: any): boolean => {
        return o1.id === this.seletedActionId;
    }

    public selectAction(action: CaseAction) {
        this.caseProcessesService.getProcessDetails(this.caseRef, this.appId, this.typeId, this.sandboxId, action, null, 100).pipe(
            take(1),
            takeUntil(this._destroyed$),
            tap(processDetails => {
                if (!processDetails || !processDetails.process) {
                    // This will be triggered when no form schema is available
                    // Typically happens when:
                    // 1) The form has elements that are not supported by the Live Apps API for form schemas such as participant selectors
                    // 2) The Live Apps application is legacy and has no form schema at all, redeploying the live apps application would fix this.
                    console.error('No schema available for this case type: The form may not be supported or you may need to update/re-deploy the live apps application');
                }
            }
            )
        )
            .subscribe(processSchema => {
              this.actionClicked.emit(processSchema);
              return processSchema;
            }, error => { this.errorMessage = 'Error retrieving case actions: ' + error.error.errorMsg; });
    }
}
<div *ngIf="!formFieldRendering" fxFlex style="margin-left: 10px;">
    <mat-select class="tcs-action-selector-option" [disableOptionCentering]="true" [(ngModel)]="selectedAction" [compareWith]="compareObjects"
        placeholder="{{label}}" >
        <mat-option *ngFor="let action of caseActionList" [value]="action" (click)="selectAction(action)">
            <span>{{action.name}}</span>
        </mat-option>
    </mat-select>
</div>
<div *ngIf="formFieldRendering" fxFlex>
  <mat-form-field style="width:100%" class="tcs-action-selector-option-ff">
    <mat-label>{{label}}</mat-label>
    <mat-select class="tcs-action-selector-option-formfield" [disableOptionCentering]="true" [(ngModel)]="selectedAction" [compareWith]="compareObjects"
                placeholder="{{label}}" >
      <mat-option *ngFor="let action of caseActionList" [value]="action" (click)="selectAction(action)">
        <span>{{action.name}}</span>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

./live-apps-case-actions-list.component.css

:host ::ng-deep  .tcs-action-selector-option .mat-select-value span {
  font-family: Source Sans Pro;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: #0081cb;
}

:host ::ng-deep  .tcs-action-selector-option .mat-select-arrow-wrapper div {
  color: #0081cb;
}

:host ::ng-deep .tcs-action-selector-option .mat-select-value {
  min-width: 100px;
  max-width: 100%;
  width: auto;
}

.tcs-actions-box {
  width: 200px;
  height: 44px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
}

tcs-action-selector-option {
  width: 170px;
  margin-left: 5px;
  margin-right: 5px;
  height: 20px;
  background-color: #eeeeee;
  padding-left: 20px;
  padding-right: 20px;
  height: 35px;
}

.tcs-case-creation-dialog-instruction {
  font-family: Source Sans Pro;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color:#727272;
}


Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""