Feature: better command line for tasks and start task (#671)

* Expanding textarea v1

* fixes

* Single line

* style tweaks

* Start task too

* wrap tweaks

app/components/base/form/expanding-textarea/expanding-textarea.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, HostBinding, Input, ViewChild, forwardRef } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import "./expanding-textarea.scss";
+
+@Component({
+    selector: "bl-expanding-textarea",
+    templateUrl: "expanding-textarea.html",
+    providers: [
+        // tslint:disable-next-line:no-forward-ref
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ExpandingTextareaComponent), multi: true },
+    ],
+})
+export class ExpandingTextareaComponent implements ControlValueAccessor {
+    @Input() public placeholder: string;
+    @Input() public value: string;
+    @Input() public hint: string;
+
+    @HostBinding("class.expanded") public expanded: boolean = false;
+    @ViewChild("textarea") public textarea: ElementRef;
+
+    private _propagateChange: any;
+    private _propagateTouched: any;
+    private _lastExpandedHeight = "100px";
+
+    public expand() {
+        this.expanded = true;
+        this.textarea.nativeElement.style.height = this._lastExpandedHeight;
+        if (this._propagateTouched) {
+            this._propagateTouched(true);
+        }
+    }
+
+    public collapse() {
+        this._lastExpandedHeight = this.textarea.nativeElement.style.height;
+        this.textarea.nativeElement.style.height = null;
+        this.expanded = false;
+    }
+
+    public valueChange(newValue: string) {
+        this.value = newValue;
+        if (this._propagateChange) {
+            this._propagateChange(newValue);
+        }
+    }
+
+    public writeValue(value: string): void {
+        this.value = value;
+    }
+    public registerOnChange(fn: any): void {
+        this._propagateChange = fn;
+    }
+
+    public registerOnTouched(fn: any): void {
+        this._propagateTouched = fn;
+    }
+}

app/components/base/form/expanding-textarea/expanding-textarea.html

@@ -0,0 +1,6 @@
+<div class="textarea-container">
+    <md-input-container>
+        <textarea #textarea mdInput [placeholder]="placeholder" (focus)="expand()" (blur)="collapse()" [ngModel]="value" (ngModelChange)="valueChange($event)"></textarea>
+        <md-hint *ngIf="hint" align="end">{{hint}}</md-hint>
+    </md-input-container>
+</div>

app/components/base/form/expanding-textarea/expanding-textarea.scss

@@ -0,0 +1,31 @@
+@import "app/styles/variables";
+
+bl-expanding-textarea {
+    $container-height: 48px;
+    $collapsed-height: 20px;
+    $expanded-height: 100px;
+
+    > .textarea-container {
+        height:  $container-height;
+
+
+        textarea {
+            position: relative;
+            width: 100%;
+            height: $collapsed-height;
+            resize: none;
+        }
+    }
+
+    &.expanded {
+        .mat-input-infix {
+            background-color: #f5f5f5;
+            z-index: 1000;
+        }
+
+        textarea {
+            background-color: #f5f5f5;
+            resize: vertical;
+        }
+    }
+}

app/components/base/form/expanding-textarea/index.ts

@@ -0,0 +1 @@
+export * from "./expanding-textarea.component";

app/components/base/form/form.module.ts

@@ -8,13 +8,15 @@ import { ButtonsModule } from "../buttons";
 import { ComplexFormComponent } from "./complex-form";
 import { EditMetadataFormComponent } from "./edit-metadata-form";
 import { EditableTableColumnComponent, EditableTableComponent } from "./editable-table";
+import { ExpandingTextareaComponent } from "./expanding-textarea";
 import { FormErrorComponent } from "./form-error";
 import { FormPageComponent } from "./form-page";
 import { FormMultiPickerComponent, FormPickerComponent, FormPickerItemTemplateDirective } from "./form-picker";
 import { FormSectionComponent } from "./form-section";
 import { KeyValuePickerComponent } from "./key-value-picker";
 import { ServerErrorComponent } from "./server-error";
 import { SimpleFormComponent } from "./simple-form";
+import { SingleLineTextareaDirective } from "./single-line-textarea";
 
 // components
 // Add submodules there
@@ -36,6 +38,8 @@ const components = [
     EditableTableColumnComponent,
     KeyValuePickerComponent,
     EditMetadataFormComponent,
+    ExpandingTextareaComponent,
+    SingleLineTextareaDirective,
 ];
 
 @NgModule({

app/components/base/form/single-line-textarea/index.ts

@@ -0,0 +1 @@
+export * from "./single-line-textarea.directive";

app/components/base/form/single-line-textarea/single-line-textarea.directive.ts

@@ -0,0 +1,17 @@
+import { Directive,  HostListener } from "@angular/core";
+
+import "./single-line-textarea.scss";
+
+@Directive({
+    selector: "[blSingleLineTextarea]",
+})
+export class SingleLineTextareaDirective {
+    @HostListener("keydown", ["$event"])
+    public preventEnter(event: KeyboardEvent) {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+    }
+}

app/components/base/form/single-line-textarea/single-line-textarea.scss

@@ -0,0 +1,4 @@
+[blSingleLineTextarea] {
+    min-height: 18px;
+    word-break: break-all;
+}

app/components/pool/start-task/start-task-picker.html

@@ -1,7 +1,7 @@
 <div [formGroup]="form">
     <div class="form-element">
         <md-input-container>
-            <input mdInput formControlName="commandLine" placeholder="Command line">
+            <textarea mdInput mdTextareaAutosize mdAutosizeMinRows="1" blSingleLineTextarea formControlName="commandLine" placeholder="Command line"></textarea>
         </md-input-container>
         <bl-error controlName="commandLine" code="required">Command line is a required field</bl-error>
     </div>

app/components/task/action/add/task-create-basic-dialog.component.ts

@@ -49,7 +49,7 @@ export class TaskCreateBasicDialogComponent extends DynamicForm<Task, TaskCreate
                 Validators.pattern(validation.regex.id),
             ]],
             displayName: ["", Validators.maxLength(validation.maxLength.displayName)],
-            commandLine: ["", Validators.required],
+            commandLine: ["blabla", Validators.required],
             constraints: this.constraintsGroup,
             userIdentity: [null],
             fileGroups: [[]],

app/components/task/action/add/task-create-basic-dialog.html

@@ -21,7 +21,7 @@
 
             <div class="form-element">
                 <md-input-container>
-                    <input mdInput formControlName="commandLine" placeholder="Command line">
+                    <textarea mdInput mdTextareaAutosize mdAutosizeMinRows="1" blSingleLineTextarea formControlName="commandLine" placeholder="Command line"></textarea>
                 </md-input-container>
                 <bl-error controlName="commandLine" code="required">Command line is a required field</bl-error>
             </div>