dspace-angular/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html

<div class="container">
  {{ldnServicesRD$ | async | json }}
  <div class="d-flex">
    <h2 class="flex-grow-1">{{'ldn-registered-services.title' | translate}}</h2>
  </div>
  <div class="d-flex justify-content-end">
    <button *ngIf="ldnServicesBulkDeleteService.hasSelected()" class="btn btn-primary mr-2"
            (click)="ldnServicesBulkDeleteService.clearAllServices()"><i
      class="fas fa-undo pr-2"></i>{{'process.overview.delete.clear' | translate }}
    </button>
    <button *ngIf="ldnServicesBulkDeleteService.hasSelected()" class="btn btn-danger mr-2"
            (click)="openDeleteModal(deleteModal)"><i
      class="fas fa-trash pr-2"></i>{{'process.overview.delete' | translate: {count: ldnServicesBulkDeleteService.getAmountOfSelectedServices()} }}
    </button>
    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
      class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>

  </div>
  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
                 [paginationOptions]="pageConfig"
                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
        <tr>
          <th scope="col">{{'service.overview.table.name' | translate}}</th>
          <th scope="col">{{'service.overview.table.description' | translate}}</th>
          <th scope="col">{{'service.overview.table.status' | translate}}</th>
          <th scope="col">{{'service.overview.table.actions' | translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page"
            [class.table-danger]="ldnServicesBulkDeleteService.isToBeDeleted(ldnService.id)">
          <td><a [routerLink]="['/ldn-services/', ldnService.id]">{{ldnService.id}}</a></td>
          <td>{{ldnService.description}}</td>
          <td>
            <button class="btn btn-outline-danger"
                    (click)="ldnServicesBulkDeleteService.toggleDelete(ldnService.id)"><i
              class="fas fa-trash"></i></button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </ds-pagination>
</div>

<ng-template #deleteModal>

  <div>

    <div class="modal-header">
      <div>
        <h4>{{'process.overview.delete.header' | translate }}</h4>
      </div>
      <button type="button" class="close"
              (click)="closeModal()" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>

    <div class="modal-body">
      <div *ngIf="!(ldnServicesBulkDeleteService.isProcessing$() |async)">{{'process.overview.delete.body' | translate: {count: ldnServicesBulkDeleteService.getAmountOfSelectedServices()} }}</div>
      <div *ngIf="ldnServicesBulkDeleteService.isProcessing$() |async" class="alert alert-info">
        <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
        <span> {{ 'process.overview.delete.processing' | translate: {count: ldnServicesBulkDeleteService.getAmountOfSelectedServices()} }}</span>
      </div>
      <div class="mt-4">
        <button class="btn btn-primary mr-2" [disabled]="ldnServicesBulkDeleteService.isProcessing$() |async"
                (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
        <button id="delete-confirm" class="btn btn-danger"
                [disabled]="ldnServicesBulkDeleteService.isProcessing$() |async"
                (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: ldnServicesBulkDeleteService.getAmountOfSelectedServices()}  }}
        </button>
      </div>
    </div>
  </div>


</ng-template>