<div class="da-list-wrap">
<da-layout-row [daGutter]="[24, 24]">
<da-col-item [daSpan]="24" [daXs]="24">
<div class="da-list-container" dLoading [loading]="busy">
<div class="da-list-content">
<d-data-table
#dataTable
[dataSource]="listData"
[scrollable]="true"
[tableWidthConfig]="tableWidthConfig"
>
<thead dTableHead>
<tr dTableRow>
<th dHeadCell>Id</th>
<th dHeadCell>Title</th>
<th dHeadCell>Priority</th>
<th dHeadCell>Iteration</th>
<th dHeadCell>Assignee</th>
<th dHeadCell>Status</th>
<th dHeadCell>Timeline</th>
<th dHeadCell>Actions</th>
</tr>
</thead>
<tbody dTableBody>
<ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
<tr dTableRow *ngIf="rowIndex === 0">
<td dTableCell [attr.colspan]="tableWidthConfig.length">
<div
*ngIf="!headerNewForm"
(click)="newRow()"
class="cursor-pointer"
>
<span class="tips-icon icon-add"></span>
<span style="margin-left: 10px">Create new data</span>
</div>
<div *ngIf="headerNewForm" class="edit-padding-fix">
<da-admin-form
[formConfig]="formConfig"
[formData]="defaultRowData"
class="editable-row"
(submitted)="quickRowAdded($event)"
(canceled)="quickRowCancel()"
></da-admin-form>
</div>
</td>
</tr>
<tr dTableRow>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['idEdit']"
[rowItem]="rowItem"
[field]="'id'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['idEdit']">{{ rowItem?.id }}</span>
<div *ngIf="rowItem['idEdit']" class="edit-padding-fix">
<input
class="devui-form-control"
name="id"
[(ngModel)]="rowItem.id"
[attr.maxlength]="100"
[attr.minlength]="3"
/>
</div>
</td>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['titleEdit']"
[rowItem]="rowItem"
[field]="'title'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['titleEdit']"
><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag>
{{ rowItem?.title }}</span
>
<div *ngIf="rowItem['titleEdit']" class="edit-padding-fix">
<input
class="devui-form-control"
name="title"
[(ngModel)]="rowItem.title"
[attr.maxlength]="100"
[attr.minlength]="3"
/>
</div>
</td>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['priorityEdit']"
[rowItem]="rowItem"
[field]="'priority'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['priorityEdit']"
><d-tag
[tag]="rowItem?.priority"
[labelStyle]="rowItem?.priority"
></d-tag
></span>
<div
*ngIf="rowItem['priorityEdit']"
class="edit-padding-fix"
>
<d-select
name="priority"
[(ngModel)]="rowItem.priority"
[options]="priorities"
></d-select>
</div>
</td>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['iterationEdit']"
[rowItem]="rowItem"
[field]="'iteration'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['iterationEdit']">{{
rowItem?.iteration
}}</span>
<div
*ngIf="rowItem['iterationEdit']"
class="edit-padding-fix"
>
<input
dTextInput
size="sm"
[(ngModel)]="rowItem.iteration"
/>
</div>
</td>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['assigneeEdit']"
[rowItem]="rowItem"
[field]="'assignee'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['assigneeEdit']">
<d-avatar
[name]="rowItem.assignee"
[width]="24"
[height]="24"
></d-avatar>
<span style="margin-left: 6px">{{
rowItem.assignee
}}</span>
</span>
<div
*ngIf="rowItem['assigneeEdit']"
class="edit-padding-fix"
>
<input
dTextInput
size="sm"
[(ngModel)]="rowItem.assignee"
/>
</div>
</td>
<td
dTableCell
[editable]="true"
[editableTip]="editableTip"
[(editing)]="rowItem['statusEdit']"
[rowItem]="rowItem"
[field]="'status'"
[beforeEditStart]="beforeEditStart"
[beforeEditEnd]="beforeEditEnd"
>
<span *ngIf="!rowItem['statusEdit']"
><span [ngClass]="rowItem?.status.split(' ')[0]">{{
rowItem?.status || "--"
}}</span></span
>
<div *ngIf="rowItem['statusEdit']" class="edit-padding-fix">
<d-select
name="status"
[(ngModel)]="rowItem.status"
[options]="['Stuck', 'Done', 'Working on it']"
></d-select>
</div>
</td>
<td
dTableCell
[editable]="true"
[(editing)]="rowItem['dateEdit']"
>
<span *ngIf="!rowItem['dateEdit']">{{
rowItem?.timeline | i18nDate: "short":false
}}</span>
<form
*ngIf="rowItem['dateEdit']"
class="form-inline edit-padding-fix"
>
<div class="devui-form-group">
<div class="devui-input-group devui-dropdown-origin">
<input
class="devui-form-control search"
name="date"
[(ngModel)]="rowItem.timeline"
dDatepicker
appendToBody
#datePicker="datepicker"
[autoOpen]="true"
(ngModelChange)="onEditEnd(rowItem, 'dateEdit')"
/>
<div
class="devui-input-group-addon"
(click)="datePicker.toggle()"
>
<i class="icon icon-calendar"></i>
</div>
</div>
</div>
</form>
</td>
<td>
<d-button
icon="icon-delete"
bsStyle="text-dark"
title="delete"
(click)="deleteRow(rowIndex)"
></d-button>
</td>
</tr>
</ng-template>
</tbody>
</d-data-table>
</div>
<div class="da-list-footer">
<d-pagination
[size]="'sm'"
[total]="pager.total"
[(pageSize)]="pager.pageSize"
[(pageIndex)]="pager.pageIndex"
[canViewTotal]="true"
[canChangePageSize]="true"
[canJumpPage]="true"
[maxItems]="5"
(pageIndexChange)="onPageChange($event)"
(pageSizeChange)="onSizeChange($event)"
>
</d-pagination>
</div>
</div>
</da-col-item>
</da-layout-row>
</div>