C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-application-list/live-apps-application-list.component.ts
Special rendering of LiveAppsApplicationsComponent
<tcla-live-apps-application-list></tcla-live-apps-application-list>| selector | tcla-live-apps-application-list |
| styleUrls | ./live-apps-application-list.component.css |
| templateUrl | ./live-apps-application-list.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostListeners |
| selectedAppIds | |
Type : string[]
|
|
Default value : []
|
|
|
The app Ids selected (output) |
|
| appIds | |
Type : string[]
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:34
|
|
|
The list of LA Application IDs you want to handle |
|
| formFieldRendering | |
Type : boolean
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:55
|
|
| label | |
Type : string
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:71
|
|
| sandboxId | |
Type : number
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:29
|
|
|
sandboxId - this comes from claims resolver |
|
| selectedApp | |
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:45
|
|
| selectedAppId | |
Type : string
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:65
|
|
|
Pre-select specified appId |
|
| selectFirstApp | |
Type : boolean
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:39
|
|
|
Whether to auto select the first app in dropdown selector (eg search) |
|
| appIdsSelected | |
Type : EventEmitter<string[]>
|
|
|
~event appIdsSelected : Applications selected in component (appIds) ~payload string[] : selected App Ids from the application list (used on config) |
|
| appsSelected | |
Type : EventEmitter<CaseType[]>
|
|
|
~event appsSelected : Applications selected in component (CaseType objects) ~payload CaseType[] : Array of CaseType objects of what was selected |
|
| selection | |
Type : EventEmitter<CaseType>
|
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
|
Defined in
LiveAppsApplicationsComponent:81
|
|
|
~event selection : Value selected in child component ~payload CaseType : type varies. but is when something is selected in a drop down it is passed back to the caller |
|
| window:resize |
Arguments : '$event'
|
window:resize(event)
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:45
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:128
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:91
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:99
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:104
|
|
Returns :
void
|
| setupWidthObserver |
setupWidthObserver()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:70
|
|
Returns :
void
|
| appSelectionList |
Type : MatSelectionList
|
Decorators :
@ViewChild(MatSelectionList, {static: false})
|
| Private getAppIds |
Default value : () => {...}
|
| handleAppSelection |
Default value : () => {...}
|
| handleDeselectAll |
Default value : () => {...}
|
| handleSelectAll |
Default value : () => {...}
|
| Public mySelectedOptions |
Type : CaseType[]
|
| Public refresh |
Default value : () => {...}
|
| applications |
Type : CaseTypesList
|
Default value : new CaseTypesList()
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:83
|
| changeAppSelection |
Default value : () => {...}
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:91
|
| Public compareProcessId |
Default value : () => {...}
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:124
|
| errorMessage |
Type : string
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:85
|
| Public formFieldRendering |
Type : boolean
|
Default value : false
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:54
|
|
Use Form field rendering around the selection box |
| Public label |
Type : string
|
Default value : 'Applications'
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:70
|
|
Label for the application selector |
| Public refresh |
Default value : () => {...}
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:102
|
| selectApplication |
Default value : () => {...}
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:97
|
| Public selectedApp |
Type : CaseType
|
Default value : new CaseType()
|
|
Inherited from
LiveAppsApplicationsComponent
|
|
Defined in
LiveAppsApplicationsComponent:44
|
|
Application selected from dropdown (output) |
| Protected _destroyed$ |
Default value : new Subject()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:39
|
| componentChildDivs |
Type : LiveAppsComponent[]
|
Decorators :
@ViewChildren('componentChildDiv')
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:36
|
| componentDiv |
Type : ElementRef
|
Decorators :
@ViewChild('componentDiv', {static: false})
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:35
|
| Protected containerChanges$ |
Type : Observable<TcComponent>
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:40
|
| Private observer |
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:42
|
| Public resize |
Default value : () => {...}
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:56
|
| Public widget |
Type : TcComponent
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:41
|
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {CaseType} from '../../models/liveappsdata';
import {LiveAppsApplicationsComponent} from '../live-apps-applications/live-apps-applications.component';
import {map, take, takeUntil} from 'rxjs/operators';
import { MatSelectionList } from '@angular/material/list';
/**
* Special rendering of LiveAppsApplicationsComponent
*
*@example <tcla-live-apps-application-list></tcla-live-apps-application-list>
*/
@Component({
selector: 'tcla-live-apps-application-list',
templateUrl: './live-apps-application-list.component.html',
styleUrls: ['./live-apps-application-list.component.css']
})
export class LiveAppsApplicationListComponent extends LiveAppsApplicationsComponent implements OnInit, OnChanges {
@ViewChild (MatSelectionList, {static: false}) appSelectionList: MatSelectionList;
/**
* The app Ids selected (output)
*/
@Input() selectedAppIds: string[] = [];
/**
* ~event appsSelected : Applications selected in component (CaseType objects)
* ~payload CaseType[] : Array of CaseType objects of what was selected
*/
@Output() appsSelected: EventEmitter<CaseType[]> = new EventEmitter<CaseType[]>();
/**
* ~event appIdsSelected : Applications selected in component (appIds)
* ~payload string[] : selected App Ids from the application list (used on config)
*/
@Output() appIdsSelected: EventEmitter<string[]> = new EventEmitter<string[]>();
public mySelectedOptions: CaseType[];
handleAppSelection = (selectionEvent: CaseType[]) => {
this.appsSelected.emit(selectionEvent);
const selIds = [];
selectionEvent.forEach((selected) => {
selIds.push(selected.applicationId);
});
this.appIdsSelected.emit(selIds);
}
handleSelectAll = () => {
this.mySelectedOptions = this.applications.casetypes;
this.appIdsSelected.emit(this.getAppIds(this.mySelectedOptions));
this.appsSelected.emit(this.applications.casetypes);
}
handleDeselectAll = () => {
this.mySelectedOptions = [];
this.appIdsSelected.emit([]);
this.appsSelected.emit([]);
}
private getAppIds = (casetypes: CaseType[]): string[] => {
const selIds = [];
casetypes.forEach((selected) => {
selIds.push(selected.applicationId);
});
return selIds;
}
public refresh = (bypassCache: boolean) => {
this.liveapps.getApplications(this.sandboxId, this.appIds, 100, bypassCache)
.pipe(
take(1),
takeUntil(this._destroyed$),
map(applicationList => {
this.applications = applicationList;
// handle single app selection input
if (this.selectedApp && this.selectedApp.applicationId) {
this.selectedApp = applicationList.casetypes.find((casetype) => {
return casetype.applicationId === this.selectedApp.applicationId;
});
// this.selection.emit(this.selectedApp);
} else if (this.selectedAppIds && this.selectedAppIds.length > 0) {
// pre select any casetypes that were passed in the selectedAppIds input attribute
this.mySelectedOptions = this.applications.casetypes.filter(casetype => {
return (this.selectedAppIds.findIndex((ct) => {
return ct === casetype.applicationId;
}
) !== -1);
});
}
})
)
.subscribe(null, error => { this.errorMessage = 'Error retrieving applications: ' + error.error.errorMsg; });
}
ngOnChanges(changes: SimpleChanges) {
// only interested in initial selection - catching every change would create an infinite loop!
if (changes.selectedAppIds && (changes.selectedAppIds.firstChange)) {
this.refresh(false);
}
}
ngOnInit(): void {
// leave this blank so superclass ngOnInit not called
}
}
<div fxFlex style="padding: 10px;" fxLayout="column">
<div fxLayout="row" class="tcs-application-list-buttons">
<button mat-button (click)="handleSelectAll()">
<span>Select All</span>
</button>
<button mat-button (click)="handleDeselectAll()">
<span>Deselect All</span>
</button>
</div>
<mat-selection-list class="tcs-application-list" #selectedApps [(ngModel)]="mySelectedOptions" (ngModelChange)="handleAppSelection($event)"
fxLayout="column" fxLayout="row wrap">
<mat-list-option class="tcs-application-option" checkboxPosition="before"
*ngFor="let casetype of applications.casetypes"
[value]="casetype">
<span>{{casetype.label}}</span>
</mat-list-option>
</mat-selection-list>
</div>
./live-apps-application-list.component.css
.tcs-application-option {
max-width: 320px;
}
.tcs-application-list {
overflow: auto;
}
.tcs-application-list-buttons {
min-height: 40px;
}