opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1375 Remove TreeViewComponent and associated files from groups component.
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/12/head
Lucas Lara García 2025-01-23 14:27:44 +01:00
parent 8d66494458
commit c063e0f50f
6 changed files with 0 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ogWebconsole/src/app/app.module.ts
View File

@ -52,7 +52,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
import { ToastrModule } from 'ngx-toastr';
import { ShowOrganizationalUnitComponent } from './components/groups/shared/organizational-units/show-organizational-unit/show-organizational-unit.component';
import { MatGridList, MatGridTile } from "@angular/material/grid-list";
import { TreeViewComponent } from './components/groups/shared/tree-view/tree-view.component';
import {
MatNestedTreeNode,
MatTree,
@ -152,7 +151,6 @@ export function HttpLoaderFactory(http: HttpClient) {
ClassroomViewComponent,
ClientViewComponent,
ShowOrganizationalUnitComponent,
TreeViewComponent,
LegendComponent,
ClassroomViewDialogComponent,
SaveFiltersDialogComponent,

4
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -132,10 +132,6 @@
<mat-icon>edit</mat-icon>
<span>{{ 'edit' | translate }}</span>
</button>
<button mat-menu-item (click)="selectedNode && onTreeClick($event, selectedNode)">
<mat-icon matTooltip="{{ 'viewTreeTooltip' | translate }}" matTooltipHideDelay="0">account_tree</mat-icon>
<span>{{ 'viewTreeMenu' | translate }}</span>
</button>
<button mat-menu-item (click)="onDeleteClick($event, selectedNode)">
<mat-icon>delete</mat-icon>
<span>{{ 'delete' | translate }}</span>

8
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -15,7 +15,6 @@ import { CreateClientComponent } from './shared/clients/create-client/create-cli
import { EditOrganizationalUnitComponent } from './shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
import { EditClientComponent } from './shared/clients/edit-client/edit-client.component';
import { ShowOrganizationalUnitComponent } from './shared/organizational-units/show-organizational-unit/show-organizational-unit.component';
import { TreeViewComponent } from './shared/tree-view/tree-view.component';
import { LegendComponent } from './shared/legend/legend.component';
import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
import { ClassroomViewDialogComponent } from './shared/classroom-view/classroom-view-modal';
@ -529,13 +528,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
}
}
onTreeClick(event: MouseEvent, data: TreeNode): void {
event.stopPropagation();
if (data.type !== NodeType.Client) {
this.dialog.open(TreeViewComponent, { data: { data }, width: '800px' });
}
}
openBottomSheet(): void {
this.bottomSheet.open(LegendComponent);
}

40
ogWebconsole/src/app/components/groups/shared/tree-view/tree-view.component.css
View File

@ -1,40 +0,0 @@
mat-content {
padding: 20px;
}
.item-content {
display: flex;
width: 100%;
padding: 10px;
}
.item-content mat-icon {
margin-right: 10px;
}
.tree-invisible {
display: none;
}
.tree ul,
.tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
/*
* This padding sets alignment of the nested nodes.
*/
.tree .mat-nested-tree-node div[role=group] {
padding-left: 40px;
}
/*
* Padding for leaf nodes.
* Leaf nodes need to have padding so as to align with other non-leaf nodes
* under the same parent.
*/
.tree div[role=group] > .mat-tree-node {
padding-left: 40px;
}

54
ogWebconsole/src/app/components/groups/shared/tree-view/tree-view.component.html
View File

@ -1,54 +0,0 @@
<h1 mat-dialog-title>{{ 'viewTreeTitle' | translate }}</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>
<!-- Nodo expandible -->
<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 | translate">
<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>
<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 align="end">
<button mat-button (click)="close()">{{ 'closeButton' | translate }}</button>
</mat-dialog-actions>

70
ogWebconsole/src/app/components/groups/shared/tree-view/tree-view.component.ts
View File

@ -1,70 +0,0 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {NestedTreeControl} from "@angular/cdk/tree";
import {MatTreeNestedDataSource} from "@angular/material/tree";
interface OrganizationalUnit {
id: number;
name: string;
type: string;
clients?: Client[];
children?: OrganizationalUnit[];
}
interface Client {
id: number;
name: string;
ip: string;
mac: string;
serialNumber: string;
}
@Component({
selector: 'app-tree-view',
templateUrl: './tree-view.component.html',
styleUrl: './tree-view.component.css'
})
export class TreeViewComponent implements OnInit {
treeControl = new NestedTreeControl<OrganizationalUnit>(node => node.children);
dataSource = new MatTreeNestedDataSource<OrganizationalUnit>();
constructor(
private dialogRef: MatDialogRef<TreeViewComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}
ngOnInit() {
this.dataSource.data = [this.mapData(this.data.data)];
}
hasChild = (_: number, node: OrganizationalUnit) => (!!node.children && node.children.length > 0 || !!node.clients && node.clients.length > 0);
private mapData(data: any): OrganizationalUnit {
const mapClients = (clients: any[]): Client[] => {
console.log(clients)
return clients.map(client => ({
id: client.id,
name: client.name,
ip: client.ip,
mac: client.mac,
serialNumber: client.serialNumber,
}));
};
const mapChildren = (children: any[]): OrganizationalUnit[] => {
return children.map(child => this.mapData(child));
};
return {
id: data.id,
name: data.name,
type: data.type,
clients: data.clients ? mapClients(data.clients) : [],
children: data.children ? mapChildren(data.children) : []
};
}
close(): void {
this.dialogRef.close();
}
}