courses-step.component.html

<planet-step-list [steps]="steps" (stepsChange)="stepsMoved($event)" [nameProp]="'stepTitle'" (stepClicked)="stepClick($event)">
  <planet-step-list-item *ngFor="let step of steps; index as i; first as isFirst; last as isLast">
    <span i18n>{{step.stepTitle || 'Step ' + (i+1)}}</span>
    <planet-course-icon *ngIf="step?.exam?.questions.length" [icon]="'assignment'"></planet-course-icon>
    <planet-course-icon *ngIf="step?.resources?.length" [icon]="'attach_file'"></planet-course-icon>
    <planet-course-icon *ngIf="step?.survey?.questions.length" [icon]="'description'"></planet-course-icon>
    <span class="toolbar-fill"></span>
  </planet-step-list-item>
  <span class="mat-caption margin-lr-5" planetStepListNumber>
    <span i18n>Editing Step</span>{{ ' ' + (this.activeStepIndex + 1) + ' ' }}
    <span i18n>of</span>{{ ' ' + steps.length }}
  </span>
  <div planetStepListForm>
    <form [formGroup]="stepForm">
      <mat-form-field class="full-width">
        <input matInput i18n-placeholder placeholder="Step title" formControlName="stepTitle">
      </mat-form-field>
      <mat-form-field class="full-width mat-form-field-type-no-underline">
        <planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Description" [formControl]="stepForm.controls.description" imageGroup="community"></planet-markdown-textbox>
        <mat-error><planet-form-error-messages [control]="stepForm.controls.description"></planet-form-error-messages></mat-error>
      </mat-form-field>
    </form>
    <ng-container *ngIf="activeStep?.resources?.length">
      <span i18n class="margin-lr-4">Attached Resources: </span>
      <mat-chip-list>
        <mat-chip *ngFor="let resource of activeStep.resources; let i = index">
          <a target="_blank" [routerLink]="['/resources/view', resource._id]">{{resource.title}}</a>
          <mat-icon matChipRemove (click)="removeResource(i)">clear</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </ng-container>
    <button mat-raised-button color="accent" (click)="suggestImprovements()" i18n>Suggest Improvements</button>
    <br><div>{{suggestion}}</div>
  </div>
  <div planetStepListActions>
    <a mat-raised-button color="primary" (click)="addExam()" i18n>{{activeStep?.exam ? 'Update' : 'Add' }} Test</a>
    <button mat-raised-button color="primary" (click)="addResources()" i18n>Add Resource</button>
    <a mat-raised-button color="primary" (click)="addExam('survey')" i18n>{{ activeStep?.survey ? 'Update' : 'Add' }} Survey</a>
    <button mat-raised-button color="accent" (click)="addStep()" i18n>Add Step</button>
  </div>
</planet-step-list>