Adjust pagination in merchandise app and disable preloading

apps/merchandise/src/app/merchandise/merchandise.component.css

@@ -30,6 +30,10 @@
     line-height: 2.3rem;
 }
 
+.mat-raised-button {
+    min-width: 1rem;
+}
+
 .spinner-container {
     position: fixed;
     left: 50%;

apps/merchandise/src/app/merchandise/merchandise.component.html

@@ -19,7 +19,7 @@
     </div>
 
     <mat-table class="products-table mat-elevation-z8" [dataSource]="dataSource"
-               matSort matSortActive="id" matSortDirection="desc" matSortDisableClear>
+               matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>
 
         <ng-container matColumnDef="name">
 
@@ -63,7 +63,7 @@
 
     </mat-table>
 
-    <mat-paginator [length]="dataSource?.count$ | async" [pageSize]="20"
-                   [pageSizeOptions]="[10, 20, 50, 100, 200]"></mat-paginator>
+    <mat-paginator [length]="dataSource?.count$ | async" [pageSize]="5"
+                   [pageSizeOptions]="[5, 10, 20, 50]"></mat-paginator>
 
 </div>

apps/merchandise/src/app/merchandise/merchandise.component.ts

@@ -59,7 +59,7 @@ export class MerchandiseComponent implements OnInit, AfterViewInit {
 
     ngOnInit() {
         this.dataSource = new MerchandiseDataSource(this.merchandiseService);
-        this.dataSource.loadProducts('', 'id', 'desc', 0, 20);
+        this.dataSource.loadProducts('', 'id', 'asc', 0, 5);
 
         this.dataSource.connect(null)
             .subscribe(data => {

apps/merchandise/src/app/services/merchandise.service.ts

@@ -25,8 +25,8 @@ export class MerchandiseService {
     constructor(private http: HttpClient) { }
 
     findProducts(
-        filter = '', sortBy = 'id', sortOrder = 'desc',
-        pageNumber = 0, pageSize = 20): Observable<any> {
+        filter = '', sortBy = 'id', sortOrder = 'asc',
+        pageNumber = 0, pageSize = 5): Observable<any> {
 
         return this.http.get('/teespring/api/products', {
             observe: 'response',
@@ -56,6 +56,7 @@ export class MerchandiseService {
 
                 return of([]);
             }),
+            /* FIXME: preloading is not working
             map(data => {
                 let urls = data.map(x => x.product.variants.map(v => [v.front_url, v.back_url]))
                     .reduce((acc, cur) => acc.concat(cur)).reduce((acc, cur) => acc.concat(cur));
@@ -68,6 +69,7 @@ export class MerchandiseService {
 
                 return data;
             }),
+            */
             map(data => ({
                 products: data.map(x => x.product),
                 totalCount: data.length > 0 ? data[0].totalCount : 0