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 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"
                   [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
                   [hideGear]="true"
                   [hidePagerWhenSinglePage]="true"
                   [pageInfoState]="(ldnServicesRD$ | async)?.payload"
                   [paginationOptions]="pageConfig">
        <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 servicesData">
                    <td>{{ ldnService.name }}</td>
                    <td>{{ ldnService.description }}</td>
                    <td>
                        <span [ngClass]="{ 'status-enabled': ldnService.status, 'status-disabled': !ldnService.status }"
                              class="status-indicator" (click)="toggleStatus(ldnService)"
                              [title]="ldnService.status ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)">
                            {{ ldnService.status ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                        </span>
                    </td>
                    <td>
                        <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
                            <i class="fas fa-trash"></i>
                        </button>
                        <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
                                class="btn btn-outline-dark">
                            <i class="fas fa-edit"></i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </ds-pagination>
</div>

<ng-template #deleteModal>

    <div>

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

        <div class="modal-body">
            <div>
                {{ 'service.overview.delete.body' | translate }}
            </div>
            <div class="mt-4">
                <button (click)="closeModal()"
                        class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
                <button (click)="deleteSelected()" class="btn btn-danger"
                        id="delete-confirm">{{ 'service.overview.delete' | translate }}
                </button>
            </div>
        </div>
    </div>
</ng-template>