item-relationships.component.html

<div class="item-relationships">
  <div class="button-row top d-flex">
    <button class="btn btn-danger ml-auto" *ngIf="!(isReinstatable() | async)"
            [disabled]="!(hasChanges() | async)"
            (click)="discard()"><i
      class="fas fa-times"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
    </button>
    <button class="btn btn-warning ml-auto" *ngIf="isReinstatable() | async"
            (click)="reinstate()"><i
      class="fas fa-undo-alt"></i>
      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.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.metadata.save-button" | translate}}</span>
    </button>
  </div>
  <div *ngFor="let label of relationLabels$ | async" class="mb-4">
    <ng-container *ngVar="(getUpdatesByLabel(label) | async) as updates">
      <div *ngIf="updates">
        <h5>{{getRelationshipMessageKey(label) | translate}}</h5>
        <ng-container *ngVar="(updates | dsObjectValues) as updateValues">
          <div *ngFor="let updateValue of updateValues; trackBy: trackUpdate"
               ds-edit-relationship
               class="relationship-row d-block"
               [fieldUpdate]="updateValue || {}"
               [url]="url"
               [ngClass]="{'alert alert-danger': updateValue.changeType === 2}">
          </div>
          <ds-loading *ngIf="updateValues.length == 0" message="{{'loading.items' | translate}}"></ds-loading>
        </ng-container>
      </div>
    </ng-container>
  </div>
  <div class="button-row bottom">
    <div class="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.metadata.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.metadata.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.metadata.save-button" | translate}}</span>
      </button>
    </div>
  </div>
</div>