New dinamic modal & subnet operations
parent
4b2bc5684a
commit
a2829beff9
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<h2 mat-dialog-title>Añadir configuración de red</h2>
|
||||
<mat-dialog-content>
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Nombre</mat-label>
|
||||
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Netmask</mat-label>
|
||||
<input matInput [(ngModel)]="netmask" placeholder="Netmask">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Dirección IP</mat-label>
|
||||
<input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Next Server</mat-label>
|
||||
<input matInput [(ngModel)]="nextServer" placeholder="Next Server">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Boot File Name</mat-label>
|
||||
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name">
|
||||
</mat-form-field>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="onNoClick()">Cancelar</button>
|
||||
<button mat-button (click)="addNetworkConfig()" cdkFocusInitial>Añadir</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -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<CreateSubnetComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [CreateSubnetComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CreateSubnetComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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<CreateSubnetComponent>,
|
||||
@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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<mat-accordion class="example-headers-align">
|
||||
<mat-expansion-panel hideToggle>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title> Información de Subnets </mat-panel-title>
|
||||
<mat-panel-description>
|
||||
<mat-icon [style.color]="getIcon().color">{{ getIcon().name }}</mat-icon>
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p *ngIf="alertMessage">Subnets sincronizadas: {{ alertMessage }}</p>
|
||||
<p *ngIf="alertMessage">Número de subnets en base de datos: {{ length }}</p>
|
||||
|
||||
<div class="example-button-row">
|
||||
<button mat-flat-button color="primary" (click)="syncSubnets()"> Sincronizar Subnets</button>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<div class="header-container">
|
||||
<h2 class="title" i18n="@@subnetsTitle">Administrar Subnets</h2>
|
||||
<div class="subnets-button-row">
|
||||
<button mat-flat-button color="primary" (click)="addSubnet()">Añadir Subnet</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="divider"></mat-divider>
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
|
||||
<td mat-cell *matCellDef="let subnet">
|
||||
|
||||
<!-- Mostrar otros campos normalmente -->
|
||||
<ng-container *ngIf="column.columnDef === 'name'">
|
||||
{{ subnet.name }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'netmask'">
|
||||
{{ subnet.netmask }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'ipAddress'">
|
||||
{{ subnet.ipAddress }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'nextServer'">
|
||||
{{ subnet.nextServer }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'bootFileName'">
|
||||
{{ subnet.bootFileName }}
|
||||
</ng-container>
|
||||
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions">Acciones</th>
|
||||
<td mat-cell *matCellDef="let subnet">
|
||||
<button mat-icon-button color="primary" (click)="editSubnet(subnet)" i18n="@@editSubnet"> <mat-icon>edit</mat-icon></button>
|
||||
<button mat-icon-button color="warn" (click)="deleteSubnet(subnet)"><mat-icon>delete</mat-icon></button>
|
||||
<!-- <button mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="deleteSubnet(subnet)">Eliminar</button>
|
||||
</mat-menu> -->
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<div class="paginator-container">
|
||||
<mat-paginator [length]="length"
|
||||
[pageSize]="itemsPerPage"
|
||||
[pageIndex]="page"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
||||
|
|
@ -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<OgDhcpSubnetsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [OgDhcpSubnetsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(OgDhcpSubnetsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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<Subnet>([]);
|
||||
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<any>(`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' };
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>ogdhcp works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OgdhcpComponent } from './ogdhcp.component';
|
||||
|
||||
describe('OgdhcpComponent', () => {
|
||||
let component: OgdhcpComponent;
|
||||
let fixture: ComponentFixture<OgdhcpComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [OgdhcpComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(OgdhcpComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ogdhcp',
|
||||
templateUrl: './ogdhcp.component.html',
|
||||
styleUrl: './ogdhcp.component.css'
|
||||
})
|
||||
export class OgdhcpComponent {
|
||||
|
||||
}
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
|
||||
<div mat-dialog-content>
|
||||
<p i18n="@@deleteConfirmationMessage">
|
||||
¿Estás seguro que deseas eliminar <strong>{{ data.name }}</strong>?
|
||||
</p>
|
||||
</div>
|
||||
<div mat-dialog-actions align="end">
|
||||
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
|
||||
<button mat-raised-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
|
||||
</div>
|
||||
|
|
@ -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<DeleteModalComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [DeleteModalComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DeleteModalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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<DeleteModalComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: { name: string }
|
||||
) {}
|
||||
|
||||
onNoClick(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
|
||||
onYesClick(): void {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue