my-test123/app/components/work-item-iteration-modal/work-item-iteration-modal.component.html

A planner front-end for Fabric8.

<modal
  #iterationAssociationModal
  class="iteration-association-modal"
  [title]="modalTitle"
  (onClose)="actionOnClose()"
  (onOpen)="actionOnOpen()">
  <modal-content>
    <div class="col-xs-12 col-sm-12 col-md-12">
      <!-- UX feed for existing iteration association -->
      <div id="reassociate-msg"
        *ngIf="!!workItem?.relationships?.iteration">
        <strong [innerHTML]="workItem?.attributes['system.title']"></strong>
        is currently associated with
        <strong>
          {{(workItem?.relationships?.iteration?.data?.attributes?.resolved_parent_path +
             '/' + workItem?.relationships?.iteration?.data?.attributes?.name).replace('//', '/')}}
        </strong>
      </div>
      <!-- Form input to change iteration -->
      <div class="form-group"
        [class.has-error]="validationError">
        <div class="search-pf-input-group">
          <div>
            {{ !(workItem?.relationships?.iteration) ? "Associate" : "Reassociate" }}
            <strong [innerHTML]="workItem?.attributes['system.title']"></strong> with
          </div>

          <div class="f8-iteration-modal input-group dropdown open active">
            <input class="form-control"
              id="parent-iteration"
              type="text"
              #iterationSearch
              (keyup)="filterIteration($event)"
              autocomplete="off"
              [value]="selectedIterationName"
              (focus)="iterationSearchFocus();">
            <ul class="f8-iteration-modal-list dropdown-menu dropdown-ul"
              *ngIf="showIterationDropdown"
                #iterationList>
              <li *ngIf="!filteredIterations.length"
                (click)="showIterationDropdown = !showIterationDropdown">
                  No matches found.
              </li>
              <li *ngFor="let iteration of filteredIterations;"
                [attr.data-id]="iteration.key"
                (click)="associateIteration(iteration);">
                <span [innerHTML]="(iteration.value) | almSearchHighlight: iterationSearch.value"></span>
              </li>
            </ul>
            <span class="input-group-addon pointer"
              (click)="iterationSearchFocus();"
              id="iteration-select-dropdown">
              <span class="caret"></span>
            </span>
          </div>
        </div>
      </div>
      <!-- Action buttons to commit/abort -->
      <div class="text-right">
        <button class="btn btn-default margin-right-10"
          type="submit"
          id="cancel-iteration-button"
          (click)="iterationAssociationModal.close()">
            Cancel
        </button>
        <button class="btn btn-primary"
          type="submit"
          id="associate-iteration-button"
          #commitAssociation
          (click)="assignIteration()"
          [disabled]="!enableAssociateButton">
          {{ !!(workItem?.relationships?.iteration) ? "Reassociate" : "Associate" }}
        </button>
      </div>
    </div>
  </modal-content>
</modal>