refs #691. Updated UX ogDhcp CRUD

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

@@ -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;

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

@@ -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 >
-      <ng-container *ngIf="column.columnDef === 'name'">
+        {{ column.cell(subnet) }}
-        {{ 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>
+    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
-    <td mat-cell *matCellDef="let subnet">
+    <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 (click)="addClientsToSubnet(subnet)">
-      <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>more_vert</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>
 

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

@@ -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 },