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

<div class="header-container">
  <h2 class="title">Administrar grupos</h2>
  <div class="groups-button-row">
    <button mat-flat-button color="primary" (click)="addOU($event)">Nueva Unidad Organizativa</button>
    <button mat-flat-button color="primary" (click)="addClient($event)">Nuevo Cliente</button>
    <button mat-raised-button (click)="openBottomSheet()">Leyenda</button>

    
  </div>
  <div class="container">
    <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
</div>
</div>
<div class="search-container">
  <mat-form-field appearance="fill">
    <mat-label>Búsqueda</mat-label>
    <input matInput placeholder="Búsqueda" [(ngModel)]="searchTerm" (keyup.enter)="search()">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint>Pulsar 'enter' para buscar entre las unidades organizativas</mat-hint>
  </mat-form-field>
</div>
<div class="groupLists-container">
  <mat-card class="card unidad-card">
    <mat-card-title>Unidad organizativa</mat-card-title>
    <mat-card-content>
      <mat-spinner *ngIf="loading"></mat-spinner>
      <mat-list *ngIf="!loading">
        <mat-list-item *ngFor="let unidad of organizationalUnits"
                       [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
          <div class="item-content">
            <mat-icon>apartment</mat-icon>
            {{ unidad.name }}
            <span class="actions">
              <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="onTreeClick($event, unidad)">
                  <mat-icon
                    class="edit-icon"
                    #tooltip="matTooltip"
                    matTooltip="Visualizar en forma de arbol"
                    matTooltipHideDelay="0">account_tree
                  </mat-icon>
                  Ver organigrama
                </button>
                <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
                  <mat-icon
                    class="edit-icon"
                    #tooltip="matTooltip"
                    matTooltip="Editar unidad organizativa"
                    matTooltipHideDelay="0">edit
                  </mat-icon>
                  Editar
                </button>
                <button mat-menu-item (click)="onShowClick($event, unidad)">
                  <mat-icon
                    class="edit-icon"
                    #tooltip="matTooltip"
                    matTooltip="Visualizar unidad organizativa"
                    matTooltipHideDelay="0">visibility
                  </mat-icon>
                  Visualizar datos
                </button>
                <button mat-menu-item (click)="addOU($event, unidad)">
                  <mat-icon
                    class="edit-icon"
                    #tooltip="matTooltip"
                    matTooltip="Crear unidad organizativa interna"
                    matTooltipHideDelay="0">add_home_work
                  </mat-icon>
                  Añadir unidad organizativa
                </button>
                <button mat-menu-item (click)="addClient($event, unidad)">
                  <mat-icon
                    class="edit-icon"
                    #tooltip="matTooltip"
                    matTooltip="Crear cliente en esta unidad organizativa"
                    matTooltipHideDelay="0">devices
                  </mat-icon>
                  Crear cliente
                </button>
              </mat-menu>
            </span>
          </div>
        </mat-list-item>
      </mat-list>
    </mat-card-content>
  </mat-card>

  <mat-card class="card elements-card">
    <mat-card-title>
      <div class="title-with-breadcrumb">
        <span>Elementos internos</span>
        <mat-card-subtitle>
          <ng-container *ngFor="let crumb of breadcrumb; let i = index">
            <a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>
            <span *ngIf="i < breadcrumb.length - 1"> > </span>
          </ng-container>
        </mat-card-subtitle>
      </div>
    </mat-card-title>
    <mat-card-content class="element-content">
      <mat-spinner *ngIf="loadingChildren"></mat-spinner>
      <mat-list *ngIf="!loadingChildren">
        <div *ngIf="children.length === 0" class="empty-list">
          <mat-icon>info</mat-icon>
          <span>No hay elementos internos</span>
        </div>
        <mat-list-item *ngFor="let child of children" [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" (click)="onSelectChild(child)">
          <div class="item-content">
            <mat-icon [ngSwitch]="child.type">
              <ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
              <ng-container *ngSwitchCase="'classrooms-group'">meeting_room</ng-container>
              <ng-container *ngSwitchCase="'classroom'">school</ng-container>
              <ng-container *ngSwitchCase="'client'">computer</ng-container>
              <ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
              <ng-container *ngSwitchDefault>help_outline</ng-container>
            </mat-icon>
            {{child.name}}
            <span class="actions">
              <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0">edit</mat-icon>
                  Editar
                </button>
                <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="onShowClick($event, child)">
                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0">visibility</mat-icon>
                  Visualizar datos
                </button>
                <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="addOU($event, child)">
                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0">add_home_work</mat-icon>
                  Añadir unidad organizativa
                </button>
                <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="addClient($event, child)">
                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0">devices</mat-icon>
                  Crear cliente
                </button>
                <button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
                  <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0">delete</mat-icon>
                  Borrar elemento
                </button>
              </mat-menu>
            </span>
          </div>
        </mat-list-item>
      </mat-list>
    </mat-card-content>
  </mat-card>

  <!-- <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view> -->
</div>