Ontica/Empiria.Land.Intranet

<div class="fx-column-container-fill" [style.paddingRight.px]="8" [empNgSpinnerHost]="spinner">

  <emp-ng-spinner #spinner [visible]="!displayItemAssign && submitted">

  </emp-ng-spinner>

  <div class="fx-row-container fx-space-between">

    <div class="fx-item-half">

      <emp-ng-select *ngIf="selectorRequired"
        name="selectedSelector"
        [(ngModel)]="selectedSelectorUID" [ngModelOptions]="{standalone: true}"
        [items]="itemsForSelectorList"
        [showError]="!selectedSelectorUID"
        placeholder="Seleccione la aplicación"
        (changes)="onSelectedSelectorChanges($event)">
      </emp-ng-select>

    </div>

    <div *ngIf="canEdit" class="fx-item-none fx-end fx-items-center">

      <button
        [disabled]="!isSelectorValid"
        [class.btn]="!isSelectorValid"
        [class.btn-action]="isSelectorValid"
        [style.marginLeft.px]="8"
        (click)="onAssignItemButtonClicked()">
        Agregar {{itemTypeName}}
      </button>

    </div>

  </div>

  <table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="item">
      <th mat-header-cell *matHeaderCellDef> {{itemTypeName}} </th>
      <td mat-cell *matCellDef="let row"> {{ row.name }} </td>
    </ng-container>

    <ng-container matColumnDef="actionDelete">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let row" class="column-action">
        <button [title]="'Eliminar ' +  (itemTypeName | lowercase)"
          mat-icon-button (click)="onRemoveItemClicked(row)">
          <mat-icon>
            delete
          </mat-icon>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="notFoundMessage">
      <td mat-footer-cell *matFooterCellDef [attr.colspan]="displayedColumns.length">
        {{queryExcecuted ? 'No se han agregado elementos.' : 'No se ha invocado la consulta.'}}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="['notFoundMessage']" class="text-not-found"
      [hidden]="dataSource.data.length > 0"></tr>

  </table>

</div>


<emp-ng-security-item-assign *ngIf="displayItemAssign"
  [itemsAssignedList]="itemsAssignedList"
  [itemsToAssignList]="itemsToAssignList"
  [itemTypeName]="itemTypeName"
  [submitted]="submitted"
  (securityItemAssignEvent)="onSecurityItemAssignEvent($event)">

</emp-ng-security-item-assign>