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

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="General">
    <div class="header-container">
      <h2 class="title" i18n="@@adminGroupsTitle">Administrar grupos</h2>
      <div class="groups-button-row">
        <button mat-flat-button color="primary" (click)="addOU($event)" i18n="@@newOrganizationalUnitButton">Nueva Unidad Organizativa</button>
        <button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@newClientButton">Nuevo Cliente</button>
        <button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
      </div>
    </div>
    <div class="groupLists-container">
      <mat-card class="card unidad-card">
        <mat-card-title i18n="@@organizationalUnitTitle">Centros</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()">more_vert</mat-icon>
                  <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="onTreeClick($event, unidad)">
                      <mat-icon
                        #tooltip="matTooltip"
                        matTooltip="Visualizar en forma de arbol"
                        matTooltipHideDelay="0"
                        i18n="@@viewTreeTooltip">account_tree
                      </mat-icon>
                      <span i18n="@@viewTreeMenu">Ver organigrama</span>
                    </button>
                    <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
                      <mat-icon
                        #tooltip="matTooltip"
                        matTooltip="Editar unidad organizativa"
                        matTooltipHideDelay="0"
                        i18n="@@editUnitTooltip">edit
                      </mat-icon>
                      <span i18n="@@editUnitMenu">Editar</span>
                    </button>
                    <button mat-menu-item (click)="onShowClick($event, unidad)">
                      <mat-icon
                        #tooltip="matTooltip"
                        matTooltip="Visualizar unidad organizativa"
                        matTooltipHideDelay="0"
                        i18n="@@viewUnitTool">visibility
                      </mat-icon>
                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
                    </button>
                    <button mat-menu-item (click)="addOU($event, unidad)">
                      <mat-icon
                        #tooltip="matTooltip"
                        matTooltip="Crear unidad organizativa interna"
                        matTooltipHideDelay="0"
                        i18n="@@addInternalUnitTool">add_home_work
                      </mat-icon>
                      <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                    </button>
                    <button mat-menu-item (click)="addClient($event, unidad)">
                      <mat-icon
                        #tooltip="matTooltip"
                        matTooltip="Crear cliente en esta unidad organizativa"
                        matTooltipHideDelay="0"
                        i18n="@@addClientDevice">devices
                      </mat-icon>
                      <span i18n="@@addClientMenu">Crear cliente</span>
                    </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 i18n="@@internalElementsTitle"></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 i18n="@@noInternalElementsMessage">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}}
                <div class="actions">
                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</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" i18n="@@editElementTooltip">edit</mat-icon>
                      <span i18n="@@editElementMenu">Editar</span>
                    </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" i18n="@@viewUnitTooltip">visibility</mat-icon>
                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
                    </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" i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
                      <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                    </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" i18n="@@addClientTooltip">devices</mat-icon>
                      <span i18n="@@addClientMenu">Crear cliente</span>
                    </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" i18n="@@deleteElementTooltip">delete</mat-icon>
                      <span i18n="@@deleteElementMenu">Borrar elemento</span>
                    </button>
                  </mat-menu>
                </div>
              </div>
            </mat-list-item>
          </mat-list>
        </mat-card-content>
      </mat-card>
    </div>
  </mat-tab>
  <mat-tab i18n-label label="Búsqueda avanzada">
    <app-advanced-search></app-advanced-search>
  </mat-tab>
  <mat-tab i18n-label label="Clientes">
    <app-client-tab-view #clientTab></app-client-tab-view>
  </mat-tab>
  <mat-tab i18n-label label="Unidades organizativas">
    <app-organizational-unit-tab-view #organizationalUnitTab></app-organizational-unit-tab-view>
  </mat-tab>
</mat-tab-group>