|
aclService
|
Type : unknown
|
Default value : inject(AclService)
|
|
|
|
selectedNode
|
Type : unknown
|
Default value : signal<AclRuleFlatTreeNode | undefined>(undefined)
|
|
|
|
selectedTab
|
Type : unknown
|
Default value : signal<'Rules' | 'Editor'>('Rules')
|
|
|
import { AclService } from '@allianz/taly-acl/angular';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
import { NxHeadlineComponent } from '@allianz/ng-aquila/headline';
import { NxIconModule } from '@allianz/ng-aquila/icon';
import { AclHierarchicalInspectorContentModule } from '../../lib/hierarchical-inspector/hierarchical-inspector.module';
import { AclRuleFlatTreeNode } from '../../lib/hierarchical-inspector/rules/rules.component';
@Component({
selector: 'acl-hierarchical-inspector-view',
templateUrl: './acl-hierarchical-inspector-view.component.html',
styleUrls: ['./acl-hierarchical-inspector-view.component.scss'],
imports: [CommonModule, NxHeadlineComponent, NxIconModule, AclHierarchicalInspectorContentModule],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AclHierarchicalInspectorViewComponent {
selectedTab = signal<'Rules' | 'Editor'>('Rules');
selectedNode = signal<AclRuleFlatTreeNode | undefined>(undefined);
aclService = inject(AclService);
openRuleEditor(value: AclRuleFlatTreeNode) {
this.selectedTab.set('Editor');
this.selectedNode.set(value);
}
}
<h4 class="acl-hierarchy-view_headline" nxHeadline="subsection-xsmall">ACL Hierarchy</h4>
<div class="tab-group-nav">
<button
class="tab-btn"
[ngClass]="{ 'tab-btn--active': selectedTab() === 'Rules' }"
(click)="selectedTab.set('Rules')"
>
Rules
</button>
@if (selectedTab() === 'Editor') {
<button
class="tab-btn"
[ngClass]="{ 'tab-btn--active': selectedTab() === 'Editor' }"
(click)="selectedTab.set('Editor')"
>
<div class="editor-tab">
Editor
<button class="nx-margin-left-2xs close-button" (click)="selectedTab.set('Rules')">
<nx-icon name="close" size="auto"></nx-icon>
</button>
</div>
</button>
}
</div>
<div class="tab-group">
@if (selectedTab() === 'Rules') {
<div class="tab">
<acl-rules
[rules]="(aclService.currentPolicy$ | async)!"
(openRuleEditor)="openRuleEditor($event)"
></acl-rules>
</div>
} @if (selectedTab() === 'Editor') {
<div class="tab">
<acl-rule-editor [rule]="selectedNode()!"></acl-rule-editor>
</div>
}
</div>
@use '../../lib/inspector.shared' as *;
@use '../../lib/inspector.colors' as *;
:host {
display: flex !important;
flex-direction: column;
height: 100%;
color: $debug-color-text;
font-size: 13px;
line-height: 16px;
}
.acl-hierarchy-view_headline {
border-bottom: 1px solid var(--ui-03, #ececec);
padding-bottom: 8px;
margin-bottom: 0 !important;
}
.tab-group-nav {
background-color: $debug-color-dark;
padding-top: 8px;
}
.tab-btn {
@include base-button-styles;
display: inline-block;
padding: 8px 16px;
font-size: 16px;
line-height: 18px;
font-weight: 700;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-right: 1px;
color: $debug-color-text;
&:hover,
&--active {
background-color: $debug-color-light;
}
}
.tab-group {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
background-color: $debug-color-light;
}
.tab {
display: block;
}
.editor-tab {
display: flex;
align-items: center;
}
.close-button {
display: flex;
cursor: pointer;
padding: 0;
background-color: $debug-color-light;
border: none;
color: $debug-color-text;
border-radius: 3px;
transition: background-color 0.3s ease;
margin-right: -8px;
&:hover {
background-color: $debug-color-dark-hover;
}
}
Legend
Html element with directive