Improvements groups

ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts

@@ -5,9 +5,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   selector: 'app-classroom-view-dialog',
   template: `
   <h2 mat-dialog-title>Plano de {{ classroomName }}</h2>
-    <mat-dialog-content>
   <app-classroom-view [clients]="data.clients"></app-classroom-view>
-    </mat-dialog-content>
   `,
   styles: [`
     mat-dialog-content {

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  height: 90%;
   border: 3px solid black;
 }
 

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html

@@ -1,5 +1,5 @@
-<div class="classroom">
+<mat-dialog-content class="classroom">
-  <mat-card *ngFor="let group of groupedClients" class="classroom-group">
+  <div *ngFor="let group of groupedClients" class="classroom-group">
     <div class="misc-clients">
       <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom" i18n="@@digital-board">Pizarra digital</div>
       <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom" i18n-alt="@@projector-alt"/>
@@ -22,6 +22,9 @@
         </div>
       </div>
     </div>
-  </mat-card>
   </div>
+</mat-dialog-content>
+<mat-dialog-actions>
   <button mat-flat-button class="saveDisposition-btn" color="primary" (click)="saveDisposition()" i18n="@@save-disposition-button">Guardar disposición</button>
+</mat-dialog-actions>
+

ogWebconsole/src/app/components/groups/data.service.ts

@@ -107,7 +107,7 @@ export class DataService {
     );
   }
 
-  getFilteredResults(filter1: string, filter2: string, filterName: string, page: number, pageSize: number): Observable<any> {
+  getFilteredResults(filter1: string, filter2: string, filterName: string, filterIP: string, filterMAC: string, page: number, pageSize: number): Observable<any> {
     let params = new HttpParams();
 
     if (filter2 && filter2 !== 'none') {
@@ -117,6 +117,14 @@ export class DataService {
       params = params.set('name', filterName);
     }
 
+    if (filterIP) {
+      params = params.set('ip', filterIP);
+    }
+
+    if (filterMAC) {
+      params = params.set('mac', filterMAC);
+    }
+
     params = params.set('page', page.toString());
     params = params.set('itemsPerPage', pageSize.toString());
 

ogWebconsole/src/app/components/groups/groups.component.css

@@ -1,6 +1,8 @@
 .groupLists-container {
   display: flex;
   flex-wrap: wrap;
+  height: auto;
+  margin-bottom: 30px;
 }
 
 .search-container {
@@ -25,7 +27,7 @@
 .unidad-card, .elements-card {
   flex: 1 1 45%;
   background-color: #fafafa;
-  height: 400px;
+  height: 600px;
   overflow-y: auto;
 }
 
@@ -130,10 +132,6 @@ mat-spinner {
   display: flex;
   justify-content: flex-end;
   width: 100%;
-  padding-right: 20px; 
-}
-
-.roomMap-btn{
 }
 
 .container {
@@ -202,5 +200,3 @@ mat-card {
   margin-bottom: 20px;
 }
 
-.temp_filter{color: red;
-}

ogWebconsole/src/app/components/groups/groups.component.html

@@ -7,9 +7,6 @@
         <button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@newClientButton">Nuevo Cliente</button>
         <button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
       </div>
-      <div class="classroomBtn-container">
-        <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'" i18n="@@classroomMapButton">Plano de aula</button>
-      </div>
     </div>
     <div class="search-container">
       <mat-form-field appearance="fill">
@@ -18,6 +15,9 @@
         <mat-icon matSuffix>search</mat-icon>
         <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar entre las unidades organizativas</mat-hint>
       </mat-form-field>
+      <div class="classroomBtn-container">
+        <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'" i18n="@@classroomMapButton">Plano de aula</button>
+      </div>
     </div>
     <div class="groupLists-container">
       <mat-card class="card unidad-card">
@@ -29,13 +29,20 @@
                            [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
               <div class="item-content">
                 <mat-icon>apartment</mat-icon>
-                {{ unidad.name }}
+                {{ breadcrumb.length === 0 ? unidad.name : null }}
+                <ng-container *ngIf="unidad === selectedUnidad">
+                  <span class="breadcrumb">
+                    <ng-container *ngFor="let crumb of breadcrumb; let i = index">
+                      <a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>
+                      <span *ngIf="i < breadcrumb.length - 1"> > </span>
+                    </ng-container>
+                  </span>
+                </ng-container>
                 <span class="actions">
                   <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onTreeClick($event, unidad)">
                       <mat-icon
-                        class="edit-icon"
                         #tooltip="matTooltip"
                         matTooltip="Visualizar en forma de arbol"
                         matTooltipHideDelay="0"
@@ -45,7 +52,6 @@
                     </button>
                     <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
                       <mat-icon
-                        class="edit-icon"
                         #tooltip="matTooltip"
                         matTooltip="Editar unidad organizativa"
                         matTooltipHideDelay="0"
@@ -55,7 +61,6 @@
                     </button>
                     <button mat-menu-item (click)="onShowClick($event, unidad)">
                       <mat-icon
-                        class="edit-icon"
                         #tooltip="matTooltip"
                         matTooltip="Visualizar unidad organizativa"
                         matTooltipHideDelay="0"
@@ -65,7 +70,6 @@
                     </button>
                     <button mat-menu-item (click)="addOU($event, unidad)">
                       <mat-icon
-                        class="edit-icon"
                         #tooltip="matTooltip"
                         matTooltip="Crear unidad organizativa interna"
                         matTooltipHideDelay="0"
@@ -75,7 +79,6 @@
                     </button>
                     <button mat-menu-item (click)="addClient($event, unidad)">
                       <mat-icon
-                        class="edit-icon"
                         #tooltip="matTooltip"
                         matTooltip="Crear cliente en esta unidad organizativa"
                         matTooltipHideDelay="0"
@@ -241,12 +244,12 @@
 
           <mat-form-field class="example-full-width">
             <mat-label class="temp_filter">IP</mat-label>
-            <input matInput placeholder="Dírección IP" i18n [(ngModel)]="filterIP">
+            <input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterIP">
           </mat-form-field>
 
           <mat-form-field class="example-full-width" >
             <mat-label class="temp_filter">MAC</mat-label>
-            <input matInput placeholder="Dírección IP" i18n [(ngModel)]="filterMAC">
+            <input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterMAC">
           </mat-form-field>
 
         </ng-container>
@@ -265,7 +268,9 @@
                   </mat-checkbox>
                   <mat-card-title>{{ result.name }}</mat-card-title>
                   <mat-card-content>
-                    <p>{{ result.type }}</p>
+                    <p>{{ result.type !== 'client' ? result.type : '' }}</p>
+                    <p>{{ result.type === 'client' ? result.ip : '' }}</p>
+                    <p>{{ result.type === 'client' ? result.mac : '' }}</p>
                     <p *ngIf="result.type !== 'client'" i18n="@@internalUnits">
                       Unidades internas: {{ result.type !== 'client' ? result.children.length : 0 }}
                     </p>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -290,7 +290,6 @@ export class GroupsComponent implements OnInit {
     if (this.selectedDetail && this.selectedDetail.type === 'classroom') {
       const dialogRef = this.dialog.open(ClassroomViewDialogComponent, {
         width: '90vw',
-        height: '90vh',
         data: { clients: this.clientsData }
       });
 
@@ -301,7 +300,7 @@ export class GroupsComponent implements OnInit {
   }
 
   applyFilter() {
-    this.dataService.getFilteredResults(this.selectedFilter1, this.selectedFilter2, this.filterName, this.page, this.itemsPerPage)
+    this.dataService.getFilteredResults(this.selectedFilter1, this.selectedFilter2, this.filterName, this.filterIP, this.filterMAC, this.page, this.itemsPerPage)
       .subscribe(
         response => {
           this.filteredResults = response.results;