Merge pull request 'revamped the code and design for permission management screen' (#25) from aconnect-UX/1826 into dev-pending-01-01-2026
Reviewed-on: https://ct.mfsys.com.pk/aConnect/aConnect-UX/pulls/25mazdak/UX-1852
commit
24d3c810c3
@ -1,95 +1,126 @@
|
||||
<div class="page-content">
|
||||
<div class="page-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row mt-2 mb-2">
|
||||
<div class="col-lg-6">
|
||||
<div class="col-6">
|
||||
<div class="mt-0 mb-2 d-sm-flex align-items-center justify-content-between font-edit-13">
|
||||
<h5 class="text-muted fw-bold mt-3">{{'permissionManagement' | translate}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
||||
<!-- User Selection -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<form [formGroup]="permission">
|
||||
|
||||
<div class="form-group row mb-2">
|
||||
<label for="userCode" class="form-label font-edit-13">{{ 'userCode' |
|
||||
translate
|
||||
}}</label>
|
||||
<div class="input-group">
|
||||
<select class="form-select" id="userCode" formControlName="userCode" (change)="onUserChange()">
|
||||
<option selected disabled value="">{{ 'choose' |
|
||||
translate }}
|
||||
<div class="row mb-2 align-items-center">
|
||||
<label class="col-sm-2 col-form-label pe-1">
|
||||
{{ 'userCode' | translate }}
|
||||
</label>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<select
|
||||
class="form-select"
|
||||
formControlName="userCode"
|
||||
(change)="onUserChange()">
|
||||
<option value="" disabled selected>
|
||||
{{ 'choose' | translate }}
|
||||
</option>
|
||||
<option *ngFor="let user of users" [value]="user.userId">
|
||||
{{user.userName}}
|
||||
{{ user.userName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission Table -->
|
||||
<div class="card" *ngIf="showPermissions">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">{{ 'permissions' | translate}}</h4>
|
||||
|
||||
<h4 class="card-title">
|
||||
{{ 'permissions' | translate }}
|
||||
</h4>
|
||||
<hr>
|
||||
<ul>
|
||||
<li *ngFor="let node of permissions">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="node.checked"
|
||||
(change)="toggleNode(node, $event)">
|
||||
{{node.name | translate}}
|
||||
<span (click)="toggleExpand(node)">
|
||||
<span *ngIf="node.children && node.children.length">
|
||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
||||
</span>
|
||||
|
||||
<table class="table table-bordered table-sm align-middle permission-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 40px;"></th>
|
||||
<th>{{ 'Permissions' | translate }}</th>
|
||||
<th style="width: 120px;" class="text-center">
|
||||
{{ 'allow' | translate }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="permissionRow; context: { nodes: permissions, level: 0 }">
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="text-end mt-3">
|
||||
<button
|
||||
class="btn btn-primary btn-sm px-4"
|
||||
(click)="savePermissions()">
|
||||
{{ 'save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recursive Permission Rows -->
|
||||
<ng-template #permissionRow let-nodes="nodes" let-level="level">
|
||||
<ng-container *ngFor="let node of nodes">
|
||||
|
||||
<tr>
|
||||
<!-- Expand / Collapse -->
|
||||
<td class="text-center">
|
||||
<span
|
||||
*ngIf="node.children?.length || node.buttons?.length"
|
||||
class="expand-icon"
|
||||
(click)="toggleExpand(node)">
|
||||
<i
|
||||
class="bx"
|
||||
[ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'">
|
||||
</i>
|
||||
</span>
|
||||
<ul *ngIf="node.children && node.children.length > 0 && node.expanded">
|
||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
|
||||
</ul>
|
||||
<ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
|
||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ng-template #treeTemplate let-nodes>
|
||||
<ul>
|
||||
<li *ngFor="let node of nodes">
|
||||
</td>
|
||||
|
||||
<!-- Permission Name -->
|
||||
<td
|
||||
class="permission-cell"
|
||||
[style.--level]="level">
|
||||
{{ node.name | translate }}
|
||||
</td>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<td class="text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="node.checked"
|
||||
(change)="toggleNode(node, $event)">
|
||||
{{node.name | translate}}
|
||||
<span (click)="toggleExpand(node)">
|
||||
<span *ngIf="node.children && node.children.length">
|
||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
||||
</span>
|
||||
<span *ngIf="node.buttons && node.buttons.length">
|
||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul *ngIf="node.children && node.children.length > 0 && node.expanded">
|
||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
|
||||
</ul>
|
||||
<ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
|
||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ng-template>
|
||||
<div class="row float-end me-4 mb-3 mt-2 font-edit-13">
|
||||
<button type="button" class="btn btn-primary font-edit-13 px-3 btn-sm" (click)="savePermissions()">{{ 'save' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Children -->
|
||||
<ng-container *ngIf="node.expanded">
|
||||
|
||||
<ng-container *ngIf="node.children?.length">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="permissionRow; context: { nodes: node.children, level: level + 1 }">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="node.buttons?.length">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="permissionRow; context: { nodes: node.buttons, level: level + 1 }">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
|
||||
@ -1,19 +1,43 @@
|
||||
.permission-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.expand-icon {
|
||||
cursor: pointer;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 10px; /* Reduce overall left padding */
|
||||
}
|
||||
.permission-cell {
|
||||
position: relative;
|
||||
padding-left: calc(var(--level) * 22px + 14px);
|
||||
font-weight: 500;
|
||||
background-color: rgba(30, 64, 175, calc(var(--level) * 0.08));
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
padding-left: 5px; /* Reduce space for nested items */
|
||||
margin-left: 5px;
|
||||
}
|
||||
.permission-cell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(var(--level) * 22px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 3px; /* Add slight vertical spacing between items */
|
||||
}
|
||||
.permission-cell {
|
||||
font-size: calc(14px - var(--level) * 0.5px);
|
||||
}
|
||||
|
||||
.permission-table tbody tr:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.permission-table thead th {
|
||||
background-color: #e5e7eb;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.permission-table td:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue