fabric8-planner
Version:
A planner front-end for Fabric8.
246 lines (232 loc) • 9.15 kB
HTML
<div class="container-fluid f8-wi-container" #containerHeight>
<div class="lock-overlay-list"
*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 #plannerLayout
(sidePanelStateChange)="togglePanelState($event)"
[sidePanelContent]="sidePanel"
[sectionContent]="sectionPanel">
</alm-planner-layout>
<work-item-preview-panel #quickPreview >
</work-item-preview-panel>
</main>
</div>
<ng-template #sidePanel>
<aside class="f8-sidepanel">
<div class="lock-overlay-list"
*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">
</side-panel>
</aside>
</ng-template>
<ng-template #sectionPanel>
<div class="width-100 pull-left" id="header-div"
#toolbar>
<toolbar-panel
context="listview"
[loggedInUser]="loggedInUser"
[dropdownPlacement]="sidePanelOpen ? 'right' : 'left'">
</toolbar-panel>
</div>
<!-- tableConfig Dropdown -->
<div class="width-100 pull-left padding-10 posRel" #quickaddWrapper>
<table-config
[columns]="columns"
(onMovetoDisplay)="moveToDisplay($event)"
(onMovetoAvailable)="moveToAvailable($event)"></table-config>
<div class="f8-wi-list__quick-add padding-right-10 margin-right-10"
id="workItemList_up_quickAdd"
*ngIf="loggedIn && !!quickAddWorkItemTypes.length">
<alm-work-item-quick-add
[wilistview]="'wi-table-view-top'"
[workItemTypes]="quickAddWorkItemTypes"
[selectedType]="quickAddWorkItemTypes[0]"
[selectedIteration]="selectedIterationSource | async">
</alm-work-item-quick-add>
</div>
</div>
<!-- list starts here -->
<div class="f8-wi-list">
<div class="f8-wi-list-wrap"
#listContainer>
<!-- ngx-datatable -->
<ngx-datatable #myTable
*ngIf="!!workItems.length"
class="material fullscreen"
[columnMode]="'force'"
[scrollbarH]="true"
[scrollbarV]="true"
[rows]="workItems"
[rowHeight]="contentItemHeight"
[treeFromRelation]="'parentID'"
[treeToRelation]="'id'"
[sorts]="[{prop: 'order', dir: 'desc'}]"
[selected]="selectedRows"
[selectionType]="'single'"
[rowDraggable]="true"
[rowDragHandle]="'.table-dnd-header'"
(onRowDrop)="onRowDrop($event)"
(select)="onSelect($event)"
(scroll)="onScroll($event);"
(reorder)="handleReorder($event)"
(treeAction)="onTreeAction($event)">
<!-- First Column - quick Add - row detail -->
<ngx-datatable-row-detail [rowHeight]="50" #myDetailRow>
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div class="f8-wi-list__quick-add-table width-100 pull-left"
id="workItemList_quickAdd_inline"
#quickaddHeight>
<alm-work-item-quick-add *ngIf="(row?.typeObs | async) as type"
[wilistview]="'wi-table-view'"
[workItemTypes]="type?.childTypes"
[selectedType]="type?.childTypes?.length ? type.childTypes[0] : null"
[selectedIteration]="selectedIterationSource | async"
[parentWorkItemId]="row.id"
(onStartCreateWI)="onCreateStart($event)">
</alm-work-item-quick-add>
</div>
</ng-template>
</ngx-datatable-row-detail>
<!-- showTree: true -->
<ng-container *ngIf="showTreeUI">
<!-- First Column -->
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[cellClass]="'cell-class'"
[frozenLeft]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<span class="table-dnd-container">
<span class="table-dnd-header"></span>
</span>
<a class="quick-add-icon" *ngIf="(row?.typeObs | async) as type"
placement="right"
tooltip="Add Child Work Item"
href="javascript:void(0)"
[class.pficon-add-circle-o]="!expanded"
[class.pficon-close]="expanded"
[class.disabled]="!!!type?.childTypes || !loggedIn"
(click)="toggleExpandRow(
row,
!!type?.childTypes?.length
)">
</a>
</ng-template>
</ngx-datatable-column>
<!-- columns id-assignees -->
<ngx-datatable-column
*ngFor="let c of (columns | filterColumn:'display')"
[isTreeColumn]="c.name==='Title'"
[indentTree]="c.name==='Title' ? 20 : 0"
[name]="c.name"
[resizeable]="false"
[width]="c.width"
[sortable]="c.name === 'Title'"
[cellClass]="'cell-class'"
[headerClass]="'header-cell'">
<ng-template ngx-datatable-cell-tree-expander *ngIf="c.name==='Title'">
<i class="fa fa-angle-right tree-icon"></i>
</ng-template>
<ng-template ngx-datatable-cell-tree-collapser *ngIf="c.name==='Title'">
<i class="fa fa-angle-down tree-icon"></i>
</ng-template>
<ng-template ngx-datatable-cell-tree-disabled *ngIf="c.name==='Title'">
<i class="fa fa-angle-right tree-icon tree-icon__disabled"></i>
</ng-template>
<ng-template ngx-datatable-cell-tree-loader *ngIf="c.name==='Title'">
<div class="spinner spinner-xs icon-loader"></div>
</ng-template>
<ng-template let-row="row"
ngx-datatable-cell-template>
<work-item-cell
[row]="row"
[col]="c.prop"
(onDetailPreview)="onDetailPreview($event)"
(onQuickPreview)="onPreview($event)"
[class.f8-wi__table-config]="c.prop=='label' || c.prop=='assignees'"
[class.f8-planner-list-title]="c.prop=='title'">
</work-item-cell>
</ng-template>
</ngx-datatable-column>
</ng-container>
<!-- showTree: false -->
<ng-container *ngIf="!showTreeUI">
<!-- First Column -->
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[cellClass]="'cell-class'"
[frozenLeft]="false">
<ng-template let-row="row" let-expanded="expanded"
ngx-datatable-cell-template>
<span class="table-dnd-container">
<span class="table-dnd-header"></span>
</span>
<a class="quick-add-icon pficon-add-circle-o disabled"
placement="right"
tooltip="Add Child Work Item"
href="javascript:void(0)">
</a>
</ng-template>
</ngx-datatable-column>
<!-- columns id-assignees -->
<ngx-datatable-column
*ngFor="let c of (columns | filterColumn:'display')"
[name]="c.name"
[resizeable]="false"
[width]="c.width"
[sortable]="c.name === 'Title'"
[cellClass]="'cell-class'"
[headerClass]="'header-cell'">
<ng-template let-row="row"
ngx-datatable-cell-template>
<work-item-cell
[row]="row"
[col]="c.prop"
(onQuickPreview)="onPreview($event)"
[class.f8-wi__table-config]="c.prop === 'label' || c.prop === 'assignees'"
[class.f8-planner-list-title]="c.prop === 'title'">
</work-item-cell>
</ng-template>
</ngx-datatable-column>
</ng-container>
</ngx-datatable>
<pfng-empty-state
*ngIf="!workItems?.length && !uiLockedList"
[config]="emptyStateConfig"></pfng-empty-state>
<div class="lock-overlay-list"
*ngIf="uiLockedList">
<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>
</div>
</ng-template>
<osio-modal></osio-modal>