mina-sidor-fa-web/apps/dafa-web/src/app/pages/avrop/avrop.component.html

<dafa-layout>
  <section class="call-off" *ngIf="currentStep$ | async; let currentStep; else: loadingRef">
    <digi-typography>
      <h2>Välj deltagare att tilldela</h2>
      <p>Steg {{ currentStep }} av {{ steps }}:</p>
    </digi-typography>
    <digi-ng-progress-progressbar [afSteps]="steps" afAriaLabel="An aria label" [afActiveStep]="currentStep">
    </digi-ng-progress-progressbar>

    <div class="" style="height: 300px; padding: 30px 0">
      <ng-container *ngIf="currentStep == 4">
        <h2>Avropet är sparat</h2>
        <digi-button af-size="m" class="employee-form__read-more" (afOnClick)="goToStep1()">
          Tillbaka till nya deltagare
        </digi-button>
      </ng-container>

      <ng-container *ngIf="currentStep == 1">
        <dafa-avrop-filters></dafa-avrop-filters>
      </ng-container>
      <ng-container *ngIf="currentStep == 3">
        <h2>Vänligen bekräfta</h2>
      </ng-container>
      <ng-container *ngIf="currentStep < 4">
        <dafa-avrop-table
          [selectableDeltagareList]="selectableDeltagareList$ | async"
          [selectedDeltagareListInput]="selectedDeltagareList$ | async"
          [isLocked]="deltagareListIsLocked$ | async"
          (changedSelectedDeltagareList)="updateSelectedDeltagareList($event)"
          [handledare]="selectedHandledare$ | async"
          [handledareConfirmed]="handledareConfirmed$ | async"
        ></dafa-avrop-table>
      </ng-container>

      <ng-container *ngIf="currentStep == 1">
        <digi-button af-size="m" class="employee-form__read-more" (afOnClick)="lockSelectedDeltagare()">
          Lås deltagare
        </digi-button>
      </ng-container>

      <ng-container *ngIf="currentStep == 2">
        <h2>Välj handledare</h2>
        <ng-container *ngIf="selectableHandledareList$ | async; let selectableHandledareList; else: loadingRefSmall">
          <select
            [value]="(selectedHandledare$ | async)?.id ? (selectedHandledare$ | async)?.id : ''"
            (change)="changeHandledare($event)"
          >
            <option disabled value="">Välj handledare</option>

            <option *ngFor="let selectableHandledare of selectableHandledareList" [value]="selectableHandledare?.id">
              {{ selectableHandledare?.fullName }}
            </option>
          </select>

          <span *ngIf="selectableHandledareList.length === 0"
            >Inga handledare har behörighet till alla markerade deltagare</span
          >
        </ng-container>

        <br /><br />
        <digi-button
          af-variation="secondary"
          af-size="m"
          class="employee-form__read-more"
          (afOnClick)="unlockSelectedDeltagare()"
        >
          Tillbaka
        </digi-button>
        <digi-button af-size="m" class="employee-form__read-more" (afOnClick)="confirmHandledare()">
          Tilldela
        </digi-button>
      </ng-container>

      <div *ngIf="currentStep == 3">
        <br /><br />
        <digi-button
          af-variation="secondary"
          af-size="m"
          class="employee-form__read-more"
          (afOnClick)="unconfirmHandledare()"
        >
          Tillbaka
        </digi-button>
        <digi-button af-size="m" class="employee-form__read-more" (afOnClick)="save()"> Spara avrop </digi-button>
      </div>
    </div>
  </section>

  <ng-template #loadingRef>
    <digi-ng-skeleton-base [afCount]="3" afText="Laddar personal"></digi-ng-skeleton-base>
  </ng-template>

  <ng-template #loadingRefSmall>
    <digi-icon-spinner af-title="Laddar innehåll"></digi-icon-spinner>
  </ng-template>

  <hr />
</dafa-layout>