opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #691. Updated UX ogDhcp CRUD

oggui/calendar
Manuel Aranda Rosales 2024-10-02 11:36:37 +02:00
parent 38dcf8d277
commit 1e332544ae
3 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
View File

@ -45,6 +45,20 @@ button {
border-bottom: 1px solid rgba(122, 122, 122, 0.555);
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.image-container h4 {
margin: 0;
flex: 1;

70
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
View File

@ -21,60 +21,48 @@
<button mat-flat-button color="primary" (click)="addSubnet()">Añadir Subnet</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar nombre de imagen</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar netmask</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['netmask']" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar IP</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['ip']" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</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">
<ng-container *ngIf="column.columnDef === 'name'">
{{ subnet.name }}
<ng-container >
{{ column.cell(subnet) }}
</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">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let subnet" style="text-align: center;">
<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>more_vert</mat-icon>
<button mat-icon-button (click)="addClientsToSubnet(subnet)">
<mat-icon>computer</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="addSubnet()">
<mat-icon>add</mat-icon>
<span>Añadir Subnet</span>
</button>
<button mat-menu-item (click)="updateSubnet()">
<mat-icon>edit</mat-icon>
<span>Actualizar</span>
</button>
<button mat-menu-item (click)="addClientsToSubnet(subnet)">
<mat-icon>computer</mat-icon>
<span>Add Clients to Subnet</span>
</button>
</mat-menu>
</td>
</ng-container>
@ -85,4 +73,4 @@
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
</div>

20
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts
View File

@ -29,17 +29,19 @@ export interface Subnet {
})
export class OgDhcpSubnetsComponent {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
displayedColumns: string[] = ['name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'actions'];
displayedColumns: string[] = ['id', 'name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'actions'];
dataSource = new MatTableDataSource<Subnet>([]);
length = 0;
itemsPerPage: number = 10;
page = 0;
filters: { [key: string]: string } = {};
pageSizeOptions: number[] = [5, 10, 20];
alertMessage: string | null = null;
@ViewChild(MatPaginator) paginator: MatPaginator | undefined;
columns = [
{ columnDef: 'id', header: 'ID', cell: (subnet: Subnet) => subnet.id },
{ 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 },
@ -89,9 +91,9 @@ export class OgDhcpSubnetsComponent {
console.log('Editando subnet:', subnet);
const dialogRef = this.dialog.open(CreateSubnetComponent, {
width: '400px',
data: { subnet }
data: { subnet }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.loadSubnets()
@ -104,11 +106,11 @@ export class OgDhcpSubnetsComponent {
width: '300px',
data: { name: subnet.name }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `${this.baseUrl}${subnet['@id']}`;
this.http.delete(apiUrl).subscribe({
next: () => {
console.log('Subnet deleted successfully');
@ -131,12 +133,12 @@ export class OgDhcpSubnetsComponent {
}
addClientsToSubnet(subnet: Subnet) {
const dialogRef = this.dialog.open(AddClientsToSubnetComponent, {
width: '600px',
data: { subnetUuid: subnet.uuid, subnetName: subnet.name }
data: { subnetUuid: subnet.uuid, subnetName: subnet.name }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.loadSubnets();