datasurvey/src/main/webapp/app/entities/usuario-extra/list/usuario-extra.component.html

<div>
  <h2 id="page-heading" data-cy="UsuarioExtraHeading">
    <div>
      <span class="ds-title" jhiTranslate="dataSurveyApp.usuarioExtra.home.title">Usuarios</span>
      <p class="ds-subtitle">Administre los usuarios registrados en la aplicación</p>
    </div>

    <div class="d-flex justify-content-end">
      <button id="jh-create-entity" data-cy="entityCreateButton" class="ds-btn ds-btn--primary" [routerLink]="['/usuario-extra/new']">
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="dataSurveyApp.usuarioExtra.home.createLabel"> Create a new administrador </span>
      </button>
    </div>
  </h2>

  <jhi-alert-error></jhi-alert-error>

  <div *ngIf="successChange" class="alert alert-success alert-dismissible fade show" role="alert">
    El estado del usuario fue modificado correctamente
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="alert alert-warning" id="no-result" *ngIf="usuarioExtras?.length === 0">
    <span jhiTranslate="dataSurveyApp.usuarioExtra.home.notFound">No usuarioExtras found</span>
  </div>
  <form class="ds-form d-inline">
    <div class="input-group">
      <div class="ds-filter">
        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
        <input type="text" name="searchNombreUsuario" placeholder="Buscar por nombre..." [(ngModel)]="searchNombreUsuario" />
      </div>
      <div class="ds-filter">
        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
        <select name="searchEstadoUsuario" id="searchEstadoUsuario" [(ngModel)]="searchEstadoUsuario" style="width: 200px">
          <option value="" selected="selected" disabled="disabled">Filtrar por estado</option>
          <option value="">Todos Estados</option>
          <option value="Active">Activos</option>
          <option value="Suspended">Bloqueados</option>
        </select>
      </div>
    </div>
  </form>
  <div class="table-responsive" id="entities" *ngIf="usuarioExtras && usuarioExtras.length > 0">
    <table class="ds-table table table-striped" aria-describedby="page-heading">
      <thead>
        <tr>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.rol">Rol</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.iconoPerfil">Icono</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.nombre">Nombre Usuario</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.correo">Correo electrónico</span></th>
          <th scope="col"><span>Fecha de nacimiento</span></th>
          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.estado">Estado</span></th>
          <!--<th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.plantilla">Plantilla</span></th>-->
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="
            let usuarioExtra of usuarioExtras | filter: 'nombre':searchNombreUsuario | filter: 'estado':searchEstadoUsuario;
            trackBy: trackId
          "
          data-cy="entityTable"
        >
          <td *ngIf="usuarioExtra.user">
            <ul class="listRoles">
              <li *ngFor="let userRole of usuarioExtra.user.authorities">
                <p>{{ userRole }}</p>
              </li>
            </ul>
          </td>
          <td>
            <div class="photo mb-2"><img src="../../../../content/profile_icons/C{{ usuarioExtra.iconoPerfil }}.png" /></div>
          </td>
          <td>{{ usuarioExtra.nombre }}</td>
          <td *ngIf="usuarioExtra.user">{{ usuarioExtra.user.email }}</td>
          <td *ngIf="usuarioExtra.fechaNacimiento == null">No establecida</td>
          <td *ngIf="usuarioExtra.fechaNacimiento != null">{{ usuarioExtra.fechaNacimiento | formatMediumDate }}</td>
          <td jhiTranslate="{{ 'dataSurveyApp.EstadoUsuario.' + usuarioExtra.estado }}">{{ usuarioExtra.estado }}</td>
          <!--<td>
            <span *ngFor="let plantilla of usuarioExtra.plantillas; let last = last">
              <a class="form-control-static" [routerLink]="['/plantilla', plantilla.id, 'view']">{{ plantilla.id }}</a
              >{{ last ? '' : ', ' }}
            </span>
          </td>-->
          <td class="text-right">
            <div class="btn-group">
              <!-- <button
                type="submit"
                [routerLink]="['/usuario-extra', usuarioExtra.id, 'view']"
                class="ds-btn ds-btn--primary btn-sm"
                data-cy="entityDetailsButton"
              >
                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
              </button> -->

              <button type="submit" (click)="delete(usuarioExtra)" class="ds-btn ds-btn--toggle" data-cy="entityDeleteButton">
                <fa-icon [icon]="faExchangeAlt"></fa-icon>
                <span class="d-none d-md-inline" jhiTranslate="entity.action.toggleStatus">Toggle Status</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>