quay/static/js/directives/ui/linear-workflow/linear-workflow.component.ts

import { Component, Output, Input } from 'angular-ts-decorators';
import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';


/**
 * A component that which displays a linear workflow of sections, each completed in order before the next
 * step is made visible.
 */
@Component({
  selector: 'linearWorkflow',
  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow.component.html',
  transclude: true
})
export class LinearWorkflowComponent implements ng.IComponentController {

  @Input('@') public doneTitle: string;
  @Output() public onWorkflowComplete: (event: any) => void;
  private sections: SectionInfo[] = [];
  private currentSection: SectionInfo;


  constructor() {

  }

  public $onInit(): void {

  }

  public addSection(section: LinearWorkflowSectionComponent): void {
    this.sections.push({
      index: this.sections.length,
      section: section,
    });
  }

  public onNextSection(): void {
    if (this.currentSection.section.sectionValid) {
      if (this.currentSection.index + 1 >= this.sections.length) {
        this.onWorkflowComplete({});
      }
      else {
        this.currentSection = this.sections[this.currentSection.index];
      }
    }
  }
}


/**
 * A type representing a section of the linear workflow.
 */
export type SectionInfo = {
  index: number;
  section: LinearWorkflowSectionComponent;
}