You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
aConnect-UX/src/app/menu/menu.component.html

86 lines
4.7 KiB
HTML

<div class="page-content">
<div class="container-fluid">
<!-- User Selection Card -->
<div class="card shadow-sm mb-4">
<div class="card-body">
<form [formGroup]="permission" class="row align-items-center">
<label class="col-md-2 col-form-label fw-semibold">
{{ "userCode" | translate }}
</label>
<div class="col-md-6">
<ng-select class="form-select" formControlName="userCode" [items]="users" bindLabel="userName"
bindValue="userId" placeholder="{{ 'choose' | translate }}" (change)="onUserChange()"
[searchable]="true" [clearable]="false" [dropdownPosition]="'auto'" [virtualScroll]="true"
[bufferAmount]="20" appendTo="body">
<!-- Custom template for dropdown options -->
<ng-template ng-option-tmp let-item="item">
<div class="d-flex flex-column">
<span class="fw-medium">{{ item.userName }}</span>
<small class="text-muted">{{ item.userId }}</small>
</div>
</ng-template>
<!-- Optional: Custom template for selected item -->
<ng-template ng-label-tmp let-item="item">
<span>{{ item.userName }} ({{ item.userId }})</span>
</ng-template>
</ng-select>
</div>
</form>
</div>
</div>
<div class="card shadow-sm" *ngIf="showPermissions">
<div class="card-body">
<h4 class="card-title mb-3">{{ "menu" | translate }}</h4>
<div class="table-responsive scrollable-table">
<table class="table table-hover table-bordered table-sm permission-table">
<thead class="table-light">
<tr>
<th style="width: 50px">#</th>
<th>{{ "type" | translate }}</th>
<th style="width: 100px;" class="text-center">{{ "allow" | translate }}</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let node of permissions">
<ng-container *ngIf="node.name === 'menu'">
<tr>
<td class="text-muted">{{ "one" | translate }}</td>
<td>{{ "ACCOUNT_TO_ACCOUNT" | translate }}</td>
<td class="text-center"><input type="checkbox"
[(ngModel)]="node.accountToAccount" /></td>
</tr>
<tr>
<td class="text-muted">{{ "two" | translate }}</td>
<td>{{ "GL_TO_GL" | translate }}</td>
<td class="text-center"><input type="checkbox" [(ngModel)]="node.glToGl" /></td>
</tr>
<tr>
<td class="text-muted">{{ "three" | translate }}</td>
<td>{{ "ACCOUNT_TO_GL" | translate }}</td>
<td class="text-center"><input type="checkbox" [(ngModel)]="node.accountToGl" />
</td>
</tr>
<tr>
<td class="text-muted">{{ "four" | translate }}</td>
<td>{{ "GL_TO_ACCOUNT" | translate }}</td>
<td class="text-center"><input type="checkbox" [(ngModel)]="node.glToAccount" />
</td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
<div class="text-end mt-3">
<button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
{{ "save" | translate }}
</button>
</div>
</div>
</div>
</div>