Skip to content

Commit

Permalink
fix: further performance improvements for tables (#1810)
Browse files Browse the repository at this point in the history 
Co-authored-by: Simon <simon@aam-digital.com>
  • Loading branch information
@sleidig @TheSlimvReal
sleidig and TheSlimvReal authored Apr 17, 2023
1 parent 95d8108 commit 00c3822
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 198 deletions.
1 change: 1 addition & 0 deletions src/app/core/entity-components/entity-list/entity-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<div class="flex-row gap-regular flex-wrap">
<div *ngTemplateOutlet="filterDialog"></div>
<app-filter
*ngIf="!isLoading"
class="flex-row gap-regular flex-wrap"
[filterConfig]="filtersConfig"
[entityType]="entityConstructor"
Expand Down
5 changes: 3 additions & 2 deletions src/app/core/entity-components/entity-list/entity-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ import { DisableEntityOperationDirective } from "../../permissions/permission-di
export class EntityListComponent<T extends Entity>
implements OnChanges, AfterViewInit
{
@Input() allEntities: T[] = [];
@Input() allEntities: T[];
@Input() listConfig: EntityListConfig;
@Input() entityConstructor: EntityConstructor<T>;
@Input() clickMode: "navigate" | "popup" | "none" = "navigate";
Expand Down Expand Up @@ -174,7 +174,8 @@ export class EntityListComponent<T extends Entity>
) as EntityConstructor<T>;
}

if (!this.allEntities || this.allEntities.length === 0) {
if (!this.allEntities) {
// if no entities are passed as input, by default load all entities of the type
await this.loadEntities();
}

Expand Down
257 changes: 121 additions & 136 deletions .../core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,137 @@
<div *ngIf="isLoading" class="process-spinner">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<table
mat-table
[dataSource]="recordsDataSource"
matSort
class="full-width"
*ngIf="!isLoading"
>
<ng-container *ngFor="let col of filteredColumns" [matColumnDef]="col.id">
<th
mat-header-cell
mat-sort-header
*matHeaderCellDef
[matTooltip]="col.tooltip"
[matTooltipDisabled]="!col.tooltip"
[disabled]="col.noSorting"
>
{{ col.label }}
</th>
<td
mat-cell
*matCellDef="let row"
(click)="onRowClick(row)"
style="cursor: pointer"
>
<ng-template
*ngIf="!row.formGroup || row.formGroup.disabled || !col.edit"
[appDynamicComponent]="{
component: col.view,
config: {
value: row.record[col.id],
id: col.id,
entity: row.record,
config: col.additional
}
}"
></ng-template>
<ng-template
*ngIf="row.formGroup?.enabled && col.edit"
[appDynamicComponent]="{
component: col.edit,
config: {
formFieldConfig: col,
propertySchema: row.record.getSchema().get(col.id),
formControl: row.formGroup.get(col.id)
}
}"
<div [hidden]="isLoading">
<table mat-table [dataSource]="recordsDataSource" matSort class="full-width">
<ng-container *ngFor="let col of filteredColumns" [matColumnDef]="col.id">
<th
mat-header-cell
mat-sort-header
*matHeaderCellDef
[matTooltip]="col.tooltip"
[matTooltipDisabled]="!col.tooltip"
[disabled]="col.noSorting"
>
</ng-template>
</td>
</ng-container>

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef [class.remove-padding-left]="editable">
<ng-container *ngIf="editable">
<button
mat-icon-button
*appDisabledEntityOperation="{
entity: getEntityConstructor(),
operation: 'create'
{{ col.label }}
</th>
<td
mat-cell
*matCellDef="let row"
(click)="onRowClick(row)"
style="cursor: pointer"
>
<ng-template
*ngIf="!row.formGroup || row.formGroup.disabled || !col.edit"
[appDynamicComponent]="{
component: col.view,
config: {
value: row.record[col.id],
id: col.id,
entity: row.record,
config: col.additional
}
}"
></ng-template>
<ng-template
*ngIf="row.formGroup?.enabled && col.edit"
[appDynamicComponent]="{
component: col.edit,
config: {
formFieldConfig: col,
propertySchema: row.record.getSchema().get(col.id),
formControl: row.formGroup.get(col.id)
}
}"
class="table-action-button"
(click)="create()"
>
<fa-icon
style="vertical-align: initial"
aria-label="add"
icon="plus-circle"
></fa-icon>
</button>
</ng-container>
</th>
<td mat-cell *matCellDef="let rec" [class.remove-padding-left]="editable">
<div *ngIf="editable">
<ng-container *ngIf="!rec.formGroup || rec.formGroup.disabled">
<button
mat-icon-button
*appDisabledEntityOperation="{
entity: rec.record,
operation: 'update'
}"
(click)="edit(rec)"
>
<fa-icon
aria-label="edit"
icon="pen"
></fa-icon>
</button>
</ng-container>
<ng-container *ngIf="rec.formGroup?.enabled">
<button
mat-icon-button
(click)="save(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_save"
>
<fa-icon
aria-label="save"
icon="check-circle"
></fa-icon>
</button>
<button
mat-icon-button
(click)="resetChanges(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_cancel"
>
<fa-icon
aria-label="cancel"
icon="times-circle"
></fa-icon>
</button>
</ng-template>
</td>
</ng-container>

<ng-container matColumnDef="actions">
<th
mat-header-cell
*matHeaderCellDef
[class.remove-padding-left]="editable"
>
<ng-container *ngIf="editable">
<button
mat-icon-button
*appDisabledEntityOperation="{
entity: rec.record,
operation: 'delete'
entity: getEntityConstructor(),
operation: 'create'
}"
(click)="delete(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_delete"
class="table-action-button"
(click)="create()"
>
<fa-icon
aria-label="delete"
icon="trash"
style="vertical-align: initial"
aria-label="add"
icon="plus-circle"
></fa-icon>
</button>
</ng-container>
</div>
</td>
</ng-container>
</th>
<td mat-cell *matCellDef="let rec" [class.remove-padding-left]="editable">
<div *ngIf="editable">
<ng-container *ngIf="!rec.formGroup || rec.formGroup.disabled">
<button
mat-icon-button
*appDisabledEntityOperation="{
entity: rec.record,
operation: 'update'
}"
(click)="edit(rec)"
>
<fa-icon aria-label="edit" icon="pen"></fa-icon>
</button>
</ng-container>
<ng-container *ngIf="rec.formGroup?.enabled">
<button
mat-icon-button
(click)="save(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_save"
>
<fa-icon aria-label="save" icon="check-circle"></fa-icon>
</button>
<button
mat-icon-button
(click)="resetChanges(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_cancel"
>
<fa-icon aria-label="cancel" icon="times-circle"></fa-icon>
</button>
<button
mat-icon-button
*appDisabledEntityOperation="{
entity: rec.record,
operation: 'delete'
}"
(click)="delete(rec)"
angulartics2On="click"
[angularticsCategory]="rec?.record?.getType()"
angularticsAction="subrecord_inlineedit_delete"
>
<fa-icon aria-label="delete" icon="trash"></fa-icon>
</button>
</ng-container>
</div>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
mat-row
*matRowDef="let row; columns: columnsToDisplay"
[style.background-color]="getBackgroundColor?.(row.record)"
class="table-row"
></tr>
</table>
<app-list-paginator
[style.display]="
isLoading || recordsDataSource.data.length === 0 ? 'none' : ''
"
[dataSource]="recordsDataSource"
[idForSavingPagination]="idForSavingPagination"
></app-list-paginator>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
mat-row
*matRowDef="let row; columns: columnsToDisplay"
[style.background-color]="getBackgroundColor?.(row.record)"
class="table-row"
></tr>
</table>
<app-list-paginator
[dataSource]="recordsDataSource"
[idForSavingPagination]="idForSavingPagination"
></app-list-paginator>
</div>
Loading

0 comments on commit 00c3822

Please sign in to comment.