registry-submissions.component.html

<div class="flex flex-column-reverse justify-content-between align-items-center gap-3 md:flex-row">
  <div class="flex gap-3">
    <p-selectbutton
      class="review-state-select flex-wrap"
      [options]="submissionReviewOptions"
      [ngModel]="selectedReviewOption()"
      (ngModelChange)="changeReviewStatus($event)"
      [disabled]="isLoading()"
      optionLabel="label"
      optionValue="value"
    >
      <ng-template #item let-item>
        <osf-icon [iconClass]="item.icon" [class]="item.value"></osf-icon>
        <p>{{ item.label | translate | titlecase }}</p>
      </ng-template>
    </p-selectbutton>
  </div>

  <div class="w-full md:w-4">
    <osf-select
      [options]="sortOptions"
      [placeholder]="'files.sort.placeholder' | translate"
      [fullWidth]="true"
      [(selectedValue)]="selectedSortOption"
      (changeValue)="changeSort($event)"
      [disabled]="isLoading()"
    ></osf-select>
  </div>
</div>

@if (isLoading()) {
  <osf-loading-spinner></osf-loading-spinner>
} @else {
  @if (submissions().length) {
    <div class="submission-container mt-5">
      @for (item of submissions(); track $index) {
        <div class="submission-item">
          <osf-registry-submission-item
            [submission]="item"
            [status]="selectedReviewOption()"
            (selected)="navigateToRegistration(item)"
            (loadAdditionalData)="loadAdditionalData(item)"
            (loadMoreContributors)="loadMoreContributors(item)"
          ></osf-registry-submission-item>
        </div>
      }
    </div>

    @if (totalCount() > pageSize()) {
      <div class="mt-4">
        <osf-custom-paginator
          [first]="first()"
          [totalCount]="totalCount()"
          [rows]="pageSize()"
          (pageChanged)="onPageChange($event)"
        ></osf-custom-paginator>
      </div>
    }
  } @else {
    <div class="flex justify-content-center align-items-center p-5">
      <p>{{ 'moderation.noSubmissions' | translate }}</p>
    </div>
  }
}