refs #1619.Refactor: update layout dimensions and styles for groups component

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

@@ -3,6 +3,7 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .header-container {
@@ -18,6 +19,7 @@
   flex-direction: row;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .header-container-title {
@@ -41,7 +43,10 @@
 .clients-container {
   flex-grow: 1;
   box-sizing: border-box;
-  overflow-y: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 1rem 0rem 0.5rem;
 }
 
 .clients-view-header {
@@ -52,7 +57,36 @@
   margin-top: 0.5rem;
   align-items: center;
   padding-right: 1rem;
+}
+
+.clients-view {
   flex-grow: 1;
+  overflow-y: auto;
+}
+
+.cards-view {
+  display: flex;
+  flex-grow: 1;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.clients-table {
+  max-height: calc(100vh - 330px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.clients-table table {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: end;
+  margin-top: auto;
 }
 
 .actions mat-icon {
@@ -234,7 +268,7 @@ mat-tree mat-tree-node.disabled:hover {
   display: flex;
   flex-direction: column;
   justify-content: start;
-  padding: 1em;
+  padding: 1em 1em 0em 1em;
 }
 
 .chip-busy {
@@ -311,9 +345,21 @@ mat-tree mat-tree-node.disabled:hover {
   margin: 0 4px;
 }
 
+.filters-and-tree-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.filters-panel {
+  flex-shrink: 0;
+}
+
 .tree-container {
-  overflow-x: hidden;
+  flex-grow: 1;
   overflow-y: auto;
+  max-height: calc(100% - var(--filters-panel-height));
+  margin-bottom: 1rem;
 }
 
 .client-item {
@@ -527,11 +573,6 @@ mat-button-toggle-group {
   background-color: #c7c7c7;
 }
 
-.cards-view {
-  display: flex;
-  width: 100%;
-}
-
 .clients-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

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

@@ -198,7 +198,7 @@
         <app-loading [isLoading]="isLoadingClients"></app-loading>
 
         <!-- CLIENTS VIEWS-->
-        <div *ngIf="!isLoadingClients">
+        <div class="clients-view" *ngIf="!isLoadingClients">
           <div *ngIf="hasClients; else noClientsTemplate">
             <!-- Cards view -->
             <div *ngIf="currentView === 'card'" class="cards-view">
@@ -260,8 +260,9 @@
             </div>
 
             <!-- List view -->
-            <div class="clients-table" *ngIf="currentView === 'list'">
+            <div *ngIf="currentView === 'list'" class="list-view">
-              <table mat-table matSort [dataSource]="selectedClients" class="mat-elevation-z8">
+              <section class="clients-table" tabindex="0">
+                <table mat-table matSort [dataSource]="selectedClients">
                   <ng-container matColumnDef="select">
                     <th mat-header-cell *matHeaderCellDef>
                       <mat-checkbox (change)="$event ? toggleAllRows() : null"
@@ -351,9 +352,10 @@
                       </mat-menu>
                     </td>
                   </ng-container>
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table>
+              </section>
               <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
             </div>
           </div>

ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts

@@ -1,27 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import {MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { OperationResultDialogComponent } from './operation-result-dialog.component';
-import {ShowClientsComponent} from "../show-clients/show-clients.component";
+import { MatExpansionModule } from "@angular/material/expansion";
-import {MatExpansionModule} from "@angular/material/expansion";
+import { MatIconModule } from "@angular/material/icon";
-import {MatIconModule} from "@angular/material/icon";
+import { MatDividerModule } from "@angular/material/divider";
-import {MatDividerModule} from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
-import {MatFormFieldModule} from "@angular/material/form-field";
+import { MatSelectModule } from "@angular/material/select";
-import {MatSelectModule} from "@angular/material/select";
+import { MatPaginatorModule } from "@angular/material/paginator";
-import {MatPaginatorModule} from "@angular/material/paginator";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import { FormsModule } from "@angular/forms";
-import {FormsModule} from "@angular/forms";
+import { MatInputModule } from "@angular/material/input";
-import {MatInputModule} from "@angular/material/input";
+import { MatTableModule } from "@angular/material/table";
-import {MatDialog, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
+import { TranslateModule } from "@ngx-translate/core";
-import {MatTableModule} from "@angular/material/table";
+import { JoyrideModule } from "ngx-joyride";
-import {TranslateModule} from "@ngx-translate/core";
+import { HttpClient } from "@angular/common/http";
-import {JoyrideModule} from "ngx-joyride";
+import { ToastrService } from "ngx-toastr";
-import {HttpClient} from "@angular/common/http";
+import { LoadingComponent } from "../../../shared/loading/loading.component";
-import {ToastrService} from "ngx-toastr";
-import {LoadingComponent} from "../../../shared/loading/loading.component";
 
 describe('OperationResultDialogComponent', () => {
-  let component: ShowClientsComponent;
+  let component: OperationResultDialogComponent;
-  let fixture: ComponentFixture<ShowClientsComponent>;
+  let fixture: ComponentFixture<OperationResultDialogComponent>;
   let mockDialog: jasmine.SpyObj<MatDialog>;
   let mockHttpClient: jasmine.SpyObj<HttpClient>;
   let mockToastrService: jasmine.SpyObj<ToastrService>;
@@ -29,17 +27,8 @@ describe('OperationResultDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [OperationResultDialogComponent, LoadingComponent],
-      imports: [MatDialogModule],
-      providers: [
-        { provide: MatDialogRef, useValue: {} },
-        { provide: MAT_DIALOG_DATA, useValue: { success: [], errors: [] } }
-      ]
-    })
-    .compileComponents();
-
-    await TestBed.configureTestingModule({
-      declarations: [ShowClientsComponent],
       imports: [
+        MatDialogModule,
         MatExpansionModule,
         MatIconModule,
         MatDividerModule,
@@ -49,24 +38,21 @@ describe('OperationResultDialogComponent', () => {
         BrowserAnimationsModule,
         FormsModule,
         MatInputModule,
-        MatDialogModule,
         MatTableModule,
         TranslateModule.forRoot(),
         JoyrideModule.forRoot(),
       ],
       providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: { success: [], errors: [] } },
         { provide: MatDialog, useValue: mockDialog },
         { provide: HttpClient, useValue: mockHttpClient },
         { provide: ToastrService, useValue: mockToastrService },
-        {
-          provide: MatDialogRef,
-          useValue: {}
-        },
       ],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(ShowClientsComponent);
+    fixture = TestBed.createComponent(OperationResultDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.spec.ts

@@ -13,10 +13,12 @@ import { MatTableModule } from "@angular/material/table";
 import { TranslateModule } from "@ngx-translate/core";
 import { JoyrideModule } from "ngx-joyride";
 import { MatDialog, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { HttpClient } from "@angular/common/http";
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpClient } from '@angular/common/http';
 import { ToastrService } from "ngx-toastr";
 import { of } from "rxjs";
 import { LoadingComponent } from '../../../shared/loading/loading.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; // Add this import
 
 describe('ShowClientsComponent', () => {
   let component: ShowClientsComponent;
@@ -27,7 +29,6 @@ describe('ShowClientsComponent', () => {
 
   beforeEach(async () => {
     mockDialog = jasmine.createSpyObj('MatDialog', ['open']);
-    mockHttpClient = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete']);
     mockToastrService = jasmine.createSpyObj('ToastrService', ['success', 'error']);
 
     await TestBed.configureTestingModule({
@@ -46,10 +47,11 @@ describe('ShowClientsComponent', () => {
         MatTableModule,
         TranslateModule.forRoot(),
         JoyrideModule.forRoot(),
+        HttpClientTestingModule,
+        MatProgressSpinnerModule // Add this import
       ],
       providers: [
         { provide: MatDialog, useValue: mockDialog },
-        { provide: HttpClient, useValue: mockHttpClient },
         { provide: ToastrService, useValue: mockToastrService },
         { provide: MatDialogRef, useValue: {} },
         { provide: MAT_DIALOG_DATA, useValue: {} },

ogWebconsole/src/app/layout/header/header.component.css

@@ -1,5 +1,6 @@
 mat-toolbar {
   height: 7vh;
+  min-height: 60px;
   background-color: #3f51b5;
   color: white;
 }