File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-settings-roles/live-apps-settings-roles.component.ts
Description
Configuration of roles
Extends
TibcoCloudSettingsGeneralComponent
Implements
Example
<tcla-live-apps-settings-roles></tcla-live-apps-settings-roles>Metadata
| selector | tcla-live-apps-settings-roles |
| styleUrls | ./live-apps-settings-roles.component.css |
| templateUrl | ./live-apps-settings-roles.component.html |
Index
Properties |
|
Methods |
Constructor
constructor(route: ActivatedRoute, generalConfigService: TcGeneralConfigService, snackBar: MatSnackBar, dialog: MatDialog)
|
|||||||||||||||
|
Parameters :
|
Methods
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
Properties
| createRoleFunction |
Default value : () => {...}
|
| Public currentRole |
Type : RoleAttribute
|
| deleteRoleFunction |
Default value : () => {...}
|
| Public groups |
Type : Groups
|
| Public roles |
Type : Roles
|
| selectedRole |
Default value : () => {...}
|
import { Component, OnInit } from '@angular/core';
import { TibcoCloudSettingsGeneralComponent, RoleAttribute, TcGeneralConfigService, TibcoCloudNewElementComponent } from '@tibco-tcstk/tc-core-lib';
import { Groups, Roles } from '../../models/tc-groups-data';
import { ActivatedRoute } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
/**
* Configuration of roles
*
* 
*
*@example <tcla-live-apps-settings-roles></tcla-live-apps-settings-roles>
*/
@Component({
selector: 'tcla-live-apps-settings-roles',
templateUrl: './live-apps-settings-roles.component.html',
styleUrls: ['./live-apps-settings-roles.component.css']
})
export class LiveAppsSettingsRolesComponent extends TibcoCloudSettingsGeneralComponent implements OnInit {
public roles: Roles;
public groups: Groups;
public currentRole: RoleAttribute;
constructor(protected route: ActivatedRoute, protected generalConfigService: TcGeneralConfigService, protected snackBar: MatSnackBar, protected dialog: MatDialog) {
super(route, generalConfigService, snackBar);
}
ngOnInit() {
this.generalConfig = super.getRoute().snapshot.data.generalConfigHolder;
this.roles = super.getRoute().snapshot.data.allRoles;
this.groups = super.getRoute().snapshot.data.allGroups;
this.claims = super.getRoute().snapshot.data.claims;
this.sandboxId = Number(this.claims.primaryProductionSandbox.id).valueOf();
}
deleteRoleFunction = (): void => {
this.generalConfig.roles = this.generalConfig.roles.filter(element => element.id !== this.currentRole.id);
this.currentRole = undefined;
}
selectedRole = (role: RoleAttribute): void => {
this.currentRole = role;
}
createRoleFunction = (): void => {
const dialogRef = this.dialog.open(TibcoCloudNewElementComponent, {
panelClass: 'tcs-style-dialog',
data: { resourceType: 'Role' }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const newRole = new RoleAttribute().deserialize({id: result.id, display: result.name, priority: 1 });
this.generalConfig.roles.push(newRole);
}
});
}
}
<div fxLayout="column" fxFill>
<tc-tibco-cloud-widget-header style="height: 40px;" [icon]="'tcs-capabilities'" [headerText]="'Role Configuration'">
</tc-tibco-cloud-widget-header>
<div fxFlex style="padding: 20px; overflow: hidden" fxLayout="column">
<div style="overflow: auto;">
<div fxLayout="column" fxFlex>
<p>You can configure roles by here:</p>
<br>
<!-- Role specific -->
<mat-accordion>
<mat-expansion-panel *ngFor="let role of generalConfig.roles" (opened)="selectedRole(role)">
<mat-expansion-panel-header>
<mat-panel-title>{{role.display}}</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="column">
<div fxLayoutGap="10px">
<mat-form-field fxFlex="20" style="min-width: 100px;">
<input matInput placeholder="Id" [(ngModel)]="role.id" readonly>
</mat-form-field>
<mat-form-field fxFlex="40" style="min-width: 400px;">
<input matInput placeholder="Display Name" [(ngModel)]="role.display">
</mat-form-field>
<mat-form-field fxFlex="40" style="min-width: 400px;">
<mat-select [disableOptionCentering]="true" placeholder="Live Apps Group" [(value)]="role.group" [disabled]="role.id === 'Administrator'">
<mat-option *ngFor="let group of groups.groups" [value]="group.name">
<span matTooltip="{{group.description}}" matTooltipShowDelay="1000"
matTooltipPosition="below">{{group.name}}</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayoutGap="5px">
<mat-form-field fxFlex="20">
<input matInput type="number" min="0" max="10" placeholder="Priority" [(ngModel)]="role.priority">
</mat-form-field>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
<div fxFlex class="tcs-filler-panel"></div>
<div fxLayout="row" fxLayoutAlign="end end" fxLayoutGap="10px" style="min-height: 50px">
<button mat-raised-button color="secondary" [disabled]="!currentRole"
(click)="deleteRoleFunction()">Delete</button>
<button mat-raised-button color="secondary" (click)="createRoleFunction()">New</button>
<button mat-raised-button color="primary" (click)="runSaveFunction()">Save</button>
</div>
</div>
</div>
./live-apps-settings-roles.component.css
Legend
Html element
Component
Html element with directive