refactor: remove duplicate template code

siemens · Nov 8, 2024 · cc498e0 · cc498e0
1 parent 816114b
commit cc498e0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 92 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.directive.ts b/projects/ngx-datatable/src/lib/components/body/body-row.directive.ts
@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { Group, TreeStatus } from '../../types/public.types';
+
+@Directive({
+  selector: '[ngx-datatable-body-row]'
+})
+export class DatatableBodyRowDirective {
+  static ngTemplateContextGuard<TRow extends { treeStatus?: TreeStatus } = any>(
+    directive: DatatableBodyRowDirective,
+    context: unknown
+  ): context is {
+    row: TRow;
+    groupValue: Group<TRow>[];
+    index: number;
+  } {
+    return true;
+  }
+}
diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -105,6 +105,46 @@ import {
               [selected]="selected"
               (rowContextmenu)="rowContextmenu.emit($event)"
             >
+              <ng-template
+                ngx-datatable-body-row
+                #bodyRow
+                let-groupRow="row"
+                let-rowIndex="index"
+                let-groupValue="groupValue"
+              >
+                @let rowItem = groupRow ?? group;
+                <datatable-body-row
+                  role="row"
+                  tabindex="-1"
+                  #rowElement
+                  [disable$]="rowWrapper.disable$"
+                  [isSelected]="selector.getRowSelected(rowItem)"
+                  [innerWidth]="innerWidth"
+                  [offsetX]="offsetX"
+                  [columns]="columns"
+                  [rowHeight]="getRowHeight(rowItem)"
+                  [row]="rowItem"
+                  [group]="groupValue"
+                  [rowIndex]="getRowIndex(rowItem)"
+                  [expanded]="getRowExpanded(rowItem)"
+                  [rowClass]="rowClass"
+                  [displayCheck]="!groupRow ? displayCheck : null"
+                  [treeStatus]="!groupRow ? $any(group)?.treeStatus : null"
+                  [ghostLoadingIndicator]="ghostLoadingIndicator"
+                  [draggable]="rowDraggable"
+                  [verticalScrollVisible]="verticalScrollVisible"
+                  (treeAction)="isRow(rowItem) ? onTreeAction(rowItem) : false"
+                  (activate)="selector.onActivate($event, rowIndex ?? indexes().first + i)"
+                  (drop)="drop($event, rowItem, rowElement)"
+                  (dragover)="dragOver($event, rowItem)"
+                  (dragenter)="dragEnter($event, rowItem, rowElement)"
+                  (dragleave)="dragLeave($event, rowItem, rowElement)"
+                  (dragstart)="drag($event, rowItem, rowElement)"
+                  (dragend)="dragEnd($event, rowItem)"
+                >
+                </datatable-body-row>
+              </ng-template>
+
               @if (rowDefTemplate) {
                 <ng-container
                   *rowDefInternal="{
@@ -116,102 +156,21 @@ import {
                 />
               } @else {
                 @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
+                  <ng-container [ngTemplateOutlet]="bodyRow"></ng-container>
                 }
               }
 
-              <ng-template #bodyRow>
-                @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
-                }
-              </ng-template>
-
               @if (isGroup(group)) {
                 <!-- The row typecast is due to angular compiler acting weird. It is obvious that it is of type TRow, but the compiler does not understand. -->
                 @for (row of group.value; track rowTrackingFn(i, row); let i = $index) {
-                  <datatable-body-row
-                    role="row"
-                    [disable$]="rowWrapper.disable$"
-                    tabindex="-1"
-                    #rowElement
-                    [isSelected]="selector.getRowSelected(row)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(row)"
-                    [row]="row"
-                    [group]="group.value"
-                    [rowIndex]="getRowIndex(row)"
-                    [expanded]="getRowExpanded(row)"
-                    [rowClass]="rowClass"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (activate)="selector.onActivate($event, i)"
-                    (drop)="drop($event, row, rowElement)"
-                    (dragover)="dragOver($event, row)"
-                    (dragenter)="dragEnter($event, row, rowElement)"
-                    (dragleave)="dragLeave($event, row, rowElement)"
-                    (dragstart)="drag($event, row, rowElement)"
-                    (dragend)="dragEnd($event, row)"
-                  >
-                  </datatable-body-row>
+                  <ng-container
+                    [ngTemplateOutlet]="bodyRow"
+                    [ngTemplateOutletContext]="{
+                      row,
+                      groupValue: group?.value,
+                      index: i
+                    }"
+                  ></ng-container>
                 }
               }
             </datatable-row-wrapper>

diff --git a/projects/ngx-datatable/src/lib/ngx-datatable.module.ts b/projects/ngx-datatable/src/lib/ngx-datatable.module.ts
@@ -39,6 +39,7 @@ import {
   DatatableRowDefDirective,
   DatatableRowDefInternalDirective
 } from './components/body/body-row-def.component';
+import { DatatableBodyRowDirective } from './components/body/body-row.directive';
 
 @NgModule({
   imports: [CommonModule],
@@ -77,7 +78,8 @@ import {
     DisableRowDirective,
     DatatableRowDefComponent,
     DatatableRowDefDirective,
-    DatatableRowDefInternalDirective
+    DatatableRowDefInternalDirective,
+    DatatableBodyRowDirective
   ],
   exports: [
     DatatableComponent,
@@ -95,7 +97,8 @@ import {
     DatatableGroupHeaderTemplateDirective,
     DisableRowDirective,
     DatatableRowDefComponent,
-    DatatableRowDefDirective
+    DatatableRowDefDirective,
+    DatatableBodyRowDirective
   ]
 })
 export class NgxDatatableModule {

diff --git a/projects/ngx-datatable/src/public-api.ts b/projects/ngx-datatable/src/public-api.ts
@@ -29,6 +29,7 @@ export * from './lib/components/columns/tree.directive';
 export * from './lib/components/row-detail/row-detail.directive';
 export * from './lib/components/row-detail/row-detail-template.directive';
 export * from './lib/components/body/body-row-def.component';
+export * from './lib/components/body/body-row.directive';
 
 // directives
 export * from './lib/directives/draggable.directive';