refactor(admin-ui): Reimplement ProductList using new DataTableComponent

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -1,38 +1,23 @@
-<clr-datagrid>
-    <clr-dg-column>Product ID</clr-dg-column>
-    <clr-dg-column>Name</clr-dg-column>
-    <clr-dg-column>Slug</clr-dg-column>
-    <clr-dg-column>Description</clr-dg-column>
-
-    <clr-dg-row *ngFor="let product of products$ | async" [routerLink]="['./', product.id]">
-        <clr-dg-cell>{{ product.id }}</clr-dg-cell>
-        <clr-dg-cell>{{ product.name }}</clr-dg-cell>
-        <clr-dg-cell>{{ product.slug }}</clr-dg-cell>
-        <clr-dg-cell>{{ product.description }}</clr-dg-cell>
-    </clr-dg-row>
-
-    <clr-dg-footer>
-        <clr-dg-pagination #pagination
-                           (clrDgPageChange)="getPage($event)"
-                           [(clrDgPage)]="currentPage"
-                           [clrDgPageSize]="itemsPerPage"
-                           [clrDgTotalItems]="totalItems">
-            <div>
-                <div class="form-group">
-                    <div class="select">
-                        <select [(ngModel)]="itemsPerPage" (change)="getPage(currentPage)">
-                            <option [value]="10">10 per page</option>
-                            <option [value]="25">25 per page</option>
-                            <option [value]="50">50 per page</option>
-                            <option [value]="100">100 per page</option>
-                        </select>
-                    </div>
-                </div>
-                <div>
-                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-                    of {{pagination.totalItems}} products
-                </div>
-            </div>
-        </clr-dg-pagination>
-    </clr-dg-footer>
-</clr-datagrid>
+<vdr-data-table [items]="products$ | async"
+                [itemsPerPage]="itemsPerPage"
+                [totalItems]="totalItems"
+                [currentPage]="currentPage"
+                (pageChange)="getPage($event)"
+                (itemsPerPageChange)="itemsPerPageChange($event)">
+    <vdr-dt-column>ID</vdr-dt-column>
+    <vdr-dt-column>Name</vdr-dt-column>
+    <vdr-dt-column>Slug</vdr-dt-column>
+    <vdr-dt-column>Description</vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
+    <ng-template let-product="item">
+        <td class="left">{{ product.id }}</td>
+        <td class="left">{{ product.name }}</td>
+        <td class="left">{{ product.slug }}</td>
+        <td class="left">{{ product.description }}</td>
+        <td class="right">
+            <vdr-table-row-action iconShape="edit"
+                                  [linkTo]="['./', product.id]">
+            </vdr-table-row-action>
+        </td>
+    </ng-template>
+</vdr-data-table>

admin-ui/src/app/catalog/components/product-list/product-list.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { QueryRef } from 'apollo-angular';
 import { Observable, Subject } from 'rxjs';
 import { map, takeUntil, tap } from 'rxjs/operators';
 import { DataService } from '../../../data/providers/data.service';
@@ -15,7 +14,7 @@ export class ProductListComponent implements OnInit, OnDestroy {
 
     products$: Observable<any[]>;
     totalItems: number;
-    itemsPerPage = 25;
+    itemsPerPage = 10;
     currentPage = 1;
     private productsQuery: QueryResult<GetProductList, GetProductListVariables>;
     private destroy$ = new Subject<void>();
@@ -36,9 +35,15 @@ export class ProductListComponent implements OnInit, OnDestroy {
         this.destroy$.complete();
     }
 
-    getPage(pageNumber: number): void {
+    async getPage(pageNumber: number) {
         const take = this.itemsPerPage;
         const skip = (pageNumber - 1) * this.itemsPerPage;
-        this.productsQuery.ref.refetch({ skip, take });
+        await this.productsQuery.ref.refetch({ skip, take });
+        this.currentPage = pageNumber;
+    }
+
+    itemsPerPageChange(itemsPerPage: number) {
+        this.itemsPerPage = itemsPerPage;
+        this.getPage(this.currentPage);
     }
 }

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.html

@@ -0,0 +1,3 @@
+<a class="btn btn-link btn-sm" [routerLink]="linkTo">
+    <clr-icon [attr.shape]="iconShape"></clr-icon> Edit
+</a>

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.scss

@@ -0,0 +1,3 @@
+a.btn {
+    margin: 0;
+}

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+/**
+ * A button link to be used as actions in rows of a table.
+ */
+@Component({
+  selector: 'vdr-table-row-action',
+  templateUrl: './table-row-action.component.html',
+  styleUrls: ['./table-row-action.component.scss'],
+})
+export class TableRowActionComponent {
+    @Input() linkTo: any[];
+    @Input() iconShape: string;
+}

admin-ui/src/app/shared/shared.module.ts

@@ -7,6 +7,7 @@ import { NgxPaginationModule } from 'ngx-pagination';
 import { DataTableColumnComponent } from './components/data-table/data-table-column.component';
 import { DataTableComponent } from './components/data-table/data-table.component';
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
+import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 
 const IMPORTS = [
     ClarityModule,
@@ -18,7 +19,7 @@ const IMPORTS = [
 ];
 
 const DECLARATIONS = [
-    DataTableComponent, DataTableColumnComponent, PaginationControlsComponent,
+    DataTableComponent, DataTableColumnComponent, PaginationControlsComponent, TableRowActionComponent,
 ];
 
 @NgModule({