56 lines
2.6 KiB
HTML
56 lines
2.6 KiB
HTML
<h1 mat-dialog-title>Visualizar arbol unidad Organizativa</h1>
|
|
|
|
<mat-dialog-content>
|
|
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree">
|
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
|
|
<mat-icon [ngSwitch]="node.type">
|
|
<ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
|
|
<ng-container *ngSwitchCase="'classrooms-group'">meeting_room</ng-container>
|
|
<ng-container *ngSwitchCase="'classroom'">school</ng-container>
|
|
<ng-container *ngSwitchCase="'client'">computer</ng-container>
|
|
<ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
|
|
<ng-container *ngSwitchDefault>help_outline</ng-container>
|
|
</mat-icon>
|
|
{{node.name}}
|
|
</mat-tree-node>
|
|
<!-- This is the tree node template for expandable nodes -->
|
|
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
|
|
<div class="mat-tree-node">
|
|
<button mat-icon-button matTreeNodeToggle
|
|
[attr.aria-label]="'Toggle ' + node.name">
|
|
<mat-icon class="mat-icon-rtl-mirror">
|
|
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
|
|
</mat-icon>
|
|
</button>
|
|
<div class="item-content">
|
|
<mat-icon [ngSwitch]="node.type">
|
|
<ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
|
|
<ng-container *ngSwitchCase="'classrooms-group'">meeting_room</ng-container>
|
|
<ng-container *ngSwitchCase="'classroom'">school</ng-container>
|
|
<ng-container *ngSwitchCase="'client'">computer</ng-container>
|
|
<ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
|
|
<ng-container *ngSwitchDefault>help_outline</ng-container>
|
|
</mat-icon>
|
|
{{node.name}}
|
|
</div>
|
|
</div>
|
|
<!-- There is inline padding applied to this div using styles.
|
|
This padding value depends on the mat-icon-button width. -->
|
|
<div [class.tree-invisible]="!treeControl.isExpanded(node)"
|
|
role="group">
|
|
<ng-container matTreeNodeOutlet></ng-container>
|
|
<mat-list *ngIf="node.clients">
|
|
<mat-list-item *ngFor="let client of node.clients">
|
|
<mat-icon matListItemIcon>computer</mat-icon>
|
|
<span matListItemTitle>{{ client.name }}</span>
|
|
<span>{{ client.ip }} | {{ client.mac }}</span>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</mat-nested-tree-node>
|
|
</mat-tree>
|
|
</mat-dialog-content>
|
|
<mat-dialog-actions>
|
|
<button mat-button (click)="close()">Cerrar</button>
|
|
</mat-dialog-actions>
|