From 604327f453d071242a30a0608eb8fc446b1f5f0b Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Mon, 15 Jul 2024 08:22:31 +0200 Subject: [PATCH] refs #435. UX improvements --- .../classroom-view.component.css | 19 +++ .../classroom-view.component.ts | 3 +- .../client-view/client-view.component.ts | 30 +++-- .../create-client.component.html | 5 +- .../create-client/create-client.component.ts | 8 +- .../edit-client/edit-client.component.css | 20 +++ .../edit-client/edit-client.component.html | 19 +-- .../edit-client/edit-client.component.ts | 6 +- .../components/groups/groups.component.html | 123 ++++++++++++------ .../app/components/groups/groups.component.ts | 7 +- .../show-organizational-unit.component.ts | 3 +- 11 files changed, 170 insertions(+), 73 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css index 47667ca..ffb644b 100644 --- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css +++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css @@ -57,3 +57,22 @@ mat-card-title { margin: 0; } +.loading-spinner { + display: block; + margin: 0 auto; +} + +.mat-dialog-content.loading { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.client-form { + width: 100%; +} + +.form-field { + width: 100%; +} diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts index 70f244a..1a6e498 100644 --- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts +++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts @@ -20,7 +20,7 @@ interface GroupedClients { }) export class ClassroomViewComponent implements OnInit { @Input() clients: any[] = []; - @Input() pcInTable: number = 3; + @Input() pcInTable: number = 5; groupedClients: GroupedClients[] = []; constructor(public dialog: MatDialog) {} @@ -43,6 +43,7 @@ export class ClassroomViewComponent implements OnInit { return acc; }, {}); + console.log(grouped) this.groupedClients = Object.keys(grouped).map(ouName => ({ organizationalUnitName: ouName, clientRows: this.chunkArray(grouped[ouName], this.pcInTable) diff --git a/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts b/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts index dda2b48..63ccb03 100644 --- a/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts +++ b/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts @@ -17,12 +17,14 @@ export class ClientViewComponent { {property: 'MAC', value: this.data.client.mac}, {property: 'Nº de serie', value: this.data.client.serialNumber}, {property: 'Netiface', value: this.data.client.netiface}, + {property: 'Perfil hardware', value: this.data.client.hardwareProfile ? this.data.client.hardwareProfile.description : ''}, + {property: 'Menú', value: this.data.client.menu ? this.data.client.menu.description : ''}, {property: 'Fecha de creación', value: this.data.client.createdAt}, {property: 'Creado por', value: this.data.client.createdBy} ]; networkData = [ - {property: 'Menu', value: this.data.client.menu}, + {property: 'Menú', value: this.data.client.menu ? this.data.client.menu.description : ''}, {property: 'Perfil hardware', value: this.data.client.hardwareProfile ? this.data.client.hardwareProfile.description : ''}, {property: 'OGlive', value: ''}, {property: 'Autoexec', value: ''}, @@ -35,19 +37,19 @@ export class ClientViewComponent { ]; classroomData = [ - {property: 'Url servidor proxy', value: this.data.client.networkSettings ? this.data.client.networkSettings.proxy : ''}, - {property: 'IP DNS', value: this.data.client.networkSettings ? this.data.client.networkSettings.dns : ''}, - {property: 'Máscara de red', value: this.data.client.networkSettings ? this.data.client.networkSettings.mask : ''}, - {property: 'Router', value: this.data.client.networkSettings ? this.data.client.networkSettings.router : ''}, - {property: 'NTP', value: this.data.client.networkSettings ? this.data.client.networkSettings.ntp : ''}, - {property: 'Modo p2p', value: this.data.client.networkSettings ? this.data.client.networkSettings.p2pMode : ''}, - {property: 'Tiempo p2p', value: this.data.client.networkSettings ? this.data.client.networkSettings.p2pTime : ''}, - {property: 'IP multicast', value: this.data.client.networkSettings ? this.data.client.networkSettings.mcastIp : ''}, - {property: 'Modo multicast', value: this.data.client.networkSettings ? this.data.client.networkSettings.mcastMode : ''}, - {property: 'Puerto multicast', value: this.data.client.networkSettings ? this.data.client.networkSettings.mcastPort : ''}, - {property: 'Velocidad multicast', value: this.data.client.networkSettings ? this.data.client.networkSettings.mcastSpeed : ''}, - {property: 'Perfil hardware', value: this.data.client.networkSettings && this.data.client.networkSettings.hardwareProfile ? this.data.client.networkSettings.hardwareProfile.description : ''}, - {property: 'Menú', value: this.data.client.networkSettings && this.data.client.networkSettings.menu ? this.data.client.networkSettings.menu.description : ''} + {property: 'Url servidor proxy', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.proxy : ''}, + {property: 'IP DNS', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.dns : ''}, + {property: 'Máscara de red', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.netmask : ''}, + {property: 'Router', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.router : ''}, + {property: 'NTP', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.ntp : ''}, + {property: 'Modo p2p', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.p2pMode : ''}, + {property: 'Tiempo p2p', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.p2pTime : ''}, + {property: 'IP multicast', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.mcastIp : ''}, + {property: 'Modo multicast', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.mcastMode : ''}, + {property: 'Puerto multicast', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.mcastPort : ''}, + {property: 'Velocidad multicast', value: this.data.client.organizationalUnit.networkSettings ? this.data.client.organizationalUnit.networkSettings.mcastSpeed : ''}, + {property: 'Perfil hardware', value: this.data.client.organizationalUnit.networkSettings && this.data.client.organizationalUnit.networkSettings.hardwareProfile ? this.data.client.organizationalUnit.networkSettings.hardwareProfile.description : ''}, + {property: 'Menú', value: this.data.client.organizationalUnit.networkSettings && this.data.client.organizationalUnit.networkSettings.menu ? this.data.client.organizationalUnit.networkSettings.menu.description : ''} ]; constructor( diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html index 27c6787..5281297 100644 --- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html +++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html @@ -1,6 +1,7 @@

Añadir Cliente

-
-
+
+ + Padre diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts index dddd84a..876277d 100644 --- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts +++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts @@ -24,6 +24,7 @@ export class CreateClientComponent implements OnInit { protected netDriverTypes = [ {"name": 'Generic', "value": "generic"}, ]; + loading:boolean = false constructor( private fb: FormBuilder, @@ -47,8 +48,8 @@ export class CreateClientComponent implements OnInit { netDriver: null, mac: ['', Validators.required], ip: ['', Validators.required], - menu: [this.data.organizationalUnit && this.data.organizationalUnit.menu ? this.data.organizationalUnit.menu['@id'] : null], - hardwareProfile: [this.data.organizationalUnit && this.data.organizationalUnit.hardwareProfile ? this.data.organizationalUnit.hardwareProfile['@id'] : null], + menu: [this.data.organizationalUnit && this.data.organizationalUnit.networkSettings.menu ? this.data.organizationalUnit.menu['@id'] : null], + hardwareProfile: [this.data.organizationalUnit && this.data.organizationalUnit.networkSettings.hardwareProfile ? this.data.organizationalUnit.networkSettings.hardwareProfile['@id'] : null], }); } @@ -64,14 +65,17 @@ export class CreateClientComponent implements OnInit { } loadParentUnits() { + this.loading = true const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000'; this.http.get(url).subscribe( response => { this.parentUnits = response['hydra:member']; + this.loading = false }, error => { console.error('Error fetching parent units:', error); + this.loading = false } ); } diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css index 39cb26a..1dedbe9 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css @@ -36,3 +36,23 @@ button { .mat-slide-toggle { margin-top: 20px; } + +.loading-spinner { + display: block; + margin: 0 auto; +} + +.mat-dialog-content.loading { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.client-form { + width: 100%; +} + +.form-field { + width: 100%; +} diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html index 9d427ea..7ed4b23 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html @@ -1,6 +1,7 @@

Editar Cliente

-
- +
+ + Padre @@ -9,31 +10,31 @@ Nombre - + Número de Serie - + Interfaz de red - - + + {{ type.name }} Controlador de red - - + + {{ type.name }} MAC - + Formato de MAC inválido. Ejemplo válido: 00:11:22:33:44:55 diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts index bd1a339..c86e7cd 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts @@ -24,6 +24,7 @@ export class EditClientComponent { protected netDriverTypes = [ {"name": 'Generic', "value": "generic"}, ]; + loading:boolean = false constructor( private fb: FormBuilder, @@ -80,6 +81,7 @@ export class EditClientComponent { } loadData(uuid: string) { + this.loading = true const url = `http://127.0.0.1:8080/clients/${uuid}`; this.http.get(url).subscribe( @@ -94,7 +96,9 @@ export class EditClientComponent { hardwareProfile: data.hardwareProfile ? data.hardwareProfile['@id'] : null, organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : null }); - }); + this.loading = false + } + ); } onSubmit() { diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index 2132e84..59f9179 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -16,50 +16,73 @@
- Unidad organizativa + Unidad organizativa + [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
apartment {{ unidad.name }} - account_tree - - edit - - visibility - - add_home_work - - devices - + menu + + + + + + + +
@@ -98,11 +121,29 @@ {{child.name}} - edit - visibility - add_home_work - devices - delete + menu + + + + + + +
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index 6f5edb4..e68d3d6 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -160,14 +160,16 @@ constructor( this.dataService.deleteElement(uuid, type).subscribe( () => { this.loadChildrenAndClients(this.selectedUnidad?.id || ''); - this.dataService.getOrganizationalUnits().subscribe( data => this.organizationalUnits = data, error => console.error('Error fetching unidades organizativas', error) ); this.openSnackBar(false, 'Entidad eliminada exitosamente') }, - error => console.error('Error deleting element', error) + error => { + console.error('Error deleting element', error) + this.openSnackBar(true, error.error['hydra:description']) + } ); } }); @@ -201,6 +203,7 @@ constructor( data => this.organizationalUnits = data, error => console.error('Error fetching unidades organizativas', error) ); + this.openSnackBar(false, 'Entidad eliminada exitosamente') }, error => { console.error('Error deleting element', error) diff --git a/ogWebconsole/src/app/components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component.ts index 61e45a2..a1e6bb4 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component.ts @@ -13,6 +13,7 @@ export class ShowOrganizationalUnitComponent { generalData = [ { property: 'Nombre', value: this.data.data.name }, { property: 'Uuid', value: this.data.data.uuid }, + { property: 'Descripción', value: this.data.data.description }, { property: 'Comentarios', value: this.data.data.comments }, { property: 'Tipo', value: this.data.data.type }, { property: 'Unidad organizativa superior', value: this.data.data.parent ? this.data.data.parent.name : '-' }, @@ -27,7 +28,7 @@ export class ShowOrganizationalUnitComponent { { property: 'Aforo', value: this.data.data.capacity }, { property: 'Url servidor proxy', value: this.data.data.networkSettings ? this.data.data.networkSettings.proxy : '' }, { property: 'IP DNS', value: this.data.data.networkSettings ? this.data.data.networkSettings.dns : '' }, - { property: 'Máscara de red', value: this.data.data.networkSettings ? this.data.data.networkSettings.mask : '' }, + { property: 'Máscara de red', value: this.data.data.networkSettings ? this.data.data.networkSettings.netmask : '' }, { property: 'Router', value: this.data.data.networkSettings ? this.data.data.networkSettings.router : '' }, { property: 'NTP', value: this.data.data.networkSettings ? this.data.data.networkSettings.ntp : '' }, { property: 'Modo p2p', value: this.data.data.networkSettings ? this.data.data.networkSettings.p2pMode : '' },