Refactor Manage Trigger to Single Workflow (#2577)

* Refactor Manage Trigger to Single Workflow
This commit is contained in:
Alec Merdler 2017-05-22 13:59:12 -07:00 committed by GitHub
parent d122743129
commit 97256841bd
26 changed files with 1262 additions and 1077 deletions

View file

@ -35,6 +35,11 @@ describe("LinearWorkflowSectionComponent", () => {
previousValue: false,
isFirstChange: () => false,
},
skipSection: {
currentValue: true,
previousValue: false,
isFirstChange: () => false,
},
};
});
@ -56,6 +61,15 @@ describe("LinearWorkflowSectionComponent", () => {
expect(onSectionInvalidSpy.calls.argsFor(0)[0]).toEqual(component.sectionId);
});
it("calls parent method to go to next section if 'skipSection' input is true and is current section", () => {
delete changesObj['sectionValid'];
const onNextSectionSpy: Spy = spyOn(parentMock, 'onNextSection').and.returnValue(null);
component.isCurrentSection = true;
component.ngOnChanges(changesObj);
expect(onNextSectionSpy).toHaveBeenCalled();
});
});
describe("onSubmitSection", () => {

View file

@ -1,4 +1,4 @@
import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges } from 'ng-metadata/core';
import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges, HostListener } from 'ng-metadata/core';
import { LinearWorkflowComponent } from './linear-workflow.component';
@ -16,21 +16,34 @@ export class LinearWorkflowSectionComponent implements OnChanges, OnInit {
@Input('@') public sectionId: string;
@Input('@') public sectionTitle: string;
@Input() public sectionValid: boolean = false;
@Input('<') public sectionValid: boolean = false;
@Input('<') public skipSection: boolean = false;
public sectionVisible: boolean = false;
public isCurrentSection: boolean = false;
constructor(@Host() @Inject(LinearWorkflowComponent) private parent: LinearWorkflowComponent) {
}
public ngOnInit(): void {
this.parent.addSection(this);
if (!this.skipSection) {
this.parent.addSection(this);
}
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes['sectionValid'] !== undefined && !changes['sectionValid'].currentValue) {
this.parent.onSectionInvalid(this.sectionId);
switch (Object.keys(changes)[0]) {
case 'sectionValid':
if (!changes['sectionValid'].currentValue && this.parent) {
this.parent.onSectionInvalid(this.sectionId);
}
break;
case 'skipSection':
if (changes['skipSection'].currentValue && this.isCurrentSection && this.parent) {
this.parent.onNextSection();
}
break;
}
}

View file

@ -8,12 +8,12 @@
<td>
<!-- Next button -->
<button class="btn btn-primary"
ng-disabled="!$ctrl.currentSection.component.sectionValid"
ng-click="$ctrl.onNextSection()"
ng-class="{
'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
}">
ng-disabled="!$ctrl.currentSection.component.sectionValid"
ng-click="$ctrl.onNextSection()"
ng-class="{
'btn-success': $ctrl.currentSection.index == $ctrl.sections.length - 1,
'btn-lg': $ctrl.currentSection.index == $ctrl.sections.length - 1
}">
<span ng-if="$ctrl.currentSection.index != sections.length - 1">Continue</span>
<span ng-if="$ctrl.currentSection.index == sections.length - 1">
<i class="fa fa-check-circle"></i>{{ ::$ctrl.doneTitle }}
@ -27,7 +27,7 @@
<b>Next:</b>
<ul>
<li ng-repeat="section in $ctrl.sections"
ng-if="section.index > $ctrl.currentSection.index">
ng-if="section.index > $ctrl.currentSection.index && !section.component.skipSection">
{{ section.component.sectionTitle }}
</li>
</ul>

View file

@ -17,23 +17,13 @@ describe("LinearWorkflowComponent", () => {
newSection = new LinearWorkflowSectionComponent(component);
});
it("does not set 'sectionVisible' or 'isCurrentSection' of given section if not the first section added", () => {
component.addSection(new LinearWorkflowSectionComponent(component));
component.addSection(newSection);
expect(newSection.sectionVisible).toBe(false);
expect(newSection.isCurrentSection).toBe(false);
});
it("sets 'sectionVisible' of given section to true if it is the first section added", () => {
it("sets 'sectionVisible' and 'isCurrentSection' to first section in list that is not skipped", () => {
var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
skippedSection.skipSection = true;
component.addSection(skippedSection);
component.addSection(newSection);
expect(newSection.sectionVisible).toBe(true);
});
it("sets 'isCurrentSection' of given section to true if it is the first section added", () => {
component.addSection(newSection);
expect(newSection.isCurrentSection).toBe(true);
});
});
@ -71,6 +61,21 @@ describe("LinearWorkflowComponent", () => {
expect(nextSection.isCurrentSection).toBe(true);
expect(nextSection.sectionVisible).toBe(true);
});
it("does not set the current section to a skipped section", () => {
var skippedSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
skippedSection.skipSection = true;
component.addSection(skippedSection);
component.addSection(nextSection);
component.onNextSection();
expect(currentSection.isCurrentSection).toBe(false);
expect(skippedSection.isCurrentSection).toBe(false);
expect(skippedSection.sectionVisible).toBe(false);
expect(nextSection.isCurrentSection).toBe(true);
expect(nextSection.sectionVisible).toBe(true);
});
});
describe("onSectionInvalid", () => {

View file

@ -26,10 +26,8 @@ export class LinearWorkflowComponent {
component: component,
});
if (this.sections.length == 1) {
this.currentSection = this.sections[0];
this.currentSection.component.sectionVisible = true;
this.currentSection.component.isCurrentSection = true;
if (this.sections.length > 0 && !this.currentSection) {
this.setNextSection(0);
}
}
@ -39,9 +37,7 @@ export class LinearWorkflowComponent {
}
else if (this.currentSection.component.sectionValid && this.currentSection.index + 1 < this.sections.length) {
this.currentSection.component.isCurrentSection = false;
this.currentSection = this.sections[this.currentSection.index + 1];
this.currentSection.component.sectionVisible = true;
this.currentSection.component.isCurrentSection = true;
this.setNextSection(this.currentSection.index + 1);
}
}
@ -50,6 +46,7 @@ export class LinearWorkflowComponent {
if (invalidSection.index <= this.currentSection.index) {
invalidSection.component.isCurrentSection = true;
this.currentSection = invalidSection;
this.sections.forEach((section) => {
if (section.index > invalidSection.index) {
section.component.sectionVisible = false;
@ -58,6 +55,17 @@ export class LinearWorkflowComponent {
});
}
}
private setNextSection(startingIndex: number = 0): void {
// Find the next section that is not set to be skipped
this.currentSection = this.sections.slice(startingIndex)
.filter(section => !section.component.skipSection)[0];
if (this.currentSection) {
this.currentSection.component.sectionVisible = true;
this.currentSection.component.isCurrentSection = true;
}
}
}