1
|
<div class="p-grid p-nogutter">
|
2
|
<div class="p-col main-content">
|
3
|
|
4
|
<h1>{{'ROLES-MANAGEMENT' | translate}}</h1>
|
5
|
|
6
|
<app-horizontal-menu></app-horizontal-menu>
|
7
|
|
8
|
<app-breadcrumb></app-breadcrumb>
|
9
|
|
10
|
<div class="p-grid p-nogutter p-pt-5 p-pb-5">
|
11
|
|
12
|
<div class="p-col p-nogutter p-col-12">
|
13
|
|
14
|
<div class="p-grid">
|
15
|
<div class="p-col-12 p-lg-6">
|
16
|
<p-fieldset legend="Roles List" [toggleable]="true">
|
17
|
<h4 class="p-text-center">Roles List</h4>
|
18
|
<p-toolbar styleClass="p-mb-4">
|
19
|
<ng-template pTemplate="left">
|
20
|
<button pButton pRipple type="button" icon="pi pi-pencil" label="{{'EDIT_ROLE_BUTTON' | translate}}"
|
21
|
class="p-button-secondary" (click)="edit(selectedRole)"
|
22
|
[disabled]="editRoleIsDisabled(selectedRole)">
|
23
|
</button>
|
24
|
</ng-template>
|
25
|
<ng-template pTemplate="right">
|
26
|
<button pButton pRipple type="button" icon="pi pi-plus-circle" label="{{'CREATE_ROLE' | translate}}" class="p-button-primary"
|
27
|
(click)="show()" [disabled]="createRoleIsDisabled()">
|
28
|
</button>
|
29
|
</ng-template>
|
30
|
</p-toolbar>
|
31
|
<p-confirmDialog message="{{'DELETE-MESSAGE' | translate}}"
|
32
|
header="{{'DELETE-CONFIRMATION' | translate}}"
|
33
|
acceptLabel="{{'ACCEPT_LABEL' | translate}}"
|
34
|
rejectLabel="{{'REJECT_LABEL' | translate}}"
|
35
|
acceptButtonStyleClass="p-button-primary"
|
36
|
rejectButtonStyleClass="p-button-warning"
|
37
|
acceptIcon="null"
|
38
|
rejectIcon="null">
|
39
|
</p-confirmDialog>
|
40
|
<p-table [value]="roles"
|
41
|
[lazy]="true"
|
42
|
(onLazyLoad)="loadRoles($event)"
|
43
|
selectionMode="single"
|
44
|
dataKey="id"
|
45
|
[(selection)]="selectedRole"
|
46
|
[paginator]="true"
|
47
|
[rows]="rows"
|
48
|
[totalRecords]="totalRecords"
|
49
|
[loading]="loading"
|
50
|
styleClass="p-datatable-gridlines"
|
51
|
[rowHover]="true"
|
52
|
[autoLayout]="true">
|
53
|
<ng-template pTemplate="header">
|
54
|
<tr>
|
55
|
<th style="width: 3rem"></th>
|
56
|
<th>Name</th>
|
57
|
<th>Status</th>
|
58
|
<th class="three-buttons"></th>
|
59
|
</tr>
|
60
|
</ng-template>
|
61
|
<ng-template pTemplate="body" let-role>
|
62
|
<tr>
|
63
|
<td>
|
64
|
<p-tableRadioButton [value]="role"></p-tableRadioButton>
|
65
|
</td>
|
66
|
<td>{{role.name}}</td>
|
67
|
<td>
|
68
|
<div class="p-grid p-grid-inline p-nogutter p-mt-1">
|
69
|
<div class="p-mr-2">
|
70
|
<p-inputSwitch [(ngModel)]="role.status" (onChange)="updateRoleStatus(role)"
|
71
|
[disabled]="statusEnable(role)">
|
72
|
</p-inputSwitch>
|
73
|
</div>
|
74
|
<label class="p-mt-1">
|
75
|
{{(role.status ? 'ENABLE' : 'DISABLE') | translate}}
|
76
|
</label>
|
77
|
</div>
|
78
|
</td>
|
79
|
<td>
|
80
|
<button *ngIf="!role.readOnly" pButton pRipple type="button"
|
81
|
pTooltip="{{'CUSTOM-INTERNAL-ROLE' | translate}}" icon="pi pi-lock-open"
|
82
|
class="p-button-secondary p-button-rounded p-button-outlined p-mr-2"></button>
|
83
|
<button *ngIf="!role.readOnly" pButton pRipple type="button" (click)="deleteRole(role.id)"
|
84
|
pTooltip="{{'DELETE-ROLE' | translate}}" icon="pi pi pi-trash" class="p-button-danger p-button-rounded p-button-outlined"
|
85
|
ng-class="{'p-mr-2':role.readOnly}" [disabled]="roleCanBeDeleted(role)"></button>
|
86
|
<button *ngIf="role.readOnly" pButton pRipple type="button"
|
87
|
pTooltip="{{'EXTERNAL-ROLE' | translate}}" icon="pi pi-lock" class="p-button-secondary p-button-rounded p-button-outlined">
|
88
|
</button>
|
89
|
</td>
|
90
|
</tr>
|
91
|
</ng-template>
|
92
|
</p-table>
|
93
|
</p-fieldset>
|
94
|
</div>
|
95
|
<div class="p-col-12 p-lg-6 p-mt-5 p-mt-lg-0">
|
96
|
<p-fieldset legend="Rights per Role" [toggleable]="true">
|
97
|
<app-rights-per-role [role]="selectedRole" (valueChange)="passEvent($event)">
|
98
|
</app-rights-per-role>
|
99
|
</p-fieldset>
|
100
|
</div>
|
101
|
</div>
|
102
|
|
103
|
</div>
|
104
|
|
105
|
</div>
|
106
|
|
107
|
</div>
|
108
|
|
109
|
</div>
|