refs #1477. Refactor Calendar component for improved layout and replace mat-spinner with loading component

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

@@ -1,15 +1,20 @@
-.title {
-  font-size: 24px;
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .calendar-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
-}
-
-.divider {
-  margin: 20px 0;
+  gap: 15px;
 }
 
 .lists-container {
@@ -23,15 +28,14 @@
 
 table {
   width: 100%;
-  margin-top: 50px;
 }
 
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -45,19 +49,12 @@ table {
   padding: 5px;
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-}
-
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .paginator-container {
   display: flex;
   justify-content: end;
   margin-bottom: 30px;
-}
+}

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

@@ -2,30 +2,33 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}" class="title">{{ 'adminCalendarsTitle' | translate }}</h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCalendarsTitle' | translate }}</h2>
+  </div>
   <div class="calendar-button-row">
-    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" mat-flat-button color="primary" (click)="addImage()">
+    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" mat-flat-button color="primary"
+      (click)="addImage()">
       {{ 'addCalendar' | translate }}
     </button>
   </div>
 </div>
-<mat-divider class="divider"></mat-divider>
 
 <div class="search-container">
-  <mat-form-field joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}" appearance="fill" class="search-string">
+  <mat-form-field joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}" appearance="fill"
+    class="search-string">
     <mat-label>{{ 'searchCalendarLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
+    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
+      (keyup.enter)="search()">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
   </mat-form-field>
 </div>
 
-<div *ngIf="loading" class="loading-container">
-  <mat-spinner></mat-spinner>
-</div>
+<app-loading [isLoading]="loading"></app-loading>
 
 <div *ngIf="!loading">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableStepText' | translate }}">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+    text="{{ 'tableStepText' | translate }}">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let image">
@@ -34,7 +37,8 @@
             {{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
           </mat-icon>
         </ng-container>
-        <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
+        <ng-container
+          *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
           {{ column.cell(image) }}
         </ng-container>
       </td>
@@ -50,7 +54,7 @@
           <mat-icon>sync</mat-icon>
         </button>
         <button *ngIf="syncUds" mat-icon-button color="primary">
-          <mat-spinner diameter="24"></mat-spinner>
+          <app-loading [isLoading]="syncUds"></app-loading>
         </button>
         <button mat-icon-button color="warn" (click)="deleteCalendar(calendar)">
           <mat-icon>delete</mat-icon>
@@ -64,10 +68,7 @@
 </div>
 
 <div class="paginator-container">
-  <mat-paginator [length]="length"
-                 [pageSize]="itemsPerPage"
-                 [pageIndex]="page"
-                 [pageSizeOptions]="pageSizeOptions"
-                 (page)="onPageChange($event)">
+  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
+    (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>

ogWebconsole/src/app/components/calendar/calendar.component.spec.ts

@@ -15,6 +15,7 @@ import { CalendarComponent } from './calendar.component';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { JoyrideModule, JoyrideService } from 'ngx-joyride';
 import { TranslateModule } from '@ngx-translate/core';
+import { LoadingComponent } from '../../shared/loading/loading.component';
 
 describe('CalendarComponent', () => {
   let component: CalendarComponent;
@@ -22,7 +23,7 @@ describe('CalendarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CalendarComponent],
+      declarations: [CalendarComponent, LoadingComponent],
       imports: [
         HttpClientTestingModule,
         ToastrModule.forRoot(),

ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html

@@ -49,7 +49,7 @@
   </mat-form-field>
 </div>
 
-<mat-spinner *ngIf="loading"></mat-spinner>
+<app-loading [isLoading]="loading"></app-loading>
 <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
   [text]="'tableDescription' | translate">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">

ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.spec.ts

@@ -15,6 +15,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table'; 
 import { TranslateModule } from '@ngx-translate/core';
 import { JoyrideModule } from 'ngx-joyride';
+import { LoadingComponent } from '../../../shared/loading/loading.component';
 
 describe('PXEimagesComponent', () => {
   let component: PXEimagesComponent;
@@ -26,7 +27,7 @@ describe('PXEimagesComponent', () => {
 
   mockToastrService = jasmine.createSpyObj('ToastrService', ['success', 'error']);
     await TestBed.configureTestingModule({
-      declarations: [PXEimagesComponent],
+      declarations: [PXEimagesComponent, LoadingComponent],
       imports: [HttpClientModule,
         MatAccordion,
         MatExpansionPanel,

ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html

@@ -34,7 +34,7 @@
   </mat-form-field>
 </div>
 
-<mat-spinner *ngIf="loading"></mat-spinner>
+<app-loading [isLoading]="loading"></app-loading>
 <table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
   text="{{ 'tableDescription' | translate }}">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">

ogWebconsole/src/app/components/ogboot/pxe/pxe.component.spec.ts

@@ -23,13 +23,14 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 import { JoyrideModule } from 'ngx-joyride';
+import { LoadingComponent } from '../../../shared/loading/loading.component';
 describe('PxeComponent', () => {
   let component: PxeComponent;
   let fixture: ComponentFixture<PxeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [PxeComponent],
+      declarations: [PxeComponent, LoadingComponent],
       imports: [
         FormsModule,
         MatInputModule,