file-step.component.html

<h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>

<section class="m-t-12">
  <p class="line-height-3">
    {{
      'preprints.preprintStepper.file.uploadDescription'
        | translate: { preprintWord: provider()?.preprintWord | titlecase }
    }}
  </p>
  <p class="line-height-3">{{ 'preprints.preprintStepper.file.note' | translate }}</p>
</section>

<section class="m-t-24 w-full flex flex-column gap-2 md:flex-row">
  <p-button
    [ngClass]="{
      active: selectedFileSource() === PreprintFileSource.Computer,
    }"
    class="file-source-button w-full"
    [styleClass]="selectedFileSource() ? 'w-full cursor-not-allowed' : 'w-full'"
    [label]="'preprints.preprintStepper.file.uploadFromComputer' | translate | titlecase"
    severity="secondary"
    [disabled]="isFileSourceSelected()"
    [pTooltip]="'preprints.preprintStepper.file.tooltips.computerDisabled' | translate"
    tooltipPosition="top"
    (onClick)="selectFileSource(PreprintFileSource.Computer)"
  />
  <p-button
    [ngClass]="{
      active: selectedFileSource() === PreprintFileSource.Project,
    }"
    class="file-source-button w-full"
    [styleClass]="isFileSourceSelected() ? 'w-full cursor-not-allowed' : 'w-full'"
    [label]="'preprints.preprintStepper.file.selectFromProject' | translate | titlecase"
    severity="secondary"
    [disabled]="isFileSourceSelected() || versionFileMode()"
    [pTooltip]="'preprints.preprintStepper.file.tooltips.projectDisabled' | translate"
    tooltipPosition="top"
    (onClick)="selectFileSource(PreprintFileSource.Project)"
  />
</section>

@if (selectedFileSource() === PreprintFileSource.Computer) {
  <section class="m-t-48">
    @if (!fileUploadLink()) {
      <p-skeleton width="5rem" height="2rem" />
    } @else if ((!preprintFiles().length && !arePreprintFilesLoading()) || versionFileMode()) {
      <p-button
        outlined
        raised
        severity="success"
        [icon]="'fas fa-upload'"
        [label]="'preprints.preprintStepper.file.uploadFileButton' | translate | titlecase"
        (onClick)="fileInput.click()"
      />

      <input #fileInput type="file" class="hidden" (change)="onFileSelected($event)" />
    }
  </section>
}

@if (selectedFileSource() === PreprintFileSource.Project && !preprintFiles().length && !arePreprintFilesLoading()) {
  <p-card styleClass="m-t-48" class="card">
    <div>
      <p class="line-height-3">{{ 'preprints.preprintStepper.file.projectSelection.description' | translate }}</p>
      <p class="line-height-3">
        {{ 'preprints.preprintStepper.file.projectSelection.subDescription' | translate }}
      </p>

      <p-select
        id="project-select"
        [options]="availableProjects()"
        optionLabel="name"
        optionValue="id"
        [formControl]="projectNameControl"
        [placeholder]="'preprints.preprintStepper.file.projectSelection.title' | translate"
        class="w-12 md:w-6"
        [editable]="true"
        styleClass="m-t-24"
        appendTo="body"
        [loading]="areAvailableProjectsLoading()"
        (onChange)="selectProject($event)"
        [showClear]="false"
      />
    </div>
  </p-card>

  <section class="m-t-24">
    @if (selectedProjectId()) {
      <osf-files-tree
        [currentFolder]="currentFolder()"
        [files]="projectFiles()"
        [isLoading]="areProjectFilesLoading()"
        [resourceId]="selectedProjectId()!"
        [actions]="filesTreeActions"
        (entryFileClicked)="selectProjectFile($event)"
      />
    }
  </section>
}
@if (!versionFileMode()) {
  <section class="m-t-48">
    @if (arePreprintFilesLoading()) {
      <p-skeleton height="2rem" class="w-full" />
    } @else {
      @for (file of preprintFiles(); track file.id) {
        <section class="file-row">
          <div class="flex flex-row gap-2">
            <osf-icon [iconClass]="'fas fa-file'" />
            <p>{{ file.name }}</p>
          </div>

          <p-button class="danger-icon-btn" icon="fas fa-trash" severity="danger" text (onClick)="versionFile()" />
        </section>
      }
    }
  </section>
}

<section class="m-t-48 flex flex-row justify-content-end align-items-center gap-2">
  <p-button
    class="w-6 md:w-6rem"
    styleClass="w-full"
    [label]="'common.buttons.back' | translate"
    severity="info"
    (onClick)="backButtonClicked()"
  />
  <p-button
    class="w-6 md:w-9rem"
    styleClass="w-full"
    [label]="'common.buttons.next' | translate"
    [disabled]="!preprint()?.primaryFileId || versionFileMode()"
    [pTooltip]="
      !preprint()?.primaryFileId || versionFileMode()
        ? ('preprints.preprintStepper.common.validation.fillRequiredFields' | translate)
        : ''
    "
    tooltipPosition="top"
    (onClick)="nextButtonClicked()"
  />
</section>