SistemaMantenimiento/sistema-mantenimiento-front/src/app/components/equipment-management/equipment-management.component.html

<div class="module-container prevent-select animated fadeIn">
  <div id="navigation" class="mb-8 animated fadeIn" style="float: left; margin: 20px;">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple (click)="goBack(1)">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </div>

  <div class="menu-title animated fadeIn">
    <span>Gestión de equipamientos</span>
  </div>

  <div class="equipment-toolbar">
    <div class="arborescence-block" [ngClass]="{ hidden: !isLoading }"></div>
    <div class="arborescence-container animated fadeIn" id="arborescence-scroll" [ngClass]="{ hidden: isLoading }">
      <div class="arborescence-level-container" *ngFor="let item of arborescence; let i = index" (click)="navigateArborescence(i + 1)">
        <span [ngClass]="{ active_arborescence_level: i == arborescence.length - 1, inactive_arborescence_level: i < arborescence.length - 1 }" 
        style="white-space: nowrap;">
          {{ item }}
        </span>
        <mat-icon class="ml-4 mr-4 arborescence-separator" *ngIf="i < arborescence.length - 1">
          arrow_forward_ios
        </mat-icon>
      </div>
    </div>
    <button mat-mini-fab color="primary" matTooltip="Configuración" [matMenuTriggerFor]="menu" class="ml-10">
      <mat-icon>settings</mat-icon>
    </button>
    <mat-menu #menu yPosition="below" xPosition="before">
      <button mat-menu-item (click)="openEquipmentForm('new')">
        <mat-icon>add</mat-icon> Registrar equipamiento
      </button>
      <button mat-menu-item (click)="manageFamilies()">
        <mat-icon>category</mat-icon> Administrar familias
      </button>
      <button mat-menu-item (click)="manageLocations()">
        <mat-icon>pin_drop</mat-icon> Administrar ubicaciones
      </button>
      <button mat-menu-item (click)="manageOccupations()">
        <mat-icon>work</mat-icon> Administrar ocupaciones
      </button>
      <button mat-menu-item (click)="openGraphicArborescence()">
        <mat-icon>account_tree</mat-icon> Vista gráfica de la arborescencia
      </button>
      <button mat-menu-item (click)="manageEquipmentTypes()">
        <mat-icon>checklist</mat-icon> Tipos de equipamientos
      </button>
      <button mat-menu-item (click)="locationsNavigation()">
        <mat-icon>pin_drop</mat-icon> Localización de equipamientos
      </button>
      <button mat-menu-item (click)="navigateToArborescenceCalendar()">
        <mat-icon>event</mat-icon> Calendario de arborescencias
      </button>
    </mat-menu>
    <button mat-mini-fab class="cyan_dark_background white_font ml-10" matTooltip="Actualizar datos" (click)="getPendingEquipments()">
      <mat-icon>refresh</mat-icon>
    </button>
  </div>

  <div class="equipment-main-container">
    <a class="hidden" id="download"></a>
    <div class="loader-container" *ngIf="isLoading">
      <mat-spinner></mat-spinner>
      <h2 class="loader-label">Cargando...</h2>
    </div>
    
    <div class="error-container" *ngIf="!isLoading && hasError">
      <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
      <h1 style="color: #e53935;">¡Error!</h1>
      <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
    </div>

    <div class="pending-equipments animated fadeIn" *ngIf="!isLoading && !hasError && pendingEquipments.length > 0">
      <h2>Equipos en revisión</h2>
      <div class="pending-equipments-list">
        <app-equipment-card equipmentType="pending" *ngFor="let pendingEquipment of pendingEquipments" [pendingEquipment]="pendingEquipment" 
        (refreshPendingList)="shouldRefresh($event)"></app-equipment-card>
      </div>
    </div>

    <div class="scroll-vertical animated fadeIn" *ngIf="!isLoading && !hasError" [ngClass]="{ equipments_full_width: pendingEquipments.length == 0, 
    equipments_partial_width: pendingEquipments.length > 0}">
      <div class="equipments-container w-100" *ngIf="!isLoading && !hasError && currentLevel == 1 && families.length > 0">
        <app-family-card *ngFor="let family of families" [id]="family.CODIGOFAMILIA" [icon]="family.ICONO" [customIcon]="family.ICONO_PERSONALIZADO" 
        [family]="family.NOMBREFAMILIA" [iconFile]="family.URL_ICONO!" (familyClicked)="familyClicked($event)"></app-family-card>
      </div>

      <div class="equipments-container w-100" *ngIf="!isLoading && !hasError && currentLevel == 1 && (families.length == 0)">
        <div class="w-100" style="display: flex; justify-content: center; align-items: center;">
          <object data="assets/img/empty_data.svg" style="width: 200px;"></object>
        </div>
        <h3 style="font-weight: 500;">
          No se encontraron familias registradas.
        </h3>
      </div>

      <div class="equipments-container w-100" *ngIf="!isLoading && !hasError && currentLevel == 2">
        <app-family-card *ngFor="let subfamily of subfamilies" [id]="subfamily.CODIGOSUBFAMILIA" [icon]="subfamily.ICONO" 
        [family]="subfamily.NOMBRESUBFAMILIA" [iconFile]="subfamily.URL_ICONO!" (familyClicked)="subfamilyClicked($event)" 
        [customIcon]="subfamily.ICONO_PERSONALIZADO"></app-family-card>
      </div>

      <div class="equipments-container w-100" *ngIf="!isLoading && !hasError && currentLevel == 2 && (subfamilies.length == 0)">
        <div class="w-100" style="display: flex; justify-content: center; align-items: center;">
          <object data="assets/img/empty_data.svg" style="width: 200px;"></object>
        </div>
        <h3 style="font-weight: 500;">
          No se encontraron familias registradas.
        </h3>
      </div>

      <div class="no-equipments w-100" *ngIf="!isLoading && !hasError && currentLevel == 3 && equipmentsBySubfamily.length == 0">
        <object data="assets/img/empty_data.svg" width="300"></object>
        <h2>No se encontraron equipamientos relacionados.</h2>
      </div>

      <div class="equipments-container w-100" *ngIf="!isLoading && !hasError && currentLevel >= 3">
        <app-equipment-details class="w-100" [equipment]="parentEquipmentDetails" *ngIf="currentLevel > 3" 
        (refreshCriticality)="updateEquipmentCriticality($event)" (printFile)="generateFile($event)"></app-equipment-details>
        <app-equipment-card equipmentType="equipment" *ngFor="let equipment of equipmentsBySubfamily" [equipment]="equipment" 
        (openChildren)="openChildren($event)"></app-equipment-card>

        <div class="no-equipments w-100 mt-32" *ngIf="equipmentsBySubfamily.length == 0">
          <object data="assets/img/empty_data.svg" width="300"></object>
          <h2>No se encontraron equipamientos relacionados.</h2>
        </div>
      </div>
    </div>
  </div>
</div>