feat(admin-ui): Implement demo of paged data

admin-ui/src/app/common/types/response.ts

@@ -1,5 +1,5 @@
 export interface UserResponse {
-    id: number;
+    id: string | number;
     identifier: string;
     roles: string[];
 }

admin-ui/src/app/core/components/app-shell/app-shell.component.html

@@ -21,6 +21,8 @@
     </header>
 
     <div class="content-container">
-        <router-outlet></router-outlet>
+        <div class="content-area">
+            <router-outlet></router-outlet>
+        </div>
     </div>
 </div>

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

@@ -16,7 +16,7 @@ import { UserMenuComponent } from './components/user-menu/user-menu.component';
 
 export function createApollo(httpLink: HttpLink, ngrxCache: InMemoryCache) {
   return {
-    link: httpLink.create({ uri: `${API_URL}/graphql` }),
+    link: httpLink.create({ uri: `${API_URL}/api` }),
     cache: ngrxCache,
   };
 }

admin-ui/src/app/core/providers/data/product-data.service.ts

@@ -7,24 +7,27 @@ export class ProductDataService {
 
     constructor(private baseDataService: BaseDataService) {}
 
-    getProducts(): Observable<any[]> {
+    getProducts(take: number = 10, skip: number = 0): Observable<any> {
         const query = gql`
-            {
-                products(languageCode: en) {
-                    id
-                    languageCode
-                    name
-                    slug
-                    description
-                    translations {
+            query($take: Int, $skip: Int){
+                products(languageCode: en, take: $take, skip: $skip) {
+                    items {
                         id
                         languageCode
                         name
+                        slug
+                        description
+                        translations {
+                            id
+                            languageCode
+                            name
+                        }
                     }
+                    totalItems
                 }
             }
         `;
-        return this.baseDataService.query<any>(query).pipe(
+        return this.baseDataService.query<any>(query, { take, skip }).pipe(
             map(data => data.products),
         );
     }

admin-ui/src/app/dashboard/components/dashboard/dashboard.component.html

@@ -1,46 +1,5 @@
 <h1>Dashboard</h1>
 
-<div class="row">
-    <div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
-        <div class="card">
-            <div class="card-header">
-                Dashboard Widget 1
-            </div>
-            <div class="card-block">
-                <div class="card-title">
-                    Block
-                </div>
-                <div class="card-text">
-                    ...
-                </div>
-            </div>
-            <div class="card-footer">
-                <button class="btn btn-sm btn-link">Footer Action 1</button>
-                <button class="btn btn-sm btn-link">Footer Action 2</button>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
-        <div class="card">
-            <div class="card-header">
-                Dashboard Widget 2
-            </div>
-            <div class="card-block">
-                <div class="card-title">
-                    Block
-                </div>
-                <div class="card-text">
-                    ...
-                </div>
-            </div>
-            <div class="card-footer">
-                <button class="btn btn-sm btn-link">Footer Action 1</button>
-                <button class="btn btn-sm btn-link">Footer Action 2</button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <clr-datagrid>
     <clr-dg-column>Product ID</clr-dg-column>
     <clr-dg-column>Name</clr-dg-column>
@@ -54,5 +13,10 @@
         <clr-dg-cell>{{ product.description }}</clr-dg-cell>
     </clr-dg-row>
 
-    <clr-dg-footer>{{ (products$ | async)?.length }} users</clr-dg-footer>
+    <clr-dg-footer>
+        <clr-dg-pagination (clrDgPageChange)="getPage($event)"
+                           [clrDgPage]="currentPage"
+                           [clrDgPageSize]="10"
+                           [clrDgTotalItems]="totalItems"></clr-dg-pagination>
+    </clr-dg-footer>
 </clr-datagrid>

admin-ui/src/app/dashboard/components/dashboard/dashboard.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import gql from 'graphql-tag';
 import { DataService } from '../../../core/providers/data/data.service';
 import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-dashboard',
@@ -11,11 +12,23 @@ import { Observable } from 'rxjs';
 export class DashboardComponent implements OnInit {
 
     products$: Observable<any[]>;
+    currentPage = 1;
+    totalItems: number;
 
     constructor(private dataService: DataService) { }
 
     ngOnInit() {
-        this.products$ = this.dataService.product.getProducts();
+        this.getPage(1);
+    }
+
+    getPage(pageNumber: number): void {
+        const itemsPerPage = 10;
+        const take = itemsPerPage;
+        const skip = (pageNumber - 1) * itemsPerPage;
+        this.products$ = this.dataService.product.getProducts(take, skip).pipe(
+            tap(val => { this.totalItems = val.totalItems; }),
+            map(val => val.items),
+        );
     }
 
 }