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

<div class="header-container">
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
  <h2 class="title" joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
    {{ 'adminImagesTitle' | translate }}
  </h2>
  <div class="images-button-row">
    <button mat-flat-button color="accent" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
    <button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep" [text]="'addImageButtonDescription' | translate">
      {{ 'addImageButton' | translate }}
    </button>
  </div>
</div>

<mat-divider class="divider"></mat-divider>

<div class="search-container">
  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" [text]="'searchNameDescription' | translate">
    <mat-label>{{ 'searchLabel' | translate }}</mat-label>
    <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>

  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep" [text]="'searchDefaultDescription' | translate">
    <mat-label>{{ 'searchDefaultLabel' | translate }}</mat-label>
    <mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
      <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
      <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
      <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep" [text]="'searchInstalledDescription' | translate">
    <mat-label>{{ 'searchInstalledLabel' | translate }}</mat-label>
    <mat-select [(ngModel)]="filters['installed']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
      <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
      <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
      <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<mat-spinner *ngIf="loading"></mat-spinner>
<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">
    <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
    <td mat-cell *matCellDef="let image">
      <ng-container *ngIf="column.columnDef === 'isDefault' || column.columnDef === 'installed'">
        <mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
          <ng-container *ngIf="image[column.columnDef]; else cancelIcon">
            {{ 'checkCircle' | translate }}
          </ng-container>
          <ng-template #cancelIcon>
            {{ 'cancelIcon' | translate }}
          </ng-template>
        </mat-icon>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'downloadUrl'">
        <span matTooltip="{{ image.downloadUrl }}">
          {{ image.downloadUrl ? image.downloadUrl.substring(0, 20) + '...' : '' }}
        </span>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'name'">
        <span matTooltip="{{ image.name }}">
          {{ image.name  }}
        </span>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'status'">
        <mat-chip>
          {{ column.cell(image) }}
        </mat-chip>
      </ng-container>

      <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
        {{ column.cell(image) }}
      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actionsColumnHeader' | translate }}</th>
    <td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep" [text]="'actionsDescription' | translate">
      <button mat-icon-button color="info" (click)="showOgLive($event, image)">
        <mat-icon>{{ 'viewIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button color="primary" (click)="editImage(image)">
        <mat-icon>{{ 'editIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button color="warn" (click)="deleteImage(image)">
        <mat-icon>{{ 'deleteIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item [disabled]="image.installed" (click)="toggleAction(image, 'install')">{{ 'installOption' | translate }}</button>
        <button mat-menu-item [disabled]="!image.installed" (click)="toggleAction(image, 'uninstall')">
          {{ 'uninstallOption' | translate }}
        </button>
        <button mat-menu-item [disabled]="!image.installed" (click)="toggleAction(image, 'set-default')">
          {{ 'setDefaultOption' | translate }}
        </button>
      </mat-menu>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<div class="paginator-container" joyrideStep="paginationStep" [text]="'paginationDescription' | translate">
  <mat-paginator [length]="length"
                 [pageSize]="itemsPerPage"
                 [pageIndex]="page"
                 [pageSizeOptions]="pageSizeOptions"
                 (page)="onPageChange($event)">
  </mat-paginator>
</div>