From 87f436624cfdce8255001d7d66bfdfd789b56168 Mon Sep 17 00:00:00 2001 From: Lucas Lara Date: Mon, 13 Jan 2025 11:29:16 +0100 Subject: [PATCH] refs #1321 Unit's view discarded. Tree view becomes main view. --- .../components/groups/groups.component.css | 28 +- .../components/groups/groups.component.html | 488 ++++++++---------- .../app/components/groups/groups.component.ts | 57 +- 3 files changed, 268 insertions(+), 305 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index d99a3ac..1120910 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -487,12 +487,6 @@ button[mat-raised-button] { flex-direction: column; } -.view-toggle-container { - display: flex; - gap: 1rem; - margin-bottom: 1rem; -} - .clients-grid { display: flex; flex-wrap: wrap; @@ -518,23 +512,10 @@ button[mat-raised-button] { margin-bottom: 0.5rem; } -.header-actions-container { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; -} - .back-button { flex-shrink: 0; } -.view-toggle-container { - display: flex; - gap: 1rem; - align-items: center; -} - .filters-container { display: flex; flex-wrap: wrap; @@ -595,10 +576,17 @@ button[mat-raised-button] { margin-top: 4px; } +.clients-view-header { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; + align-items: center; +} + .clients-title-name { font-size: x-large; display: block; - margin-bottom: 1.5rem; + padding: 1rem 1rem 1rem 15px; } .no-clients-info { diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index 08ddb74..4a6313d 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -56,214 +56,124 @@ - -
- - - - apartment {{ unidad.name }} - - - -
- + + {{ + node.type === 'organizational-unit' ? 'apartment' + : node.type === 'classrooms-group' ? 'meeting_room' + : node.type === 'classroom' ? 'school' + : node.type === 'clients-group' ? 'lan' + : node.type === 'client' ? 'computer' + : 'group' + }} + + {{ node.name }} + + + + + + {{ + node.type === 'organizational-unit' ? 'apartment' + : node.type === 'classrooms-group' ? 'meeting_room' + : node.type === 'classroom' ? 'school' + : node.type === 'clients-group' ? 'lan' + : node.type === 'client' ? 'computer' + : 'group' + }} + + {{ node.name }} + + - IP: {{ node.ip }} + + + + +
+ + + + + + + + + + + + + + + + + + +
+
+ {{ 'clients' | translate }} + {{ selectedNode?.name }} + +
+ +
- - - - - - - - - - -
- - - - -
- -
- - -
-
-
- -
-

{{ selectedUnidad?.name }}

- - - - - {{ - node.type === 'organizational-unit' ? 'apartment' - : node.type === 'classrooms-group' ? 'meeting_room' - : node.type === 'classroom' ? 'school' - : node.type === 'clients-group' ? 'lan' - : node.type === 'client' ? 'computer' - : 'group' - }} - - {{ node.name }} - - - - - - {{ - node.type === 'organizational-unit' ? 'apartment' - : node.type === 'classrooms-group' ? 'meeting_room' - : node.type === 'classroom' ? 'school' - : node.type === 'clients-group' ? 'lan' - : node.type === 'client' ? 'computer' - : 'group' - }} - - {{ node.name }} - - - IP: {{ node.ip }} - - - -
- +
+ +
+
+
+ Client Icon - - - - - - - - - - - - +
+ {{ client.name }} + {{ client.ip }} + {{ client.mac }} - -
- {{ 'clients' | translate }} - {{ selectedNode?.name ? ' ' + selectedNode?.name : ' ' + selectedUnidad?.name }} - - - - -
- -
-
-
- Client Icon - -
- {{ client.name }} - {{ client.ip }} - {{ client.mac }} - -
- - - - - - -
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ 'status' | translate }} - Client Icon - {{ 'sync' | translate }} +
-
{{ 'name' | translate }} -
-
{{ client.name }}
-
{{ client.ip }}
-
{{ client.mac }}
-
- 		OG Live {{ (client.ogLive?.filename || '').slice(0, 15) }}{{ (client.ogLive?.filename?.length > 15) ? '...' : '' }} {{ 'maintenance' | translate }} {{ client.maintenance }} {{ 'subnet' | translate }} {{ client.subnet }} {{ 'pxeTemplate' | translate }} {{ client.template?.name }} {{ 'parent' | translate }} {{ client.parentName }} {{ 'actions' | translate }} - - - - - - -
- +
+
+
-
+ +
+ + + + + - - -
- error_outline - {{ 'noClients' | translate }} + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ 'status' | translate }} + Client Icon + {{ 'sync' | translate }} + + + + {{ 'name' | translate }} +
+
{{ client.name }}
+
{{ client.ip }}
+
{{ client.mac }}
+
+ 		OG Live {{ (client.ogLive?.filename || '').slice(0, 15) }}{{ (client.ogLive?.filename?.length > 15) ? '...' : '' }} {{ 'maintenance' | translate }} {{ client.maintenance }} {{ 'subnet' | translate }} {{ client.subnet }} {{ 'pxeTemplate' | translate }} {{ client.template?.name }} {{ 'parent' | translate }} {{ client.parentName }} {{ 'actions' | translate }} + + + + + + + +
+
- +
+
+ + + +
+ +
+
+ error_outline + {{ 'noClients' | translate }}
+ +
+ diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index f8df428..c9b8630 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -43,6 +43,7 @@ export class GroupsComponent implements OnInit, OnDestroy { selectedUnidad: UnidadOrganizativa | null = null; selectedDetail: UnidadOrganizativa | null = null; loading = false; + isLoadingClients: boolean = false; searchTerm = ''; treeControl: FlatTreeControl; treeFlattener: MatTreeFlattener; @@ -112,6 +113,7 @@ export class GroupsComponent implements OnInit, OnDestroy { this.search(); this.getFilters(); this.updateGridCols(); + this.loadOrganizationalUnits(); window.addEventListener('resize', this.updateGridCols); this.selectedClients.filterPredicate = (client: Client, filter: string): boolean => { @@ -141,6 +143,40 @@ export class GroupsComponent implements OnInit, OnDestroy { '@id': node['@id'], }); + private loadOrganizationalUnits(): void { + this.loading = true; + this.isLoadingClients = true; + this.dataService.getOrganizationalUnits().subscribe( + (data) => { + this.organizationalUnits = data; + this.loading = false; + + if (this.organizationalUnits.length > 0) { + const treeData = this.organizationalUnits.map((unidad) => this.convertToTreeData(unidad)); + this.treeDataSource.data = treeData.flat(); + + this.isTreeViewActive = true; + + const firstNode = this.treeDataSource.data[0]; + if (firstNode) { + this.selectedNode = firstNode; + this.fetchClientsForNode(firstNode); + } + } else { + this.toastr.info('No existen unidades organizativas'); + this.isTreeViewActive = false; + this.isLoadingClients = false; + return; + } + }, + (error) => { + console.error('Error fetching organizational units', error); + this.loading = false; + } + ); + } + + toggleView(view: 'card' | 'list'): void { this.currentView = view; } @@ -202,20 +238,6 @@ export class GroupsComponent implements OnInit, OnDestroy { ); } - onSelectUnidad(unidad: UnidadOrganizativa): void { - this.selectedUnidad = unidad; - this.selectedDetail = unidad; - this.selectedClients.data = this.collectAllClients(unidad); - this.selectedClientsOriginal = [...this.selectedClients.data]; - this.loadChildrenAndClients(unidad.id).then((fullData) => { - const treeData = this.convertToTreeData(fullData); - this.treeDataSource.data = treeData[0]?.children || []; - }); - this.isTreeViewActive = true; - - console.log('Selected unidad:', unidad); - } - private collectAllClients(node: UnidadOrganizativa): Client[] { let clients = (node.clients || []).map(client => ({ ...client, @@ -277,13 +299,14 @@ export class GroupsComponent implements OnInit, OnDestroy { private fetchClientsForNode(node: TreeNode): void { console.log('Node:', node); + this.isLoadingClients = true; this.http.get(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}`).subscribe({ next: (response) => { this.selectedClients.data = response['hydra:member']; - this.loading = false; + this.isLoadingClients = false; }, error: () => { - this.loading = false; + this.isLoadingClients = false; } }); } @@ -502,7 +525,7 @@ export class GroupsComponent implements OnInit, OnDestroy { iniciarTour(): void { this.joyrideService.startTour({ - steps: ['groupsTitleStepText', 'filtersPanelStep', 'organizationalUnitsStep', 'addStep', 'keyStep', 'unitStep', 'elementsStep', 'tabsStep'], + steps: ['groupsTitleStepText', 'filtersPanelStep', 'addStep', 'keyStep', 'tabsStep'], showPrevButton: true, themeColor: '#3f51b5', });