my-test123/app/components/planner-board/planner-board.component.html

A planner front-end for Fabric8.

<div class="container-fluid f8-wi-container"
  #containerHeight>
  <div class="lock-overlay-board" *ngIf="uiLockedAll">
    <div class="spinner-container">
      <h2 class="spinner"></h2>
      <h2>Loading ...</h2>
      <h4>Please wait, we are loading your data.</h4>
    </div>
  </div>
  <main class="row">
    <alm-planner-layout
      #sidePanel
      (sidePanelStateChange)="togglePanelState($event)"
      [sidePanelContent]="sidePanel"
      [sectionContent]="sectionPanel">
    </alm-planner-layout>
  </main>
</div>
<ng-template #sidePanel>
  <aside class="f8-sidepanel">
    <div class="lock-overlay-board" *ngIf="uiLockedSidebar">
      <div class="spinner-container">
        <h2 class="spinner"></h2>
        <h2>Loading ...</h2>
        <h4>Please wait, we are loading your data.</h4>
      </div>
    </div>
    <a class="f8-sidepanel--toggle">
      <span class="fa f8-sidepanel--toggle-icon fa-lg"
        [class.fa-angle-double-left]="sidePanelOpen"
        [class.fa-angle-double-right]="!sidePanelOpen"
        (click)="togglePanel()"
        tooltip="{{sidePanelOpen ?
          'Hide Panel' : 'Show Panel'}}"
        placement="right">
      </span>
    </a>
    <side-panel [sidePanelOpen]="sidePanelOpen"
      [iterations]="iterations"
      [groupTypes]="groupTypes">
    </side-panel>
  </aside>
</ng-template>
<ng-template #sectionPanel>
  <section>
    <div class="width-100 pull-left"
      #toolbarHeight>
      <toolbar-panel context="boardview"
        [wiTypes]="workItemTypes"
        (onCreateNewWorkItemSelected)="typeSelectPanel.openPanel()"
        [currentBoardType]="currentBoardType"
        [areas]="areas"
        [loggedInUser]="loggedInUser">
      </toolbar-panel>
    </div>
    <div class="width-100 f8-board-wrapper"
      id="board_topWorkItems"
      #boardContainer>
      <div class="lock-overlay-board" *ngIf="uiLockedBoard">
        <div class="spinner-container">
          <h2 class="spinner"></h2>
          <h2>Loading Work Items ...</h2>
          <h4>Please wait, we are loading your work items.</h4>
        </div>
      </div>
      <div class="f8-board"
        *ngIf="readyToInit"
        (touchmove)="onTouchstart($event);">
        <!-- board columns -->
        <div class="f8-board-lane"
          *ngFor='let lane of lanes'>
          <aside class="width-100 pull-left f8-board-lane-column"
            [attr.data-state]="lane.option">
            <div class="f8-board-lane__header">
              <span class="dib">{{lane.option}}</span>
              <span class="badge" >{{lane.workItems | arrayCount}}</span>
            </div>
            <div class="f8-board-lane__wrapper"
              almInfiniteScroll
              [eachElementHeightInPx]='contentItemHeight'
              (initItems)='initWiItems($event, lane)'
              (fetchMore)='fetchMoreWiItems(lane)' >
              <div *ngIf="lane.option == 'new'">
                <div class="width-100 pull-left margin-bottom-5"
                  *ngIf="loggedIn">
                  <alm-work-item-quick-add
                    [WITypes]="workItemTypes"
                    [wilistview]="'wi-card-view'"
                    (close)="close($event)">
                  </alm-work-item-quick-add>
                </div>
              </div>
              <div class="f8-board__card height-100"
                [dragula]='"wi-bag"'>
                <div
                  class="width-100 pull-left"
                  *ngFor='let item of lane.cardValue'
                  (mousedown)="getWI(item.id, lane)"
                  (touchstart)="getWI(item.id, lane)"
                  [attr.data-id]="item.id" [attr.data-UUID]="item.extraData['UUID']"  id={{item.id}}
                  [attr.data-version]="item.extraData['version']" [attr.data-selfLink]="item.extraData['selfLink']">
                  <card
                    [cardValue]='item'
                    (menuClickEvent)="cardMenuClick($event, item.id, lane)">
                  </card>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
    <router-outlet></router-outlet>
  </section>
</ng-template>
<detail-add-type-selector
  #typeSelectPanel
  [takeFromInput]="true"
  [wiTypes]="workItemTypes">
</detail-add-type-selector>
<fab-planner-associate-iteration-modal
    [workItem]="workItem"
    #associateIterationModal>
</fab-planner-associate-iteration-modal>
<osio-modal></osio-modal>
<div *ngIf="showDialog">
  <alm-dialog
    (pfDialogClick)="onButtonClick($event)"
    [dialog]='dialog'
  ></alm-dialog>
</div>