devices.component.html

<mat-toolbar>
  <div class="flex-33">
    <span>{{ 'devices.headerd.devicesTitle.value' | translate }}</span>
  </div>
  <div class="flex justify-end">
    <button mat-button (click)="addDevice()">
      <mat-icon>add</mat-icon>
      <span>{{ 'common.addNew.value' | translate }}</span>
    </button>
  </div>
  @if (!selectedDevices.isEmpty()) {
    <div>
      <button mat-button (click)="bulkEditTags()">
        <mat-icon>edit</mat-icon>
        <span>{{ 'common.editTags.value' | translate }}</span>
      </button>
    </div>
    <div>
      <button mat-icon-button [matTooltip]="'devices.bulk.powerUp.value' | translate" (click)="bulkPowerAction(2)">
        <mat-icon>power</mat-icon>
      </button>
      <button mat-icon-button [matTooltip]="'devices.bulk.powerOff.value' | translate" (click)="bulkPowerAction(8)">
        <mat-icon>power_off</mat-icon>
      </button>
      <button mat-icon-button [matTooltip]="'devices.bulk.restart.value' | translate" (click)="bulkPowerAction(5)">
        <mat-icon>restart_alt</mat-icon>
      </button>
      <button mat-icon-button [matTooltip]="'devices.bulk.deactivate.value' | translate" (click)="bulkDeactivate()">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  }
</mat-toolbar>
@if (isLoading()) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
}

<mat-card>
  <mat-card-content>
    @if (isNoData()) {
      <h3 class="flex justify-center">
        @if (!filteredTags().length) {
          <span>{{ 'devices.noData.value' | translate }}</span>
        } @else {
          <span>{{ 'devices.noDataFilter.value' | translate }}</span>
        }
      </h3>
    } @else {
      <mat-tab-group (selectedTabChange)="onTabChange($event.index)">
        <mat-tab [label]="allTabLabel"></mat-tab>
        <mat-tab [label]="activatedTabLabel"></mat-tab>
        <mat-tab [label]="discoveredTabLabel"></mat-tab>
      </mat-tab-group>
      <div class="flex-row flex-wrap flex-1">
        <div class="flex flex-66" style="width: 66%">
          <mat-form-field data-cy="filterSearch" style="width: 100%">
            <input
              matInput
              (keyup)="applyFilter($event)"
              [placeholder]="'devices.filter.searchPlaceholder.value' | translate" />
            <mat-hint>{{ 'devices.filter.searchHint.value' | translate }}</mat-hint>
          </mat-form-field>
        </div>
        <div class="flex flex-33 justify-end">
          <mat-form-field data-cy="filterTags">
            <mat-label>{{ 'devices.filter.tags.value' | translate }}</mat-label>
            <mat-select [(ngModel)]="filteredTags" (selectionChange)="tagFilterChange($event)" name="tag" multiple>
              @for (tag of tags(); track tag) {
                <mat-option [value]="tag">
                  {{ tag }}
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <mat-table [dataSource]="devices" matSort>
        <!-- select Column -->
        <ng-container matColumnDef="select">
          <mat-header-cell *matHeaderCellDef>
            <mat-checkbox
              (change)="$event ? masterToggle() : null"
              [checked]="isAllSelected()"
              [indeterminate]="areOnlySomeDevicesSelected()">
            </mat-checkbox>
          </mat-header-cell>
          <mat-cell *matCellDef="let device">
            <mat-checkbox
              (click)="$event.stopPropagation()"
              (change)="$event ? selectedDevices.toggle(device) : null"
              [checked]="selectedDevices.isSelected(device)">
            </mat-checkbox>
          </mat-cell>
        </ng-container>
        <!-- host Column -->
        <ng-container matColumnDef="hostname">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'devices.table.hostname.value' | translate }}
          </mat-header-cell>
          <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)">
            {{ element.hostname }}
            @if (element.friendlyName !== null) {
              <span>&nbsp;({{ element.friendlyName }})</span>
            }
          </mat-cell>
        </ng-container>
        <!-- guid Column -->
        <ng-container matColumnDef="guid">
          <mat-header-cell *matHeaderCellDef> {{ 'devices.table.guid.value' | translate }}</mat-header-cell>
          <mat-cell data-cy="guid" *matCellDef="let element" (click)="navigateTo(element.guid)">
            {{ element.guid }}
          </mat-cell>
        </ng-container>
        <!-- status Column -->
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef> {{ 'devices.table.status.value' | translate }}</mat-header-cell>
          <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)">
            @if (isCloudMode) {
              {{ translateConnectionStatus(element.connectionStatus) }}
              @if (element.connectionStatus) {
                <span>&nbsp;(Power: {{ powerStates[element.powerstate] }})</span>
              }
            } @else {
              Power: {{ powerStates[element.powerstate] }}
            }
          </mat-cell>
        </ng-container>
        <!-- productType Column -->
        <ng-container matColumnDef="productType">
          <mat-header-cell *matHeaderCellDef mat-sort-header>{{
            'devices.table.productType.value' | translate
          }}</mat-header-cell>
          <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)">
            {{ getProductType(element) }}
          </mat-cell>
        </ng-container>
        <!-- tags Column -->
        <ng-container matColumnDef="tags">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            <!-- include this always hidden icon to match spacing in the cell -->
            <mat-icon class="alwaysHidden">edit</mat-icon>
            {{ 'common.tags.value' | translate }}
          </mat-header-cell>
          <mat-cell class="tags" *matCellDef="let element">
            <mat-icon class="addTag" (click)="$event.stopPropagation(); editTagsForDevice(element.guid)">edit</mat-icon>

            <mat-chip-set>
              @for (tag of element?.tags; track tag) {
                <mat-chip [disableRipple]="true">{{ tag }}</mat-chip>
              }
            </mat-chip-set>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef> {{ 'devices.table.actions.value' | translate }}</mat-header-cell>
          <mat-cell *matCellDef="let element">
            @if (!selectedDevices.isSelected(element)) {
              <div>
                <button
                  mat-icon-button
                  [matTooltip]="'devices.actions.powerUp.value' | translate"
                  (click)="$event.stopPropagation(); sendPowerAction(element.guid, 2)">
                  <mat-icon>power</mat-icon>
                </button>
                <button
                  mat-icon-button
                  [matTooltip]="'devices.actions.powerOff.value' | translate"
                  (click)="$event.stopPropagation(); sendPowerAction(element.guid, 8)">
                  <mat-icon>power_off</mat-icon>
                </button>
                <button
                  mat-icon-button
                  [matTooltip]="'devices.actions.restart.value' | translate"
                  (click)="$event.stopPropagation(); sendPowerAction(element.guid, 5)">
                  <mat-icon>restart_alt</mat-icon>
                </button>
                <button
                  mat-icon-button
                  [matTooltip]="deleteDeviceLabel"
                  (click)="$event.stopPropagation(); sendDeactivate(element.guid)">
                  <mat-icon>delete</mat-icon>
                </button>
                @if (!isCloudMode) {
                  <button
                    mat-icon-button
                    [matTooltip]="'devices.actions.edit.value' | translate"
                    (click)="$event.stopPropagation(); editDevice(element)">
                    <mat-icon>edit</mat-icon>
                  </button>
                }
              </div>
            }
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="notification">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let element">
            @if (element.StatusMessage === 'SUCCESS') {
              <mat-icon color="primary" [matTooltip]="'devices.notification.success.value' | translate"
                >check_circle</mat-icon
              >
            } @else if (element.StatusMessage === 'NOT_READY') {
              <mat-icon color="warn" [matTooltip]="'devices.notification.notReady.value' | translate">warning</mat-icon>
            } @else if (element.StatusMessage === 'ERROR') {
              <mat-icon color="warn" [matTooltip]="'devices.notification.error.value' | translate">error</mat-icon>
            } @else {}
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <!--      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>-->
        <mat-row *matRowDef="let row; columns: displayedColumns" (click)="navigateTo(row.guid)"></mat-row>
      </mat-table>
    }

    @if (totalCount() !== 0) {
      <div>
        <mat-paginator
          [pageSizeOptions]="[25, 50, 100]"
          [pageSize]="pageEvent.pageSize"
          [length]="allCount"
          (page)="pageChanged($event)"
          showFirstLastButtons>
        </mat-paginator>
      </div>
    }
  </mat-card-content>
</mat-card>