fabric8-planner/app/components_ngrx/dynamic-field/dynamic-field.component.html

A planner front-end for Fabric8.

<div class="f8-dynamic-control" *ngIf="showField">
  <label class="pull-left padding-left-15 control-label padding-top-0"
    [attr.for]="fieldValue.key">
    {{ fieldValue.field.label | truncate:15 }}
  </label>
  <div class="f8-dynamic-control-content">
    <span *ngIf="loadingField"
      class="spinner spinner-sm spinner-inline">
    </span>
    <div *ngIf="!loadingField">

      <f8-inlineinput
        class="dynamic-integer-field"
        *ngIf="fieldValue.field.type.kind==='integer' || fieldValue.field.type.kind==='string'|| fieldValue.field.type.kind==='float'"
        [disabled]="!editAllow"
        [type]="fieldValue.field.type.kind"
        [value]="fieldValue.value"
        (onSave)="saveInputField($event)"
        [placeholder]="fieldValue.field.label">
      </f8-inlineinput>

      <!-- workitemtype field type: dropdown -->
      <common-selector
        *ngIf="fieldValue.field.type.kind==='enum'"
        [allowUpdate]="editAllow"
        [headerText]="fieldValue.field.label + ' dropdown'"
        [items]="dropdownMenuItems"
        [selectedItems]="dropdownSelectedItems"
        class="dynamic-enum-dropdown"
        (onCloseSelector)="onChangeDropdown($event)">
      </common-selector>

      <!-- workitemtype field type: boolean -->
      <common-selector
        *ngIf="fieldValue.field.type.kind==='boolean'"
        [noValueLabel]="'None'"
        [allowUpdate]="editAllow"
        [headerText]="fieldValue.field.label + ' dropdown'"
        [items]="dropdownMenuItems"
        [selectedItems]="dropdownSelectedItems"
        class="dynamic-boolean-dropdown"
        (onCloseSelector)="onChangeDropdown($event)">
      </common-selector>


      <!-- workitemtype field type: markup -->
      <f8-markdown
        #markup
        *ngIf="fieldValue.field.type.kind==='markup'"
        [editAllow]="editAllow"
        [rawText]="fieldValue?.value?.content"
        [renderedText]="fieldValue?.value?.rendered"
        (onSaveClick)="markupUpdate($event)"
        (showPreview)="showPreview($event)"
        (onClickOut)="$event ? markup.closeClick() : ''">
      </f8-markdown>

      <!-- workitemtype field type: instant (datetime) -->
      <div class="f8-dynamic-control-datepicker"
        *ngIf="fieldValue.field.type.kind==='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()">
    {{ fieldValue.field.label }} is not given or not in the right format.
  </div>
  <div class="errorMessage"
    *ngIf="error">
    Error on {{ fieldValue.field.label }}: {{ error }}.
  </div>
</div>