mirror of https://github.com/abpframework/abp.git
sumeyye
4 months ago
5 changed files with 260 additions and 169 deletions
@ -1,119 +1,202 @@ |
|||||
@if (isBrowser) { |
@if (isBrowser) { |
||||
<ngx-datatable #table default [rows]="data" [count]="recordsTotal()" [list]="list()" |
<ngx-datatable |
||||
[selectionType]="selectable() ? selectionType() : undefined" (activate)="tableActivate.emit($event)" |
#table |
||||
(select)="onSelect($event)" [selected]="selected()" (scroll)="onScroll($event)" [scrollbarV]="infiniteScroll()" |
default |
||||
[style.height]="getTableHeight()" [loadingIndicator]="infiniteScroll() && isLoading()" |
[rows]="data" |
||||
[footerHeight]="infiniteScroll() ? false : 50"> |
[count]="recordsTotal()" |
||||
@if (effectiveRowDetailTemplate) { |
[list]="list()" |
||||
<ngx-datatable-row-detail [rowHeight]="effectiveRowDetailHeight"> |
[selectionType]="selectable() ? selectionType() : undefined" |
||||
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template> |
(activate)="tableActivate.emit($event)" |
||||
<ng-container |
(select)="onSelect($event)" |
||||
*ngTemplateOutlet="effectiveRowDetailTemplate; context: { row: row, expanded: expanded }" /> |
[selected]="selected()" |
||||
</ng-template> |
(scroll)="onScroll($event)" |
||||
</ngx-datatable-row-detail> |
[scrollbarV]="infiniteScroll()" |
||||
|
[style.height]="getTableHeight()" |
||||
|
[loadingIndicator]="infiniteScroll() && isLoading()" |
||||
|
[footerHeight]="infiniteScroll() ? false : 50" |
||||
|
> |
||||
|
@if (effectiveRowDetailTemplate) { |
||||
|
<ngx-datatable-row-detail [rowHeight]="effectiveRowDetailHeight"> |
||||
|
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
effectiveRowDetailTemplate; |
||||
|
context: { row: row, expanded: expanded } |
||||
|
" |
||||
|
/> |
||||
|
</ng-template> |
||||
|
</ngx-datatable-row-detail> |
||||
|
|
||||
<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false" |
<ngx-datatable-column |
||||
[canAutoResize]="false"> |
[width]="50" |
||||
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template> |
[resizeable]="false" |
||||
<button type="button" class="btn btn-link text-decoration-none text-muted p-0" |
[sortable]="false" |
||||
[attr.aria-label]="expanded ? 'Collapse' : 'Expand'" (click)="toggleExpandRow(row)"> |
[draggable]="false" |
||||
<i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i> |
[canAutoResize]="false" |
||||
</button> |
> |
||||
</ng-template> |
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template> |
||||
</ngx-datatable-column> |
<button |
||||
} |
type="button" |
||||
@if(selectable()) { |
class="btn btn-link text-decoration-none text-muted p-0" |
||||
<ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" |
[attr.aria-label]="expanded ? 'Collapse' : 'Expand'" |
||||
[resizeable]="false"> |
(click)="toggleExpandRow(row)" |
||||
|
> |
||||
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" |
<i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i> |
||||
let-selectFn="selectFn"> |
</button> |
||||
@if (selectionType() !== 'single') { |
</ng-template> |
||||
<div class="form-check"> |
</ngx-datatable-column> |
||||
<input class="form-check-input table-check" type="checkbox" [checked]="allRowsSelected" |
} |
||||
(change)="selectFn(!allRowsSelected)" /> |
@if (selectable()) { |
||||
</div> |
<ngx-datatable-column |
||||
} |
[width]="50" |
||||
</ng-template> |
[sortable]="false" |
||||
|
[canAutoResize]="false" |
||||
<ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-isSelected="isSelected" |
[draggable]="false" |
||||
let-onCheckboxChangeFn="onCheckboxChangeFn"> |
[resizeable]="false" |
||||
@if(selectionType() === 'single') { |
> |
||||
<div class="h-100 form-check form-check-sm form-check-custom form-check-solid"> |
<ng-template |
||||
<input class="form-check-input" type="radio" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" /> |
ngx-datatable-header-template |
||||
</div> |
let-value="value" |
||||
} |
let-allRowsSelected="allRowsSelected" |
||||
@if (selectionType() !== 'single') { |
let-selectFn="selectFn" |
||||
<div class="h-100 form-check form-check-sm form-check-custom form-check-solid"> |
> |
||||
<input class="form-check-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" /> |
@if (selectionType() !== 'single') { |
||||
</div> |
<div class="form-check"> |
||||
} |
<input |
||||
</ng-template> |
class="form-check-input table-check" |
||||
|
type="checkbox" |
||||
|
[checked]="allRowsSelected" |
||||
|
(change)="selectFn(!allRowsSelected)" |
||||
|
/> |
||||
|
</div> |
||||
|
} |
||||
|
</ng-template> |
||||
|
|
||||
</ngx-datatable-column> |
<ng-template |
||||
} |
ngx-datatable-cell-template |
||||
@if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) { |
let-value="value" |
||||
<ngx-datatable-column [name]="actionsText() | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined" |
let-row="row" |
||||
[width]="_actionsColumnWidth() ?? 200" [canAutoResize]="!_actionsColumnWidth()" [sortable]="false"> |
let-isSelected="isSelected" |
||||
<ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template> |
let-onCheckboxChangeFn="onCheckboxChangeFn" |
||||
<ng-container |
> |
||||
*ngTemplateOutlet="actionsTemplate() || gridActions; context: { $implicit: row, index: i }"></ng-container> |
@if (selectionType() === 'single') { |
||||
<ng-template #gridActions> |
<div class="h-100 form-check form-check-sm form-check-custom form-check-solid"> |
||||
@if (isVisibleActions(row)) { |
<input |
||||
<abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions> |
class="form-check-input" |
||||
} |
type="radio" |
||||
</ng-template> |
[checked]="isSelected" |
||||
</ng-template> |
(change)="onCheckboxChangeFn($event)" |
||||
</ngx-datatable-column> |
/> |
||||
} |
</div> |
||||
@for (prop of propList; track prop.name; let i = $index) { |
} |
||||
<ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths()[i] ?? 200" |
@if (selectionType() !== 'single') { |
||||
[canAutoResize]="!columnWidths()[i]" |
<div class="h-100 form-check form-check-sm form-check-custom form-check-solid"> |
||||
[name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" [prop]="prop.name" |
<input |
||||
[sortable]="prop.sortable"> |
class="form-check-input" |
||||
<ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn"> |
type="checkbox" |
||||
@if (prop.tooltip) { |
[checked]="isSelected" |
||||
<span [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'" |
(change)="onCheckboxChangeFn($event)" |
||||
container="body" [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)"> |
/> |
||||
{{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i> |
</div> |
||||
</span> |
|
||||
} @else { |
|
||||
<span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)"> |
|
||||
{{ column.name }} |
|
||||
</span> |
|
||||
} |
|
||||
</ng-template> |
|
||||
<ng-template let-row="row" let-i="index" ngx-datatable-cell-template> |
|
||||
<ng-container *abpPermission="prop.permission; runChangeDetection: false"> |
|
||||
<ng-container *abpVisible="row['_' + prop.name]?.visible"> |
|
||||
@if (!row['_' + prop.name].component) { |
|
||||
@if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') { |
|
||||
<div [innerHTML]=" |
|
||||
!prop.isExtra |
|
||||
? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) |
|
||||
: ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization) |
|
||||
" (click)=" |
|
||||
prop.action && prop.action({ getInjected: getInjected, record: row, index: i }) |
|
||||
" [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div> |
|
||||
} @else { |
|
||||
<div [innerHTML]=" |
|
||||
!prop.isExtra |
|
||||
? (row['_' + prop.name]?.value | async) |
|
||||
: ('::' + (row['_' + prop.name]?.value | async) | abpLocalization) |
|
||||
" (click)=" |
|
||||
prop.action && prop.action({ getInjected: getInjected, record: row, index: i }) |
|
||||
" [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div> |
|
||||
} |
} |
||||
|
</ng-template> |
||||
|
</ngx-datatable-column> |
||||
|
} |
||||
|
@if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) { |
||||
|
<ngx-datatable-column |
||||
|
[name]="actionsText() | abpLocalization" |
||||
|
[maxWidth]="_actionsColumnWidth() ?? undefined" |
||||
|
[width]="_actionsColumnWidth() ?? 200" |
||||
|
[canAutoResize]="!_actionsColumnWidth()" |
||||
|
[sortable]="false" |
||||
|
> |
||||
|
<ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template> |
||||
|
<ng-container |
||||
|
*ngTemplateOutlet=" |
||||
|
actionsTemplate() || gridActions; |
||||
|
context: { $implicit: row, index: i } |
||||
|
" |
||||
|
></ng-container> |
||||
|
<ng-template #gridActions> |
||||
|
@if (isVisibleActions(row)) { |
||||
|
<abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions> |
||||
|
} |
||||
|
</ng-template> |
||||
|
</ng-template> |
||||
|
</ngx-datatable-column> |
||||
|
} |
||||
|
@for (prop of propList; track prop.name; let i = $index) { |
||||
|
<ngx-datatable-column |
||||
|
*abpVisible="prop.columnVisible(getInjected)" |
||||
|
[width]="columnWidths()[i] ?? 200" |
||||
|
[canAutoResize]="!columnWidths()[i]" |
||||
|
[name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" |
||||
|
[prop]="prop.name" |
||||
|
[sortable]="prop.sortable" |
||||
|
> |
||||
|
<ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn"> |
||||
|
@if (prop.tooltip) { |
||||
|
<span |
||||
|
[ngbTooltip]="prop.tooltip.text | abpLocalization" |
||||
|
[placement]="prop.tooltip.placement || 'auto'" |
||||
|
container="body" |
||||
|
[class.pointer]="prop.sortable" |
||||
|
(click)="prop.sortable && sortFn(column)" |
||||
|
> |
||||
|
{{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i> |
||||
|
</span> |
||||
} @else { |
} @else { |
||||
<ng-container *ngComponentOutlet=" |
<span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)"> |
||||
row['_' + prop.name].component; |
{{ column.name }} |
||||
injector: row['_' + prop.name].injector |
</span> |
||||
"></ng-container> |
|
||||
} |
} |
||||
</ng-container> |
</ng-template> |
||||
</ng-container> |
<ng-template let-row="row" let-i="index" ngx-datatable-cell-template> |
||||
</ng-template> |
<ng-container *abpPermission="prop.permission; runChangeDetection: false"> |
||||
</ngx-datatable-column> |
<ng-container *abpVisible="row['_' + prop.name]?.visible"> |
||||
} |
@if (!row['_' + prop.name].component) { |
||||
</ngx-datatable> |
@if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') { |
||||
} |
<div |
||||
|
[innerHTML]=" |
||||
|
!prop.isExtra |
||||
|
? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type) |
||||
|
: ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type) |
||||
|
| abpLocalization) |
||||
|
" |
||||
|
(click)=" |
||||
|
prop.action && |
||||
|
prop.action({ getInjected: getInjected, record: row, index: i }) |
||||
|
" |
||||
|
[class]="entityPropTypeClasses[prop.type]" |
||||
|
[class.pointer]="prop.action" |
||||
|
></div> |
||||
|
} @else { |
||||
|
<div |
||||
|
[innerHTML]=" |
||||
|
!prop.isExtra |
||||
|
? (row['_' + prop.name]?.value | async) |
||||
|
: ('::' + (row['_' + prop.name]?.value | async) | abpLocalization) |
||||
|
" |
||||
|
(click)=" |
||||
|
prop.action && |
||||
|
prop.action({ getInjected: getInjected, record: row, index: i }) |
||||
|
" |
||||
|
[class]="entityPropTypeClasses[prop.type]" |
||||
|
[class.pointer]="prop.action" |
||||
|
></div> |
||||
|
} |
||||
|
} @else { |
||||
|
<ng-container |
||||
|
*ngComponentOutlet=" |
||||
|
row['_' + prop.name].component; |
||||
|
injector: row['_' + prop.name].injector |
||||
|
" |
||||
|
></ng-container> |
||||
|
} |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
</ngx-datatable-column> |
||||
|
} |
||||
|
</ngx-datatable> |
||||
|
} |
||||
|
|||||
Loading…
Reference in new issue