my-test123/app/components/iterations-panel/iterations-panel.component.html

A planner front-end for Fabric8.

<!--Iteration Start-->
<div class="f8-itr">
  <!-- Active iteration -->
    <div class="f8-itr__panel margin-bottom-15">
      <div class="f8-itr__panel-hdr f8-itr__panel-hdr--active nohover">
        <div class="f8-itr__add"
          [class.show]="sidePanelOpen"
          [class.hide]="!sidePanelOpen">
          <a *ngIf="loggedIn && editEnabled"
            class="text-right"
            (click)="modal.openCreateUpdateModal('create', null, $event);">
            <i class="pficon-add-circle-o pull-right f8-itr__add-btn"
              id="add-iteration-icon" placement="bottom"
              tooltip="Add an Iteration"></i>
          </a>
        </div>
        <span class="pull-left fa fa-repeat margin-right-15
          padding-top-2 padding-bottom-3"
          tooltip="{{sidePanelOpen ? '' : 'Active Iteration'}}"
          placement="right"></span>
        <h3 class="padding-0 margin-0"
          [class.show]="sidePanelOpen"
          [class.hide]="!sidePanelOpen">
          Iterations
        </h3>
      </div>
      <ul
        [class.show]="sidePanelOpen"
        [class.hide]="!sidePanelOpen">
        <li class="active-iterations active f8-itr__container padding-v-2 padding-right-15 padding-left-5"
          *ngFor="let iteration of activeIterations"
          [routerLinkActive]="'f8-itr--selected'"
          [attr.data-id]="iteration.id">
          <div class="" [routerLink]="[]"
            [queryParams]="{q: constructURL(iteration.id)}"
            (click)="setGuidedTypeWI(iteration);">
            <span
              id="{{iteration.attributes.resolved_parent_path +
                '/' + iteration.attributes.name }}">
              {{iteration.attributes.resolved_parent_path +
                '/' + iteration.attributes.name | truncate : -20   }}
            </span>
            <span *ngIf='selectedIteration.id != iteration.id'
              class="fa pull-right margin-top-3"></span>
            <span *ngIf='selectedIteration.id == iteration.id'
              class="fa fa-check pull-right margin-top-3 check-display"></span>
            <span
              *ngIf="iteration.attributes.active_status"
              class="active-tag pull-right margin-right-5">
                [Active]
            </span>
          </div>
        </li>
      </ul>
      <!--Hide Search bar till its functional.
          Remove div while making it functional -->
      <div class="hide">
        <form role="form"
          class="search-pf has-button padding-h-15"
          [class.show]="sidePanelOpen"
          [class.hide]="!sidePanelOpen">
          <div class="form-group">
            <div class="search-pf-input-group">
              <label for="search4" class="sr-only">Search</label>
              <input id="search4" type="search" class="form-control" placeholder="Search is not functional" readonly>
            </div>
          </div>
          <div class="form-group">
            <button class="btn btn-default" type="submit" disabled>
              <span class="fa fa-search"></span>
            </button>
          </div>
        </form>
      </div>
    </div>
    <!-- Nested Iteration Display -->
    <div class="f8-itr__panel f8-itr__panel--nested"
      id="nested-iteration"
      [class.show]="sidePanelOpen"
      [class.hide]="!sidePanelOpen"
    >
      <iteration-tree
        [iterationList]="treeIterations"
        [collection]="collection"
        [witGroup]="witGroup"
        (onEditIteration)="onEdit($event)"
        (onCloseIteration)="onClose($event)"
        (onCreateIteration)="onCreateChild($event)"
        (onSelectIteration)="setGuidedTypeWI($event)">
      </iteration-tree>
    </div>
</div>
<!-- Iteration End-->

<fab-planner-iteration-modal
  #modal
  (onSubmit)="onCreateOrupdateIteration($event)" >
</fab-planner-iteration-modal>