update many things
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
<div class="h-full flex flex-col gap-4">
|
||||
<p-table
|
||||
[columns]="columns"
|
||||
[scrollable]="true"
|
||||
[value]="items"
|
||||
[loading]="loading"
|
||||
columnResizeMode="fit"
|
||||
stripedRows
|
||||
[showFirstLastIcon]="false"
|
||||
[expandedRowKeys]="expandedRows"
|
||||
[dataKey]="dataKey"
|
||||
class="max-sm:hidden! grow flex! flex-col overflow-hidden"
|
||||
[tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
|
||||
>
|
||||
@if (captionBox) {
|
||||
<ng-template pTemplate="caption">
|
||||
<ng-container [ngTemplateOutlet]="captionBox"> </ng-container>
|
||||
</ng-template>
|
||||
}
|
||||
|
||||
<ng-template #header let-columns>
|
||||
<tr>
|
||||
@for (col of columns; track col.header) {
|
||||
<th
|
||||
[style]="
|
||||
col.type === 'index' ? { width: '3rem', minWidth: '3rem' } : { width: col.width, minWidth: col.minWidth }
|
||||
"
|
||||
>
|
||||
{{ col.header }}
|
||||
</th>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
|
||||
}
|
||||
@if (expandable) {
|
||||
<th style="width: 3rem"></th>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
|
||||
<tr>
|
||||
@for (col of columns; track col.field) {
|
||||
<td>
|
||||
@if (col.type === "index") {
|
||||
{{ i * (currentPage || 1) + 1 }}
|
||||
} @else if (col.type === "thumbnail") {
|
||||
<div
|
||||
class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
|
||||
(click)="openThumbnailModal(item)"
|
||||
>
|
||||
@if (item[col.field]) {
|
||||
<img [src]="item[col.field]" class="w-full h-full object-cover" />
|
||||
}
|
||||
</div>
|
||||
} @else if (getTemplate(col)) {
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getTemplate(col)"
|
||||
[ngTemplateOutletContext]="{ $implicit: item }"
|
||||
></ng-container>
|
||||
} @else if (col.canCopy) {
|
||||
<uikit-copy [text]="getCell(item, col)"></uikit-copy>
|
||||
} @else {
|
||||
<span [class]="getPreviewClasses(item, col)">
|
||||
{{ getCell(item, col) }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<td
|
||||
table-action-row
|
||||
type="td"
|
||||
[showDetails]="showDetails"
|
||||
[showDelete]="showDelete"
|
||||
[showEdit]="showEdit"
|
||||
(edit)="edit(item)"
|
||||
(delete)="remove(item)"
|
||||
(details)="details(item)"
|
||||
></td>
|
||||
}
|
||||
|
||||
@if (expandable) {
|
||||
<td>
|
||||
<p-button
|
||||
type="button"
|
||||
pRipple
|
||||
[pRowToggler]="item"
|
||||
[text]="true"
|
||||
[rounded]="true"
|
||||
[plain]="true"
|
||||
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
|
||||
/>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
@if (expandable && expandColumns && expandableItemKey) {
|
||||
<ng-template #expandedrow let-item>
|
||||
<tr>
|
||||
<td [attr.colspan]="columns.length + 1">
|
||||
<div class="px-4">
|
||||
@if (item[expandableItemKey]?.length) {
|
||||
<p-table
|
||||
[columns]="expandColumns || []"
|
||||
[scrollable]="true"
|
||||
[value]="item[expandableItemKey]"
|
||||
[loading]="loading"
|
||||
columnResizeMode="fit"
|
||||
stripedRows
|
||||
[showFirstLastIcon]="false"
|
||||
[expandedRowKeys]="expandedRows"
|
||||
class="grow flex! flex-col overflow-hidden"
|
||||
[tableStyleClass]="!item.items?.length && !loading ? 'h-full' : ''"
|
||||
>
|
||||
<ng-template #header let-columns>
|
||||
<tr>
|
||||
@for (col of expandColumns; track col.header) {
|
||||
<th
|
||||
[style]="
|
||||
col.type === 'index'
|
||||
? { width: '3rem', minWidth: '3rem' }
|
||||
: { width: col.width, minWidth: col.minWidth }
|
||||
"
|
||||
>
|
||||
{{ col.header }}
|
||||
</th>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #body let-item let-i="rowIndex">
|
||||
<tr>
|
||||
@for (col of expandColumns; track col.field) {
|
||||
<td>
|
||||
{{ item.name }}
|
||||
@if (col.type === "index") {
|
||||
{{ i * (currentPage || 1) + 1 }}
|
||||
} @else if (col.type === "thumbnail") {
|
||||
<div
|
||||
class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-50 cursor-pointer"
|
||||
(click)="openThumbnailModal(item)"
|
||||
>
|
||||
@if (item[col.field]) {
|
||||
<img [src]="item[col.field]" class="w-full h-full object-cover" />
|
||||
}
|
||||
</div>
|
||||
} @else if (getTemplate(col)) {
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getTemplate(col)"
|
||||
[ngTemplateOutletContext]="{ $implicit: item }"
|
||||
></ng-container>
|
||||
} @else if (col.canCopy) {
|
||||
<uikit-copy [text]="getCell(item, col)"></uikit-copy>
|
||||
} @else {
|
||||
<span [class]="getPreviewClasses(item, col)">
|
||||
{{ getCell(item, col) }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #emptymessage>
|
||||
<tr class="">
|
||||
<td [colSpan]="(expandColumns.length + 1).toString()" class="w-full">
|
||||
<uikit-empty-state
|
||||
[title]="emptyPlaceholderTitle"
|
||||
[description]="emptyPlaceholderDescription"
|
||||
[ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
|
||||
[showCTA]="showAdd"
|
||||
(ctaClick)="openAddForm()"
|
||||
></uikit-empty-state>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
} @else {
|
||||
<div class="grid grid-cols-3 gap-4 py-2">
|
||||
@for (col of expandColumns; track $index) {
|
||||
<app-key-value
|
||||
[label]="col.header"
|
||||
[value]="item[expandableItemKey][col.field]"
|
||||
[type]="col.type || 'simple'"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
}
|
||||
|
||||
<ng-template #emptymessage>
|
||||
<tr class="">
|
||||
<td [colSpan]="(columns.length + 1).toString()" class="w-full">
|
||||
<ng-container [ngTemplateOutlet]="emptyMessageCard"></ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadingbody let-columns>
|
||||
@for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track i) {
|
||||
<tr style="height: 46px">
|
||||
@for (col of columns; track col) {
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
@if (showPaginator) {
|
||||
<ng-container [ngTemplateOutlet]="paginator"> </ng-container>
|
||||
}
|
||||
</div>
|
||||
Reference in New Issue
Block a user