feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,145 +6,253 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="layout-row align-end gap-2px responsive-column container m-b-0">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="editRoles(); backupCheckValues()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'"
|
||||
>
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.text.Edit Role' | translate }}
|
||||
</button>
|
||||
|
||||
@if (!isRoleEnable(rolePermissionService.disabled)) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="danger"
|
||||
(click)="disableRolesConfirmation()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'"
|
||||
>
|
||||
<fa-icon icon="lock" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Disable' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
}
|
||||
|
||||
@if (isRoleEnable(rolePermissionService.disabled)) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="enableRolesConfirmation()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'"
|
||||
>
|
||||
<fa-icon icon="lock-open" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Enable' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
}
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
(click)="deleteRole()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container m-b-0">
|
||||
<mat-card class="mat-elevation-z8 role-details-card">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-40 flex-lt-md-50 header">
|
||||
<b>{{ 'labels.inputs.Name' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div class="flex-60 flex-lt-md-50">
|
||||
{{ rolePermissionService.name }}
|
||||
</div>
|
||||
|
||||
<div class="flex-40 flex-lt-md-50 header">
|
||||
<b>{{ 'labels.inputs.Role Description' | translate }}:</b>
|
||||
</div>
|
||||
|
||||
<div class="flex-60 flex-lt-md-50">
|
||||
{{ rolePermissionService.description }}
|
||||
</div>
|
||||
<div class="vr-container">
|
||||
<!-- Top Bar -->
|
||||
<div class="vr-topbar">
|
||||
<div class="vr-topbar__left">
|
||||
<i class="fas fa-key vr-topbar__icon"></i>
|
||||
<div>
|
||||
<h2 class="vr-topbar__title">{{ rolePermissionService.name }}</h2>
|
||||
@if (rolePermissionService.description) {
|
||||
<span class="vr-topbar__desc">{{ rolePermissionService.description }}</span>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vr-topbar__actions">
|
||||
<button mat-flat-button color="primary" class="vr-btn vr-btn--edit"
|
||||
(click)="editRoles(); backupCheckValues()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.text.Edit Role' | translate }}
|
||||
</button>
|
||||
@if (!isRoleEnable(rolePermissionService.disabled)) {
|
||||
<button mat-stroked-button class="vr-btn vr-btn--disable"
|
||||
(click)="disableRolesConfirmation()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'">
|
||||
<fa-icon icon="lock" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Disable' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (isRoleEnable(rolePermissionService.disabled)) {
|
||||
<button mat-flat-button color="primary" class="vr-btn vr-btn--enable"
|
||||
(click)="enableRolesConfirmation()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'">
|
||||
<fa-icon icon="lock-open" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Enable' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
}
|
||||
<button mat-stroked-button class="vr-btn vr-btn--delete"
|
||||
(click)="deleteRole()"
|
||||
[disabled]="rolePermissionService.name === 'Super user'">
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }} {{ 'labels.inputs.Role' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container m-b-20">
|
||||
<mat-card>
|
||||
<ng-container>
|
||||
<div class="permission-selected layout-row">
|
||||
<div class="flex-75">
|
||||
<h3>
|
||||
{{ 'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
|
||||
</h3>
|
||||
<!-- Permissions Card -->
|
||||
<div class="vr-card">
|
||||
<div class="vr-card__header">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h3>{{ 'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong></h3>
|
||||
@if (!isDisabled) {
|
||||
<div class="vr-card__header-actions">
|
||||
<button mat-flat-button color="primary" class="vr-btn-sm" (click)="selectAll()">
|
||||
{{ 'labels.buttons.Select All' | translate }}
|
||||
</button>
|
||||
<button mat-stroked-button class="vr-btn-sm vr-btn-sm--outline" (click)="deselectAll()">
|
||||
{{ 'labels.buttons.Deselect All' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (!isDisabled) {
|
||||
<div class="flex-25 layout-row layout-xs-column layout-align-end gap-5px select-deselect">
|
||||
<button mat-raised-button color="primary" (click)="selectAll()">
|
||||
{{ 'labels.buttons.Select All' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="default" (click)="deselectAll()">
|
||||
{{ 'labels.buttons.Deselect All' | translate }}
|
||||
</button>
|
||||
<div class="vr-permissions">
|
||||
<!-- Grouped Category List (Left) -->
|
||||
<div class="vr-categories">
|
||||
@for (group of roleGroups; track group.name) {
|
||||
<div class="vr-group">
|
||||
<div class="vr-group__header" (click)="toggleGroup(group)">
|
||||
<i class="fas {{ group.icon }} vr-group__icon"></i>
|
||||
<span class="vr-group__name">{{ group.name }}</span>
|
||||
<span class="vr-group__count">{{ getGroupPermCount(group) }}</span>
|
||||
@if (!isDisabled) {
|
||||
<button class="vr-group__select-btn vr-group__select-btn--check" (click)="selectAllGroup(group); $event.stopPropagation()" title="Select all in {{ group.name }}">
|
||||
<i class="fas fa-check-double"></i>
|
||||
</button>
|
||||
<button class="vr-group__select-btn vr-group__select-btn--clear" (click)="deselectAllGroup(group); $event.stopPropagation()" title="Deselect all in {{ group.name }}">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
<i class="fas vr-group__chevron" [class.fa-chevron-down]="group.expanded" [class.fa-chevron-right]="!group.expanded"></i>
|
||||
</div>
|
||||
@if (group.expanded) {
|
||||
<div class="vr-group__items">
|
||||
@for (cat of group.categories; track cat) {
|
||||
<div class="vr-category-item"
|
||||
[class.vr-category-item--active]="selectedItem === cat"
|
||||
(click)="showPermissions(cat)">
|
||||
<span class="vr-category-item__name">{{ formatName(cat) }}</span>
|
||||
@if (!isDisabled) {
|
||||
<button class="vr-category-item__sel" (click)="selectAllCategory(cat); $event.stopPropagation()" title="Select all">
|
||||
<i class="fas fa-check"></i>
|
||||
</button>
|
||||
<button class="vr-category-item__desel" (click)="deselectAllCategory(cat); $event.stopPropagation()" title="Deselect all">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
<span class="vr-category-item__count">{{ getCatPermCount(cat) }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="layout-row">
|
||||
<div class="layout-column flex-30">
|
||||
<mat-list>
|
||||
@for (grouping of groupings; track grouping) {
|
||||
<mat-list-item
|
||||
[ngClass]="selectedItem === grouping ? 'active' : 'inactive'"
|
||||
(click)="showPermissions(grouping)"
|
||||
>
|
||||
<span class="grouping-name">
|
||||
{{ formatName(grouping) }}
|
||||
</span>
|
||||
</mat-list-item>
|
||||
}
|
||||
</mat-list>
|
||||
</div>
|
||||
<!-- Permission Checkboxes (Right) -->
|
||||
<div class="vr-checkboxes">
|
||||
<form [formGroup]="formGroup" (submit)="submit()">
|
||||
|
||||
<mat-divider [vertical]="true"></mat-divider>
|
||||
|
||||
<div class="flex-70 layout-column list-permission">
|
||||
<form [formGroup]="formGroup" (submit)="submit()">
|
||||
@for (permission of permissions.permissions; track permission) {
|
||||
<div class="display-permissions">
|
||||
<div formArrayName="roster">
|
||||
<div [formGroupName]="permission.id">
|
||||
<mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
|
||||
{{ permissionName(permission.code) }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<!-- Sub-grouped view for large categories -->
|
||||
@if (permissionSubGroups.length > 0) {
|
||||
@for (subGroup of permissionSubGroups; track subGroup.entity) {
|
||||
<div class="vr-subgroup">
|
||||
<div class="vr-subgroup__header" (click)="toggleSubGroup(subGroup)">
|
||||
<i class="fas" [class.fa-chevron-down]="subGroup.expanded" [class.fa-chevron-right]="!subGroup.expanded"></i>
|
||||
<span class="vr-subgroup__name">{{ getEntityDisplayName(subGroup.entity) }}</span>
|
||||
<span class="vr-subgroup__count">{{ getSubGroupCount(subGroup) }}</span>
|
||||
@if (!isDisabled) {
|
||||
<button type="button" class="vr-subgroup__select" (click)="selectAllSubGroup(subGroup); $event.stopPropagation()" title="Select all">
|
||||
<i class="fas fa-check-double"></i>
|
||||
</button>
|
||||
<button type="button" class="vr-subgroup__deselect" (click)="deselectAllSubGroup(subGroup); $event.stopPropagation()" title="Deselect all">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@if (subGroup.expanded) {
|
||||
<div class="vr-subgroup__columns">
|
||||
<div class="vr-subgroup__col">
|
||||
<div class="vr-subgroup__col-label">
|
||||
<span>Maker</span>
|
||||
@if (!isDisabled && subGroup.makerPerms.length > 0) {
|
||||
<button type="button" class="vr-col-btn vr-col-btn--select" (click)="selectAllMaker(subGroup.makerPerms)" title="Select all maker">
|
||||
<i class="fas fa-check"></i> All
|
||||
</button>
|
||||
<button type="button" class="vr-col-btn vr-col-btn--clear" (click)="deselectAllMaker(subGroup.makerPerms)" title="Deselect all maker">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@for (permission of subGroup.makerPerms; track permission) {
|
||||
<div class="vr-checkbox-item" formArrayName="roster">
|
||||
<div [formGroupName]="permission.id">
|
||||
<mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
|
||||
{{ permissionName(permission.code) }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (subGroup.makerPerms.length === 0) {
|
||||
<span class="vr-subgroup__empty">—</span>
|
||||
}
|
||||
</div>
|
||||
<div class="vr-subgroup__col vr-subgroup__col--checker">
|
||||
<div class="vr-subgroup__col-label vr-subgroup__col-label--checker">
|
||||
<span>Checker</span>
|
||||
@if (!isDisabled && subGroup.checkerPerms.length > 0) {
|
||||
<button type="button" class="vr-col-btn vr-col-btn--select-warn" (click)="selectAllChecker(subGroup.checkerPerms)" title="Select all checker">
|
||||
<i class="fas fa-check"></i> All
|
||||
</button>
|
||||
<button type="button" class="vr-col-btn vr-col-btn--clear" (click)="deselectAllChecker(subGroup.checkerPerms)" title="Deselect all checker">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@for (permission of subGroup.checkerPerms; track permission) {
|
||||
<div class="vr-checkbox-item" formArrayName="roster">
|
||||
<div [formGroupName]="permission.id">
|
||||
<mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
|
||||
{{ permissionName(permission.code) }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (subGroup.checkerPerms.length === 0) {
|
||||
<span class="vr-subgroup__empty">—</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- Flat maker/checker columns for small categories -->
|
||||
<div class="vr-flat-columns">
|
||||
<div class="vr-flat-col">
|
||||
<div class="vr-flat-col__label">
|
||||
<span>Maker</span>
|
||||
@if (!isDisabled && flatMakerPerms.length > 0) {
|
||||
<button type="button" class="vr-col-btn vr-col-btn--select" (click)="selectAllMaker(flatMakerPerms)" title="Select all maker">
|
||||
<i class="fas fa-check"></i> All
|
||||
</button>
|
||||
<button type="button" class="vr-col-btn vr-col-btn--clear" (click)="deselectAllMaker(flatMakerPerms)" title="Deselect all">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@for (permission of flatMakerPerms; track permission) {
|
||||
<div class="vr-checkbox-item" formArrayName="roster">
|
||||
<div [formGroupName]="permission.id">
|
||||
<mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
|
||||
{{ permissionName(permission.code) }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="vr-flat-col vr-flat-col--checker">
|
||||
<div class="vr-flat-col__label vr-flat-col__label--checker">
|
||||
<span>Checker</span>
|
||||
@if (!isDisabled && flatCheckerPerms.length > 0) {
|
||||
<button type="button" class="vr-col-btn vr-col-btn--select-warn" (click)="selectAllChecker(flatCheckerPerms)" title="Select all checker">
|
||||
<i class="fas fa-check"></i> All
|
||||
</button>
|
||||
<button type="button" class="vr-col-btn vr-col-btn--clear" (click)="deselectAllChecker(flatCheckerPerms)" title="Deselect all">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@for (permission of flatCheckerPerms; track permission) {
|
||||
<div class="vr-checkbox-item" formArrayName="roster">
|
||||
<div [formGroupName]="permission.id">
|
||||
<mat-checkbox name="cp" id="{{ permission.code }}" formControlName="selected">
|
||||
{{ permissionName(permission.code) }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (flatCheckerPerms.length === 0) {
|
||||
<span class="vr-subgroup__empty">No checker permissions</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@if (!isDisabled) {
|
||||
<div class="layout-row layout-align-center gap-10px layout-xs-column">
|
||||
<mat-card-actions>
|
||||
<button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="submit()">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
<div class="vr-card__footer">
|
||||
<button type="button" mat-stroked-button class="vr-btn-action vr-btn-action--cancel" (click)="cancel(); restoreCheckboxes()">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-flat-button color="primary" class="vr-btn-action vr-btn-action--submit" (click)="submit()">
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user