refactor: switch to control flow syntax

siemens · Oct 1, 2024 · 6beadd3 · 6beadd3
1 parent 3408de9
commit 6beadd3
Show file tree

Hide file tree

Showing 13 changed files with 502 additions and 480 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
@@ -31,61 +31,63 @@ import {
  selector: 'datatable-body-cell',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
- <ng-container *ngIf="row; else ghostLoaderTemplate">
+ @if (row) {
  <div class="datatable-body-cell-label" [style.margin-left.px]="calcLeftMargin(column, row)">
- <label
- *ngIf="column.checkboxable && (!displayCheck || displayCheck(row, column, value))"
- class="datatable-checkbox"
- >
- <input
- type="checkbox"
- [disabled]="disable$ | async"
- [checked]="isSelected"
- (click)="onCheckboxChange($event)"
- />
- </label>
- <ng-container *ngIf="column.isTreeColumn">
- <button
- *ngIf="!column.treeToggleTemplate"
- class="datatable-tree-button"
- [disabled]="treeStatus === 'disabled'"
- (click)="onTreeAction()"
- [attr.aria-label]="treeStatus"
- >
- <span>
- <i *ngIf="treeStatus === 'loading'" class="icon datatable-icon-collapse"></i>
- <i *ngIf="treeStatus === 'collapsed'" class="icon datatable-icon-up"></i>
- <i
- *ngIf="treeStatus === 'expanded' || treeStatus === 'disabled'"
- class="icon datatable-icon-down"
- ></i>
- </span>
- </button>
+ @if (column.checkboxable && (!displayCheck || displayCheck(row, column, value))) {
+ <label class="datatable-checkbox">
+ <input
+ type="checkbox"
+ [disabled]="disable$ | async"
+ [checked]="isSelected"
+ (click)="onCheckboxChange($event)"
+ />
+ </label>
+ }
+ @if (column.isTreeColumn) {
+ @if (!column.treeToggleTemplate) {
+ <button
+ class="datatable-tree-button"
+ [disabled]="treeStatus === 'disabled'"
+ (click)="onTreeAction()"
+ [attr.aria-label]="treeStatus"
+ >
+ <span>
+ @if (treeStatus === 'loading') {
+ <i class="icon datatable-icon-collapse"></i>
+ }
+ @if (treeStatus === 'collapsed') {
+ <i class="icon datatable-icon-up"></i>
+ }
+ @if (treeStatus === 'expanded' || treeStatus === 'disabled') {
+ <i class="icon datatable-icon-down"></i>
+ }
+ </span>
+ </button>
+ } @else {
+ <ng-template
+ [ngTemplateOutlet]="column.treeToggleTemplate"
+ [ngTemplateOutletContext]="{ cellContext: cellContext }"
+ >
+ </ng-template>
+ }
+ }
+
+ @if (!column.cellTemplate) {
+ <span [title]="sanitizedValue" [innerHTML]="value"> </span>
+ } @else {
  <ng-template
- *ngIf="column.treeToggleTemplate"
- [ngTemplateOutlet]="column.treeToggleTemplate"
- [ngTemplateOutletContext]="{ cellContext: cellContext }"
+ #cellTemplate
+ [ngTemplateOutlet]="column.cellTemplate"
+ [ngTemplateOutletContext]="cellContext"
  >
  </ng-template>
- </ng-container>
-
- <span *ngIf="!column.cellTemplate" [title]="sanitizedValue" [innerHTML]="value"> </span>
- <ng-template
- #cellTemplate
- *ngIf="column.cellTemplate"
- [ngTemplateOutlet]="column.cellTemplate"
- [ngTemplateOutletContext]="cellContext"
- >
- </ng-template>
+ }
  </div>
- </ng-container>
- <ng-template #ghostLoaderTemplate>
- <ghost-loader
- *ngIf="ghostLoadingIndicator"
- [columns]="[column]"
- [pageSize]="1"
- ></ghost-loader>
- </ng-template>
+ } @else {
+ @if (ghostLoadingIndicator) {
+ <ghost-loader [columns]="[column]" [pageSize]="1"></ghost-loader>
+ }
+ }
  `
 })
 export class DataTableBodyCellComponent<TRow extends { level?: number } = any>

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts
@@ -17,11 +17,12 @@ import {
  */
 @Component({
  selector: 'datatable-row-def',
- template: `<ng-container
- *ngIf="rowDef.rowDefInternal.rowTemplate"
- [ngTemplateOutlet]="rowDef.rowDefInternal.rowTemplate"
- [ngTemplateOutletContext]="rowDef"
- />`
+ template: `@if (rowDef.rowDefInternal.rowTemplate) {
+ <ng-container
+ [ngTemplateOutlet]="rowDef.rowDefInternal.rowTemplate"
+ [ngTemplateOutletContext]="rowDef"
+ />
+ }`
 })
 export class DatatableRowDefComponent {
  rowDef = inject(RowDefToken);

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
@@ -1,4 +1,5 @@
 import {
+ booleanAttribute,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
@@ -12,8 +13,10 @@ import {
  IterableDiffers,
  KeyValueDiffer,
  KeyValueDiffers,
+ OnChanges,
  OnInit,
  Output,
+ SimpleChanges,
  ViewChild
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
@@ -27,55 +30,48 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
  selector: 'datatable-row-wrapper',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
- <div
- *ngIf="groupHeader && groupHeader.template"
- [style.height.px]="groupHeaderRowHeight"
- class="datatable-group-header"
- [ngStyle]="getGroupHeaderStyle()"
- >
- <div class="datatable-group-cell">
- <div *ngIf="groupHeader.checkboxable">
- <label class="datatable-checkbox">
- <input
- #select
- type="checkbox"
- [checked]="selectedGroupRows.length === group.value.length"
- (change)="onCheckboxChange(select.checked)"
- />
- </label>
+ @if (groupHeader?.template) {
+ <div
+ [style.height.px]="groupHeaderRowHeight"
+ class="datatable-group-header"
+ [ngStyle]="getGroupHeaderStyle()"
+ >
+ <div class="datatable-group-cell">
+ @if (groupHeader.checkboxable) {
+ <div>
+ <label class="datatable-checkbox">
+ <input
+ #select
+ type="checkbox"
+ [checked]="selectedGroupRows.length === group.value.length"
+ (change)="onCheckboxChange(select.checked)"
+ />
+ </label>
+ </div>
+ }
+ <ng-template
+ [ngTemplateOutlet]="groupHeader.template"
+ [ngTemplateOutletContext]="groupContext"
+ >
+ </ng-template>
  </div>
- <ng-template
- *ngIf="groupHeader && groupHeader.template"
- [ngTemplateOutlet]="groupHeader.template"
- [ngTemplateOutletContext]="groupContext"
- >
+ </div>
+ }
+ @if ((groupHeader?.template && expanded) || !groupHeader || !groupHeader.template) {
+ <ng-content> </ng-content>
+ }
+ @if (rowDetail?.template && expanded) {
+ <div [style.height.px]="detailRowHeight" class="datatable-row-detail">
+ <ng-template [ngTemplateOutlet]="rowDetail.template" [ngTemplateOutletContext]="rowContext">
  </ng-template>
  </div>
- </div>
- <ng-content
- *ngIf="
- (groupHeader && groupHeader.template && expanded) || !groupHeader || !groupHeader.template
- "
- >
- </ng-content>
- <div
- *ngIf="rowDetail && rowDetail.template && expanded"
- [style.height.px]="detailRowHeight"
- class="datatable-row-detail"
- >
- <ng-template
- *ngIf="rowDetail && rowDetail.template"
- [ngTemplateOutlet]="rowDetail.template"
- [ngTemplateOutletContext]="rowContext"
- >
- </ng-template>
- </div>
+ }
  `,
  host: {
  class: 'datatable-row-wrapper'
  }
 })
-export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit {
+export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit, OnChanges {
  @ViewChild('select') checkBoxInput!: ElementRef<HTMLInputElement>;
  @Input() innerWidth: number;
  @Input() rowDetail: DatatableRowDetailDirective;
@@ -92,62 +88,26 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
  row: RowOrGroup<TRow>;
  }>(false);
 
- @Input() set rowIndex(val: number) {
- this._rowIndex = val;
- (this.rowContext ?? this.groupContext).rowIndex = val;
- this.cd.markForCheck();
- }
-
- get rowIndex(): number {
- return this._rowIndex;
- }
+ @Input() rowIndex?: number;
 
  selectedGroupRows: TRow[] = [];
 
- @Input() set expanded(val: boolean) {
- this._expanded = val;
- (this.groupContext ?? this.rowContext)!.expanded = val;
- this.rowContext.expanded = val;
- this.cd.markForCheck();
- }
-
- get expanded(): boolean {
- return this._expanded;
- }
+ @Input({ transform: booleanAttribute }) expanded = false;
 
  groupContext?: GroupContext<TRow>;
  rowContext?: RowDetailContext<TRow>;
  disable$: BehaviorSubject<boolean>;
 
  private rowDiffer: KeyValueDiffer<keyof RowOrGroup<TRow>, any>;
  private selectedRowsDiffer: IterableDiffer<TRow>;
- private _expanded = false;
- private _rowIndex: number;
  private tableComponent = inject(DatatableComponentToken);
 
  constructor(
  private cd: ChangeDetectorRef,
  differs: KeyValueDiffers,
  private iterableDiffers: IterableDiffers
  ) {
- // this component renders either a group header or a row. Never both.
- if (this.isGroup(this.row)) {
- this.groupContext = {
- group: this.row,
- expanded: this.expanded,
- rowIndex: this.rowIndex
- };
- } else {
- this.rowContext = {
- row: this.row,
- expanded: this.expanded,
- rowIndex: this.rowIndex,
- disableRow$: this.disable$
- };
- }
-
  this.rowDiffer = differs.find({}).create();
- this.selectedRowsDiffer = this.iterableDiffers.find(this.selected ?? []).create();
  }
 
  get group(): Group<TRow> {
@@ -164,6 +124,36 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
  this.disable$ = new BehaviorSubject(isRowDisabled);
  this.rowContext.disableRow$ = this.disable$;
  }
+ this.selectedRowsDiffer = this.iterableDiffers.find(this.selected ?? []).create();
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['row']) {
+ // this component renders either a group header or a row. Never both.
+ if (this.isGroup(this.row)) {
+ this.groupContext = {
+ group: this.row,
+ expanded: this.expanded,
+ rowIndex: this.rowIndex
+ };
+ } else {
+ this.rowContext = {
+ row: this.row,
+ expanded: this.expanded,
+ rowIndex: this.rowIndex,
+ disableRow$: this.disable$
+ };
+ }
+ }
+ if (changes['rowIndex']) {
+ (this.rowContext ?? this.groupContext).rowIndex = this.rowIndex;
+ }
+ if (changes['expanded']) {
+ (this.groupContext ?? this.rowContext)!.expanded = this.expanded;
+ if (this.rowContext) {
+ this.rowContext.expanded = this.expanded;
+ }
+ }
  }
 
  ngDoCheck(): void {