-
Notifications
You must be signed in to change notification settings - Fork 74
/
base-command-list.component.ts
133 lines (107 loc) · 4.57 KB
/
base-command-list.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import {Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output} from "@angular/core";
import {FormArray, FormControl, FormGroup} from "@angular/forms";
import {CommandLineToolModel, ExpressionModel} from "cwlts/models";
import {Subscription} from "rxjs/Subscription";
import {ModalService} from "../../../../ui/modal/modal.service";
import {ErrorCode} from "cwlts/models/helpers/validation/ErrorCode";
import {SBDraft2CommandLineToolModel, SBDraft2ExpressionModel} from "cwlts/models/d2sb";
@Component({
selector: "ct-base-command-list",
template: `
<form [formGroup]="form">
<ct-blank-state *ngIf="!readonly && !baseCommand.length"
[buttonText]="'Add base command'"
[learnMoreURL]="'http://docs.rabix.io/the-tool-editor#base-command'"
[description]="blankStateDescription"
(buttonClick)="addBaseCommand()">
</ct-blank-state>
<div *ngIf="readonly && !baseCommand.length" class="text-xs-center">
This tool doesn't specify any baseCommands
</div>
<ol *ngIf="baseCommand.length > 0" class="list-unstyled">
<li *ngFor="let control of form.get('list').controls; let i = index"
class="removable-form-control">
<ct-expression-input
[context]="context"
[formControl]="control"
[readonly]="readonly">
</ct-expression-input>
<div *ngIf="!readonly" class="remove-icon">
<i [ct-tooltip]="'Delete'"
class="fa fa-trash clickable"
(click)="removeBaseCommand(i)"></i>
</div>
</li>
</ol>
<button type="button" *ngIf="baseCommand.length > 0 && !readonly"
class="btn btn-link add-btn-link no-underline-hover"
(click)="addBaseCommand()">
<i class="fa fa-plus"></i> Add base command
</button>
</form>
`,
styleUrls: ["./base-command-list.component.scss"]
})
export class BaseCommandListComponent implements OnInit, OnChanges, OnDestroy {
form = new FormGroup({list: new FormArray([])});
@Input()
baseCommand: SBDraft2ExpressionModel[] = [];
@Input()
model: SBDraft2CommandLineToolModel;
@Input()
readonly = false;
@Input()
context: any = {};
@Output()
update = new EventEmitter<ExpressionModel[]>();
blankStateDescription = `The part of the command that comes before any tool parameters or options. You can also
include parameters or options
that you want to be fixed for every execution of the tool (provided they can be placed
before any variable
parameters and options in the command line), or these can be set as arguments below.`;
private subscription: Subscription;
constructor(private modal: ModalService) {
}
ngOnInit() {
this.updateFormArray();
}
ngOnChanges() {
if (this.baseCommand) {
this.updateFormArray();
}
}
public removeBaseCommand(i: number) {
this.modal.delete("base command").then(() => {
// reset the expression's validity
this.baseCommand[i].clearIssue(ErrorCode.EXPR_ALL);
(this.form.get("list") as FormArray).removeAt(i);
}, err => {
console.warn(err);
});
}
public addBaseCommand() {
const cmd = this.model.addBaseCommand();
(this.form.get("list") as FormArray).push(new FormControl(cmd));
}
private updateFormArray() {
// cancel previous subscription so recreation of form doesn't trigger an update
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
const formList = [];
// create formControls from each baseCommand
for (let i = 0; i < this.baseCommand.length; i++) {
formList.push(new FormControl(this.baseCommand[i]));
}
this.form.setControl("list", new FormArray(formList));
// re-subscribe update output to form changes
this.subscription = this.form.valueChanges.map(form => (form.list || [])).subscribe((list) => {
this.model.updateBaseCommand(list);
this.update.emit(list);
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}