Add sorting and basic page styles

cloudapp/src/app/item.service.ts

@@ -27,4 +27,16 @@ export class ItemService {
 
   }
 
+  sortItems(items: any) {
+    return items.sort((a, b) => {
+      if (a.item_data.storage_location_id < b.item_data.storage_location_id ) {
+        return -1;
+      }
+      if (a.item_data.storage_location_id > b.item_data.storage_location_id ) {
+        return 1;
+      }
+      return 0;
+    })
+  }
 }
+

cloudapp/src/app/main/main.component.html

@@ -1,9 +1,11 @@
 <h1>RMST Pick List</h1>
-<ul>
-  <li *ngFor="let item of items" [value]="item">
-    {{ item.bib_data.title }}
-    {{ item.item_data.storage_location_id }} /
+<div>
+  <mat-card *ngFor="let item of items" [value]="item">
+    <mat-card-title-group>
+    <mat-card-title>{{ item.bib_data.title }}</mat-card-title>
+    <mat-card-subtitle>{{ item.item_data.storage_location_id }}</mat-card-subtitle>
+  </mat-card-title-group>
     {{ item.item_data.barcode }}
-  </li>
-</ul>
+</mat-card>
+</div>
 <app-print-button></app-print-button>

cloudapp/src/app/main/main.component.ts

@@ -1,11 +1,8 @@
 import { Observable, of } from 'rxjs';
-import { filter, finalize, switchMap, tap } from 'rxjs/operators';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
-  CloudAppRestService, CloudAppEventsService, Request, HttpMethod,
-  Entity, RestErrorResponse, AlertService
+  CloudAppRestService, CloudAppEventsService, Entity, AlertService
 } from '@exlibris/exl-cloudapp-angular-lib';
-import { MatRadioChange } from '@angular/material/radio';
 import { Item } from '../models/item.model';
 import { ItemService } from '../item.service';
 
@@ -34,7 +31,7 @@ export class MainComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.itemService = new ItemService(this.restService, this.eventsService);
     this.itemService.getItems().subscribe({
-      next: (item) => { this.items.push(item as Item) },
+      next: (item) => { this.items.push(item as Item); this.itemService.sortItems(this.items) },
       error: (err) => { this.alert.error(err) }
     })
 

cloudapp/src/app/print-button/print-button.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="print-button">
     <button (click)="print()" raised mat-button extended>
         <mat-icon>print</mat-icon>
     Print 

cloudapp/src/app/print-button/print-button.component.scss

@@ -0,0 +1,5 @@
+@media print {
+    .print-button {
+        display: none;
+    }
+}

cloudapp/src/main.scss

@@ -8,4 +8,12 @@
 
 @mixin global-styles {
     /* Add global styles here */
+
+    @media print {
+        @page { 
+          size: 8.5in 11in;
+          margin: .25in;
+          margin-bottom: .5in;
+        }
+      }
 }