feat(home-section): fix data-list for invoice order and products

Author: belsman

packages/modules/invoice/src/lib/components/template/invoice-template.component.html

@@ -23,20 +23,12 @@
 
   <ng-container rc-crud-data-list>
     <ng-container *ngIf="vm.dataList.length > 0; else templateNoRecords">
-      <rc-data-list class="mb-4 pb-2">
-        <rc-data-list-item
-          *ngFor="let item of vm.dataList; trackBy: trackByFn"
-          (click)="triggerSelectId.next(vm.selectedInvoiceId)"
-          [ngClass]="{ selected: item.id === vm.selectedInvoiceId }"
-          [routerLink]="feature.links.view(item.id)"
-          role="option"
-        >
-          <rc-data-list-key-value
-            [key]="'Invoice ID'"
-            [value]="item.id"
-          />
-        </rc-data-list-item>
-      </rc-data-list>
+      <rc-data-list
+        [itemTemplate]="itemTemplate"
+        [items]="vm.dataList"
+        [selected]="vm.selectedInvoiceId"
+        (itemSelected)="triggerSelectId.next($event)"
+      />
     </ng-container>
   </ng-container>
 
@@ -58,3 +50,13 @@
     <rc-no-records message="No invoices loaded" />
   </div>
 </ng-template>
+
+<ng-template
+  #itemTemplate
+  let-item="item"
+>
+  <rc-data-list-key-value
+    [key]="'Invoice ID'"
+    [value]="item.id"
+  />
+</ng-template>

packages/modules/order/src/lib/components/template/order-template.component.html

@@ -25,17 +25,12 @@
 
   <ng-container rc-crud-data-list>
     <ng-container *ngIf="vm.dataList.length > 0; else templateNoRecords">
-      <rc-data-list class="mb-4 pb-2">
-        <rc-data-list-item
-          *ngFor="let item of vm.dataList; trackBy: trackByFn"
-          (click)="triggerSelectId.next(vm.selectedOrderId)"
-          [ngClass]="{ selected: item.id === vm.selectedOrderId }"
-          [routerLink]="feature.links.view(item.id)"
-          role="option"
-        >
-          <rc-data-list-order [order]="item" />
-        </rc-data-list-item>
-      </rc-data-list>
+      <rc-data-list
+        [itemTemplate]="itemTemplate"
+        [items]="vm.dataList"
+        [selected]="vm.selectedOrderId"
+        (itemSelected)="triggerSelectId.next($event)"
+      />
     </ng-container>
   </ng-container>
 
@@ -57,3 +52,10 @@
     <rc-no-records message="No orders loaded" />
   </div>
 </ng-template>
+
+<ng-template
+  #itemTemplate
+  let-item="item"
+>
+  <rc-data-list-order [order]="item" />
+</ng-template>

packages/modules/product/src/lib/components/template/product-template.component.html

@@ -23,23 +23,12 @@
 
   <ng-container rc-crud-data-list>
     <ng-container *ngIf="vm.dataList.length > 0; else templateNoRecords">
-      <rc-data-list class="mb-4 pb-2">
-        <cdk-virtual-scroll-viewport
-          [itemSize]="50"
-          (scrolledIndexChange)="onScrolled($event, vm.dataList.length)"
-          class="infinite-scroll-viewport"
-        >
-          <rc-data-list-item
-            *cdkVirtualFor="let item of vm.dataList"
-            (click)="triggerSelectId.next(vm.selectedProductId)"
-            [ngClass]="{ selected: item.id === vm.selectedProductId }"
-            [routerLink]="feature.links.view(item.id)"
-            role="option"
-          >
-            <rc-data-list-product [product]="item" />
-          </rc-data-list-item>
-        </cdk-virtual-scroll-viewport>
-      </rc-data-list>
+      <rc-data-list
+        [itemTemplate]="itemTemplate"
+        [items]="vm.dataList"
+        [selected]="vm.selectedProductId"
+        (itemSelected)="triggerSelectId.next($event)"
+      />
     </ng-container>
   </ng-container>
 
@@ -61,3 +50,10 @@
     <rc-no-records message="No products loaded" />
   </div>
 </ng-template>
+
+<ng-template
+  #itemTemplate
+  let-item="item"
+>
+  <rc-data-list-product [product]="item" />
+</ng-template>