ng-devui-materials
Version:
Materials of DevUI Admin
293 lines (291 loc) • 11.3 kB
HTML
<div class="da-list-wrap">
<da-layout-row [daGutter]="[24, 24]">
<da-col-item [daSpan]="24" [daXs]="24">
<div class="da-list-container">
<div class="da-list-header">
<div class="da-common-search">
<div class="da-left">
<d-search
[size]="'sm'"
(searchFn)="getList()"
[(ngModel)]="searchForm.keyword"
class="da-inline"
[placeholder]="'Search width First Name'"
></d-search>
</div>
<div class="da-right">
<d-button
(click)="batchDelete()"
[disabled]="!deleteList.length"
style="margin-left: 12px"
>Batch Delete</d-button
>
</div>
</div>
</div>
<div class="da-list-content" dLoading [loading]="busy">
<d-data-table
[fixHeader]="true"
[dataSource]="basicDataSource"
[tableWidthConfig]="tableWidthConfig"
[scrollable]="true"
[lazy]="true"
[fixHeader]="true"
[maxHeight]="'600px'"
(checkAllChange)="onCheckAllChange()"
(loadMore)="loadMore()"
>
<thead dTableHead [checkable]="true">
<tr dTableRow>
<th
dHeadCell
*ngFor="let colOption of dataTableOptions.columns"
[resizeEnabled]="true"
(resizeEndEvent)="onResize($event, 'title')"
[filterable]="colOption.filterable"
[closeFilterWhenScroll]="true"
[filterList]="colOption.filterList"
(filterChange)="onFirstFilterChange($event, colOption)"
[extraFilterTemplate]="extraFilterTemplate"
>
{{ colOption.header }}
</th>
<th dHeadCell>Actions</th>
</tr>
</thead>
<tbody dTableBody>
<ng-template
let-rowItem="rowItem"
let-rowIndex="rowIndex"
let-nestedIndex="nestedIndex"
>
<tr
dTableRow
[ngClass]="{ 'da-table-row-selected': rowItem.$checked }"
>
<td dTableCell class="devui-checkable-cell">
<d-checkbox
[ngModelOptions]="{ standalone: true }"
(ngModelChange)="
onRowCheckChange($event, rowIndex, nestedIndex, rowItem)
"
[ngModel]="rowItem.$checked"
[halfchecked]="rowItem.$halfChecked"
[disabled]="rowItem.$checkDisabled"
dTooltip
[content]="rowItem.$checkBoxTips"
[position]="['top', 'right', 'bottom', 'left']"
[showAnimation]="false"
>
</d-checkbox>
</td>
<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>
</da-col-item>
</da-layout-row>
</div>
<ng-template
#extraFilterTemplate
let-checked="checked"
let-halfChecked="halfChecked"
>
<span>{{
checked ? "All selected" : halfChecked ? "Some selected" : " None selected"
}}</span>
</ng-template>