dspace-angular/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html

<div class="item-bitstreams">
  <div class="float-right">
    <div class="button-row top mb-4 mt-2">
      <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
              [disabled]="!(hasChanges() | async)"
              (click)="discard()"><i
        class="fas fa-times"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
      </button>
      <button class="btn btn-warning" *ngIf="isReinstatable() | async"
              (click)="reinstate()"><i
        class="fas fa-undo-alt"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
      </button>
      <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
              (click)="submit()"><i
        class="fas fa-save"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
      </button>
    </div>
  </div>

  <ds-pagination *ngIf="(updates$ | async) && ((updates$ | async) | dsObjectValues).length > 0"
                 [paginationOptions]="(searchOptions$ | async)?.pagination"
                 [pageInfoState]="(bitstreams$ | async)?.payload"
                 [collectionSize]="(bitstreams$ | async)?.payload?.totalElements"
                 [sortOptions]="(searchOptions$ | async)?.sort"
                 [hideGear]="true"
                 [hidePagerWhenSinglePage]="true">
    <table class="table table-responsive table-striped table-bordered">
      <tbody>
        <tr>
          <th>{{'item.edit.bitstreams.headers.name' | translate}}</th>
          <th>{{'item.edit.bitstreams.headers.bundle' | translate}}</th>
          <th>{{'item.edit.bitstreams.headers.description' | translate}}</th>
          <th class="text-center">{{'item.edit.bitstreams.headers.format' | translate}}</th>
          <th class="text-center">{{'item.edit.bitstreams.headers.actions' | translate}}</th>
        </tr>
        <ng-container *ngVar="((updates$ | async) | dsObjectValues) as updateValues">
          <tr *ngFor="let updateValue of updateValues"
              ds-item-edit-bitstream
              [fieldUpdate]="updateValue"
              [url]="url"
              [ngClass]="{
                    'table-warning': updateValue.changeType === 0,
                    'table-danger': updateValue.changeType === 2,
                    'table-success': updateValue.changeType === 1
                  }">
          </tr>
        </ng-container>
      </tbody>
    </table>
  </ds-pagination>
  <div *ngIf="!(updates$ | async) || (updates$ | async) && ((updates$ | async) | dsObjectValues).length === 0" class="alert alert-info w-100 d-inline-block" role="alert">
    {{'item.edit.bitstreams.empty' | translate}}
  </div>

  <div class="button-row bottom">
    <div class="my-2 float-right">
      <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
              [disabled]="!(hasChanges() | async)"
              (click)="discard()"><i
        class="fas fa-times"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
      </button>
      <button class="btn btn-warning" *ngIf="isReinstatable() | async"
              (click)="reinstate()"><i
        class="fas fa-undo-alt"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
      </button>
      <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
              (click)="submit()"><i
        class="fas fa-save"></i>
        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
      </button>
    </div>
  </div>
</div>