my-test123/app/components/dynamic-field/dynamic-field.component.html

A planner front-end for Fabric8.

<div class="f8-dynamic-control"
  [formGroup]="form">
  <label class="pull-left"
    [attr.for]="attributeDesc.key">
    {{attributeDesc.label}}
  </label>
  <div class="f8-dynamic-control-content">
    <div [ngSwitch]="attributeDesc.type.kind">

      <!-- workitemtype field type: string -->
      <input *ngSwitchCase="'string'"
        [formControlName]="attributeDesc.key"
        type="text"
        (focus)="focusIn()">

      <!-- workitemtype field type: integer -->
      <input *ngSwitchCase="'integer'"
        [value]="form.value[this.attributeKey]"
        (change)="baseChangeBaseType($event.target.value)"
        type="text"
        (focus)="focusIn()">

      <!-- workitemtype field type: float -->
      <input *ngSwitchCase="'float'"
        [formControlName]="attributeDesc.key"
        type="text"
        (focus)="focusIn()">

      <!-- workitemtype field type: dropdown -->
      <typeahead-dropdown
        class="f8-dynamic-control-dropdown"
        *ngSwitchCase="'enum'"
        [values]="extractEnumKeyValues()"
        (onUpdate)="onChangeDropdown($event)">
      </typeahead-dropdown>

      <!-- workitemtype field type: boolean -->
      <typeahead-dropdown
        class="f8-dynamic-control-dropdown"
        *ngSwitchCase="'boolean'"
        [values]="extractBooleanKeyValues()"
        (onUpdate)="onChangeBoolean($event)">
      </typeahead-dropdown>

      <!-- workitemtype field type: markup -->
      <markdown-control
        *ngSwitchCase="'markup'"
        [markdownValue]="form.value[this.attributeKey].content"
        (onUpdate)="onChangeMarkup($event)">
      </markdown-control>

      <!-- workitemtype field type: instant (datetime) -->
      <div class="f8-dynamic-control-datepicker"
        *ngSwitchCase="'instant'" >
      <my-date-picker
        [options]="datePickerOptions"
        [selDate]="dateValue"
        (dateChanged)="onDateChanged($event)"
        placeholder="Set Date"></my-date-picker>
      </div>

      <!-- TODO: -->
      <!-- workitemtype field type: duration -->
      <!-- workitemtype field type: url -->
      <!-- workitemtype field type: iteration -->
      <!-- workitemtype field type: workitem -->
      <!-- workitemtype field type: user -->
      <!-- workitemtype field type: list -->
      <!-- workitemtype field type: area -->
      <!-- workitemtype field type: codebase -->

      <!-- Todd: -->
      <!-- 'History' of WI (needs core change, not in core data types) -->
      <!-- TreePath (e.g. Areas and Iterations) (already in fixed fields) -->

      <!-- the edit icon that appears on text/textfield input types -->
      <span class="pficon-edit pull-left dynamic-control-edit-ico"
        *ngIf="(
          !isButtonsVisible() &&
            (
              attributeDesc.type.kind=='integer' ||
              attributeDesc.type.kind=='float' ||
              attributeDesc.type.kind=='string'
            )
          )">
      </span>

      <button class="btn btn-lg btn-primary detail-action-btn"
        type="button"
        *ngIf="isButtonsVisible()"
        (click)="save()">
        <span class="fa fa-check"></span>
      </button>
      <button class="btn btn-lg btn-default detail-action-btn"
        type="button"
        *ngIf="isButtonsVisible()"
        (click)="cancel()">
        <span class="pficon pficon-close"></span>
      </button>
    </div>
  </div>
  <div class="errorMessage"
    *ngIf="!isValid()">
    {{attributeDesc.label}} is not given or not in the right format.
  </div>
  <div class="errorMessage"
    *ngIf="error">
    Error on {{attributeDesc.label}}: {{error}}.
  </div>
</div>