add.component.html in Opigno group manager 3.x

File

ng/src/app/add/add.component.html

<div class="entity-add lateral-panel" [class.add]="!entityForm" [class.create]="entityForm">
  <div class="info d-flex">
    <div class="flex-1">
      <div>
        <h2 class="step-title" *ngIf="step==1"><span>{{ text_add_a_step }}</span></h2>
        <h2 class="step-title" *ngIf="step==2"><span>{{ text_add_a }}</span>{{ getBundleTitle(form.bundle) }}</h2>
      </div>
    </div>
    <button mat-icon-button color="basic" class="close" (click)="close()">
      <mat-icon class="mat-24" aria-label="Close">{{ text_close }}</mat-icon>
    </button>
  </div>

  <div [hidden]="entityForm" class="mt-3 step-container">
    <div class="step-1" *ngIf="step==1">
      <mat-radio-group class="w-100 d-flex flex-column" [(ngModel)]="form.bundle" (change)="updateAvailableEntities($event);step=2">
        <mat-radio-button *ngFor="let type of types" [value]="type.bundle">{{type.name}}</mat-radio-button>
      </mat-radio-group>
    </div>

    <div class="step-2" *ngIf="(form.bundle || form.bundle===0) && step==2">
      <div>
        <button class="create-btn" (click)="getAddForm()"><i class="icon-document-new"></i>{{ text_create_a_new }} {{ getBundleTitle(form.bundle) }}</button>
      </div>
      <div class="my-3">{{ text_or_add_from_existing_catalogue }}</div>
      <input class="form-text" type="text" placeholder="{{ text_search }} {{ getBundleTitle(form.bundle) }}" [(ngModel)]="filterEntity" (paste)="updateResults()" (keydown)="updateResults()">
      <mat-radio-group class="w-100 d-flex flex-column" [(ngModel)]="form.existingEntity">
        <mat-radio-button disabled="{{ disabled }}" *ngFor="let result of results" [value]="result" (click)="addEntityToLearningPath()">{{result.entity.title}}</mat-radio-button>
      </mat-radio-group>
    </div>

    <div class="step-pager mt-auto text-center">
      <button type="button" (click)="step=1;form.bundle=null" [class.active]="step==1">1</button>
      <button type="button" (click)="step=2" [class.active]="step==2" [disabled]="!form.bundle">2</button>
    </div>
  </div>

  <iframe *ngIf="entityForm" width="100%" height="100%" [src]="entityForm"></iframe>
</div>