revamped the code and design for permission management screen
atif118-mfsys
4 weeks ago
parent
ee6138d555
commit
d872c5fd65
@ -1,95 +1,126 @@
|
|||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row mt-2 mb-2">
|
|
||||||
<div class="col-lg-6">
|
<!-- User Selection -->
|
||||||
<div class="col-6">
|
<div class="card mb-3">
|
||||||
<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">
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<form [formGroup]="permission">
|
<form [formGroup]="permission">
|
||||||
|
|
||||||
<div class="form-group row mb-2">
|
<div class="row mb-2 align-items-center">
|
||||||
<label for="userCode" class="form-label font-edit-13">{{ 'userCode' |
|
<label class="col-sm-2 col-form-label pe-1">
|
||||||
translate
|
{{ 'userCode' | translate }}
|
||||||
}}</label>
|
</label>
|
||||||
<div class="input-group">
|
|
||||||
<select class="form-select" id="userCode" formControlName="userCode" (change)="onUserChange()">
|
<div class="col-sm-4">
|
||||||
<option selected disabled value="">{{ 'choose' |
|
<select
|
||||||
translate }}
|
class="form-select"
|
||||||
|
formControlName="userCode"
|
||||||
|
(change)="onUserChange()">
|
||||||
|
<option value="" disabled selected>
|
||||||
|
{{ 'choose' | translate }}
|
||||||
</option>
|
</option>
|
||||||
<option *ngFor="let user of users" [value]="user.userId">
|
<option *ngFor="let user of users" [value]="user.userId">
|
||||||
{{user.userName}}
|
{{ user.userName }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Permission Table -->
|
||||||
<div class="card" *ngIf="showPermissions">
|
<div class="card" *ngIf="showPermissions">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="card-title">{{ 'permissions' | translate}}</h4>
|
|
||||||
|
<h4 class="card-title">
|
||||||
|
{{ 'permissions' | translate }}
|
||||||
|
</h4>
|
||||||
<hr>
|
<hr>
|
||||||
<ul>
|
|
||||||
<li *ngFor="let node of permissions">
|
<table class="table table-bordered table-sm align-middle permission-table">
|
||||||
<input
|
<thead class="table-light">
|
||||||
type="checkbox"
|
<tr>
|
||||||
[checked]="node.checked"
|
<th style="width: 40px;"></th>
|
||||||
(change)="toggleNode(node, $event)">
|
<th>{{ 'Permissions' | translate }}</th>
|
||||||
{{node.name | translate}}
|
<th style="width: 120px;" class="text-center">
|
||||||
<span (click)="toggleExpand(node)">
|
{{ 'allow' | translate }}
|
||||||
<span *ngIf="node.children && node.children.length">
|
</th>
|
||||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
</tr>
|
||||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
</thead>
|
||||||
</span>
|
|
||||||
|
<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>
|
</span>
|
||||||
<ul *ngIf="node.children && node.children.length > 0 && node.expanded">
|
</td>
|
||||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
|
|
||||||
</ul>
|
<!-- Permission Name -->
|
||||||
<ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
|
<td
|
||||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
|
class="permission-cell"
|
||||||
</ul>
|
[style.--level]="level">
|
||||||
</li>
|
{{ node.name | translate }}
|
||||||
</ul>
|
</td>
|
||||||
|
|
||||||
<ng-template #treeTemplate let-nodes>
|
<!-- Checkbox -->
|
||||||
<ul>
|
<td class="text-center">
|
||||||
<li *ngFor="let node of nodes">
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
[checked]="node.checked"
|
[checked]="node.checked"
|
||||||
(change)="toggleNode(node, $event)">
|
(change)="toggleNode(node, $event)">
|
||||||
{{node.name | translate}}
|
</td>
|
||||||
<span (click)="toggleExpand(node)">
|
</tr>
|
||||||
<span *ngIf="node.children && node.children.length">
|
|
||||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
<!-- Children -->
|
||||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
<ng-container *ngIf="node.expanded">
|
||||||
</span>
|
|
||||||
<span *ngIf="node.buttons && node.buttons.length">
|
<ng-container *ngIf="node.children?.length">
|
||||||
<span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
|
<ng-container
|
||||||
<span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
|
*ngTemplateOutlet="permissionRow; context: { nodes: node.children, level: level + 1 }">
|
||||||
</span>
|
</ng-container>
|
||||||
</span>
|
</ng-container>
|
||||||
<ul *ngIf="node.children && node.children.length > 0 && node.expanded">
|
|
||||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
|
<ng-container *ngIf="node.buttons?.length">
|
||||||
</ul>
|
<ng-container
|
||||||
<ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
|
*ngTemplateOutlet="permissionRow; context: { nodes: node.buttons, level: level + 1 }">
|
||||||
<ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ng-container>
|
||||||
</li>
|
|
||||||
</ul>
|
</ng-container>
|
||||||
</ng-template>
|
|
||||||
<div class="row float-end me-4 mb-3 mt-2 font-edit-13">
|
</ng-container>
|
||||||
<button type="button" class="btn btn-primary font-edit-13 px-3 btn-sm" (click)="savePermissions()">{{ 'save' | translate }}</button>
|
</ng-template>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -1,19 +1,43 @@
|
|||||||
|
.permission-table td {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
.expand-icon {
|
||||||
margin: 5px 0;
|
cursor: pointer;
|
||||||
}
|
color: #1e40af;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
.permission-cell {
|
||||||
list-style-type: none;
|
position: relative;
|
||||||
margin: 0;
|
padding-left: calc(var(--level) * 22px + 14px);
|
||||||
padding-left: 10px; /* Reduce overall left padding */
|
font-weight: 500;
|
||||||
}
|
background-color: rgba(30, 64, 175, calc(var(--level) * 0.08));
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
ul ul {
|
.permission-cell::before {
|
||||||
padding-left: 5px; /* Reduce space for nested items */
|
content: '';
|
||||||
margin-left: 5px;
|
position: absolute;
|
||||||
}
|
left: calc(var(--level) * 22px);
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background-color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
.permission-cell {
|
||||||
margin-bottom: 3px; /* Add slight vertical spacing between items */
|
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