From b29a3f58f11d02a814ec75320a094bd830c10e66 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Thu, 27 Feb 2025 11:05:26 +0100 Subject: [PATCH] refs #1558. Add client/subnet new UX modal --- .../add-user-modal.component.html | 8 ++ .../add-user-modal.component.ts | 16 +++- .../admin/users/users/users.component.ts | 5 + .../add-clients-to-subnet.component.css | 13 +++ .../add-clients-to-subnet.component.html | 9 +- .../add-clients-to-subnet.component.ts | 37 +++++--- .../create-subnet/create-subnet.component.css | 9 +- .../create-subnet.component.html | 88 ++++++------------ .../create-subnet/create-subnet.component.ts | 28 ------ .../ogdhcp/og-dhcp-subnets.component.html | 9 +- .../ogdhcp/og-dhcp-subnets.component.ts | 9 +- .../operation-result-dialog.component.spec.ts | 61 ++++++++++-- .../operation-result-dialog.component.ts | 13 ++- .../show-clients/show-clients.component.css | 20 ++-- .../show-clients/show-clients.component.html | 29 +++++- .../show-clients.component.spec.ts | 4 +- .../show-clients/show-clients.component.ts | 37 +++++++- .../app/layout/header/header.component.html | 2 +- .../src/app/layout/header/header.component.ts | 2 +- .../assets/images/ordenador_turning-off.png | Bin 0 -> 778 bytes 20 files changed, 243 insertions(+), 156 deletions(-) create mode 100644 ogWebconsole/src/assets/images/ordenador_turning-off.png diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html index b8cee9e..b7b0ef9 100644 --- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html +++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html @@ -27,6 +27,14 @@ + + Vista tarjetas + + + {{ option.name }} + + + diff --git a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts index a785e39..86e49ee 100644 --- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts +++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts @@ -24,6 +24,11 @@ export class AddUserModalComponent implements OnInit { organizationalUnits: any[] = []; userId: string | null = null; + protected views = [ + {value: 'card', name: 'Tarjetas'}, + {value: 'list', name: 'Listado'}, + ]; + constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, @@ -36,6 +41,7 @@ export class AddUserModalComponent implements OnInit { username: ['', Validators.required], password: ['', Validators.required], role: ['', Validators.required], + groupsView: ['card', Validators.required], organizationalUnits: [[]] }); } @@ -55,15 +61,14 @@ export class AddUserModalComponent implements OnInit { load(): void { this.dataService.getUser(this.data).subscribe({ next: (response) => { - console.log(response); const organizationalUnitIds = response.allowedOrganizationalUnits.map((unit: any) => unit['@id']); - // Patch the values to the form this.userForm.patchValue({ username: response.username, - role: response.userGroups[0]['@id'], - organizationalUnits: organizationalUnitIds + role: response.userGroups.length > 0 ? response.userGroups[0]['@id'] : null, + organizationalUnits: organizationalUnitIds, + groupsView: response.groupsView }); this.userId = response['@id']; @@ -85,7 +90,8 @@ export class AddUserModalComponent implements OnInit { allowedOrganizationalUnits: this.userForm.value.organizationalUnit, password: this.userForm.value.password, enabled: true, - userGroups: [this.userForm.value.role ] + userGroups: [this.userForm.value.role ], + groupsView: this.userForm.value.groupsView }; if (this.userId) { diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/admin/users/users/users.component.ts index 81656e9..3ca3f56 100644 --- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts +++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts @@ -32,6 +32,11 @@ export class UsersComponent implements OnInit { header: 'Nombre de Usuario', cell: (user: any) => `${user.username}` }, + { + columnDef: 'groupsView', + header: 'Vista de Grupos', + cell: (user: any) => `${user.groupsView}` + }, { columnDef: 'allowedOrganizationalUnits', header: 'Unidades Organizacionales Permitidas', diff --git a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.css b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.css index 3c43c3c..b0c1411 100644 --- a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.css +++ b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.css @@ -27,3 +27,16 @@ mat-dialog-actions { gap: 1em; padding: 1.5em; } + +.clients-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); /* 3 columnas */ + gap: 5px; /* Espaciado entre elementos */ +} + +.checkbox-group label { + font-weight: bold; + display: block; + margin-bottom: 10px; +} + diff --git a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.html b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.html index 4c0b532..826c4b4 100644 --- a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.html +++ b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.html @@ -1,3 +1,5 @@ + +

Añade clientes a {{data.subnetName}}

@@ -10,7 +12,12 @@
-
+ + + +
diff --git a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.ts b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.ts index 7e72ac0..6699e4d 100644 --- a/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.ts +++ b/ogWebconsole/src/app/components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component.ts @@ -18,6 +18,7 @@ export class AddClientsToSubnetComponent implements OnInit { loading: boolean = true; unitControl = new FormControl(); childUnitControl = new FormControl(); + allSelected: boolean = false; constructor( private http: HttpClient, @@ -43,7 +44,7 @@ export class AddClientsToSubnetComponent implements OnInit { } loadChildUnits(event: any) { - this.http.get(`${this.baseUrl}/clients?organizationalUnit.id=${event.value.id}`).subscribe( + this.http.get(`${this.baseUrl}/clients?organizationalUnit.id=${event.value.id}&exists[subnet]=false`).subscribe( response => { this.clients = response['hydra:member']; }, @@ -51,37 +52,49 @@ export class AddClientsToSubnetComponent implements OnInit { ); } - toggleClientSelection(clientId: string): void { - const index = this.selectedClients.indexOf(clientId); - if (index >= 0) { - this.selectedClients.splice(index, 1); - } else { - this.selectedClients.push(clientId); - } - } - save() { + this.loading = true; const postData = { clients: this.selectedClients.map(clientId => `/clients/${clientId}`) }; this.http.post(`${this.baseUrl}/og-dhcp/server/${this.data.subnetUuid}/post-host`, postData).subscribe( (response: any) => { this.dialog.open(OperationResultDialogComponent, { - width: '600px', + width: '800px', data: { success: response.success || [], errors: response.errors || [] } }); + this.loading = false; this.dialogRef.close(this.selectedClients); }, error => { - console.error(`Error al asignar el cliente:`, error); this.toastService.error(`Error al asignar el cliente: ${error.error['hydra:description']}`); } ); } + toggleSelectAll() { + if (this.allSelected) { + this.selectedClients = []; + } else { + this.selectedClients = this.clients.map(client => client.uuid); + } + this.allSelected = !this.allSelected; + } + + toggleClientSelection(uuid: string) { + const index = this.selectedClients.indexOf(uuid); + if (index === -1) { + this.selectedClients.push(uuid); + } else { + this.selectedClients.splice(index, 1); + } + + this.allSelected = this.selectedClients.length === this.clients.length; + } + close() { this.dialogRef.close(); } diff --git a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.css b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.css index 106da2f..24cf3c0 100644 --- a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.css +++ b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.css @@ -39,4 +39,11 @@ form { justify-content: flex-end; gap: 1em; padding: 1.5em; -} \ No newline at end of file +} + +.step-title { + font-family: 'Roboto', sans-serif; + color: #3f51b5; + margin: 40px 0 15px 0; + display: block; +} diff --git a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.html b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.html index ed1940e..cbdfc10 100644 --- a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.html +++ b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.html @@ -1,68 +1,38 @@

{{ isEditMode ? 'Editar' : 'Añadir' }} subred

- - -
- - Nombre - - - - Netmask - - - - Dirección IP - - +
+ + Nombre + + + + Netmask + + + + Dirección IP + + - - - - Parámetros avanzados - - - - Next Server - - - - Boot File Name - - - - Router - - - -
- - - - - - -
- computer -
-
{{ client.name }}
-
{{ client.mac }}
-
-
- -
-
- - - - - + + Parámetros avanzados + + Next Server + + + + Boot File Name + + + + Router + + +
- \ No newline at end of file + diff --git a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.ts b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.ts index 0f3f710..3dfaea1 100644 --- a/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.ts +++ b/ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.ts @@ -18,9 +18,7 @@ export class CreateSubnetComponent implements OnInit { nextServer: string = ''; bootFileName: string = ''; router: string = ''; - syncronized: boolean = false; serverId: number = 0; - clients: any[] = []; isEditMode: boolean = false; constructor( @@ -46,9 +44,7 @@ export class CreateSubnetComponent implements OnInit { this.nextServer = this.data.nextServer; this.bootFileName = this.data.bootFileName; this.router = this.data.router; - this.syncronized = this.data.syncronized; this.serverId = this.data.serverId; - this.clients = this.data.clients } onNoClick(): void { @@ -69,12 +65,10 @@ export class CreateSubnetComponent implements OnInit { this.http.post(`${this.baseUrl}/subnets`, payload) .subscribe({ next: (response) => { - console.log('Success:', response); this.toastService.success('Configuración de red añadida exitosamente'); this.dialogRef.close(); }, error: (error) => { - console.error('Error:', error); this.toastService.error(error.error['hydra:description']); } }); @@ -82,35 +76,13 @@ export class CreateSubnetComponent implements OnInit { this.http.patch(`${this.baseUrl}/subnets/${this.subnetId}`, payload) .subscribe({ next: (response) => { - console.log('Success:', response); this.toastService.success('Configuración de red actualizada exitosamente'); this.dialogRef.close(); }, error: (error) => { - console.error('Error:', error); this.toastService.error(error.error['hydra:description']); } }); } } - - deleteClient(client: any): void { - const dialogRef = this.dialog.open(DeleteModalComponent, { - width: '300px', - data: { name: client.name } - }); - - dialogRef.afterClosed().subscribe(result => { - if (result) { - this.http.delete(`${this.baseUrl}/og-dhcp/server/${this.subnetId}/delete-host/${client.uuid}`, {}).subscribe({ - next: () => { - this.toastService.success('Cliente eliminado exitosamente'); - this.dialogRef.close(); - }, - error: (error) => { - this.toastService.error(error.error['hydra:description']); - } - }); - }}) - } } diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.html index ae5a071..0a3dc0b 100644 --- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.html +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.html @@ -1,3 +1,5 @@ + +
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts index af524d9..13d6396 100644 --- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts @@ -35,7 +35,7 @@ export interface Subnet { templateUrl: './og-dhcp-subnets.component.html', styleUrls: ['./og-dhcp-subnets.component.css'] }) -export class OgDhcpSubnetsComponent { +export class OgDhcpSubnetsComponent implements OnInit { baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; displayedColumns: string[] = ['id', 'name', 'netmask', 'ipAddress', 'synchronized', 'serverId', 'clients', 'actions']; dataSource = new MatTableDataSource([]); @@ -79,7 +79,7 @@ export class OgDhcpSubnetsComponent { this.length = response['hydra:totalItems']; }, error: error => { - console.error('Error al cargar plantillas PXE:', error); + this.toastService.error(error.error['hydra:description']); } }); @@ -94,7 +94,6 @@ export class OgDhcpSubnetsComponent { this.toastService.success('Sincronización con componente DHCP exitosa'); this.loadSubnets() }, error => { - console.error('Error al sincronizar', error); this.toastService.error('Error al sincronizar'); }); } @@ -214,7 +213,7 @@ export class OgDhcpSubnetsComponent { height: '100vh', maxWidth: '100vw', maxHeight: '100vh', - data: { subnetId: subnet.id, subnetName: subnet.name } + data: { subnetId: subnet.id, subnetName: subnet.name, subnetUuid: subnet.uuid } }); dialogRef.afterClosed().subscribe(result => { @@ -224,7 +223,7 @@ export class OgDhcpSubnetsComponent { addClientsToSubnet(subnet: Subnet) { const dialogRef = this.dialog.open(AddClientsToSubnetComponent, { - width: '600px', + width: '800px', data: { subnetUuid: subnet.uuid, subnetName: subnet.name } }); diff --git a/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts index 54efba1..e98fb7b 100644 --- a/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts +++ b/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts @@ -1,14 +1,34 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import {MAT_DIALOG_DATA } from '@angular/material/dialog'; import { OperationResultDialogComponent } from './operation-result-dialog.component'; +import {ShowClientsComponent} from "../show-clients/show-clients.component"; +import {MatExpansionModule} from "@angular/material/expansion"; +import {MatIconModule} from "@angular/material/icon"; +import {MatDividerModule} from "@angular/material/divider"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {MatSelectModule} from "@angular/material/select"; +import {MatPaginatorModule} from "@angular/material/paginator"; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {FormsModule} from "@angular/forms"; +import {MatInputModule} from "@angular/material/input"; +import {MatDialog, MatDialogModule, MatDialogRef} from "@angular/material/dialog"; +import {MatTableModule} from "@angular/material/table"; +import {TranslateModule} from "@ngx-translate/core"; +import {JoyrideModule} from "ngx-joyride"; +import {HttpClient} from "@angular/common/http"; +import {ToastrService} from "ngx-toastr"; +import {LoadingComponent} from "../../../shared/loading/loading.component"; describe('OperationResultDialogComponent', () => { - let component: OperationResultDialogComponent; - let fixture: ComponentFixture; + let component: ShowClientsComponent; + let fixture: ComponentFixture; + let mockDialog: jasmine.SpyObj; + let mockHttpClient: jasmine.SpyObj; + let mockToastrService: jasmine.SpyObj; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [OperationResultDialogComponent], + declarations: [OperationResultDialogComponent, LoadingComponent], imports: [MatDialogModule], providers: [ { provide: MatDialogRef, useValue: {} }, @@ -17,7 +37,36 @@ describe('OperationResultDialogComponent', () => { }) .compileComponents(); - fixture = TestBed.createComponent(OperationResultDialogComponent); + await TestBed.configureTestingModule({ + declarations: [ShowClientsComponent], + imports: [ + MatExpansionModule, + MatIconModule, + MatDividerModule, + MatFormFieldModule, + MatSelectModule, + MatPaginatorModule, + BrowserAnimationsModule, + FormsModule, + MatInputModule, + MatDialogModule, + MatTableModule, + TranslateModule.forRoot(), + JoyrideModule.forRoot(), + ], + providers: [ + { provide: MatDialog, useValue: mockDialog }, + { provide: HttpClient, useValue: mockHttpClient }, + { provide: ToastrService, useValue: mockToastrService }, + { + provide: MatDialogRef, + useValue: {} + }, + ], + }) + .compileComponents(); + + fixture = TestBed.createComponent(ShowClientsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -25,4 +74,4 @@ describe('OperationResultDialogComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); -}); \ No newline at end of file +}); diff --git a/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.ts b/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.ts index 5a9117b..b586f35 100644 --- a/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.ts +++ b/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.ts @@ -7,13 +7,6 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; template: `

Resultado de la operación

-
-

Éxitos

-
    -
  • {{ success.client }} ✅
    • -
-
-

Errores

    @@ -22,6 +15,12 @@ import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+

Éxitos

+
    +
  • {{ success.client }} ✅
    • +
+
diff --git a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.css b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.css index f28d4ee..d092e27 100644 --- a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.css +++ b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.css @@ -40,19 +40,6 @@ form { gap: 1em; padding: 1.5em; } -.header-container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 10px; - border-bottom: 1px solid #ddd; -} - -.header-container-title { - flex-grow: 1; - text-align: left; - margin-left: 1em; -} .lists-container { padding: 16px; @@ -68,7 +55,12 @@ form { } .search-string { - flex: 2; + flex: 1; + padding: 5px; +} + +.search-select { + flex: 1; padding: 5px; } diff --git a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html index 2c6c669..5289199 100644 --- a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html +++ b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html @@ -1,6 +1,6 @@ -

Buscar clientes en {{data.subnetName}}

+

Gestionar clientes en {{data.subnetName}}

@@ -38,6 +38,17 @@ Pulsar 'enter' para buscar + + Estados + + + {{ option.name }} + + + +
@@ -54,12 +65,25 @@ {{ client.ogLive?.date | date }} - + + {{ client.organizationalUnit?.path }} + + + {{ column.cell(client) }} + + Acciones + + + + + @@ -70,7 +94,6 @@ (page)="onPageChange($event)">
- diff --git a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.spec.ts index be1714b..71af393 100644 --- a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.spec.ts +++ b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.spec.ts @@ -29,8 +29,6 @@ describe('ShowClientsComponent', () => { mockDialog = jasmine.createSpyObj('MatDialog', ['open']); mockHttpClient = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete']); mockToastrService = jasmine.createSpyObj('ToastrService', ['success', 'error']); - mockHttpClient.get.and.returnValue(of({ 'hydra:member': [], 'hydra:totalItems': 0 })); - mockHttpClient.post.and.returnValue(of({})); await TestBed.configureTestingModule({ declarations: [ShowClientsComponent, LoadingComponent], @@ -67,4 +65,4 @@ describe('ShowClientsComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); -}); \ No newline at end of file +}); diff --git a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.ts b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.ts index ddff94b..578ff87 100644 --- a/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.ts +++ b/ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.ts @@ -1,10 +1,10 @@ import { Component, Inject, OnInit } from '@angular/core'; import { ToastrService } from "ngx-toastr"; import { HttpClient } from "@angular/common/http"; -import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from "@angular/material/dialog"; +import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog"; import { MatTableDataSource } from "@angular/material/table"; -import { Subnet } from "../og-dhcp-subnets.component"; import { Client } from "../../groups/model/model"; +import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component"; @Component({ selector: 'app-show-clients', @@ -21,16 +21,27 @@ export class ShowClientsComponent implements OnInit { loading: boolean = false; filters: { [key: string]: string } = {}; + protected status = [ + {value: 'off', name: 'Apagado'}, + {value: 'initializing', name: 'Inicializando'}, + {value: 'og-live', name: 'Og Live'}, + {value: 'linux', name: 'Linux'}, + {value: 'linux-session', name: 'Linux Session'}, + {value: 'windows', name: 'Windows'}, + {value: 'mac', name: 'Mac'}, + ]; + columns = [ { columnDef: 'id', header: 'ID', cell: (client: Client) => client.id }, { columnDef: 'status', header: 'Estado', cell: (client: Client) => client.status }, { columnDef: 'name', header: 'Name', cell: (client: Client) => client.name }, { columnDef: 'ip', header: 'Ip', cell: (client: Client) => client.ip }, { columnDef: 'mac', header: 'Mac', cell: (client: Client) => client.mac }, + { columnDef: 'organizationalUnit', header: 'Ruta', cell: (client: Client) => client.organizationalUnit }, { columnDef: 'ogLive', header: 'OgLive', cell: (client: Client) => client.ogLive?.date }, ]; - displayedColumns: string[] = ['id', 'status', 'name', 'ip', 'mac', 'ogLive']; + displayedColumns: string[] = ['id', 'status', 'name', 'ip', 'mac', 'organizationalUnit', 'ogLive', 'actions']; constructor( private toastService: ToastrService, @@ -61,6 +72,26 @@ export class ShowClientsComponent implements OnInit { console.log(this.dataSource.data) } + deleteClient(client: any): void { + const dialogRef = this.dialog.open(DeleteModalComponent, { + width: '300px', + data: { name: client.name } + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + this.http.delete(`${this.baseUrl}/og-dhcp/server/${this.data.subnetUuid}/delete-host/${client.uuid}`, {}).subscribe({ + next: () => { + this.toastService.success('Cliente eliminado exitosamente de la red'); + this.loadData() + }, + error: (error) => { + this.toastService.error(error.error['hydra:description']); + } + }); + }}) + } + onNoClick(): void { this.dialogRef.close(); } diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html index 852fa13..ce9bb4c 100644 --- a/ogWebconsole/src/app/layout/header/header.component.html +++ b/ogWebconsole/src/app/layout/header/header.component.html @@ -45,4 +45,4 @@
- \ No newline at end of file + diff --git a/ogWebconsole/src/app/layout/header/header.component.ts b/ogWebconsole/src/app/layout/header/header.component.ts index 51ff2ea..e926157 100644 --- a/ogWebconsole/src/app/layout/header/header.component.ts +++ b/ogWebconsole/src/app/layout/header/header.component.ts @@ -46,5 +46,5 @@ export class HeaderComponent implements OnInit { width: '400px', }); } - + } diff --git a/ogWebconsole/src/assets/images/ordenador_turning-off.png b/ogWebconsole/src/assets/images/ordenador_turning-off.png new file mode 100644 index 0000000000000000000000000000000000000000..69da340ebbd6f1cecc252538283033f8a0596e35 GIT binary patch literal 778 zcmV+l1NHogP)L;#2d9Y_EG010qNS#tmY3ljhU3ljkVnw%H_000Mc zNliru-w6&33nUbt)n)(y0q03XK~y-)g_BWl;~)@(LqSS!V+bt{hj?%tuV}AA7$^S! z|LqoRr%83v%|`OWe4b@2vfKS%!Teic^&>E-+W(l1h#;6?oAwU_*9CYd0$wj)U*r6! z;T7fzjK_BXcJZ=lxa192Qd(vG5akNQBN6PPINx*9zL82<ig+pszFBt2 zWkX4LxhI@VSwWtvz9iq;Z(ux`Qvnox04W>tse||3&jd2bD^uR@sOBB$%tee@7;N;A4N<^`G3M{u7L#-#*$aQHFJ$zj`q;EY4-aK5?humWfFoC9c#^Yxli z&M8l~IbnfQO*kV5u}w+fLI^sqfC`KQp6Q(Vns50UVu)BKxbi#H8hJpGTR`oC2?mUT z9%38N^)aR0LO@2qARIUDz`;O(NX%~?7hp%>No#ai67+!xr$roj1dB-1bzTs z2ukRqYsHPx# literal 0 HcmV?d00001