From a2829beff92ed54adf1460f5eaac782947975f4e Mon Sep 17 00:00:00 2001 From: apuente Date: Thu, 29 Aug 2024 15:22:17 +0200 Subject: [PATCH] New dinamic modal & subnet operations --- ogWebconsole/src/app/app.module.ts | 2 +- .../admin/users/users/users.component.ts | 32 ++++- .../app/components/groups/groups.component.ts | 2 +- .../ogboot/images/images.component.ts | 3 +- .../create-subnet/create-subnet.component.css | 4 + .../create-subnet.component.html | 27 ++++ .../create-subnet.component.spec.ts | 23 ++++ .../create-subnet/create-subnet.component.ts | 55 ++++++++ .../og-dhcp-subnets.component.css | 109 +++++++++++++++ .../og-dhcp-subnets.component.html | 79 +++++++++++ .../og-dhcp-subnets.component.spec.ts | 23 ++++ .../og-dhcp-subnets.component.ts | 126 ++++++++++++++++++ .../components/ogdhcp/ogdhcp.component.css | 0 .../components/ogdhcp/ogdhcp.component.html | 1 + .../ogdhcp/ogdhcp.component.spec.ts | 23 ++++ .../app/components/ogdhcp/ogdhcp.component.ts | 10 ++ .../delete-modal/delete-modal.component.css | 29 ++++ .../delete-modal/delete-modal.component.html | 10 ++ .../delete-modal.component.spec.ts | 23 ++++ .../delete-modal/delete-modal.component.ts | 22 +++ ogWebconsole/tsconfig.json | 1 - 21 files changed, 594 insertions(+), 10 deletions(-) create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts create mode 100644 ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts create mode 100644 ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.css create mode 100644 ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html create mode 100644 ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts create mode 100644 ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts create mode 100644 ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css create mode 100644 ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html create mode 100644 ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts create mode 100644 ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 9331a86..ff5ac66 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -41,7 +41,7 @@ import { CreateOrganizationalUnitComponent } from './components/groups/organizat import { MatStepperModule } from '@angular/material/stepper'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component'; -import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component'; +import { DeleteModalComponent } from './shared/delete_modal/delete-modal/delete-modal.component'; import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component'; import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component'; import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component'; 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 8b3828e..0982957 100644 --- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts +++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts @@ -5,6 +5,9 @@ import { DeleteUserModalComponent } from './delete-user-modal/delete-user-modal. import { MatDialog } from '@angular/material/dialog'; import { AddUserModalComponent } from './add-user-modal/add-user-modal.component'; import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component'; +import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component'; +import { HttpClient } from '@angular/common/http'; +import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-users', @@ -37,7 +40,9 @@ export class UsersComponent implements OnInit { ]; displayedColumns = [...this.columns.map(column => column.columnDef), 'actions']; - constructor(private userService: UserService, public dialog: MatDialog) {} + constructor(private userService: UserService, public dialog: MatDialog, + private http: HttpClient, + private toastService: ToastrService) {} ngOnInit() { this.loadUsers(); @@ -69,15 +74,30 @@ export class UsersComponent implements OnInit { }); } - deleteUser(user: any) { - const dialogRef = this.dialog.open(DeleteUserModalComponent, { - data: user, + deleteUser(user: any): void { + const dialogRef = this.dialog.open(DeleteModalComponent, { + width: '300px', + data: { name: user.name } }); - + dialogRef.afterClosed().subscribe(result => { if (result) { - this.loadUsers(); + const apiUrl = `http://127.0.0.1:8080/users/${user.uuid}`; + + this.http.delete(apiUrl).subscribe({ + next: () => { + console.log('User deleted successfully'); + this.toastService.success('User deleted successfully'); + this.loadUsers(); + }, + error: (error) => { + console.error('Error deleting user:', error); + } + }); + } else { + console.log('User deletion cancelled'); } }); } + } diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index b3596bc..bf73852 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -3,7 +3,7 @@ import { DataService } from './data.service'; import { ClientCollection, UnidadOrganizativa } from './model'; import { MatDialog } from '@angular/material/dialog'; import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component'; -import { DeleteModalComponent } from './delete-modal/delete-modal.component'; +import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component'; import { CreateClientComponent } from './clients/create-client/create-client.component'; import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component'; import { EditClientComponent } from './clients/edit-client/edit-client.component'; diff --git a/ogWebconsole/src/app/components/ogboot/images/images.component.ts b/ogWebconsole/src/app/components/ogboot/images/images.component.ts index dd0de7f..0d75bc0 100644 --- a/ogWebconsole/src/app/components/ogboot/images/images.component.ts +++ b/ogWebconsole/src/app/components/ogboot/images/images.component.ts @@ -9,6 +9,7 @@ import {PageEvent} from "@angular/material/paginator"; import {ToastrService} from "ngx-toastr"; import { DatePipe } from "@angular/common"; import { DeleteImageComponent } from './delete-image/delete-image/delete-image.component'; +import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component'; @Component({ selector: 'app-images', @@ -152,7 +153,7 @@ export class ImagesComponent implements OnInit { } deleteImage(image: any): void { - const dialogRef = this.dialog.open(DeleteImageComponent, { + const dialogRef = this.dialog.open(DeleteModalComponent, { width: '300px', data: { name: image.name } }); diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css new file mode 100644 index 0000000..4525d20 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css @@ -0,0 +1,4 @@ +.full-width { + width: 100%; + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html new file mode 100644 index 0000000..c3ff12a --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html @@ -0,0 +1,27 @@ +

Añadir configuración de red

+ + + Nombre + + + + Netmask + + + + Dirección IP + + + + Next Server + + + + Boot File Name + + + + + + + diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts new file mode 100644 index 0000000..b7559cf --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreateSubnetComponent } from './create-subnet.component'; + +describe('CreateSubnetComponent', () => { + let component: CreateSubnetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CreateSubnetComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CreateSubnetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts new file mode 100644 index 0000000..8853c6f --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts @@ -0,0 +1,55 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { ToastrService } from 'ngx-toastr'; + +@Component({ + selector: 'app-create-subnet', + templateUrl: './create-subnet.component.html', + styleUrls: ['./create-subnet.component.css'] +}) +export class CreateSubnetComponent implements OnInit { + name: string = ''; + netmask: string = ''; + ipAddress: string = ''; + nextServer: string = ''; + bootFileName: string = ''; + + constructor( + private toastService: ToastrService, + private http: HttpClient, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { } + + ngOnInit(): void { + + } + + onNoClick(): void { + this.dialogRef.close(); + } + + addNetworkConfig(): void { + const payload = { + name: this.name, + netmask: this.netmask, + ipAddress: this.ipAddress, + nextServer: this.nextServer, + bootFileName: this.bootFileName + }; + + this.http.post('http://127.0.0.1:8080/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 al añadir la configuración de red'); + } + }); + } +} diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css new file mode 100644 index 0000000..1ae51cc --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css @@ -0,0 +1,109 @@ +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 100px; + padding: 10px; +} + +.title { + font-size: 24px; +} + +.images-button-row { + display: flex; + justify-content: flex-start; + margin-top: 16px; +} + +button { + margin-left: 10px; + margin-bottom: 20px; +} + +.divider { + margin: 20px 0; +} + +.lists-container { + padding: 16px; +} + +.imagesLists-container { + flex: 1; +} + +.card.unidad-card { + height: 100%; + box-sizing: border-box; +} + +.image-container { + display: flex; + align-items: center; + margin-bottom: 16px; + border-bottom: 1px solid rgba(122, 122, 122, 0.555); +} + +.image-container h4 { + margin: 0; + flex: 1; +} + +.mat-icon-button { + margin-left: 16px; + align-self: center; +} + +.mat-menu { + min-width: 160px; +} + + .image-name{ + cursor: pointer; + } + +table { + width: 100%; + margin-top: 50px; +} + +.header-container { + margin-top: 16px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-container h1 { + margin: 0; +} + +.mat-elevation-z8 { + box-shadow: 0px 0px 0px rgba(0,0,0,0.2); +} + +.paginator-container { + display: flex; + justify-content: end; + margin-bottom: 30px; +} + +.example-headers-align .mat-expansion-panel-header-description { + justify-content: space-between; + align-items: center; +} + +.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field { + margin-left: 8px; +} + +.example-button-row { + display: table-cell; + max-width: 600px; +} + +.example-button-row .mat-mdc-button-base { + margin: 8px 8px 8px 0; +} + diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html new file mode 100644 index 0000000..3a60696 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html @@ -0,0 +1,79 @@ + + + + Información de Subnets + + {{ getIcon().name }} + + +

Subnets sincronizadas: {{ alertMessage }}

+

Número de subnets en base de datos: {{ length }}

+ +
+ +
+ + + +
+

Administrar Subnets

+
+ +
+
+ + + + + + + + + + + + + + +
{{ column.header }} + + + + {{ subnet.name }} + + + + {{ subnet.netmask }} + + + + {{ subnet.ipAddress }} + + + + {{ subnet.nextServer }} + + + + {{ subnet.bootFileName }} + + + Acciones + + + +
+
+ + +
+ \ No newline at end of file diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts new file mode 100644 index 0000000..39d8757 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OgDhcpSubnetsComponent } from './og-dhcp-subnets.component'; + +describe('OgDhcpSubnetsComponent', () => { + let component: OgDhcpSubnetsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [OgDhcpSubnetsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(OgDhcpSubnetsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts new file mode 100644 index 0000000..99fff32 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts @@ -0,0 +1,126 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatTableDataSource } from '@angular/material/table'; +import { CreateSubnetComponent } from './create-subnet/create-subnet/create-subnet.component'; +import { MatDialog } from '@angular/material/dialog'; +import { HttpClient } from '@angular/common/http'; +import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component'; +import { ToastrService } from 'ngx-toastr'; + +export interface Subnet { + '@id': string; + '@type': string; + name: string; + netmask: string; + ipAddress: string; + nextServer: string; + bootFileName: string; + createdAt: string; + createdBy: string; + uuid: string; + id: number; +} + +@Component({ + selector: 'app-og-dhcp-subnets', + templateUrl: './og-dhcp-subnets.component.html', + styleUrls: ['./og-dhcp-subnets.component.css'] +}) +export class OgDhcpSubnetsComponent { + + displayedColumns: string[] = ['name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'actions']; + dataSource = new MatTableDataSource([]); + length = 0; + itemsPerPage: number = 10; + page = 0; + pageSizeOptions: number[] = [5, 10, 20]; + alertMessage: string | null = null; + + @ViewChild(MatPaginator) paginator: MatPaginator | undefined; + + columns = [ + { columnDef: 'name', header: 'Name', cell: (subnet: Subnet) => subnet.name }, + { columnDef: 'netmask', header: 'Netmask', cell: (subnet: Subnet) => subnet.netmask }, + { columnDef: 'ipAddress', header: 'IP Address', cell: (subnet: Subnet) => subnet.ipAddress }, + { columnDef: 'nextServer', header: 'Next Server', cell: (subnet: Subnet) => subnet.nextServer }, + { columnDef: 'bootFileName', header: 'Boot File Name', cell: (subnet: Subnet) => subnet.bootFileName }, + ]; + + constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService) {} + + ngOnInit() { + this.loadSubnets(); + } + + loadSubnets() { + this.http.get(`http://127.0.0.1:8080/subnets?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({ + next: (response) => { + this.dataSource.data = response['hydra:member']; + this.length = response['hydra:totalItems']; + }, + error: error => { + console.error('Error al cargar plantillas PXE:', error); + } + }); + + if (this.paginator) { + this.dataSource.paginator = this.paginator; + } + } + + syncSubnets() { + console.log('Sincronizando subnets...'); + } + + addSubnet() { + console.log('Añadiendo nueva subnet...'); + const dialogRef = this.dialog.open(CreateSubnetComponent, { + width: '400px' + }); + + dialogRef.afterClosed().subscribe(result => { + console.log('The dialog was closed'); + }); + } + + editSubnet(subnet: Subnet) { + console.log('Editando subnet:', subnet); + } + + deleteSubnet(subnet: Subnet): void { + console.log(subnet); + const dialogRef = this.dialog.open(DeleteModalComponent, { + width: '300px', + data: { name: subnet.name } + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + const apiUrl = `http://127.0.0.1:8080${subnet['@id']}`; + + this.http.delete(apiUrl).subscribe({ + next: () => { + console.log('Subnet deleted successfully'); + this.dataSource.data = this.dataSource.data.filter(s => s !== subnet); + this.length = this.dataSource.data.length; + this.toastService.success('Subnet deleted successfully'); + }, + error: (error) => { + console.error('Error deleting subnet:', error); + } + }); + } else { + console.log('Subnet deletion cancelled'); + } + }); + } + + onPageChange(event: any) { + this.page = event.pageIndex; + this.itemsPerPage = event.pageSize; + } + + getIcon() { + return { name: 'info', color: 'blue' }; + } +} diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.css b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.css new file mode 100644 index 0000000..e69de29 diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html new file mode 100644 index 0000000..d680125 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html @@ -0,0 +1 @@ +

ogdhcp works!

diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts new file mode 100644 index 0000000..0ab958d --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OgdhcpComponent } from './ogdhcp.component'; + +describe('OgdhcpComponent', () => { + let component: OgdhcpComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [OgdhcpComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(OgdhcpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts new file mode 100644 index 0000000..a8ee1b5 --- /dev/null +++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-ogdhcp', + templateUrl: './ogdhcp.component.html', + styleUrl: './ogdhcp.component.css' +}) +export class OgdhcpComponent { + +} diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css new file mode 100644 index 0000000..470356d --- /dev/null +++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css @@ -0,0 +1,29 @@ +mat-dialog-content { + font-size: 16px; + margin-bottom: 20px; + color: #555; /* Color de texto más suave */ + } + + mat-dialog-actions { + margin-top: 20px; + display: flex; + justify-content: flex-end; /* Alineación a la derecha */ + } + + button[mat-button] { + margin-left: 8px; /* Espacio entre los botones */ + } + + button[mat-button]:first-child { + color: #757575; /* Color para el botón de cancelar */ + } + + button[mat-raised-button] { + box-shadow: none; + } + + strong { + font-weight: bold; + color: #000; /* Color de texto más fuerte para el nombre del elemento */ + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html new file mode 100644 index 0000000..bd1b25f --- /dev/null +++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html @@ -0,0 +1,10 @@ +

Eliminar

+
+

+ ¿Estás seguro que deseas eliminar {{ data.name }}? +

+
+
+ + +
diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts new file mode 100644 index 0000000..30f4266 --- /dev/null +++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteModalComponent } from './delete-modal.component'; + +describe('DeleteModalComponent', () => { + let component: DeleteModalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [DeleteModalComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeleteModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts new file mode 100644 index 0000000..d3cf678 --- /dev/null +++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts @@ -0,0 +1,22 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; + +@Component({ + selector: 'app-delete-modal', + templateUrl: './delete-modal.component.html', + styleUrl: './delete-modal.component.css' +}) +export class DeleteModalComponent { + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { name: string } + ) {} + + onNoClick(): void { + this.dialogRef.close(false); + } + + onYesClick(): void { + this.dialogRef.close(true); + } +} diff --git a/ogWebconsole/tsconfig.json b/ogWebconsole/tsconfig.json index f37b67f..4b332f9 100644 --- a/ogWebconsole/tsconfig.json +++ b/ogWebconsole/tsconfig.json @@ -1,4 +1,3 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": {