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

File

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

<div class="activity-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_choose_an_activity_type }}</span></h2>
        <h2 class="step-title" *ngIf="step==2"><span>{{ text_choose_an_activity }}</span></h2>
      </div>
    </div>
    <button mat-icon-button color="basic" class="close" (click)="close()">
      <mat-icon class="mat-24" aria-label="Close">close</mat-icon>
    </button>
  </div>

  <div [hidden]="entityForm" class="mt-3 step-container">
    <div class="step-1" *ngIf="step==1">
      <div class="activity-types">
        <div class="bg-faded mb-3" *ngFor="let type of types; index as i">
          <div class="d-flex" *ngIf="!type.help">
            <button class="type-name flex-1 text-left" (click)="form.type=i;updateAvailableEntities($event);step=2">
              {{type.name}}
            </button>
            <button class="type-help-open" (click)="type.help=1"><i class="fi fi-rr-info"></i></button>
          </div>
          <div *ngIf="type.help" class="activity-help-open">
            <div class="d-flex">
              <div class="type-name flex-1 text-left">{{type.name}}</div>
              <button class="type-help-close" (click)="type.help=0"><i class="fi fi-rr-cross-small"></i></button>
            </div>
            <div class="type-info" [innerHtml]="type.description"></div>
            <button class="type-add btn btn-rounded" (click)="form.type=i;updateAvailableEntities($event);step=2">
              {{ text_add_activity }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="step-2" *ngIf="(form.type || form.type===0) && step == 2">
      <div>
        <button class="create-btn" (click)="getAddForm()"><i class="fi fi-rr-file-add"></i>{{ text_create_a_new_activity }}</button>
      </div>
      <div class="my-3">{{ text_or_add_from_existing_catalogue }}</div>
      <input class="form-text" type="text" placeholder="{{ text_search_for_an_activity }}"
             [(ngModel)]="filterEntity"
             (paste)="updateResults()"
             (keyup)="updateResults()">

      <mat-radio-group class="w-100 d-flex flex-column" [(ngModel)]="form.existingEntity">
        <mat-radio-button *ngFor="let result of results" [value]="result" (click)="addActivityToModule(result)">
          {{result.entity.name}}
        </mat-radio-button>
      </mat-radio-group>
    </div>

    <div class="step-pager mt-auto text-center">
      <button type="button" (click)="step=1" [class.active]="step==1">1</button>
      <button type="button" (click)="step=2" [class.active]="step==2" [disabled]="!form.type&&form.type!==0">2</button>
    </div>
  </div>
  <iframe *ngIf="entityForm" width="100%" height="100%" [src]="entityForm"></iframe>
</div>