Project

General

Profile

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>
(1-1/4)